@cntrl-site/sdk-nextjs 1.1.2 → 1.1.4

package/lib/components/Item.js

@@ -53,7 +53,7 @@ const RichTextWrapper = ({ isRichText, children }) => {
 };
 const noop = () => null;
 const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -119,11 +119,12 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const width = ((_d = (_c = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : dimensions === null || dimensions === void 0 ? void 0 : dimensions.width);
     const height = ((_f = (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : dimensions === null || dimensions === void 0 ? void 0 : dimensions.height);
     const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
+    const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, onTransitionEnd: (e) => {
             var _a;
             e.stopPropagation();
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
-        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_j = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _j !== void 0 ? _j : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: `${stickyTop * 100}vw`,
                     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
@@ -140,8 +141,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                     : `${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: 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) => {
+                        } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', 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]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     const scaleAnchor = area.scaleAnchor;

package/lib/components/items/VimeoEmbed.js

@@ -61,7 +61,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     (0, react_1.useEffect)(() => {
         if (!vimeoPlayer || !imgRef)
             return;
-        if (play === 'on-click' && !controls) {
+        if (play === 'on-click') {
             setIsCoverVisible(true);
         }
         vimeoPlayer.on('pause', (e) => {

package/lib/interactions/InteractionsRegistry.js

@@ -93,6 +93,21 @@ class InteractionsRegistry {
         }
         return itemStyles;
     }
+    getItemAvailableTriggers(itemId) {
+        const available = new Set();
+        const activeStates = Object.values(this.interactionStateMap);
+        for (const interaction of this.interactions) {
+            const { triggers } = interaction;
+            for (const trigger of triggers) {
+                if (trigger.itemId !== itemId)
+                    continue;
+                if (activeStates.some((stateId) => trigger.from === stateId)) {
+                    available.add(trigger.type);
+                }
+            }
+        }
+        return available;
+    }
     notifyTrigger(itemId, triggerType) {
         var _a;
         const timestamp = Date.now();
@@ -120,7 +135,11 @@ class InteractionsRegistry {
                     updated: timestamp
                 };
             });
-            this.notifyItemCtrlsChange(transitioningItems);
+            const itemsToNotify = new Set(transitioningItems);
+            for (const trigger of interaction.triggers) {
+                itemsToNotify.add(trigger.itemId);
+            }
+            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
             this.notifyTransitionStartForItems(transitioningItems, activeStateId);
         }
     }

package/lib/interactions/ItemInteractionCtrl.js

@@ -51,6 +51,10 @@ class ItemInteractionController {
             transition
         };
     }
+    getHasTrigger(itemId, triggerType) {
+        const triggers = this.registry.getItemAvailableTriggers(itemId);
+        return triggers.has(triggerType);
+    }
     sendTrigger(type) {
         this.registry.notifyTrigger(this.itemId, type);
     }

package/package.json

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

package/src/components/Item.tsx

@@ -161,6 +161,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   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;
+  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
   return (
     <div
       className={`item-wrapper-${item.id}`}
@@ -209,6 +210,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
                 height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}` } : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {}),
               transition: innerStateProps?.transition ?? 'none',
+              cursor: hasClickTriggers ? 'pointer' : 'unset',
               pointerEvents: allowPointerEvents ? 'auto' : 'none'
             }}
           >
@@ -224,7 +226,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams], exemplary) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           const scaleAnchor = area.scaleAnchor as AreaAnchor;

package/src/components/items/VimeoEmbed.tsx

@@ -51,7 +51,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
 
   useEffect(() => {
     if (!vimeoPlayer || !imgRef) return;
-    if (play === 'on-click' && !controls) {
+    if (play === 'on-click') {
       setIsCoverVisible(true);
     }
     vimeoPlayer.on('pause', (e) => {
@@ -77,6 +77,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
     vimeoPlayer!.play();
     setIsCoverVisible(false);
   };
+
   const isInteractive = opacity !== 0;
   useEffect(() => {
     onVisibilityChange?.(isInteractive);

package/src/interactions/InteractionsRegistry.ts

@@ -92,6 +92,21 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return itemStyles;
   }
 
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']> {
+    const available = new Set<InteractionTrigger['type']>();
+    const activeStates = Object.values(this.interactionStateMap);
+    for (const interaction of this.interactions) {
+      const { triggers } = interaction;
+      for (const trigger of triggers) {
+        if (trigger.itemId !== itemId) continue;
+        if (activeStates.some((stateId) => trigger.from === stateId)) {
+          available.add(trigger.type);
+        }
+      }
+    }
+    return available;
+  }
+
   notifyTrigger(itemId: string, triggerType: TriggerType): void {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
@@ -118,7 +133,11 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
           updated: timestamp
         };
       });
-      this.notifyItemCtrlsChange(transitioningItems);
+      const itemsToNotify = new Set<ItemId>(transitioningItems);
+      for (const trigger of interaction.triggers) {
+        itemsToNotify.add(trigger.itemId);
+      }
+      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
       this.notifyTransitionStartForItems(transitioningItems, activeStateId);
     }
   }

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,6 +1,7 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
 import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
+import { InteractionTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
@@ -27,6 +28,11 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     };
   }
 
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean {
+    const triggers = this.registry.getItemAvailableTriggers(itemId);
+    return triggers.has(triggerType);
+  }
+
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
     this.registry.notifyTrigger(this.itemId, type);
   }

package/src/interactions/types.ts

@@ -1,7 +1,8 @@
-import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
+import { ArticleItemType, InteractionTrigger, ItemState } from '@cntrl-site/sdk';
 
 export interface ItemInteractionCtrl {
   getState(keys: string[]): StateCSSInfo;
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
@@ -11,6 +12,7 @@ export interface ItemInteractionCtrl {
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
   getStatePropsForItem(itemId: string): StateProps;
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']>;
   notifyTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }