@cntrl-site/sdk-nextjs 1.0.18 → 1.0.19-alpha.1

package/lib/components/items/VideoItem.js

@@ -13,10 +13,12 @@ const LinkWrapper_1 = require("../LinkWrapper");
 const useFileItem_1 = require("./useFileItem");
 const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useLayoutContext_1 = require("../useLayoutContext");
 const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
+const useStatesClassNames_1 = require("../useStatesClassNames");
+const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const VideoItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -28,11 +30,15 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const videoRef = (0, react_1.useRef)(null);
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams, item.state];
+    const statesWrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'video-wrapper');
+    const statesVideoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'video');
     const hasScrollPlayback = scrollPlayback !== null;
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'opacity', 'blur']);
+    (0, useStatesTransitions_1.useStatesTransitions)(videoRef.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {}));
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { poster: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id} ${statesWrapperClassNames}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id} ${statesWrapperClassNames}` })) : ((0, jsx_runtime_1.jsx)("video", { poster: (_c = item.commonParams.coverUrl) !== null && _c !== void 0 ? _c : '', ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id} ${statesVideoClassNames}`, style: inlineStyles, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
@@ -59,26 +65,24 @@ const VideoItem = ({ item, sectionId, onResize }) => {
           display: flex;
           justify-content: center;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'video-wrapper', ['angle', 'opacity', 'blur'], stateParams);
+                    const videoStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'video', ['strokeWidth', 'radius', 'strokeColor'], stateParams);
                     return (`
             .video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'opacity', 'blur'], hoverParams)};
-            }
-            .video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'opacity', 'blur'], hoverParams)};
+              transition: all 0.2s ease;
             }
             .video-${item.id} {
               border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
-              transition: ${(0, HoverStyles_1.getTransitions)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
-            }
-            .video-wrapper-${item.id}:hover .video {
-              ${(0, HoverStyles_1.getHoverStyles)(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+              transition: all 0.2s ease;
             }
+            ${wrapperStatesCSS}
+            ${videoStatesCSS}
           `);
                 })}
     ` })] }));

package/lib/components/items/VimeoEmbed.js

@@ -13,8 +13,10 @@ const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
-const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useStatesClassNames_1 = require("../useStatesClassNames");
+const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -27,8 +29,12 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams, item.state];
+    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video-wrapper');
+    const videoClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-video');
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useStatesTransitions_1.useStatesTransitions)(ref, item.state, ['angle', 'blur', 'opacity']);
+    (0, useStatesTransitions_1.useStatesTransitions)(iframeRef, item.state, ['radius']);
     const getValidVimeoUrl = (url) => {
         const validURL = new URL(url);
         validURL.searchParams.append('controls', String(controls));
@@ -61,7 +67,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
         vimeoPlayer.play();
         setIsCoverVisible(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id} ${wrapperClassNames}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();
@@ -78,37 +84,35 @@ const VimeoEmbedItem = ({ item, sectionId, onResize }) => {
                             width: '100%',
                             top: '0',
                             left: '0'
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("iframe", { ref: setIframeRef, className: `embed-video ${videoClassNames}`, src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-video-wrapper-${item.id} {
         position: absolute;
         width: 100%;
         height: 100%;
       }
-      .embedVideo {
+      .embed-video {
         width: 100%;
         height: 100%;
         z-index: 1;
         border: none;
         overflow: hidden;
       }
-      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+                    const videoStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-video', ['radius'], stateParams);
                     return (`
           .embed-video-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
+            transition: all 0.2s ease;
           }
-          .embed-video-wrapper-${item.id}:hover {
-            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)}
-          }
-          .embed-video-wrapper-${item.id} .embedVideo {
+          .embed-video-wrapper-${item.id} .embed-video {
             border-radius: ${layoutParams.radius * 100}vw;
-            transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
-          }
-          .embed-video-wrapper-${item.id}:hover .embedVideo {
-            ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
+            transition: all 0.2s ease;
           }
+          ${wrapperStatesCSS}
+          ${videoStatesCSS}
         `);
                 })}
     ` })] }));

package/lib/components/items/YoutubeEmbed.js

@@ -12,10 +12,12 @@ const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const useItemAngle_1 = require("../useItemAngle");
 const sdk_1 = require("@cntrl-site/sdk");
-const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
+const useStatesClassNames_1 = require("../useStatesClassNames");
+const getStatesCSS_1 = require("../../utils/getStatesCSS");
+const useStatesTransitions_1 = require("../useStatesTransitions");
 const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     var _a, _b, _c;
     const id = (0, react_1.useId)();
@@ -25,11 +27,16 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
+    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     const [player, setPlayer] = (0, react_1.useState)(undefined);
     const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
     const [imgRef, setImgRef] = (0, react_1.useState)(null);
