@cntrl-site/sdk-nextjs 1.0.20 → 1.1.1

package/lib/interactions/getTransition.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTransition = void 0;
+const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+function getTransition(state, keys) {
+    if (Object.keys(state).length === 0)
+        return 'none';
+    const transitions = [];
+    for (const [key, params] of Object.entries(state)) {
+        if (!keys.includes(key) || !params.transition)
+            continue;
+        const { transition: { duration, delay, timing } } = params;
+        const cssKey = CSSPropertyNameMap_1.CSSPropertyNameMap[key];
+        const nonZeroDuration = Math.max(duration, 0.01);
+        transitions.push(`${cssKey} ${nonZeroDuration}ms ${timing} ${delay}ms`);
+    }
+    return transitions.length > 0
+        ? transitions.join(', ')
+        : 'none';
+}
+exports.getTransition = getTransition;

package/lib/interactions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/interactions/useItemInteractionCtrl.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemInteractionCtrl = void 0;
+const react_1 = require("react");
+const ItemInteractionCtrl_1 = require("./ItemInteractionCtrl");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+function useItemInteractionCtrl(itemId) {
+    const [_, triggerRender] = (0, react_1.useState)(0);
+    const registry = (0, InteractionsContext_1.useInteractionsRegistry)();
+    const ctrl = (0, react_1.useMemo)(() => {
+        if (!registry)
+            return;
+        return new ItemInteractionCtrl_1.ItemInteractionController(itemId, registry, () => triggerRender(prev => prev + 1));
+    }, [itemId, registry]);
+    return ctrl;
+}
+exports.useItemInteractionCtrl = useItemInteractionCtrl;

package/lib/provider/InteractionsContext.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInteractionsRegistry = exports.InteractionsProvider = exports.InteractionsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+exports.InteractionsContext = (0, react_1.createContext)(undefined);
+const InteractionsProvider = ({ article, children }) => {
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const registry = (0, react_1.useMemo)(() => {
+        if (!layoutId)
+            return;
+        return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
+    }, [layoutId]);
+    return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
+};
+exports.InteractionsProvider = InteractionsProvider;
+function useInteractionsRegistry() {
+    const registry = (0, react_1.useContext)(exports.InteractionsContext);
+    return registry;
+}
+exports.useInteractionsRegistry = useInteractionsRegistry;

package/lib/utils/getStyleFromItemStateAndParams.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleFromItemStateAndParams = void 0;
+function getStyleFromItemStateAndParams(stateValue, paramsValue) {
+    return stateValue !== undefined
+        ? stateValue
+        : paramsValue;
+}
+exports.getStyleFromItemStateAndParams = getStyleFromItemStateAndParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.20",
+  "version": "1.1.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.13.0",
     "@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

@@ -6,6 +6,7 @@ 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 article={article}>
+        <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';
 

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,
@@ -21,7 +32,6 @@ import { useItemDimensions } from './useItemDimensions';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 import { useSectionHeightData } from './useSectionHeightMap';
-import { getHoverStyles, getTransitions } from '../utils/HoverStyles/HoverStyles';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useStickyItemTop } from './items/useStickyItemTop';
 import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
@@ -32,17 +42,23 @@ import { GroupItem } from './items/GroupItem';
 import { CodeEmbedItem } from './items/CodeEmbedItem';
 import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
 import { KeyframesContext } from '../provider/KeyframesContext';
+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;
+  isParentVisible?: boolean;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -77,8 +93,9 @@ const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, ch
 
 const noop = () => null;
 
-export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, 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);
   const keyframesRepo = useContext(KeyframesContext);
   const id = useId();
@@ -86,21 +103,27 @@ 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 scale = useItemScale(item, sectionId);
-  const position = useItemPosition(item, sectionId);
+  const itemScale = useItemScale(item, sectionId);
+  const interactionCtrl = useItemInteractionCtrl(item.id);
+  const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
+  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
+  const position = useItemPosition(item, sectionId, {
+    top: wrapperStateProps?.styles?.top as number,
+    left: wrapperStateProps?.styles?.left as number,
+  });
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const dimensions = useItemDimensions(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden];
   const isInitialRef = useRef(true);
   layoutValues.push(item.sticky);
   layoutValues.push(sectionHeight);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
