@cntrl-site/sdk-nextjs 1.8.40-alpha.0 → 1.8.40

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -9,30 +9,29 @@ import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { FillLayer } from '@cntrl-site/sdk/dist/types/article/Item';
-import { getFill } from '../../../utils/getFill';
-import { areFillsVisible } from '../../../utils/areFillsVisible/areFillsVisible';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const {
-    fill: itemFill,
+    fillColor: itemFillColor,
     radius: itemRadius,
     strokeWidth: itemStrokeWidth,
-    strokeFill: itemStrokeFill,
+    strokeColor: itemStrokeColor,
     blur: itemBlur,
     backdropBlur: itemBackdropBlur
   } = useRectangleItem(item, sectionId);
   const itemAngle = useItemAngle(item, sectionId);
-  const stateParams = interactionCtrl?.getState<number>(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
-  const stateFillParams = interactionCtrl?.getState<FillLayer[]>(['fill']);
-  const stateFillLayers = stateFillParams?.styles?.fill;
-  const solidTransition = stateFillParams?.transition ?? 'none';
-  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
-  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
-  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
+  const stateParams = interactionCtrl?.getState(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
   const styles = stateParams?.styles ?? {};
+  const backgroundColor = useMemo(() => {
+    const fillColor = getStyleFromItemStateAndParams(styles?.fillColor, itemFillColor);
+    return fillColor ? CntrlColor.parse(fillColor) : undefined;
+  }, [itemFillColor, styles?.fillColor]);
+  const borderColor = useMemo(() => {
+    const strokeColor = getStyleFromItemStateAndParams(styles?.strokeColor, itemStrokeColor);
+    return strokeColor ? CntrlColor.parse(strokeColor) : undefined;
+  }, [itemStrokeColor, styles?.strokeColor]);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
@@ -42,18 +41,11 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
   const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
   const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
-  const isInteractive = areFillsVisible(stateFillLayers ?? itemFill ?? []) || (strokeWidth !== 0 && areFillsVisible(stateStrokeFillLayers ?? itemStrokeFill ?? []));
+  const isInteractive = backgroundColor?.getAlpha() !== 0 || (strokeWidth !== 0 && borderColor?.getAlpha() !== 0);
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
 
-  const strokeValue = stateStrokeFillLayers
-    ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
-    : itemStrokeFill?.[0];
-  const stroke = strokeValue
-    ? getFill(strokeValue) ?? 'transparent'
-    : 'transparent';
-
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
@@ -61,15 +53,10 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
-            ...(strokeValue ? {
-              '--stroke-background': stroke,
-              ...(strokeValue.type === 'image' ? {
-                backgroundPosition: 'center',
-                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-              } : {})
-            } : {}),
+            ...(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)` } : {}),
             willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
@@ -79,121 +66,32 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
             ),
             transition: stateParams?.transition ?? 'none'
           }}
-        >
-          <div
-            className={`rectangle-border-${item.id}`}
-            style={{
-              position: 'absolute',
-              inset: 0,
-              borderRadius: 'inherit',
-              pointerEvents: 'none',
-              zIndex: 2,
-              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-              WebkitMaskComposite: 'xor',
-              maskComposite: 'exclude',
-              ...(strokeWidth !== 0 && strokeValue ? {
-                ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
-                ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
-                ...(strokeValue.type === 'image' ? {
-                  backgroundPosition: 'center',
-                  backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
-                  backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                } : {
-                  background: stroke,
-                }
-                )
-              } : { background: stroke }),
-            }}
-          />
-          {itemFill && itemFill.map((fill) => {
-            const stateFillLayer = stateFillLayers?.find((layer) => layer.id === fill.id);
-            const value = stateFillLayer
-              ? (getStyleFromItemStateAndParams<FillLayer>(stateFillLayer, fill) ?? fill)
-              : fill;
-            const background = value
-              ? getFill(value) ?? 'transparent'
-              : 'transparent';
-
-            return (
-              <Fill fill={value} itemId={item.id} background={background} solidTransition={solidTransition} />
-            );
-          })}
-        </div>
+        />
         <JSXStyle id={id}>{`
         .rectangle-${item.id} {
           position: absolute;
           width: 100%;
           height: 100%;
+          border-style: solid;
           box-sizing: border-box;
-        },
-        .image-fill-${item.id} {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          transform-origin: center center;
-          z-index: 1;
-          background-position: center;
-        },
+        }
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-      return (`
+          return (`
             .rectangle-${item.id} {
-              border-radius: ${layoutParams.radius * 100}vw
+              background-color: ${CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
+              border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
+              border-radius: ${layoutParams.radius * 100}vw;
+              border-width: ${layoutParams.strokeWidth * 100}vw;
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
               backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
               -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
-            },
-            .rectangle-border-${item.id} {
-              position: absolute;
-              inset: 0;
-              border-radius: inherit;
-              pointer-events: none;
-              z-index: 2;
-              -webkit-mask:
-                linear-gradient(#fff 0 0) content-box,
-                linear-gradient(#fff 0 0);
-              -webkit-mask-composite: xor;
-              mask-composite: exclude;
             }
           `);
-    })}
+        })}
       `}</JSXStyle>
       </>
     </LinkWrapper>
   );
 };
-
-function Fill({ fill, itemId, background, solidTransition }: { fill: FillLayer; itemId: string; background: string; solidTransition: string; }) {
-  const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
-
-  return (
-    <div
-      key={fill.id}
-      className={fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`}
-      style={{
-        ...(fill.type === 'solid' ? { background, transition: solidTransition } : {}),
-        ...(fill.type === 'image'
-          ? {
-              transform: `rotate(${fill.rotation}deg)`,
-              backgroundImage: `url(${fill.src})`,
-              backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
-              backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
-              opacity: fill.opacity
-            }
-          : { background }),
-        position: 'absolute',
-        mixBlendMode: fill.blendMode as any,
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
-        ...(isRotatedImage ? { overflow: 'hidden' } : {})
-      }}
-    >
-    </div>
-  );
-};

package/src/components/items/RectangleItem/useRectangleItem.ts

@@ -2,14 +2,7 @@ import { KeyframeType, RectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../../common/useKeyframeValue';
 import { useLayoutContext } from '../../useLayoutContext';
 
-const defaultFill = [
-  {
-    id: 'default',
-    type: 'solid' as const,
-    value: 'rgba(0, 0, 0, 1)',
-    blendMode: 'normal'
-  }
-];
+const defaultColor = 'rgba(0, 0, 0, 1)';
 
 export function useRectangleItem(item: RectangleItem, sectionId: string) {
   const layoutId = useLayoutContext();
@@ -37,27 +30,27 @@ export function useRectangleItem(item: RectangleItem, sectionId: string) {
     sectionId,
     [layoutId]
   );
-  const fill = useKeyframeValue(
+  const fillColor = useKeyframeValue(
     item,
-    KeyframeType.Fill,
+    KeyframeType.Color,
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return 'fill' in layoutParams ? layoutParams.fill : defaultFill;
+      return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
     },
-    (animator, scroll, value) => value ? animator.getFill(value, scroll) : undefined,
+    (animator, scroll, value) => value ? animator.getColor({ color: value }, scroll).color : undefined,
     sectionId,
     [layoutId]
   );
-  const strokeFill = useKeyframeValue(
+  const strokeColor = useKeyframeValue(
     item,
-    KeyframeType.BorderFill,
+    KeyframeType.BorderColor,
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return 'strokeFill' in layoutParams ? layoutParams.strokeFill : defaultFill;
+      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     },
-    (animator, scroll, value) => value ? animator.getBorderFill(value, scroll) : undefined,
+    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
     sectionId,
     [layoutId]
   );
@@ -85,5 +78,5 @@ export function useRectangleItem(item: RectangleItem, sectionId: string) {
     sectionId,
     [layoutId]
   );
-  return { fill, strokeWidth, radius, strokeFill, blur, backdropBlur };
+  return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
 }

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -30,11 +30,11 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const exemplary = useExemplary();
   const { layoutId } = useCurrentLayout();
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState<number | string>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
+  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
   const stateStyles = stateParams?.styles ?? {};
   const transition = stateParams?.transition ?? 'none';
   const textColor = useMemo(() => {
-    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color as string, itemColor);
+    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color, itemColor);
     return color ? CntrlColor.parse(color) : undefined;
   }, [itemColor, stateStyles.color]);
   const angle = getStyleFromItemStateAndParams(stateStyles.angle, itemAngle);
@@ -60,11 +60,11 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         ref={setRef}
         className={`rich-text-wrapper-${item.id}`}
         style={{
-          ...(blur !== undefined ? { filter: `blur(${blur as number * 100}vw)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing as number * exemplary}px` } : {}),
-          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing as number * exemplary}px` } : {}),
+          ...(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` } : {}),
           willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',

package/src/interactions/CSSPropertyNameMap.ts

@@ -1,36 +1,37 @@
 import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
 
 export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
-  width: 'width',
-  height: 'height',
-  top: 'top',
-  left: 'left',
-  scale: 'transform',
-  angle: 'transform',
-  opacity: 'opacity',
-  radius: 'border-radius',
-  strokeWidth: 'border-width',
-  strokeFill: 'border-color',
-  fill: 'background',
-  blur: 'filter',
-  backdropBlur: 'backdrop-filter',
-  letterSpacing: 'letter-spacing',
-  wordSpacing: 'word-spacing',
-  color: 'color'
+  'width': 'width',
+  'height': 'height',
+  'top': 'top',
+  'left': 'left',
+  'scale': 'transform',
+  'angle': 'transform',
+  'opacity': 'opacity',
+  'radius': 'border-radius',
+  'strokeWidth': 'border-width',
+  'strokeColor': 'border-color',
+  'fillColor': 'background-color',
+  'blur': 'filter',
+  'backdropBlur': 'backdrop-filter',
+  'letterSpacing': 'letter-spacing',
+  'wordSpacing': 'word-spacing',
+  'color': 'color'
 };
 
 const PropertyNameCSSMap: Record<string, string[]> = {
   'transform': ['angle', 'scale'],
   'border-radius': ['radius'],
   'border-width': ['strokeWidth'],
-  'border-color': ['strokeFill'],
-  'background': ['fill'],
+  'border-color': ['strokeColor'],
+  'background-color': ['fillColor'],
   'filter': ['blur'],
   'backdrop-filter': ['backdrop-blur'],
   'letter-spacing': ['letterSpacing'],
   'word-spacing': ['wordSpacing'],
 };
 
+
 export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
   const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
   return key;

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,7 +1,7 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
 import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
-import { FillLayer, InteractionItemTrigger } from '@cntrl-site/sdk';
+import { InteractionItemTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
@@ -15,12 +15,12 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     this.registry.register(itemId, this);
   }
 
-  getState<T>(keys: string[]) {
+  getState(keys: string[]) {
     const stateProps = this.registry.getStatePropsForItem(this.itemId);
-    const styles = keys.reduce<Record<string, T>>((map, styleKey) => {
+    const styles = keys.reduce<Record<string, string | number>>((map, styleKey) => {
       const prop = stateProps[styleKey];
       if (prop?.value === undefined) return map;
-      map[styleKey] = prop.value as T;
+      map[styleKey] = prop.value;
       return map;
     }, {});
     const transition = getTransition(stateProps, keys);

package/src/interactions/types.ts

@@ -1,7 +1,7 @@
-import { ArticleItemType, FillLayer, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
+import { ArticleItemType, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
 
 export interface ItemInteractionCtrl {
-  getState<T>(keys: string[]): StateCSSInfo<T>;
+  getState(keys: string[]): StateCSSInfo;
   getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
@@ -13,19 +13,19 @@ export interface ItemInteractionCtrl {
 
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
-  getStatePropsForItem(itemId: string): StateProps<unknown>;
+  getStatePropsForItem(itemId: string): StateProps;
   getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
   notifyItemTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }
 
-type StateCSSInfo<T> = {
-  styles: Partial<Record<string, T>>;
+type StateCSSInfo = {
+  styles: Partial<Record<string, string | number>>;
   transition?: string;
 };
 
-type StateProps<T> = Record<keyof ItemState<ArticleItemType>, {
-  value?: T;
+type StateProps = Record<keyof ItemState<ArticleItemType>, {
+  value?: string | number;
   transition?: {
     timing: string;
     duration: number;

package/src/provider/InteractionsContext.old.tsx

@@ -0,0 +1,66 @@
+import { createContext, FC, PropsWithChildren, useState } from 'react';
+import { Interaction, InteractionTrigger } from '@cntrl-site/sdk';
+
+const defaultState = {
+  interactionsStatesMap: {},
+  interactions: [],
+  transitionTo: () => {},
+  getItemTrigger: () => null
+};
+
+export const InteractionsContextOld = createContext<{
+  interactionsStatesMap: StatesMap,
+  interactions: Interaction[],
+  transitionTo: (interactionId: string, stateId: string) => void,
+  getItemTrigger: (itemId: string, triggerType: TriggerType) => Trigger | null
+}>(defaultState);
+
+interface Props {
+  interactions: Interaction[];
+}
+
+export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ interactions, children }) => {
+  const defaultStatesMap = interactions.reduce<Record<string, string>>((map, { id, startStateId }) => {
+    map[id] = startStateId;
+    return map;
+  }, {});
+  const [interactionsStatesMap, setInteractionsStatesMap] = useState(defaultStatesMap);
+  const transitionTo = (interactionId: string, stateId: string) => {
+    setInteractionsStatesMap((map) => ({ ...map, [interactionId]: stateId }));
+  };
+  const getItemTrigger = (itemId: string, triggerType: TriggerType): Trigger | null => {
+    for (const interaction of interactions) {
+      const activeStateId = interactionsStatesMap[interaction.id];
+      const matchingTrigger = interaction.triggers.find((trigger) =>
+        trigger.itemId === itemId
+        && trigger.from === activeStateId
+        && trigger.type === triggerType
+      );
+      if (matchingTrigger) {
+        return {
+          id: interaction.id,
+          from: matchingTrigger.from,
+          to: matchingTrigger.to,
+        };
+      }
+    }
+    return null;
+  };
+  return (
+    <InteractionsContextOld.Provider value={{
+      transitionTo,
+      interactionsStatesMap,
+      interactions,
+      getItemTrigger
+    }}
+    >
+      {children}
+    </InteractionsContextOld.Provider>
+  );
+};
+
+type StatesMap = Record<InteractionId, StateId>;
+type Trigger = { id: InteractionId, from: StateId, to: StateId };
+type TriggerType = InteractionTrigger['type'];
+type InteractionId = string;
+type StateId = string;

package/src/provider/InteractionsContext.test.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { InteractionsProvider, InteractionsContextOld } from './InteractionsContext.old';
+import { Interaction } from '@cntrl-site/sdk';
+
+describe('InteractionsProvider', () => {
+  const interactions: Interaction[] = [
+    {
+      id: 'interaction1',
+      startStateId: 'state1',
+      triggers: [
+        { itemId: 'item1', type: 'click', from: 'state1', to: 'state2' }
+      ],
+      states: [{ id: 'state1' }, { id: 'state2' }]
+    },
+    {
+      id: 'interaction2',
+      startStateId: 'state3',
+      triggers: [
+        { itemId: 'item2', type: 'hover-in', from: 'state3', to: 'state4' }
+      ],
+      states: [{ id: 'state3' }, { id: 'state4' }]
+    }
+  ];
+
+  it('should generate correct default interactionsStatesMap', () => {
+    let contextValue;
+
+    render(
+      <InteractionsProvider interactions={interactions}>
+        <InteractionsContextOld.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContextOld.Consumer>
+      </InteractionsProvider>
+    );
+
+    expect(contextValue!).toBeDefined();
+    expect(contextValue!.interactionsStatesMap).toEqual({
+      interaction1: 'state1',
+      interaction2: 'state3'
+    });
+  });
+
+  it('should correctly update interactionsStatesMap when transitionTo is called', async () => {
+    let contextValue;
+
+    render(
+      <InteractionsProvider interactions={interactions}>
+        <InteractionsContextOld.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContextOld.Consumer>
+      </InteractionsProvider>
+    );
+
+    expect(contextValue!).toBeDefined();
+    contextValue!.transitionTo('interaction1', 'state2');
+
+    await waitFor(() => {
+      expect(contextValue!.interactionsStatesMap['interaction1']).toBe('state2');
+    });
+  });
+
+  it('should return the correct trigger using getItemTrigger', () => {
+    let contextValue;
+
+    render(
+      <InteractionsProvider interactions={interactions}>
+        <InteractionsContextOld.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContextOld.Consumer>
+      </InteractionsProvider>
+    );
+
+    expect(contextValue!).toBeDefined();
+
+    // Check the correct trigger is returned
+    const trigger = contextValue!.getItemTrigger('item1', 'click');
+    expect(trigger).toEqual({
+      id: 'interaction1',
+      from: 'state1',
+      to: 'state2',
+    });
+
+    // Check that no trigger is returned when conditions don't match
+    const noTrigger = contextValue!.getItemTrigger('item1', 'hover-on');
+    expect(noTrigger).toBeNull();
+  });
+});