@cntrl-site/sdk-nextjs 1.0.19-alpha.7 → 1.0.19-alpha.8

package/lib/components/Item.js

@@ -52,7 +52,7 @@ const RichTextWrapper = ({ isRichText, children }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }, children: children }));
 };
 const noop = () => null;
-const Item = ({ item, sectionId, articleHeight, isItemVisible = true, isInGroup = false }) => {
+const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
@@ -63,6 +63,7 @@ const Item = ({ item, sectionId, articleHeight, isItemVisible = true, isInGroup
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const exemplary = (0, useExemplary_1.useExemplary)();
+    const [allowPointerEvents, setAllowPointerEvents] = (0, react_1.useState)(isParentVisible);
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
@@ -106,6 +107,11 @@ const Item = ({ item, sectionId, articleHeight, isItemVisible = true, isInGroup
         setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
+    const handleVisibilityChange = (0, react_1.useCallback)((isVisible) => {
+        if (!isParentVisible)
+            return;
+        setAllowPointerEvents(isVisible);
+    }, [isParentVisible]);
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
@@ -134,7 +140,7 @@ const Item = ({ item, sectionId, articleHeight, isItemVisible = true, isInGroup
                                     : `${width * 100}vw`
                                 : 'max-content'}`,
                             height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
-                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_k = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _k !== void 0 ? _k : 'none', pointerEvents: isItemVisible ? 'auto' : 'none' }), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_k = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _k !== void 0 ? _k : 'none', pointerEvents: allowPointerEvents ? 'auto' : 'none' }), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams], exemplary) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;

package/lib/components/LinkWrapper.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper = ({ url, children, target, isInteractive = true }) => {
+const LinkWrapper = ({ url, children, target }) => {
     const validUrl = url && buildValidUrl(url);
-    const style = { pointerEvents: isInteractive ? 'unset' : 'none' };
-    return url ? ((0, jsx_runtime_1.jsx)("a", { href: validUrl, target: target, rel: "noreferrer", style: style, children: children })) : ((0, jsx_runtime_1.jsx)("span", { style: style, children: children }));
+    return url ? ((0, jsx_runtime_1.jsx)("a", { href: validUrl, target: target, rel: "noreferrer", children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/lib/components/items/CodeEmbedItem.js

@@ -24,7 +24,7 @@ const stylesMap = {
     [sdk_1.AreaAnchor.BottomCenter]: { justifyContent: 'center', alignItems: 'flex-end' },
     [sdk_1.AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
 };
-const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -61,8 +61,11 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
             return;
         iframe.srcdoc = item.commonParams.html;
     }, [item.commonParams.html, item.commonParams.iframe, ref]);
-    const isInteractive = Number(opacity) > 0;
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.target, isInteractive: isInteractive, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    const isInteractive = opacity !== 0;
+    (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: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       .embed-wrapper-${item.id} {
         position: absolute;
         width: 100%;

package/lib/components/items/GroupItem.js

@@ -15,7 +15,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
-const GroupItem = ({ item, sectionId, onResize, articleHeight, interactionCtrl }) => {
+const GroupItem = ({ item, sectionId, onResize, articleHeight, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e;
     const id = (0, react_1.useId)();
     const { items } = item;
@@ -28,8 +28,11 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight, interactionCtrl }
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
-    const isVisible = opacity !== 0;
-    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, isInteractive: isVisible, 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({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, interactionCtrl: interactionCtrl, isItemVisible: isVisible, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    const isInteractive = opacity !== 0;
+    (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: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, 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/components/items/ImageItem.js

@@ -26,7 +26,7 @@ uniform vec2 u_patternDimensions;
 uniform float u_time;
 uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
-const ImageItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -76,7 +76,11 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.opacity, itemOpacity);
     const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.blur, itemBlur);
     const inlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_k = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _k !== void 0 ? _k : 'none' });
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, isInteractive: opacity !== 0, 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(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { 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.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    const isInteractive = opacity !== 0;
+    (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: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.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(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { 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.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/RectangleItem.js

@@ -15,7 +15,7 @@ const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
-const RectangleItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -41,7 +41,10 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
     const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
     const isInteractive = (backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.getAlpha()) !== 0 || (strokeWidth !== 0 && (borderColor === null || borderColor === void 0 ? void 0 : borderColor.getAlpha()) !== 0);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.target, isInteractive: isInteractive, 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(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
+    (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: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.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(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
                         : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .rectangle-${item.id} {

package/lib/components/items/RichTextItem.js

@@ -18,7 +18,7 @@ const useExemplary_1 = require("../../common/useExemplary");
 const useItemAngle_1 = require("../useItemAngle");
 const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
 const useCurrentLayout_1 = require("../../common/useCurrentLayout");
-const RichTextItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
@@ -49,8 +49,11 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl }) => {
         return alpha > 0;
     });
     const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
-    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item, isInteractive);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { pointerEvents: isInteractive ? 'unset' : 'none', userSelect: isInteractive ? 'unset' : 'none', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {

package/lib/components/items/VideoItem.js

@@ -17,7 +17,7 @@ const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useLayoutContext_1 = require("../useLayoutContext");
 const ScrollPlaybackVideo_1 = require("../ScrollPlaybackVideo");
 const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
-const VideoItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -43,7 +43,11 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.radius, itemRadius);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const inlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {})), { transition: (_g = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _g !== void 0 ? _g : 'none' });
-    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, isInteractive: opacity !== 0, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${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: (_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), 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: (_l = item.commonParams.coverUrl) !== null && _l !== void 0 ? _l : '', 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: `
+    const isInteractive = opacity !== 0;
+    (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: `video-wrapper-${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: (_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), 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: (_l = item.commonParams.coverUrl) !== null && _l !== void 0 ? _l : '', 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: `
         .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;

package/lib/components/items/VimeoEmbed.js

@@ -15,7 +15,7 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
-const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -68,7 +68,10 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
         setIsCoverVisible(false);
     };
     const isInteractive = opacity !== 0;
-    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, isInteractive: isInteractive, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${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: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
+    (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: (_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(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
                     vimeoPlayer.play();

package/lib/components/items/YoutubeEmbed.js

@@ -16,7 +16,7 @@ const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useYouTubeIframeApi_1 = require("../../utils/Youtube/useYouTubeIframeApi");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../utils/getStyleFromItemStateAndParams");
-const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
+const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -36,6 +36,9 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
     const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
     const isInteractive = opacity !== 0;
+    (0, react_1.useEffect)(() => {
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
+    }, [isInteractive, onVisibilityChange]);
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
@@ -87,7 +90,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl }) => {
             setIsCoverVisible(true);
         }
     }, []);
-    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, isInteractive: isInteractive, 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: (_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: () => {
                     if (!player || play !== 'on-hover')
                         return;
                     player.playVideo();

package/lib/components/items/useRichTextItem.js

@@ -4,9 +4,9 @@ exports.useRichTextItem = void 0;
 const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const richTextConverter = new RichTextConverter_1.RichTextConverter();
-const useRichTextItem = (item, isInteractive) => {
+const useRichTextItem = (item) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const [content, styles] = richTextConverter.toHtml(item, layouts, isInteractive);
+    const [content, styles] = richTextConverter.toHtml(item, layouts);
     return [content, styles];
 };
 exports.useRichTextItem = useRichTextItem;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -12,7 +12,7 @@ exports.FontStyles = {
     'italic': { 'font-style': 'italic' }
 };
 class RichTextConverter {
-    toHtml(richText, layouts, isInteractive) {
+    toHtml(richText, layouts) {
         var _a, _b, _c;
         const { text, blocks = [] } = richText.commonParams;
         const root = [];
@@ -91,7 +91,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, isInteractive: isInteractive, children: entityKids }, entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: entity.link, target: entity.target, children: entityKids }, entity.start));
                         continue;
                     }
                     kids.push(...entityKids);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.19-alpha.7",
+  "version": "1.0.19-alpha.8",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Item.tsx

@@ -1,4 +1,15 @@
-import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import {
+  ComponentType,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   AnchorSide,
@@ -36,15 +47,18 @@ import { useItemInteractionCtrl } from '../interactions/useItemInteractionCtrl';
 export interface ItemProps<I extends ItemAny> {
   item: I;
   sectionId: string;
-  onResize?: (height: number) => void;
   articleHeight: number;
+  onResize?: (height: number) => void;
   interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
+  onVisibilityChange: (isVisible: boolean) => void;
 }
 
-export interface ItemWrapperProps extends ItemProps<ItemAny> {
+export interface ItemWrapperProps {
+  item: ItemAny;
+  sectionId: string;
   articleHeight: number;
   isInGroup?: boolean;
-  isItemVisible?: boolean;
+  isParentVisible?: boolean;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -79,7 +93,7 @@ const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, ch
 
 const noop = () => null;
 
-export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isItemVisible = true, isInGroup = false }) => {
+export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
   const itemWrapperRef = useRef<HTMLDivElement | null>(null);
   const itemInnerRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
@@ -89,6 +103,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
   const exemplary = useExemplary();
+  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const itemScale = useItemScale(item, sectionId);
@@ -133,6 +148,11 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
     setWrapperHeight(wrapperHeight);
   };
 
+  const handleVisibilityChange = useCallback((isVisible: boolean) => {
+    if (!isParentVisible) return;
+    setAllowPointerEvents(isVisible);
+  }, [isParentVisible]);
+
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
@@ -189,7 +209,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
                 height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}` } : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {}),
               transition: innerStateProps?.transition ?? 'none',
-              pointerEvents: isItemVisible ? 'auto' : 'none'
+              pointerEvents: allowPointerEvents ? 'auto' : 'none'
             }}
           >
             <ItemComponent
@@ -198,6 +218,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               onResize={handleItemResize}
               articleHeight={articleHeight}
               interactionCtrl={interactionCtrl}
+              onVisibilityChange={handleVisibilityChange}
             />
           </div>
         </RichTextWrapper>

package/src/components/LinkWrapper.tsx

@@ -1,26 +1,23 @@
-import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 interface Props {
   url?: string;
   children: ReactElement | ReactNode[];
   target?: string;
-  isInteractive?: boolean;
 }
 
-export const LinkWrapper: React.FC<Props> = ({ url, children, target, isInteractive = true }) => {
+export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
   const validUrl = url && buildValidUrl(url);
-  const style: CSSProperties = { pointerEvents: isInteractive ? 'unset' : 'none' };
   return url ? (
     <a
       href={validUrl}
       target={target}
       rel="noreferrer"
-      style={style}
     >
       {children}
     </a>
   ) : (
-    <span style={style}>{children}</span>
+    <>{children}</>
   );
 };
 

package/src/components/items/CodeEmbedItem.tsx

@@ -20,7 +20,7 @@ const stylesMap = {
   [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
 };
 
-export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
@@ -55,11 +55,13 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
     if (!iframe) return;
     iframe.srcdoc = item.commonParams.html;
   }, [item.commonParams.html, item.commonParams.iframe, ref]);
-
-  const isInteractive = Number(opacity) > 0;
+  const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
 
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target} isInteractive={isInteractive}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`embed-wrapper-${item.id}`}
         style={{

package/src/components/items/CustomItem.tsx

@@ -3,7 +3,7 @@ import { FC, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from "../../common/useRegisterResize";
+import { useRegisterResize } from '../../common/useRegisterResize';
 import { useItemAngle } from '../useItemAngle';
 
 export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {

package/src/components/items/GroupItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useId, useState } from 'react';
+import React, { FC, useEffect, useId, useState } from 'react';
 import { Item, ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
 import { getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
@@ -9,7 +9,7 @@ import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
 import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
-export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight, interactionCtrl }) => {
+export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { items } = item;
   const itemAngle = useItemAngle(item, sectionId);
@@ -21,9 +21,12 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
-  const isVisible = opacity !== 0;
+  const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target} isInteractive={isVisible}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
           className={`group-${item.id}`}
@@ -40,8 +43,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
               key={item.id}
               sectionId={sectionId}
               articleHeight={articleHeight}
-              interactionCtrl={interactionCtrl}
-              isItemVisible={isVisible}
+              isParentVisible={isInteractive}
               isInGroup
             />
           ))}

package/src/components/items/ImageItem.tsx

@@ -22,7 +22,7 @@ uniform float u_time;
 uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 
-export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const layoutId = useLayoutContext();
@@ -88,8 +88,12 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
     transition: imgStateParams?.transition ?? 'none'
   };
+  const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target} isInteractive={opacity !== 0}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
           className={`image-wrapper-${item.id}`}

package/src/components/items/RectangleItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo, useState } from 'react';
+import { FC, useEffect, useId, useMemo, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
 import { RectangleItem as TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
@@ -10,7 +10,7 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
-export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const {
@@ -42,9 +42,12 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
   const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)`: undefined;
   const isInteractive = backgroundColor?.getAlpha() !== 0 || (strokeWidth !== 0 && borderColor?.getAlpha() !== 0);
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
 
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target} isInteractive={isInteractive}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
           className={`rectangle-${item.id}`}

package/src/components/items/RichTextItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo, useState } from 'react';
+import { FC, useEffect, useId, useMemo, useState } from 'react';
 import { CntrlColor } from '@cntrl-site/color';
 import { getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
@@ -13,7 +13,7 @@ import { useItemAngle } from '../useItemAngle';
 import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 
-export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
@@ -49,7 +49,10 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
     return alpha > 0;
   });
   const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
-  const [content, styles] = useRichTextItem(item, isInteractive);
+  const [content, styles] = useRichTextItem(item);
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
 
   return (
     <>
@@ -64,8 +67,6 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
           ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
           ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
           ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
-          pointerEvents: isInteractive ? 'unset' : 'none',
-          userSelect: isInteractive ? 'unset' : 'none',
           transition
         }}
       >

package/src/components/items/VideoItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useMemo, useRef, useState } from 'react';
+import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
 import { getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
@@ -12,7 +12,7 @@ import { useLayoutContext } from '../useLayoutContext';
 import { ScrollPlaybackVideo } from '../ScrollPlaybackVideo';
 import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
-export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const {
@@ -47,9 +47,13 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     ...(borderColor ? { borderColor: `${borderColor.toCss()}` } : {}),
     transition: videoStateParams?.transition ?? 'none'
   };
+  const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
 
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target} isInteractive={opacity !== 0}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`video-wrapper-${item.id}`}
         ref={setRef}

