@shopgate/engage 7.27.2-beta.1 → 7.27.2-beta.3

package/components/ScrollHeader/index.js

@@ -1,5 +1,18 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useScrollDirectionChange}from'@shopgate/engage/core/hooks';import{root,scrolledIn,scrolledOut,transition}from"./style";/**
- * Scroll Header component
- * @param {Object} props props
- * @returns {JSX}
- */function ScrollHeader(_ref){var className=_ref.className,children=_ref.children,hideOnScroll=_ref.hideOnScroll,scrollOffset=_ref.scrollOffset;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];useScrollDirectionChange({enabled:hideOnScroll,offset:scrollOffset,onScrollDown:function onScrollDown(){setShouldHideHeader(true);},onScrollUp:function onScrollUp(){setShouldHideHeader(false);}});return React.createElement("div",{className:classNames(root,transition,className,_defineProperty(_defineProperty({},scrolledIn,!shouldHideHeader),scrolledOut,shouldHideHeader))},children);}ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100};export default ScrollHeader;
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,forwardRef,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useScrollDirectionChange}from'@shopgate/engage/core/hooks';import{root,scrolledIn,scrolledOut,transition}from"./style";/* eslint-disable react/prop-types */ /**
+ * A container component that hides its content on scroll down and shows it on scroll up.
+ *
+ * @param {Object} props The component props.
+ * @param {boolean}  [props.hideOnScroll] Toggle hide-on-scroll (default: true).
+ * @param {number} [props.scrollOffset] Pixels to scroll before toggling (default: 100).
+ * @param {Function} [props.onChange] Callback function that is called when the header changes
+ * @param {string} [props.className] Extra CSS classes on the root element.
+ * @param {Object} [props.classes] Override internal class names.
+ * @param {string} [props.classes.scrolledIn] Override class for the scrolled-in state
+ * (content is hidden).
+ * @param {string} [props.classes.scrolledOut] Override class for the scrolled-out state
+ * (content is visible).
+ * visibility. Contains a boolean indicating whether the header is visible.
+ * @param {React.ReactNode} props.children  Content of the header.
+ * @param {React.Ref<HTMLDivElement>} ref   Forwarded ref to the header `<div>`.
+ * @returns {JSX.Element}
+ */function ScrollHeaderBase(_ref,ref){var className=_ref.className,children=_ref.children,_ref$hideOnScroll=_ref.hideOnScroll,hideOnScroll=_ref$hideOnScroll===void 0?true:_ref$hideOnScroll,_ref$scrollOffset=_ref.scrollOffset,scrollOffset=_ref$scrollOffset===void 0?100:_ref$scrollOffset,onChange=_ref.onChange,classes=_ref.classes;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];useScrollDirectionChange({enabled:hideOnScroll,offset:scrollOffset,onScrollDown:function onScrollDown(){setShouldHideHeader(true);},onScrollUp:function onScrollUp(){setShouldHideHeader(false);}});useEffect(function(){if(typeof onChange!=='function'){return;}onChange(!shouldHideHeader);},[onChange,shouldHideHeader]);return React.createElement("div",{ref:ref,className:classNames(root,transition,className,_defineProperty(_defineProperty({},classNames(scrolledIn,classes===null||classes===void 0?void 0:classes.scrolledIn),!shouldHideHeader),classNames(scrolledOut,classes===null||classes===void 0?void 0:classes.scrolledOut),shouldHideHeader))},children);}/* eslint-enable react/prop-types */var ScrollHeader=forwardRef(ScrollHeaderBase);ScrollHeader.displayName='ScrollHeader';ScrollHeader.propTypes={children:PropTypes.node.isRequired,classes:PropTypes.shape({scrolledIn:PropTypes.string,scrolledOut:PropTypes.string}),className:PropTypes.string,hideOnScroll:PropTypes.bool,onChange:PropTypes.func,scrollOffset:PropTypes.number};ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100,classes:{},onChange:null};export default ScrollHeader;

package/core/contexts/ThemeResourcesContext.d.ts