-    const layoutValues = [item.area, item.layoutParams, item.state.hover];
+    const layoutValues = [item.area, item.layoutParams, item.state];
+    const wrapperClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed-youtube-video-wrapper');
+    const embedClassNames = (0, useStatesClassNames_1.useStatesClassNames)(item.id, item.state, 'embed');
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
+    (0, useStatesTransitions_1.useStatesTransitions)(wrapperRef, item.state, ['angle', 'blur', 'opacity']);
+    (0, useStatesTransitions_1.useStatesTransitions)(div, item.state, ['radius']);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
@@ -80,7 +87,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
             setIsCoverVisible(true);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.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, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsxs)("div", { ref: setWrapperRef, className: `embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`, onMouseEnter: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();
@@ -98,7 +105,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
                             top: '0',
                             left: '0',
                             zIndex: 1
-                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id} ${embedClassNames}`, ref: setDiv, style: Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id},
         .embed-${item.id} {
           position: absolute;
@@ -114,24 +121,22 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize }) => {
           z-index: 1;
           border: none;
         }
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+                    const wrapperStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed-youtube-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+                    const embedStatesCSS = (0, getStatesCSS_1.getStatesCSS)(item.id, 'embed', ['radius'], stateParams);
                     return (`
             .embed-youtube-video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'opacity'], hoverParams)};
+              transition: all 0.2s ease;
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
               border-radius: ${layoutParams.radius * 100}vw;
-              transition: ${(0, HoverStyles_1.getTransitions)(['radius'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'opacity'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
-              ${(0, HoverStyles_1.getHoverStyles)(['radius'], hoverParams)};
+              transition: all 0.2s ease;
             }
+            ${wrapperStatesCSS}
+            ${embedStatesCSS}
           `);
                 })}
       ` })] }));

package/lib/components/useStatesClassNames.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatesClassNames = void 0;
+const react_1 = require("react");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+function useStatesClassNames(itemId, itemStates, uniquePrefix) {
+    const { interactionsStatesMap } = (0, react_1.useContext)(InteractionsContext_1.InteractionsContext);
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const activeStates = Object.values(interactionsStatesMap);
+    const statesForLayout = layoutId ? itemStates[layoutId] : {};
+    const stateClassNames = Object.keys(statesForLayout !== null && statesForLayout !== void 0 ? statesForLayout : {})
+        .filter((stateId) => activeStates.includes(stateId))
+        .map((stateId) => `${uniquePrefix}-${itemId}-state-${stateId}`)
+        .join(' ');
+    return stateClassNames;
+}
+exports.useStatesClassNames = useStatesClassNames;

package/lib/components/useStatesTransitions.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatesTransitions = void 0;
+const react_1 = require("react");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+function useStatesTransitions(el, state, values) {
+    const { interactionsStatesMap } = (0, react_1.useContext)(InteractionsContext_1.InteractionsContext);
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const activeStates = Object.values(interactionsStatesMap);
+    const statesForLayout = (0, react_1.useMemo)(() => layoutId ? state[layoutId] : {}, [layoutId]);
+    const itemStatesIds = Object.keys(statesForLayout);
+    const itemActiveStateId = activeStates.find((stateId) => itemStatesIds.includes(stateId));
+    (0, react_1.useEffect)(() => {
+        if (!itemActiveStateId || !el)
+            return;
+        const state = statesForLayout[itemActiveStateId];
+        const transitionStr = getTransition(state, 'in', values);
+        const slowestProp = getSlowestProperty(state, 'in', values);
+        if (!transitionStr)
+            return;
+        el.style.transition = transitionStr;
+        el.ontransitionend = (e) => {
+            e.stopPropagation();
+            if (e.target !== el || e.propertyName !== slowestProp)
+                return;
+            el.style.transition = 'none';
+        };
+        return () => {
+            const transitionStr = getTransition(state, 'out', values);
+            const slowestProp = getSlowestProperty(state, 'out', values);
+            if (!transitionStr)
+                return;
+            el.style.transition = transitionStr;
+            el.ontransitionend = (e) => {
+                e.stopPropagation();
+                if (e.target !== el || e.propertyName !== slowestProp)
+                    return;
+                el.style.transition = 'none';
+            };
+        };
+    }, [itemActiveStateId, statesForLayout, el]);
+}
+exports.useStatesTransitions = useStatesTransitions;
+const CSSPropertyNameMap = {
+    'width': 'width',
+    'height': 'height',
+    'top': 'top',
+    'left': 'left',
+    'scale': 'transform',
+    'angle': 'transform',
+    'opacity': 'opacity',
+    'radius': 'border-radius',
+    'strokeWidth': 'border-width',
+    'strokeColor': 'border-color',
+    'fillColor': 'background-color',
+    'blur': 'filter',
+    'backdropBlur': 'backdrop-filter',
+    'letterSpacing': 'letter-spacing',
+    'wordSpacing': 'word-spacing',
+    'color': 'color'
+};
+function getTransition(state, direction, values) {
+    return Object.entries(state)
+        .filter(([key]) => values.includes(key))
+        .map(([key, params]) => {
+        const cssKey = CSSPropertyNameMap[key];
+        if (!cssKey) {
+            throw new Error(`Cannot translate "${key}" to a CSS property.`);
+        }
+        return `${cssKey} ${params[direction].duration}ms ${params[direction].timing} ${params[direction].delay}ms`;
+    }, [])
+        .join(', ');
+}
+function getSlowestProperty(state, direction, values) {
+    const mappedEntries = Object.entries(state)
+        .filter(([key]) => values.includes(key))
+        .map(([key, params]) => {
+        const transitionParams = params[direction];
+        return {
+            key,
+            time: transitionParams.duration + transitionParams.delay
+        };
+    });
+    if (mappedEntries.length === 0)
+        return '';
+    const { key } = mappedEntries.reduce((slowest, current) => current.time > slowest.time ? current : slowest);
+    return CSSPropertyNameMap[key];
+}