package/src/components/items/VimeoEmbed.tsx

@@ -10,7 +10,7 @@ import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
-export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const {
@@ -67,9 +67,12 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     setIsCoverVisible(false);
   };
   const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
 
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target} isInteractive={isInteractive}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`embed-video-wrapper-${item.id}`}
         ref={setRef}

package/src/components/items/YoutubeEmbed.tsx

@@ -12,7 +12,7 @@ import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
-export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
+export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const { play, controls, url } = item.commonParams;
@@ -31,6 +31,9 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
   const radius = getStyleFromItemStateAndParams(frameStateParams?.styles?.radius, itemRadius);
   const isInteractive = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
   useRegisterResize(div, onResize);
   useEffect(() => {
     const newUrl = new URL(url);
@@ -82,7 +85,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   }, []);
 
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target} isInteractive={isInteractive}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
         className={`embed-youtube-video-wrapper-${item.id}`}
         onMouseEnter={() => {

package/src/components/items/useRichTextItem.ts

@@ -5,8 +5,8 @@ import { ReactNode } from 'react';
 
 const richTextConverter = new RichTextConverter();
 
-export const useRichTextItem = (item: RichTextItem, isInteractive: boolean): [ReactNode[], string] => {
+export const useRichTextItem = (item: RichTextItem): [ReactNode[], string] => {
   const { layouts } = useCntrlContext();
-  const [content, styles] = richTextConverter.toHtml(item, layouts, isInteractive);
+  const [content, styles] = richTextConverter.toHtml(item, layouts);
   return [content, styles];
 };

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -40,8 +40,7 @@ export const FontStyles: Record<string, Record<string, string>> = {
 export class RichTextConverter {
   toHtml(
     richText: RichTextItem,
-    layouts: Layout[],
-    isInteractive: boolean
+    layouts: Layout[]
   ): [ReactNode[], string] {
     const { text, blocks = [] } = richText.commonParams;
     const root: ReactElement[] = [];
@@ -123,16 +122,7 @@ export class RichTextConverter {
             offset = entity.end;
           }
           if (entity.link) {
-            kids.push(
-              <LinkWrapper
-                key={entity.start}
-                url={entity.link}
-                target={entity.target}
-                isInteractive={isInteractive}
-              >
-                {entityKids}
-              </LinkWrapper>
-            );
+            kids.push(<LinkWrapper key={entity.start} url={entity.link} target={entity.target}>{entityKids}</LinkWrapper>);
             continue;
           }
           kids.push(...entityKids);