@@ -0,0 +1,60 @@
+import { ComponentType, Context } from 'react';
+
+/**
+ * A mapping object that contains multiple components provided by the theme.
+ * Key is the component name, value is the component.
+ */
+export interface ThemeComponentMap {
+  /**
+   * Used to display the app bar at the top of the screen.
+   */
+  AppBar: ComponentType;
+  /**
+   * Acts as a wrapper around displayed products and is usually used in components like product sliders.
+   */
+  ProductCard: ComponentType;
+  /**
+   * Used to display products in a grid layout.
+   */
+  ProductGrid: ComponentType;
+  /**
+   * Used to display the header section of a product page. Contains rating, name, and product information.
+   * Depending on the theme it may also include CTA buttons.
+   */
+  ProductHeader: ComponentType;
+  /**
+   * Tab bar component provided by the theme. Only available inside the ios11 theme.
+   */
+  TabBar?: ComponentType;
+}
+
+/**
+ * A mapping of widget code to widget React components.
+ */
+export interface ThemeWidgetMap {
+  [key: string]: ComponentType;
+}
+
+/**
+ * Context type for theme resources.
+ */
+export interface ThemeResourcesContextType {
+  /**
+   * Mapping object that contains all available widgets.
+   * Key is the widget code, value is the widget component.
+   */
+  widgets: ThemeWidgetMap;
+
+  /**
+   * Mapping object that contains multiple components provided by the theme.
+   * Key is the component name, value is the component.
+   */
+  components: ThemeComponentMap;
+}
+
+/**
+ * React context for theme resources.
+ */
+declare const ThemeResourcesContext: Context<ThemeResourcesContextType>;
+
+export default ThemeResourcesContext;

package/core/contexts/ThemeResourcesContext.js

@@ -1,21 +1,3 @@
 import{createContext}from'react';/**
- * @typedef {Object} ThemeComponentMap
- * @property {React.ComponentType} AppBar Used to display the app bar at the top of the screen.
- * @property {React.ComponentType} ProductCard Acts as a wrapper around
- * displayed products and is usually used in components like product sliders.
- * @property {React.ComponentType} ProductGrid Used to display products in a grid layout.
- * @property {React.ComponentType} ProductHeader Used to display the header section of a product
- * page. Contains rating, name, and product information. Depending on the theme it may also include
- * CTA buttons.
- * @property {React.ComponentType} [TabBar] Tab bar component provided by the theme. Only available
- * inside the ios11 theme.
- */ /**
- * @typedef {Object.<string, React.ComponentType>} ThemeWidgetMap
- * A mapping of widget code to widget React components.
- */ /**
- * @typedef {Object} ThemeResourcesContext
- * @property {ThemeWidgetMap} widgets Mapping object that contains all available widgets.
- * Key is the widget code, value is the widget component.
- * @property {ThemeComponentMap} components Mapping object that contains multiple components
- * provided by the theme. Key is the component name, value is the component
- */ /** @type {import('react').Context<ThemeResourcesContext>} */export default createContext({widgets:{},components:{}});
+ * @typedef  {import('./ThemeResourcesContext').ThemeResourcesContextType ThemeResourcesContextType}
+ */ /** @type {import('react').Context<ThemeResourcesContextType>} */export default createContext({widgets:{},components:{}});

package/core/hooks/events/useLongPress.d.ts

@@ -0,0 +1,68 @@
+import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
+
+export interface LongPressHandlers {
+  /**
+   * Attach to `onMouseDown` event.
+   */
+  onMouseDown: (e: ReactMouseEvent | TouchEvent) => void;
+
+  /**
+   * Attach to `onTouchStart` event.
+   */
+  onTouchStart: (e: ReactTouchEvent | TouchEvent) => void;
+
+  /**
+   * Attach to `onMouseUp` event.
+   */
+  onMouseUp: (e: ReactMouseEvent | TouchEvent) => void;
+
+  /**
+   * Attach to `onMouseLeave` event.
+   */
+  onMouseLeave: (e: ReactMouseEvent | TouchEvent) => void;
+
+  /**
+   * Attach to `onTouchEnd` event.
+   */
+  onTouchEnd: (e: ReactTouchEvent | TouchEvent) => void;
+
+  /**
+   * Attach to `onContextMenu` event to prevent the native context menu.
+   */
+  onContextMenu: (e: MouseEvent) => void;
+}
+
+export interface UseLongPressOptions {
+  /**
+   * Duration in milliseconds to trigger long press.
+   * @default 1000
+   */
+  threshold?: number;
+
+  /**
+   * Called when the press starts.
+   */
+  onStart?: (e: ReactMouseEvent | ReactTouchEvent) => void;
+
+  /**
+   * Called when the long press completes.
+   */
+  onFinish?: (e: ReactMouseEvent | ReactTouchEvent) => void;
+
+  /**
+   * Called when the press is cancelled before the threshold.
+   */
+  onCancel?: (e: ReactMouseEvent | ReactTouchEvent) => void;
+}
+
+/**
+ * Custom hook to handle long press interactions.
+ *
+ * @param callback Function to call on long press.
+ * @param options Configuration and lifecycle callbacks.
+ * @returns An object containing event handlers for mouse and touch events.
+ */
+export default function useLongPress(
+  callback: (e: ReactMouseEvent | ReactTouchEvent) => void,
+  options?: UseLongPressOptions
+): LongPressHandlers;