package/lib/provider/InteractionsContext.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionsProvider = exports.InteractionsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const defaultState = {
+    interactionsStatesMap: {},
+    interactions: [],
+    transitionTo: () => { },
+    getItemTrigger: () => null
+};
+exports.InteractionsContext = (0, react_1.createContext)(defaultState);
+const InteractionsProvider = ({ interactions, children }) => {
+    const defaultStatesMap = interactions.reduce((map, { id, startStateId }) => {
+        map[id] = startStateId;
+        return map;
+    }, {});
+    const [interactionsStatesMap, setInteractionsStatesMap] = (0, react_1.useState)(defaultStatesMap);
+    const transitionTo = (interactionId, stateId) => {
+        setInteractionsStatesMap((map) => (Object.assign(Object.assign({}, map), { [interactionId]: stateId })));
+    };
+    const getItemTrigger = (itemId, triggerType) => {
+        for (const interaction of interactions) {
+            const activeStateId = interactionsStatesMap[interaction.id];
+            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId &&
+                trigger.from === activeStateId &&
+                trigger.type === triggerType);
+            if (matchingTrigger) {
+                return {
+                    id: interaction.id,
+                    from: matchingTrigger.from,
+                    to: matchingTrigger.to,
+                };
+            }
+        }
+        return null;
+    };
+    return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: {
+            transitionTo,
+            interactionsStatesMap,
+            interactions,
+            getItemTrigger
+        }, children: children }));
+};
+exports.InteractionsProvider = InteractionsProvider;

package/lib/utils/{HoverStyles/HoverStyles.js → StateStyles/StateStyles.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getHoverStyles = exports.getTransitions = void 0;
+exports.getTransitions = exports.getStateStyles = void 0;
 const color_1 = require("@cntrl-site/color");
 const getItemTopStyle_1 = require("../getItemTopStyle");
-const hoverTransformationMap = {
+const stateTransformationMap = {
     'width': (width) => `width: ${width * 100}vw !important;`,
     'height': (height) => `height: ${height * 100}vw !important;`,
     'top': (top, anchorSide) => `top: ${(0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide)} !important;`,
@@ -39,39 +39,51 @@ const CSSPropertyNameMap = {
     'wordSpacing': 'word-spacing',
     'color': 'color'
 };
-function getTransitions(values, hover) {
-    if (!hover)
-        return 'unset';
-    const transitionValues = values.reduce((acc, valueName) => {
-        if (valueName in hover && hover[valueName] !== undefined) {
-            const hoverProperties = hover[valueName];
+function getStateStyles(values, state, anchorSide) {
+    if (!state)
+        return '';
+    const stateValues = values.reduce((acc, valueName) => {
+        // @ts-ignore
+        if (valueName in state && state[valueName] !== undefined) {
+            // @ts-ignore
+            const stateProperties = state[valueName];
+            const getter = stateTransformationMap[valueName];
             return [
                 ...acc,
-                `${CSSPropertyNameMap[valueName]} ${hoverProperties.duration}ms ${hoverProperties.timing} ${hoverProperties.delay}ms`
+                getter(stateProperties.value, anchorSide)
             ];
         }
         return acc;
     }, []);
-    if (!transitionValues.length)
-        return 'unset';
-    return transitionValues.join(', ');
-}
-exports.getTransitions = getTransitions;
-function getHoverStyles(values, hover, anchorSide) {
-    if (!hover)
+    if (!stateValues.length)
         return '';
-    const hoverValues = values.reduce((acc, valueName) => {
-        if (valueName in hover && hover[valueName] !== undefined) {
-            const hoverProperties = hover[valueName];
+    // @ts-ignore
+    const transitionStr = getTransitions(values, state);
+    stateValues.push(`transition: ${transitionStr};`);
+    return stateValues.join('\n');
+}
+exports.getStateStyles = getStateStyles;
+function getTransitions(values, state) {
+    if (!state)
+        return 'unset';
+    const transitionValues = values.reduce((acc, valueName) => {
+        // @ts-ignore TODO
+        if (valueName in state && state[valueName] !== undefined) {
+            // @ts-ignore TODO
+            const stateProperties = state[valueName];
             return [
                 ...acc,
-                hoverTransformationMap[valueName](hoverProperties.value, anchorSide)
+                // @ts-ignore
+                `${CSSPropertyNameMap[valueName]} ${stateProperties.duration}ms ${stateProperties.timing} ${stateProperties.delay}ms`
             ];
         }
         return acc;
     }, []);
-    if (!hoverValues.length)
-        return '';
-    return hoverValues.join('\n');
+    if (!transitionValues.length)
+        return 'unset';
+    return transitionValues.join(', ');
 }
-exports.getHoverStyles = getHoverStyles;
+exports.getTransitions = getTransitions;
+// export function getStateTransitions<T extends ArticleItemType>(
+//
+// )

package/lib/utils/getStatesCSS.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStatesCSS = void 0;
+const StateStyles_1 = require("./StateStyles/StateStyles");
+function getStatesCSS(itemId, classNamePrefix, keys, states, anchorSide) {
+    return states
+        ? Object.entries(states).map(([stateId, params]) => {
+            return `
+      .${classNamePrefix}-${itemId}-state-${stateId} {
+        ${(0, StateStyles_1.getStateStyles)(keys, params, anchorSide)};
+      }
+    `;
+        }).join('\n')
+        : '';
+}
+exports.getStatesCSS = getStatesCSS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.18",
+  "version": "1.0.19-alpha.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.12.3",
+    "@cntrl-site/sdk": "^1.12.4-alpha.8",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
@@ -38,12 +38,15 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.2.5",
+    "@types/jest": "^29.5.12",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
-    "jest": "^29.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.0.3",
     "typescript": "^5.2.2"
   },

package/src/components/Article.tsx

@@ -1,11 +1,12 @@
 import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { Article as TArticle } from '@cntrl-site/sdk';
+import { Article as TArticle, ArticleItemType, ItemState, ItemStateParams } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
 import { ArticleWrapper } from './ArticleWrapper';
+import { InteractionsProvider } from '../provider/InteractionsContext';
 
 interface Props {
   article: TArticle;
@@ -27,35 +28,37 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
-      <ArticleWrapper>
-        <div className="article" ref={articleRef}>
-          {article.sections.map((section, i) => {
-            const data = section.name ? sectionData[section.name] : {};
-            return (
-              <Section
-                section={section}
-                key={section.id}
-                data={data}
-              >
-                {article.sections[i].items.map(item => (
-                  <Item
-                    item={item}
-                    key={item.id}
-                    sectionId={section.id}
-                    articleHeight={articleHeight}
-                  />
-                ))}
-              </Section>
-            );
-          })}
-        </div>
-      </ArticleWrapper>
-      <JSXStyle id={id}>{`
+      <InteractionsProvider interactions={article.interactions}>
+        <ArticleWrapper>
+          <div className="article" ref={articleRef}>
+            {article.sections.map((section, i) => {
+              const data = section.name ? sectionData[section.name] : {};
+              return (
+                <Section
+                  section={section}
+                  key={section.id}
+                  data={data}
+                >
+                  {article.sections[i].items.map(item => (
+                    <Item
+                      item={item}
+                      key={item.id}
+                      sectionId={section.id}
+                      articleHeight={articleHeight}
+                    />
+                  ))}
+                </Section>
+              );
+            })}
+          </div>
+        </ArticleWrapper>
+        <JSXStyle id={id}>{`
        .article {
-            position: relative;
-            overflow: clip;
-          }
+         position: relative;
+         overflow: clip;
+       }
       `}</JSXStyle>
+      </InteractionsProvider>
     </ArticleRectContext.Provider>
   );
 };

package/src/components/ArticleWrapper.tsx

@@ -1,5 +1,4 @@
-import React, { CSSProperties, FC, PropsWithChildren, useEffect, useId, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
+import React, { CSSProperties, FC, PropsWithChildren } from 'react';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { LayoutContext } from '../provider/LayoutContext';