@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/core/hocs/withThemeResources.js

@@ -1,14 +1,34 @@
-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);}import React from'react';import{useThemeResources,useThemeComponents,useThemeWidgets}from'@shopgate/engage/core/hooks';/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useThemeResources, useThemeComponents, useThemeWidgets } from '@shopgate/engage/core/hooks';
+
+/**
  * HOC that injects the value of the ThemeResources context as a prop called `themeResources`.
  * The context provides access to different groups of React components provided by the theme.
  * @param {React.ComponentType<any>} WrappedComponent The wrapped component
  * @returns {React.FC<any>}
- */export var withThemeResources=function withThemeResources(WrappedComponent){return function ThemeResourcesWrapper(props){var themeResources=useThemeResources();return React.createElement(WrappedComponent,_extends({},props,{themeResources:themeResources}));};};/**
+ */
+export const withThemeResources = WrappedComponent => function ThemeResourcesWrapper(props) {
+  const themeResources = useThemeResources();
+  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+    themeResources: themeResources
+  }));
+};
+
+/**
  * HOC that injects the `components` value of the ThemeResources context as a prop called
  * `themeComponents`.
  * @param {React.ComponentType<any>} WrappedComponent The wrapped component
  * @returns {React.FC<any>}
- */export var withThemeComponents=function withThemeComponents(WrappedComponent){return function ThemeResourcesWrapper(props){var themeComponents=useThemeComponents();return React.createElement(WrappedComponent,_extends({},props,{themeComponents:themeComponents}));};};/**
+ */
+export const withThemeComponents = WrappedComponent => function ThemeResourcesWrapper(props) {
+  const themeComponents = useThemeComponents();
+  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+    themeComponents: themeComponents
+  }));
+};
+
+/**
  * HOC that injects the `widgets` value of the ThemeResources context as a prop called
  * `themeWidgets`.
  * @param {React.ComponentType<any>} WrappedComponent The wrapped component
@@ -16,4 +36,13 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {"v1"|"v2"} [options.version='v1'] The API version of the widgets to return. Can be 'v1'
  * or 'v2'.
  * @returns {React.FC<any>}
- */export var withThemeWidgets=function withThemeWidgets(WrappedComponent){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return function ThemeResourcesWrapper(props){var _options$version=options.version,version=_options$version===void 0?'v1':_options$version;var themeWidgets=useThemeWidgets(version);return React.createElement(WrappedComponent,_extends({},props,{themeWidgets:themeWidgets}));};};
+ */
+export const withThemeWidgets = (WrappedComponent, options = {}) => function ThemeResourcesWrapper(props) {
+  const {
+    version = 'v1'
+  } = options;
+  const themeWidgets = useThemeWidgets(version);
+  return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+    themeWidgets: themeWidgets
+  }));
+};

package/core/hocs/withWidgetSettings.js

@@ -1,4 +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);}import React from'react';import{useWidgetSettings}from"../hooks/useWidgetSettings";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useWidgetSettings } from "../hooks/useWidgetSettings";
+
+/**
  * Injects the widget - configuration - settings for a specific widget by its id and
  * an optional index. into the desired component.  If no index is given it will inject the first
  * found widget - configuration - settings by widgetId.
@@ -6,8 +10,20 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {string} widgetId The id of the widget to look for, which must exist in the config.
  * @param {number|undefined} [index] The optional index of the widget.
  * @returns {JSX}
- */export function withWidgetSettings(WrappedComponent,widgetId,index){/**
+ */
+export function withWidgetSettings(WrappedComponent, widgetId, index) {
+  /**
    * The actual HOC.
    * @param {Object} props The component props.
    * @returns {JSX}
-   */var WithWidgetSettings=function WithWidgetSettings(props){var settings=useWidgetSettings(widgetId,index);return React.createElement(WrappedComponent,_extends({widgetSettings:settings},props));};var displayName=WrappedComponent.displayName||WrappedComponent.name||'Component';WithWidgetSettings.displayName="WithWidgetSettings(".concat(displayName,")");return WithWidgetSettings;}
+   */
+  const WithWidgetSettings = props => {
+    const settings = useWidgetSettings(widgetId, index);
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+      widgetSettings: settings
+    }, props));
+  };
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  WithWidgetSettings.displayName = `WithWidgetSettings(${displayName})`;
+  return WithWidgetSettings;
+}

package/core/hocs/withWidgetStyles.js