-
   const sizing = layout && isItemType(item, ArticleItemType.RichText)
     ? item.layoutParams[layout].sizing
     : undefined;
@@ -125,20 +148,33 @@ 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;
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
+  const width = (innerStateProps?.styles?.width ?? dimensions?.width) as number | undefined;
+  const height = (innerStateProps?.styles?.height ?? dimensions?.height) as number | undefined;
+  const scale = innerStateProps?.styles?.scale ?? itemScale;
   return (
     <div
       className={`item-wrapper-${item.id}`}
       ref={itemWrapperRef}
+      onTransitionEnd={(e) => {
+        e.stopPropagation();
+        interactionCtrl?.handleTransitionEnd?.(e.propertyName);
+      }}
       style={{
         ...(position ? { top: position.top } : {}),
         ...(position ? { left: position.left } : {}),
         ...(position ? { bottom: position.bottom } : {}),
-        ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})
+        ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}),
+        transition: wrapperStateProps?.transition ?? 'none'
       }}
     >
       <div
@@ -153,23 +189,42 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
         <RichTextWrapper isRichText={isRichText}>
           <div
             className={`item-${item.id}-inner`}
+            ref={itemInnerRef}
+            onClick={() => {
+              interactionCtrl?.sendTrigger('click');
+            }}
+            onMouseEnter={() => {
+              interactionCtrl?.sendTrigger('hover-in');
+            }}
+            onMouseLeave={() => {
+              interactionCtrl?.sendTrigger('hover-out');
+            }}
             style={{
-              ...(dimensions ? {
+              ...((width && height) ? {
                 width: `${sizingAxis.x === 'manual'
                   ? isRichText
-                    ? `${dimensions.width * exemplary}px`
-                    : `${dimensions.width * 100}vw`
+                    ? `${width * exemplary}px`
+                    : `${width * 100}vw`
                   : 'max-content'}`,
-                height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {}),
+                height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}` } : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {}),
+              transition: innerStateProps?.transition ?? 'none',
+              pointerEvents: allowPointerEvents ? 'auto' : 'none'
             }}
           >
-            <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} articleHeight={articleHeight} />
+            <ItemComponent
+              item={item}
+              sectionId={sectionId}
+              onResize={handleItemResize}
+              articleHeight={articleHeight}
+              interactionCtrl={interactionCtrl}
+              onVisibilityChange={handleVisibilityChange}
+            />
           </div>
         </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams], exemplary) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           const scaleAnchor = area.scaleAnchor as AreaAnchor;
@@ -183,8 +238,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               height: fit-content;
             }
             .item-${item.id}-inner {
-              transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
-              pointer-events: auto;
               width: ${sizingAxis.x === 'manual'
                 ? `${area.width * 100}vw`
                 : 'max-content'};
@@ -200,13 +253,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              transition: ${getTransitions(['left', 'top'], hoverParams)};
-            }
-            .item-${item.id}-inner:hover {
-              ${getHoverStyles(['width', 'height', 'scale'], hoverParams)};
-            }
-            .item-wrapper-${item.id}:hover {
-              ${getHoverStyles(['left', 'top'], hoverParams, area.anchorSide)};
             }
           `);
       })}
@@ -223,11 +269,11 @@ function parseSizing(sizing: string = 'manual'): Axis {
   } as Axis;
 }
 
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
+  return item.type === itemType;
+}
+
 interface Axis {
   x: 'manual' | 'auto';
   y: 'manual' | 'auto';
 }
-
-export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
-  return item.type === itemType;
-}

package/src/components/items/CodeEmbedItem.tsx