package/core/hooks/events/useLongPress.js

@@ -1,25 +1,13 @@
-import{useRef,useCallback}from'react';/**
- * @typedef {Object} LongPressHandlers
- * @property {Function} onMouseDown - Attach to `onMouseDown` event.
- * @property {Function} onTouchStart - Attach to `onTouchStart` event.
- * @property {Function} onMouseUp - Attach to `onMouseUp` event.
- * @property {Function} onMouseLeave - Attach to `onMouseLeave` event.
- * @property {Function} onTouchEnd - Attach to `onTouchEnd` event.
- * @property {Function} onContextMenu - Attach to `onContextMenu` event to prevent the native
- * context menu.
- */ /**
+// @ts-check
+import{useRef,useCallback}from'react';/** @typedef {import('./useLongPress').LongPressHandlers} LongPressHandlers */ /** @typedef {import('./useLongPress').UseLongPressOptions} UseLongPressOptions */ /**
  * Prevents the default context menu from appearing on long press.
  * @param {MouseEvent} e The event object.
- */var preventContextMenu=function preventContextMenu(e){e.preventDefault();};/**
+ */var preventContextMenu=function preventContextMenu(e){e.preventDefault();};// eslint-disable-next-line valid-jsdoc
+/**
  * Custom hook to handle long press interactions.
  *
- * @param {Function} callback - Function to call on long press.
- * @param {Object} [options={}] - Configuration and lifecycle callbacks.
- * @param {number} [options.threshold=1000] - Duration in milliseconds to trigger long press.
- * @param {Function} [options.onStart] - Called when the press starts.
- * @param {Function} [options.onFinish] - Called when the long press completes.
- * @param {Function} [options.onCancel] - Called when the press is cancelled before the threshold.
- *
+ * @param {(e: Event) => void} callback - Function to call on long press.
+ * @param {UseLongPressOptions} [options={}] - Configuration and lifecycle callbacks.
  * @returns {LongPressHandlers} An object containing event handlers for mouse and touch events.
  */export default function useLongPress(callback){var _ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},_ref$threshold=_ref.threshold,threshold=_ref$threshold===void 0?1000:_ref$threshold,onStart=_ref.onStart,onFinish=_ref.onFinish,onCancel=_ref.onCancel;var timerRef=useRef(null);var triggeredRef=useRef(false);var start=useCallback(function(e){if(onStart)onStart(e);triggeredRef.current=false;timerRef.current=setTimeout(function(){callback(e);triggeredRef.current=true;if(onFinish)onFinish(e);},threshold);},[onStart,threshold,callback,onFinish]);var cancel=useCallback(function(e){clearTimeout(timerRef.current);if(!triggeredRef.current&&onCancel){onCancel(e);}},[onCancel]);return{onMouseDown:start,onTouchStart:start,onMouseUp:cancel,onMouseLeave:cancel,onTouchEnd:cancel,// prevents right-click or long-press menu
 onContextMenu:preventContextMenu};}

package/core/hooks/events/useScrollDirectionChange.d.ts