@@ -1,11 +1,27 @@
-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);}import React from'react';import{useWidgetStyles}from"../hooks/useWidgetStyles";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useWidgetStyles } from "../hooks/useWidgetStyles";
+
+/**
  * Retrieves the styles for a specific widget by its ID.
  * @param {Function} WrappedComponent The react component to wrap.
  * @param {string} widgetId The id of the widget to look for, which must exist in the config.
  * @param {number|undefined} [index] The optional index of the widget.
  * @returns {Object}
- */export function withWidgetStyles(WrappedComponent,widgetId,index){/**
+ */
+export function withWidgetStyles(WrappedComponent, widgetId, index) {
+  /**
    * The actual HOC.
    * @param {Object} props The component props.
    * @returns {JSX}
-   */var WithWidgetStyles=function WithWidgetStyles(props){var styles=useWidgetStyles(widgetId,index);return React.createElement(WrappedComponent,_extends({widgetStyles:styles},props));};var displayName=WrappedComponent.displayName||WrappedComponent.name||'Component';WithWidgetStyles.displayName="WithWidgetStyles(".concat(displayName,")");return WithWidgetStyles;}
+   */
+  const WithWidgetStyles = props => {
+    const styles = useWidgetStyles(widgetId, index);
+    return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
+      widgetStyles: styles
+    }, props));
+  };
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  WithWidgetStyles.displayName = `WithWidgetStyles(${displayName})`;
+  return WithWidgetStyles;
+}

package/core/hooks/events/index.js

@@ -1 +1,3 @@
-export{default as usePressHandler}from"./usePressHandler";export{default as useLongPress}from"./useLongPress";export{default as useScrollDirectionChange}from"./useScrollDirectionChange";
+export { default as usePressHandler } from "./usePressHandler";
+export { default as useLongPress } from "./useLongPress";
+export { default as useScrollDirectionChange } from "./useScrollDirectionChange";

package/core/hooks/events/useLongPress.js

@@ -1,13 +1,56 @@
 // @ts-check
-import{useRef,useCallback}from'react';/** @typedef {import('./useLongPress').LongPressHandlers} LongPressHandlers */ /** @typedef {import('./useLongPress').UseLongPressOptions} UseLongPressOptions */ /**
+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();};// eslint-disable-next-line valid-jsdoc
+ */
+const preventContextMenu = e => {
+  e.preventDefault();
+};
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Custom hook to handle long press interactions.
  *
  * @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;/** @type {import('react').MutableRefObject<number | undefined>} */var timerRef=useRef(undefined);var triggeredRef=useRef(false);var start=useCallback(function(e){if(onStart)onStart(e);triggeredRef.current=false;timerRef.current=window.setTimeout(function(){callback(e);triggeredRef.current=true;if(onFinish)onFinish(e);},threshold);},[onStart,threshold,callback,onFinish]);var cancel=useCallback(function(e){window.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};}