@@ -1,8 +1,7 @@
-import { ArticleItemType, getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
+import { getLayoutStyles, CodeEmbedItem as TCodeEmbedItem, AreaAnchor } from '@cntrl-site/sdk';
 import { FC, useEffect, useId, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
-import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import JSXStyle from 'styled-jsx/style';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
@@ -21,16 +20,20 @@ const stylesMap = {
   [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
 };
 
-export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize }) => {
+export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { anchor, blur, opacity } = useCodeEmbedItem(item, sectionId);
-  const angle = useItemAngle(item, sectionId);
+  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
   const { html } = item.commonParams;
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   const pos = stylesMap[anchor];
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
+  const blur = (stateParams?.styles?.blur ?? itemBlur) as number;
+  const opacity = stateParams?.styles?.opacity ?? itemOpacity;
+  const angle = stateParams?.styles?.angle ?? itemAngle;
 
   useEffect(() => {
     if (!ref) return;
@@ -52,6 +55,10 @@ 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 = opacity !== 0;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
@@ -61,6 +68,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           ...(opacity !== undefined ? { opacity } : {}),
+          transition: stateParams?.transition ?? 'none'
       }}
         ref={setRef}
       >
@@ -93,21 +101,17 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
         z-index: 1;
         border: none;
       }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams], exemplary) => {
         return (`
           .embed-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: ${getTransitions<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
           }
           .embed-${item.id} {
             width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
             height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
           }
-          .embed-wrapper-${item.id}:hover {
-            ${getHoverStyles<ArticleItemType.CodeEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
-          }
         `);
       })}
     `}</JSXStyle>

package/src/components/items/CustomItem.tsx

@@ -1,20 +1,21 @@
-import { ArticleItemType, getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
+import { getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
 import { FC, useState } from 'react';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ItemProps } from '../Item';
-import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 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 }) => {
+export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {
   const sdk = useCntrlContext();
   const { layouts } = useCntrlContext();
-  const angle = useItemAngle(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
   const component = sdk.customItems.get(item.commonParams.name);
-  const layoutValues: Record<string, any>[] = [item.area, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
+  const stateParams = interactionCtrl?.getState(['angle']);
+  const angle = stateParams?.styles?.angle ?? itemAngle;
   if (!component) return null;
   return (
     <>
@@ -23,25 +24,22 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
         ref={setRef}
         style={{
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          transition: stateParams?.transition ?? 'none'
         }}
       >
         {component({})}
       </div>
       <JSXStyle id={item.id}>
-        {`${getLayoutStyles(layouts, layoutValues, ([area, hoverParams]) => {
+        {`${getLayoutStyles(layouts, layoutValues, ([area]) => {
           return (`
             .custom-component-${item.id} {
               transform: rotate(${area.angle}deg);
-              transition: ${getTransitions<ArticleItemType.Custom>(['angle'], hoverParams)};
               height: 100%;
               width: 100%;
               position: absolute;
               left: 0;
               top: 0;
             }
-            .custom-component-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Custom>(['angle'], hoverParams)};
-            }
           `);
         })}`}
       </JSXStyle>

package/src/components/items/GroupItem.tsx

@@ -1,24 +1,30 @@
-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 { ArticleItemType, getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
-import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRegisterResize } from '../../common/useRegisterResize';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
+import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
-export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight }) => {
+export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { items } = item;
-  const angle = useItemAngle(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
-  const { opacity } = useGroupItem(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
+  const { opacity: itemOpacity } = useGroupItem(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const isInteractive = opacity !== 0 && opacity !== undefined;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
@@ -28,6 +34,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            transition: stateParams?.transition ?? 'none'
           }}
         >
           {items && items.map(item => (
@@ -36,6 +43,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
               key={item.id}
               sectionId={sectionId}
               articleHeight={articleHeight}
+              isParentVisible={isInteractive}
               isInGroup
             />
           ))}
@@ -47,15 +55,11 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           height: 100%;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
           return (`
             .group-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
-              transition: ${getTransitions<ArticleItemType.Group>(['opacity', 'angle'], hoverParams)};
-            }
-            .group-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Group>(['opacity', 'angle'], hoverParams)};
             }
           `);
         })}