@@ -0,0 +1,60 @@
+export interface ViewScrollEvent {
+  /** The original scroll event object */
+  event: UIEvent;
+
+  /** Current vertical scroll position */
+  scrollTop: number;
+
+  /** Previous scrollTop value */
+  previousScrollTop: number;
+
+  /** True if scrolling down */
+  scrollDown: boolean;
+
+  /** True if scrolling up */
+  scrollUp: boolean;
+
+  /** Scroll direction: 'up', 'down', or null */
+  direction: 'up' | 'down' | null;
+
+  /** Optional internal/legacy props (not passed to callbacks) */
+  [key: string]: unknown;
+}
+
+/**
+ * @param event Scroll event
+ */
+export type ScrollCallback = (event: ViewScrollEvent) => void;
+
+export interface UseScrollDirectionChangeParams {
+  /** Whether the hook is active */
+  enabled: boolean;
+
+  /**
+   * ScrollTop threshold for down scroll triggers. When set,
+   * `onScrollDown` fires only when the scroll position is greater than this.
+   * @default 100
+   */
+  offset?: number;
+
+  /**
+   * If true, callbacks fire only once per direction change
+   * @default true
+   */
+  onlyFireOnDirectionChange?: boolean;
+
+  /** Callback triggered on scroll up */
+  onScrollUp?: ScrollCallback;
+
+  /** Callback triggered on scroll down past offset */
+  onScrollDown?: ScrollCallback;
+}
+
+/**
+ * A scroll hook that detects scroll direction changes (up/down) and
+ * triggers the appropriate callbacks. Commonly used to show/hide
+ * UI elements based on scroll behavior.
+ *
+ * @param {UseScrollDirectionChangeParams} params The hook parameters
+ */
+export default function useScrollDirectionChange(params: UseScrollDirectionChangeParams): void;

package/core/hooks/events/useScrollDirectionChange.js