+ */
+export default function useLongPress(callback, {
+  threshold = 1000,
+  onStart,
+  onFinish,
+  onCancel
+} = {}) {
+  /** @type {import('react').MutableRefObject<number | undefined>} */
+  const timerRef = useRef(undefined);
+  const triggeredRef = useRef(false);
+  const start = useCallback(e => {
+    if (onStart) onStart(e);
+    triggeredRef.current = false;
+    timerRef.current = window.setTimeout(() => {
+      callback(e);
+      triggeredRef.current = true;
+      if (onFinish) onFinish(e);
+    }, threshold);
+  }, [onStart, threshold, callback, onFinish]);
+  const cancel = useCallback(e => {
+    window.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/usePressHandler.js

@@ -1,8 +1,12 @@
-import{useCallback}from'react';/**
+import { useCallback } from 'react';
+
+/**
  * @typedef {Object} PressHandlers
  * @property {Function} onClick - Click event handler.
  * @property {Function} onKeyDown - Keydown handler for Enter/Space.
- */ /**
+ */
+
+/**
  * Improves development for accessibility by simplifying registration of multiple
  * listeners (click, Enter, Space) to invoke the a callback when an element is
  * interacted with.
@@ -33,6 +37,30 @@ import{useCallback}from'react';/**
  *   )
  * }
  * ```
- */function usePressHandler(onPress){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$triggerOnSpa=options.triggerOnSpace,triggerOnSpace=_options$triggerOnSpa===void 0?true:_options$triggerOnSpa,_options$triggerOnEnt=options.triggerOnEnter,triggerOnEnter=_options$triggerOnEnt===void 0?false:_options$triggerOnEnt;var handleKeyDown=useCallback(function(e){// Check for Enter
-if(triggerOnEnter&&e.key==='Enter'){e.preventDefault();onPress(e);}// Check for Space (may be ' ' or 'Spacebar')
-if(triggerOnSpace&&(e.key===' '||e.key==='Spacebar')){e.preventDefault();onPress(e);}},[onPress,triggerOnEnter,triggerOnSpace]);var handleClick=useCallback(function(e){onPress(e);},[onPress]);return{onClick:handleClick,onKeyDown:handleKeyDown};}export default usePressHandler;
+ */
+function usePressHandler(onPress, options = {}) {
+  const {
+    triggerOnSpace = true,
+    triggerOnEnter = false
+  } = options;
+  const handleKeyDown = useCallback(e => {
+    // Check for Enter
+    if (triggerOnEnter && e.key === 'Enter') {
+      e.preventDefault();
+      onPress(e);
+    }
+    // Check for Space (may be ' ' or 'Spacebar')
+    if (triggerOnSpace && (e.key === ' ' || e.key === 'Spacebar')) {
+      e.preventDefault();
+      onPress(e);
+    }
+  }, [onPress, triggerOnEnter, triggerOnSpace]);
+  const handleClick = useCallback(e => {
+    onPress(e);
+  }, [onPress]);
+  return {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  };
+}
+export default usePressHandler;

package/core/hooks/events/useScrollDirectionChange.js

@@ -1,18 +1,93 @@
-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 */ /**
+// @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 {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,_ref$onlyFireOnScroll=_ref.onlyFireOnScrollUpAtTop,onlyFireOnScrollUpAtTop=_ref$onlyFireOnScroll===void 0?false:_ref$onlyFireOnScroll,_ref$onlyFireOnScroll2=_ref.onlyFireOnScrollUpAtTopOffset,onlyFireOnScrollUpAtTopOffset=_ref$onlyFireOnScroll2===void 0?0:_ref$onlyFireOnScroll2,onScrollUp=_ref.onScrollUp,onScrollDown=_ref.onScrollDown;var lastDirectionRef=useRef(null);var downTriggeredRef=useRef(false);var upTriggeredRef=useRef(false);/**
+ */
+export default function useScrollDirectionChange({
+  enabled,
+  offset = 100,
+  onlyFireOnDirectionChange = true,
+  onlyFireOnScrollUpAtTop = false,
+  onlyFireOnScrollUpAtTopOffset = 0,
+  onScrollUp,
+  onScrollDown
+}) {
+  const lastDirectionRef = useRef(null);
+  const downTriggeredRef = useRef(false);
+  const upTriggeredRef = useRef(false);
+
+  /**
    * Scroll event handler.
    * Uses `event.direction` and triggers callbacks accordingly.
-   */var handleScroll=useCallback(/** @param {ViewScrollEvent} event The event */function(event){if(!enabled||!event.scrolled||!event.direction)return;var scrollTop=event.scrollTop,direction=event.direction;var prevDirection=lastDirectionRef.current;var directionChanged=direction!==prevDirection;// Store current direction and reset flags if direction changed
-if(directionChanged){// @ts-expect-error
-lastDirectionRef.current=direction;if(direction==='down')downTriggeredRef.current=false;if(direction==='up')upTriggeredRef.current=false;}// 🔽 Handle downward scroll
-if(direction==='down'){var shouldFire=(!onlyFireOnDirectionChange||directionChanged||!downTriggeredRef.current)&&scrollTop>=offset;if(shouldFire&&typeof onScrollDown==='function'){downTriggeredRef.current=true;// Strip internal/legacy properties
-var scrollIn=event.scrollIn,scrollOut=event.scrollOut,scrolled=event.scrolled,publicEvent=_objectWithoutProperties(event,_excluded);onScrollDown(publicEvent);}}// 🔼 Handle upward scroll
-if(direction==='up'){// if user wants “only fire at the very top” and we’re not at 0, skip
-if(onlyFireOnScrollUpAtTop&&scrollTop>onlyFireOnScrollUpAtTopOffset){return;}var _shouldFire=!onlyFireOnDirectionChange||directionChanged||!upTriggeredRef.current;if(_shouldFire&&typeof onScrollUp==='function'){upTriggeredRef.current=true;var _scrollIn=event.scrollIn,_scrollOut=event.scrollOut,_scrolled=event.scrolled,_publicEvent=_objectWithoutProperties(event,_excluded2);onScrollUp(_publicEvent);}}},[enabled,onlyFireOnDirectionChange,offset,onScrollDown,onlyFireOnScrollUpAtTop,onlyFireOnScrollUpAtTopOffset,onScrollUp]);useEffect(function(){if(!enabled)return undefined;var subscription=viewScroll$.subscribe(handleScroll);return function(){return subscription.unsubscribe();};},[enabled,handleScroll]);}
+   */
+  const handleScroll = useCallback(/** @param {ViewScrollEvent} event The event */
+  event => {
+    if (!enabled || !event.scrolled || !event.direction) return;
+    const {
+      scrollTop,
+      direction
+    } = event;
+    const prevDirection = lastDirectionRef.current;
+    const directionChanged = direction !== prevDirection;
+
+    // Store current direction and reset flags if direction changed
+    if (directionChanged) {
+      // @ts-expect-error
+      lastDirectionRef.current = direction;
+      if (direction === 'down') downTriggeredRef.current = false;
+      if (direction === 'up') upTriggeredRef.current = false;
+    }
+
+    // 🔽 Handle downward scroll
+    if (direction === 'down') {
+      const shouldFire = (!onlyFireOnDirectionChange || directionChanged || !downTriggeredRef.current) && scrollTop >= offset;
+      if (shouldFire && typeof onScrollDown === 'function') {
+        downTriggeredRef.current = true;
+
+        // Strip internal/legacy properties
+        const {
+          scrollIn,
+          scrollOut,
+          scrolled,
+          ...publicEvent
+        } = event;
+        onScrollDown(publicEvent);
+      }
+    }
+
+    // 🔼 Handle upward scroll
+    if (direction === 'up') {
+      // if user wants “only fire at the very top” and we’re not at 0, skip
+      if (onlyFireOnScrollUpAtTop && scrollTop > onlyFireOnScrollUpAtTopOffset) {
+        return;
+      }
+      const shouldFire = !onlyFireOnDirectionChange || directionChanged || !upTriggeredRef.current;
+      if (shouldFire && typeof onScrollUp === 'function') {
+        upTriggeredRef.current = true;
+        const {
+          scrollIn,
+          scrollOut,
+          scrolled,
+          ...publicEvent
+        } = event;
+        onScrollUp(publicEvent);
+      }
+    }
+  }, [enabled, onlyFireOnDirectionChange, offset, onScrollDown, onlyFireOnScrollUpAtTop, onlyFireOnScrollUpAtTopOffset, onScrollUp]);
+  useEffect(() => {
+    if (!enabled) return undefined;
+    const subscription = viewScroll$.subscribe(handleScroll);
+    return () => subscription.unsubscribe();
+  }, [enabled, handleScroll]);
+}

package/core/hooks/html/index.js

@@ -1 +1 @@
-export{useLoadImage}from"./useLoadImage";
+export { useLoadImage } from "./useLoadImage";

package/core/hooks/html/useLoadImage.js

@@ -1,5 +1,17 @@
-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}from'react';import{loadImage}from'@shopgate/pwa-common/helpers/html/handleDOM';/**
+import { useState, useEffect } from 'react';
+import { loadImage } from '@shopgate/pwa-common/helpers/html/handleDOM';
+
+/**
  * Load image hook
  * @param {string} src .
  * @returns {boolean}
- */export function useLoadImage(src){var _useState=useState(false),_useState2=_slicedToArray(_useState,2),loaded=_useState2[0],setIsLoaded=_useState2[1];useEffect(function(){if(src&&!loaded){loadImage(src).then(function(){return setIsLoaded(true);});}},[loaded,src]);return loaded;}
+ */
+export function useLoadImage(src) {
+  const [loaded, setIsLoaded] = useState(false);
+  useEffect(() => {
+    if (src && !loaded) {
+      loadImage(src).then(() => setIsLoaded(true));
+    }
+  }, [loaded, src]);
+  return loaded;
+}

package/core/hooks/index.js

@@ -1 +1,17 @@
-export*from"./layout";export*from"./events";export{useAsyncMemo}from"./useAsyncMemo";export{useRoute}from"./useRoute";export{useTheme}from"./useTheme";export{useApp}from"./useApp";export{useCurrentProduct}from"./useCurrentProduct";export{useNavigation}from"./useNavigation";export{usePageConfig}from"./usePageConfig";export{usePageSettings}from"./usePageSettings";export{useWidgetConfig}from"./useWidgetConfig";export{useWidgetSettings}from"./useWidgetSettings";export{useWidgetStyles}from"./useWidgetStyles";export{useThemeResources,useThemeComponents,useThemeWidgets}from"./useThemeResources";export*from"./html";export{usePrevious}from"./usePrevious";export{useResponsiveValue}from'@shopgate/engage/components/ResponsiveContainer/hooks';
+export * from "./layout";
+export * from "./events";
+export { useAsyncMemo } from "./useAsyncMemo";
+export { useRoute } from "./useRoute";
+export { useTheme } from "./useTheme";
+export { useApp } from "./useApp";
+export { useCurrentProduct } from "./useCurrentProduct";
+export { useNavigation } from "./useNavigation";
+export { usePageConfig } from "./usePageConfig";
+export { usePageSettings } from "./usePageSettings";
+export { useWidgetConfig } from "./useWidgetConfig";
+export { useWidgetSettings } from "./useWidgetSettings";
+export { useWidgetStyles } from "./useWidgetStyles";
+export { useThemeResources, useThemeComponents, useThemeWidgets } from "./useThemeResources";
+export * from "./html";
+export { usePrevious } from "./usePrevious";
+export { useResponsiveValue } from '@shopgate/engage/components/ResponsiveContainer/hooks';

package/core/hooks/layout/index.js

@@ -1 +1 @@
-export{default as useElementSize}from"./useElementSize";
+export { default as useElementSize } from "./useElementSize";

package/core/hooks/layout/useElementSize.js

@@ -1,18 +1,94 @@
-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 */ /**
+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 {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;/**
+ */
+export default function useElementSize(ref, options = {}) {
+  const {
+    throttleMs = 100,
+    includeWidth = false
+  } = options;
+
+  /**
    * Holds the current element size in state.
-   */var _useState=useState(_extends({height:0},includeWidth&&{width:0})),_useState2=_slicedToArray(_useState,2),size=_useState2[0],setSize=_useState2[1];/**
+   */
+  const [size, setSize] = useState({
+    height: 0,
+    ...(includeWidth && {
+      width: 0
+    })
+  });
+
+  /**
    * Tracks the most recent measured size to prevent unnecessary state updates.
-   */var sizeRef=useRef(size);useEffect(function(){var element=ref.current;if(!element)return undefined;/**
+   */
+  const sizeRef = useRef(size);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return undefined;
+
+    /**
      * Measures the current size of the element and updates state if it changed.
-     */var updateSize=function updateSize(){var newHeight=element.offsetHeight;var newWidth=includeWidth?element.offsetWidth:undefined;var hasChanged=newHeight!==sizeRef.current.height||includeWidth&&newWidth!==sizeRef.current.width;if(hasChanged){var newSize=_extends({height:newHeight},includeWidth?{width:newWidth}:{});sizeRef.current=newSize;setSize(newSize);}};/**
+     */
+    const updateSize = () => {
+      const newHeight = element.offsetHeight;
+      const newWidth = includeWidth ? element.offsetWidth : undefined;
+      const hasChanged = newHeight !== sizeRef.current.height || includeWidth && newWidth !== sizeRef.current.width;
+      if (hasChanged) {
+        const newSize = {
+          height: newHeight,
+          ...(includeWidth ? {
+            width: newWidth
+          } : {})
+        };
+        sizeRef.current = newSize;
+        setSize(newSize);
+      }
+    };
+
+    /**
      * Throttles the update function to limit how often measurements occur.
-     */var throttledUpdate=throttle(updateSize,throttleMs);/**
+     */
+    const throttledUpdate = throttle(updateSize, throttleMs);
+
+    /**
      * Sets up ResizeObserver or fallback observers to trigger measurement.
-     */var cleanup=function cleanup(){};if('ResizeObserver'in window){var resizeObserver=new ResizeObserver(throttledUpdate);resizeObserver.observe(element);updateSize();cleanup=function cleanup(){resizeObserver.disconnect();throttledUpdate.cancel();};}else{window.addEventListener('resize',throttledUpdate);var mutationObserver=new MutationObserver(throttledUpdate);mutationObserver.observe(element,{childList:true,subtree:true,characterData:true});updateSize();cleanup=function cleanup(){window.removeEventListener('resize',throttledUpdate);mutationObserver.disconnect();throttledUpdate.cancel();};}return cleanup;},[ref,throttleMs,includeWidth]);return size;}
+     */
+    let cleanup = () => {};
+    if ('ResizeObserver' in window) {
+      const resizeObserver = new ResizeObserver(throttledUpdate);
+      resizeObserver.observe(element);
+      updateSize();
+      cleanup = () => {
+        resizeObserver.disconnect();
+        throttledUpdate.cancel();
+      };
+    } else {
+      window.addEventListener('resize', throttledUpdate);
+      const mutationObserver = new MutationObserver(throttledUpdate);
+      mutationObserver.observe(element, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+      updateSize();
+      cleanup = () => {
+        window.removeEventListener('resize', throttledUpdate);
+        mutationObserver.disconnect();
+        throttledUpdate.cancel();
+      };
+    }
+    return cleanup;
+  }, [ref, throttleMs, includeWidth]);
+  return size;
+}