@@ -1,28 +1,11 @@
-var _excluded=["scrollIn","scrollOut","scrolled"],_excluded2=["scrollIn","scrollOut","scrolled"];function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import{useEffect,useRef,useCallback}from'react';import{viewScroll$}from'@shopgate/engage/core/streams';/**
- * @typedef {Object} ViewScrollEvent
- * @property {Event} event The original scroll event object
- * @property {number} scrollTop Current vertical scroll position
- * @property {number} previousScrollTop Previous scrollTop value
- * @property {boolean} scrollDown True if scrolling down
- * @property {boolean} scrollUp True if scrolling up
- * @property {'up' | 'down' | null} direction Scroll direction
- */ /**
- * @callback ScrollCallback
- * @param {ViewScrollEvent} event
- * @returns {void}
- */ /**
+var _excluded=["scrollIn","scrollOut","scrolled"],_excluded2=["scrollIn","scrollOut","scrolled"];function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}// @ts-check
+import{useEffect,useRef,useCallback}from'react';import{viewScroll$}from'@shopgate/engage/core/streams';/** @typedef {import('./useScrollDirectionChange').ViewScrollEvent} ViewScrollEvent */ /** @typedef {import('./useScrollDirectionChange').ScrollCallback} ScrollCallback */ // eslint-disable-next-line max-len
+/** @typedef {import('./useScrollDirectionChange').UseScrollDirectionChangeParams} UseScrollDirectionChangeParams */ /**
  * A scroll hook that detects scroll direction changes (up/down) and
  * triggers the appropriate callbacks. Commonly used to show/hide
  * UI elements based on scroll behavior.
  *
- * @param {Object} params The hook parameters
- * @param {boolean} params.enabled Whether the hook is active
- * @param {number} [params.offset=100] ScrollTop threshold for down scroll triggers. When set,
- * onScrollDown will first be triggered when the scroll position is greater than this value.
- * @param {boolean} [params.onlyFireOnDirectionChange=true]
- *   If true, callbacks fire only once per direction change
- * @param {ScrollCallback} [params.onScrollUp] Triggered on scroll up
- * @param {ScrollCallback} [params.onScrollDown] Triggered on scroll down past offset
+ * @param {UseScrollDirectionChangeParams} params The hook parameters
  */export default function useScrollDirectionChange(_ref){var enabled=_ref.enabled,_ref$offset=_ref.offset,offset=_ref$offset===void 0?100:_ref$offset,_ref$onlyFireOnDirect=_ref.onlyFireOnDirectionChange,onlyFireOnDirectionChange=_ref$onlyFireOnDirect===void 0?true:_ref$onlyFireOnDirect,onScrollUp=_ref.onScrollUp,onScrollDown=_ref.onScrollDown;var lastDirectionRef=useRef(null);var downTriggeredRef=useRef(false);var upTriggeredRef=useRef(false);/**
    * Scroll event handler.
    * Uses `event.direction` and triggers callbacks accordingly.

package/core/hooks/layout/useElementSize.d.ts

@@ -0,0 +1,46 @@
+import { RefObject } from 'react';
+
+/**
+ * Represents the dimensions of a DOM element.
+ */
+export interface ElementSize {
+  /**
+   * The element's height in pixels.
+   */
+  height: number;
+
+  /**
+   * The element's width in pixels (optional).
+   */
+  width?: number;
+}
+
+/**
+ * Options for configuring the useElementSize hook.
+ */
+export interface UseElementSizeOptions {
+  /**
+   * Throttle delay in milliseconds.
+   * @default 100
+   */
+  throttleMs?: number;
+
+  /**
+   * Whether to measure the element's width.
+   * @default false
+   */
+  includeWidth?: boolean;
+}
+
+/**
+ * Tracks the height (and optionally width) of a DOM element using ResizeObserver.
+ * Falls back to window resize and MutationObserver in older browsers.
+ *
+ * @param ref A ref to the element being measured.
+ * @param options Optional settings.
+ * @returns The current height (and optionally width) of the element.
+ */
+export default function useElementSize(
+  ref: RefObject<HTMLElement>,
+  options?: UseElementSizeOptions
+): ElementSize;

package/core/hooks/layout/useElementSize.js

@@ -1,16 +1,8 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import{useState,useEffect,useRef}from'react';import throttle from'lodash/throttle';/**
- * @typedef {Object} ElementSize
- * @property {number} height - The element's height in pixels.
- * @property {number} [width] - The element's width in pixels (optional).
- */ /**
- * @typedef {Object} UseElementSizeOptions
- * @property {number} [throttleMs=100] - Throttle delay in milliseconds.
- * @property {boolean} [includeWidth=false] - Whether to measure the element's width.
- */ /**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import{useState,useEffect,useRef}from'react';import throttle from'lodash/throttle';/** @typedef {import('./useElementSize').ElementSize} ElementSize */ /** @typedef {import('./useElementSize').UseElementSizeOptions} UseElementSizeOptions */ /** @typedef {import('react').RefObject<HTMLElement>} HTMLElementRef */ /**
  * Tracks the height (and optionally width) of a DOM element using ResizeObserver,
  * with a fallback to window resize and MutationObserver in older browsers.
  *
- * @param {React.RefObject<HTMLElement>} ref - A ref to the element being measured.
+ * @param {HTMLElementRef} ref - A ref to the element being measured.
  * @param {UseElementSizeOptions} [options={}] - Optional settings.
  * @returns {ElementSize} The current height (and optionally width) of the element.
  */export default function useElementSize(ref){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$throttleMs=options.throttleMs,throttleMs=_options$throttleMs===void 0?100:_options$throttleMs,_options$includeWidth=options.includeWidth,includeWidth=_options$includeWidth===void 0?false:_options$includeWidth;/**

package/core/hooks/useThemeResources.js

@@ -1,16 +1,21 @@
-import{useContext}from'react';import ThemeResourcesContext from"../contexts/ThemeResourcesContext";// eslint-disable-next-line valid-jsdoc
-/**
+import{useContext}from'react';import ThemeResourcesContext from"../contexts/ThemeResourcesContext";/**
+ * @typedef  {import('../contexts/ThemeResourcesContext').ThemeResourcesContextType
+ * ThemeResourcesContextType}
+ */ /**
+ * @typedef {ThemeResourcesContextType['components']} ThemeComponentsType
+ */ /**
+ * @typedef {ThemeResourcesContextType['widgets']} ThemeWidgetsType
+ */ /**
  * Hook to access to the ThemeResourceContext. The context provides access to different groups
  * of React components provided by the active theme.
- * @returns Value of the ThemeResourceContext
- */export function useThemeResources(){return useContext(ThemeResourcesContext);}// eslint-disable-next-line valid-jsdoc
-/**
+ * @returns {ThemeResourcesContextType} Value of the ThemeResourceContext
+ */export function useThemeResources(){return useContext(ThemeResourcesContext);}/**
  * Hook to access the components provided by the ThemeResourceContext
- * @returns Mapping object that contains multiple components provided by the theme.
+ * @returns {ThemeComponentsType} Mapping object that contains multiple components provided by the
+ * theme.
  * Key is the component name, value is the component
- */export function useThemeComponents(){var _useThemeResources=useThemeResources(),components=_useThemeResources.components;return components;}// eslint-disable-next-line valid-jsdoc
-/**
+ */export function useThemeComponents(){var _useThemeResources=useThemeResources(),components=_useThemeResources.components;return components;}/**
  * Hook to access the widgets provided by the ThemeResourceContext
- * @returns Mapping object that contains all available widgets. Key is the widget code, value is
- * the widget component.
+ * @returns {ThemeWidgetsType} Mapping object that contains all available widgets.
+ * Key is the widget code, value is the widget component.
  */export function useThemeWidgets(){var _useThemeResources2=useThemeResources(),widgets=_useThemeResources2.widgets;return widgets;}

package/core/index.js

@@ -1,3 +1,5 @@
 /** @module core */ // --------------- STORE --------------- //
 export*from'@shopgate/pwa-common/store';// --------------- CONFIG --------------- //
-export{ThemeConfigResolver}from"./config/ThemeConfigResolver";export{getThemeConfig}from"./config/getThemeConfig";export{getThemeSettings}from"./config/getThemeSettings";export{getThemeColors}from"./config/getThemeColors";export{getThemeAssets}from"./config/getThemeAssets";export{getPageConfig}from"./config/getPageConfig";export{getPageSettings}from"./config/getPageSettings";export{getWidgetConfig}from"./config/getWidgetConfig";export{getWidgetSettings}from"./config/getWidgetSettings";export*from"./actions";export*from"./action-creators";export*from"./classes";export*from"./collections";export*from"./commands";export*from"./constants";export*from"./contexts";export*from"./events";export*from"./helpers";export*from"./hocs";export*from"./hooks";export*from"./initialization";export*from"./providers";export*from"./selectors";export*from"./streams";export*from"./validation";
+export{ThemeConfigResolver}from"./config/ThemeConfigResolver";export{getThemeConfig}from"./config/getThemeConfig";export{getThemeSettings}from"./config/getThemeSettings";export{getThemeColors}from"./config/getThemeColors";export{getThemeAssets}from"./config/getThemeAssets";export{getPageConfig}from"./config/getPageConfig";export{getPageSettings}from"./config/getPageSettings";export{getWidgetConfig}from"./config/getWidgetConfig";export{getWidgetSettings}from"./config/getWidgetSettings";export*from"./actions";export*from"./action-creators";export*from"./classes";export*from"./collections";export*from"./commands";export*from"./constants";export*from"./contexts";export*from"./events";export*from"./helpers";// Only export HOCs that existed before the hoc folder existed
+export{withShowModal,withTheme,withRoute,withCurrentProduct,withForwardedRef,withNavigation,withWidgetSettings,withWidgetStyles,withApp}from"./hocs";// Only export hooks that existed before the hooks folder existed
+export{useAsyncMemo,useRoute,useTheme,useApp,useCurrentProduct,useNavigation,usePageConfig,usePageSettings,useWidgetConfig,useWidgetSettings,useWidgetStyles,useLoadImage,usePrevious,useResponsiveValue}from"./hooks";export*from"./initialization";export*from"./providers";export*from"./selectors";export*from"./streams";export*from"./validation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.27.2-beta.1",
+  "version": "7.27.2-beta.3",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -16,12 +16,12 @@
   ],
   "dependencies": {
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.27.2-beta.1",
-    "@shopgate/pwa-common-commerce": "7.27.2-beta.1",
-    "@shopgate/pwa-core": "7.27.2-beta.1",
-    "@shopgate/pwa-ui-ios": "7.27.2-beta.1",
-    "@shopgate/pwa-ui-material": "7.27.2-beta.1",
-    "@shopgate/pwa-ui-shared": "7.27.2-beta.1",
+    "@shopgate/pwa-common": "7.27.2-beta.3",
+    "@shopgate/pwa-common-commerce": "7.27.2-beta.3",
+    "@shopgate/pwa-core": "7.27.2-beta.3",
+    "@shopgate/pwa-ui-ios": "7.27.2-beta.3",
+    "@shopgate/pwa-ui-material": "7.27.2-beta.3",
+    "@shopgate/pwa-ui-shared": "7.27.2-beta.3",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",