package/core/hooks/useApp.js

@@ -1,4 +1,11 @@
-import{useContext}from'react';import AppContext from"../contexts/AppContext";/**
+import { useContext } from 'react';
+import AppContext from "../contexts/AppContext";
+
+/**
  * Provides the properties of the app context.
  * @returns {Object}
- */export function useApp(){var appContext=useContext(AppContext);return appContext;}
+ */
+export function useApp() {
+  const appContext = useContext(AppContext);
+  return appContext;
+}

package/core/hooks/useAsyncMemo.js

@@ -1,12 +1,35 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}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 from'react';/**
+import React from 'react';
+
+/**
  * General purpose hook that allow a `React.useMemo` hook with
  * extended async support. The output contains the output value
  * from promise and a potential error object.
  * @param {Function} asyncFunction The function that will be executed to generate memoized output.
  * @param {Array} asyncFunctionDependencies
  *  A list of dependencies (same behavior as with `React.useMemo`)
- * @param {Any} initialValue The initial value that is set before promise is fulfilled.
+ * @param {any} initialValue The initial value that is set before promise is fulfilled.
  * @returns {Array}
- */export function useAsyncMemo(asyncFunction){var asyncFunctionDependencies=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];var initialValue=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;var _React$useState=React.useState(initialValue),_React$useState2=_slicedToArray(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1];var _React$useState3=React.useState(false),_React$useState4=_slicedToArray(_React$useState3,2),error=_React$useState4[0],setError=_React$useState4[1];/* eslint-disable react-hooks/exhaustive-deps */React.useEffect(function(){/**
+ */
+export function useAsyncMemo(asyncFunction, asyncFunctionDependencies = [], initialValue = null) {
+  const [value, setValue] = React.useState(initialValue);
+  const [error, setError] = React.useState(false);
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(() => {
+    /**
      * Wraps the async function as React doesn't allow direct async usage.
-     */var fn=/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var output;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return asyncFunction();case 3:output=_context.sent;setValue(output);_context.next=10;break;case 7:_context.prev=7;_context.t0=_context["catch"](0);setError(_context.t0);case 10:case"end":return _context.stop();}},_callee,null,[[0,7]]);}));return function fn(){return _ref.apply(this,arguments);};}();fn();},asyncFunctionDependencies);/* eslint-enable react-hooks/exhaustive-deps */return[value,error];}
+     */
+    const fn = async () => {
+      try {
+        const output = await asyncFunction();
+        setValue(output);
+      } catch (incomingError) {
+        setError(incomingError);
+      }
+    };
+    fn();
+  }, asyncFunctionDependencies);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  return [value, error];
+}

package/core/hooks/useCurrentProduct.js

@@ -1,5 +1,17 @@
-import{useContext}from'react';import{ThemeContext}from'@shopgate/pwa-common/context';/**
+import { useContext } from 'react';
+import { ThemeContext } from '@shopgate/pwa-common/context';
+
+/**
  * Provides the current product context props.
  * @returns {Object}
- */export function useCurrentProduct(){// The contexts are left out in favor of other hooks.
-var _useContext=useContext(ThemeContext),ProductContext=_useContext.contexts.ProductContext;var productProps=useContext(ProductContext);return productProps;}
+ */
+export function useCurrentProduct() {
+  // The contexts are left out in favor of other hooks.
+  const {
+    contexts: {
+      ProductContext
+    }
+  } = useContext(ThemeContext);
+  const productProps = useContext(ProductContext);
+  return productProps;
+}