@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.10

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;
+}

package/core/hooks/useFormState.js

@@ -1,8 +1,20 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";import _debounce from"lodash/debounce";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 _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 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{useRef,useState,useEffect,useCallback}from'react';import{useScrollTo}from"./useScrollTo";import{i18n}from"../helpers/i18n";import{useValidation}from"../validation";/**
+import _debounce from "lodash/debounce";
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useScrollTo } from "./useScrollTo";
+import { i18n } from "../helpers/i18n";
+import { useValidation } from "../validation";
+
+/**
  * Converts validation errors into errors for form builder.
  * @param {Object} validationErrors The validation errors.
  * @returns {Array}
- */export var convertValidationErrors=function convertValidationErrors(validationErrors){return Object.keys(validationErrors).map(function(key){return{path:key,message:i18n.text(validationErrors[key])};});};/**
+ */
+export const convertValidationErrors = validationErrors => Object.keys(validationErrors).map(key => ({
+  path: key,
+  message: i18n.text(validationErrors[key])
+}));
+
+/**
  * @param {Object} initialState The initial form state.
  * @param {Function} complete The completion callback.
  * @param {Object} validationConstraints validationConstraints
@@ -12,16 +24,139 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";import _debounce fro
  * on the page, the scroll logic might not be accurate. So this offset parameter can be used
  * to influence scroll behavior.
  * @returns {{ handleChange, handleSubmit, values, valid, validationErrors: ?Object, isSubmitting }}
- */export function useFormState(initialState,complete){var validationConstraints=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var formContainerRef=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var validationErrorScrollOffset=arguments.length>4&&arguments[4]!==undefined?arguments[4]:10;var _useScrollTo=useScrollTo(formContainerRef,validationErrorScrollOffset),scrollTo=_useScrollTo.scrollTo;// Submit lock prevents the form from being submitted multiple times
-var submitLock=useRef(false);var _useState=useState(initialState),_useState2=_slicedToArray(_useState,2),values=_useState2[0],setValues=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isSubmitting=_useState4[0],setSubmitting=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),changed=_useState6[0],setChanged=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),ignoreErrors=_useState8[0],setIgnoreErrors=_useState8[1];var _useValidation=useValidation(validationConstraints),valid=_useValidation.valid,validationErrors=_useValidation.validationErrors,validate=_useValidation.validate,reset=_useValidation.reset;var scrollToError=useCallback(function(){var errorElement=document.querySelector('.validationError');if(errorElement){scrollTo('.validationError');var inputElement=errorElement.querySelector('input, select, textarea');if(inputElement){inputElement.focus();}}},[scrollTo]);// -- CHANGED ---------------
-useEffect(function(){var isEqual=JSON.stringify(values)===JSON.stringify(initialState);if(!isEqual&&!changed){setChanged(true);}else if(isEqual&&changed){setChanged(false);}},[changed,initialState,values]);// -- IS_SUBMITTING ---------
-/* eslint-disable react-hooks/exhaustive-deps */useEffect(function(){if(!isSubmitting){return;}var mounted=true;if((valid===true||ignoreErrors)&&!submitLock.current){submitLock.current=true;_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return complete(values);case 2:if(mounted){setSubmitting(false);setChanged(false);submitLock.current=false;}case 3:case"end":return _context.stop();}},_callee);}))();}// eslint-disable-next-line consistent-return
-return function(){mounted=false;};},[isSubmitting,valid,ignoreErrors]);/* eslint-enable react-hooks/exhaustive-deps */useEffect(function(){scrollToError();},[isSubmitting,scrollToError]);useEffect(function(){return function(){submitLock.current=false;};},[]);// -- VALIDATION ON SUBMIT ---------
-useEffect(function(){if(ignoreErrors){return;}// Yest no validation on submit
-if(changed&&valid!==null){validate(values);}if(isSubmitting&&valid===null){validate(values);}if(isSubmitting&&valid===false){setSubmitting(false);}},[changed,validate,values,isSubmitting,valid,ignoreErrors]);var handleSetIgnoreErrors=useCallback(function(value){setIgnoreErrors(value);if(ignoreErrors===true){reset();}},[ignoreErrors,reset]);/**
+ */
+export function useFormState(initialState, complete, validationConstraints = {}, formContainerRef = null, validationErrorScrollOffset = 10) {
+  const {
+    scrollTo
+  } = useScrollTo(formContainerRef, validationErrorScrollOffset);
+
+  // Submit lock prevents the form from being submitted multiple times
+  const submitLock = useRef(false);
+  const [values, setValues] = useState(initialState);
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [changed, setChanged] = useState(false);
+  const [ignoreErrors, setIgnoreErrors] = useState(false);
+  const {
+    valid,
+    validationErrors,
+    validate,
+    reset
+  } = useValidation(validationConstraints);
+  const scrollToError = useCallback(() => {
+    const errorElement = document.querySelector('.validationError');
+    if (errorElement) {
+      scrollTo('.validationError');
+      const inputElement = errorElement.querySelector('input, select, textarea');
+      if (inputElement) {
+        inputElement.focus();
+      }
+    }
+  }, [scrollTo]);
+
+  // -- CHANGED ---------------
+  useEffect(() => {
+    const isEqual = JSON.stringify(values) === JSON.stringify(initialState);
+    if (!isEqual && !changed) {
+      setChanged(true);
+    } else if (isEqual && changed) {
+      setChanged(false);
+    }
+  }, [changed, initialState, values]);
+
+  // -- IS_SUBMITTING ---------
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    if (!isSubmitting) {
+      return;
+    }
+    let mounted = true;
+    if ((valid === true || ignoreErrors) && !submitLock.current) {
+      submitLock.current = true;
+      (async () => {
+        await complete(values);
+        if (mounted) {
+          setSubmitting(false);
+          setChanged(false);
+          submitLock.current = false;
+        }
+      })();
+    }
+    // eslint-disable-next-line consistent-return
+    return () => {
+      mounted = false;
+    };
+  }, [isSubmitting, valid, ignoreErrors]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  useEffect(() => {
+    scrollToError();
+  }, [isSubmitting, scrollToError]);
+  useEffect(() => () => {
+    submitLock.current = false;
+  }, []);
+
+  // -- VALIDATION ON SUBMIT ---------
+  useEffect(() => {
+    if (ignoreErrors) {
+      return;
+    }
+
+    // Yest no validation on submit
+    if (changed && valid !== null) {
+      validate(values);
+    }
+    if (isSubmitting && valid === null) {
+      validate(values);
+    }
+    if (isSubmitting && valid === false) {
+      setSubmitting(false);
+    }
+  }, [changed, validate, values, isSubmitting, valid, ignoreErrors]);
+  const handleSetIgnoreErrors = useCallback(value => {
+    setIgnoreErrors(value);
+    if (ignoreErrors === true) {
+      reset();
+    }
+  }, [ignoreErrors, reset]);
+
+  /**
    * @param {string} sanitized The sanitized field value.
    * @param {Object} event The change event object.
-   */var handleChange=useCallback(function(sanitized,event){if(!event){return;}setValues(_extends({},values,_defineProperty({},event.target.name,sanitized)));},[values]);/**
+   */
+  const handleChange = useCallback((sanitized, event) => {
+    if (!event) {
+      return;
+    }
+    setValues({
+      ...values,
+      [event.target.name]: sanitized
+    });
+  }, [values]);
+
+  /**
    * Debounced (dbl-click) submit handler
    * @param {Object} event The submit event object.
-   */var handleSubmit=_debounce(function(event){if(event===null||event===void 0?void 0:event.preventDefault){event.preventDefault();}setSubmitting(true);},300,{leading:true,trailing:false});return{resetValidationErrors:reset,handleChange:handleChange,handleSubmit:handleSubmit,values:values,valid:!ignoreErrors?valid:true,validationErrors:!ignoreErrors?validationErrors:[],isSubmitting:isSubmitting,setValues:setValues,scrollToError:scrollToError,setIgnoreErrors:handleSetIgnoreErrors,validate:validate};}
+   */
+  const handleSubmit = _debounce(event => {
+    if (event?.preventDefault) {
+      event.preventDefault();
+    }
+    setSubmitting(true);
+  }, 300, {
+    leading: true,
+    trailing: false
+  });
+  return {
+    resetValidationErrors: reset,
+    handleChange,
+    handleSubmit,
+    values,
+    valid: !ignoreErrors ? valid : true,
+    validationErrors: !ignoreErrors ? validationErrors : [],
+    isSubmitting,
+    setValues,
+    scrollToError,
+    setIgnoreErrors: handleSetIgnoreErrors,
+    validate
+  };
+}

package/core/hooks/useLocalStorage.d.ts

@@ -0,0 +1,8 @@
+  /**
+   * Custom hook to manage and persist state in localStorage.
+   * @param key The key under which the value is stored in localStorage.
+   * @returns A tuple containing the stored value and a function to update it.
+   */
+  export default function useLocalStorage<T = any>(
+    key: string
+  ): [T | null, (value: T) => void];

package/core/hooks/useLocalStorage.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from 'react';
+import { appConfig } from '@shopgate/engage';
+const {
+  appId
+} = appConfig;
+
+/**
+ * Custom hook to manage and persist state in localStorage.
+ * @param {string} key The key under which the value is stored in localStorage.
+ * @returns {[any, Function]} A tuple containing the stored value and a function to update it.
+ */
+export default function useLocalStorage(key) {
+  const readValue = useCallback(() => {
+    try {
+      return JSON.parse(window.localStorage.getItem(`${appId}_${key}`));
+    } catch (error) {
+      return null;
+    }
+  }, [key]);
+  const [storedValue, setStoredValue] = useState(readValue);
+
+  /**
+   * Sets a new value both in state and in localStorage.
+   * @param {any} value The new value to store.
+   */
+  const setValue = useCallback(value => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(`${appId}_${key}`, JSON.stringify(value));
+    } catch (error) {
+      //
+    }
+  }, [key]);
+  useEffect(() => {
+    setValue(readValue());
+  }, [readValue, setValue]);
+  return [storedValue, setValue];
+}

package/core/hooks/useNavigation.js

@@ -1,4 +1,15 @@
-import{push,pop,replace,reset,update}from"../router/helpers";/**
+import { push, pop, replace, reset, update } from "../router/helpers";
+
+/**
  * Provides functions for navigation.
  * @returns {Object}
- */export function useNavigation(){return{push:push,pop:pop,replace:replace,reset:reset,update:update};}
+ */
+export function useNavigation() {
+  return {
+    push,
+    pop,
+    replace,
+    reset,
+    update
+  };
+}

package/core/hooks/usePageConfig.js

@@ -1,6 +1,15 @@
-import{useRoute}from"./useRoute";import{getPageConfig}from"../config/getPageConfig";/**
+import { useRoute } from "./useRoute";
+import { getPageConfig } from "../config/getPageConfig";
+
+/**
  * Retrieves the pure configuration for the current page.
  * See documentation of `getPageConfig` for further details.
  *
  * @returns {Object}
- */export function usePageConfig(){var _useRoute=useRoute(),pagePattern=_useRoute.pattern;return getPageConfig(pagePattern);}
+ */
+export function usePageConfig() {
+  const {
+    pattern: pagePattern
+  } = useRoute();
+  return getPageConfig(pagePattern);
+}

package/core/hooks/usePageSettings.js

@@ -1,7 +1,16 @@
-import{useRoute}from"./useRoute";import{getPageSettings}from"../config/getPageSettings";/**
+import { useRoute } from "./useRoute";
+import { getPageSettings } from "../config/getPageSettings";
+
+/**
  * Retrieves the settings for the current page.
  * See documentation of `getPageSettings` for further details.
  *
  * @param {string} [key=null] Optional key to read and inherit from theme settings
  * @returns {Object}
- */export function usePageSettings(){var key=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var _useRoute=useRoute(),pagePattern=_useRoute.pattern;return getPageSettings(pagePattern,key);}
+ */
+export function usePageSettings(key = null) {
+  const {
+    pattern: pagePattern
+  } = useRoute();
+  return getPageSettings(pagePattern, key);
+}

package/core/hooks/usePrevious.js

@@ -1,2 +1,10 @@
-import React from'react';// eslint-disable-next-line require-jsdoc
-export function usePrevious(value){var ref=React.useRef(value);React.useEffect(function(){ref.current=value;},[value]);return ref.current;}
+import React from 'react';
+
+// eslint-disable-next-line require-jsdoc
+export function usePrevious(value) {
+  const ref = React.useRef(value);
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/core/hooks/useRoute.js

@@ -1,4 +1,11 @@
-import{useContext}from'react';import{RouteContext}from'@shopgate/pwa-common/context';/**
+import { useContext } from 'react';
+import { RouteContext } from '@shopgate/pwa-common/context';
+
+/**
  * Provides the route parameters.
  * @returns {Object}
- */export function useRoute(){var routeContext=useContext(RouteContext);return routeContext;}
+ */
+export function useRoute() {
+  const routeContext = useContext(RouteContext);
+  return routeContext;
+}

package/core/hooks/useScrollTo.js

@@ -1,5 +1,38 @@
-import{useCallback}from'react';import{getCSSCustomProp}from'@shopgate/engage/styles';import{hasWebBridge}from"../helpers/bridge";/**
+import { useCallback } from 'react';
+import { getCSSCustomProp } from '@shopgate/engage/styles';
+import { hasWebBridge } from "../helpers/bridge";
+
+/**
  * @param {Object} ref A ref to the scroll container
  * @param {number} [offset=10] Optional offset for the scroll operation
  * @returns {Object}
- */export var useScrollTo=function useScrollTo(ref){var offset=arguments.length>1&&arguments[1]!==undefined?arguments[1]:10;var scrollTo=useCallback(function(selector){if(!(ref===null||ref===void 0?void 0:ref.current)){return;}var firstElement=ref.current.querySelector(selector);if(firstElement){if(hasWebBridge()){var scrollOffset=offset;var appBarHeight=getCSSCustomProp('--app-bar-height')||0;var _firstElement$getBoun2=firstElement.getBoundingClientRect(),top=_firstElement$getBoun2.top;var scrollTop=top+window.pageYOffset-parseInt(appBarHeight,10)-scrollOffset;window.scroll({top:scrollTop,behavior:'smooth'});}else{firstElement.scrollIntoView({behavior:'smooth'});}}},[offset,ref]);return{scrollTo:scrollTo};};
+ */
+export const useScrollTo = (ref, offset = 10) => {
+  const scrollTo = useCallback(selector => {
+    if (!ref?.current) {
+      return;
+    }
+    const firstElement = ref.current.querySelector(selector);
+    if (firstElement) {
+      if (hasWebBridge()) {
+        const scrollOffset = offset;
+        const appBarHeight = getCSSCustomProp('--app-bar-height') || 0;
+        const {
+          top
+        } = firstElement.getBoundingClientRect();
+        const scrollTop = top + window.pageYOffset - parseInt(appBarHeight, 10) - scrollOffset;
+        window.scroll({
+          top: scrollTop,
+          behavior: 'smooth'
+        });
+      } else {
+        firstElement.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
+    }
+  }, [offset, ref]);
+  return {
+    scrollTo
+  };
+};

package/core/hooks/useTheme.js

@@ -1,4 +1,7 @@
-var _excluded=["contexts"];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{useContext}from'react';import{ThemeContext}from'@shopgate/pwa-common/context';// eslint-disable-next-line valid-jsdoc
+import { useContext } from 'react';
+import { ThemeContext } from '@shopgate/pwa-common/context';
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Provides the theme API. This does not include the contexts.
  * @deprecated
@@ -37,5 +40,12 @@ var _excluded=["contexts"];function _objectWithoutProperties(source,excluded){if
  * // Deprecated: { contexts: { ProductContext }} → use ProductContext
  * import { ProductContext } from '@shopgate/engage/product/contexts';
  * ```
- */export function useTheme(){// The contexts are left out in favor of other hooks.
-var _useContext=useContext(ThemeContext),contexts=_useContext.contexts,themeContext=_objectWithoutProperties(_useContext,_excluded);return themeContext;}
+ */
+export function useTheme() {
+  // The contexts are left out in favor of other hooks.
+  const {
+    contexts,
+    ...themeContext
+  } = useContext(ThemeContext);
+  return themeContext;
+}

package/core/hooks/useThemeResources.js

@@ -1,22 +1,50 @@
-import{useContext}from'react';import ThemeResourcesContext from"../contexts/ThemeResourcesContext";/**
+import { useContext } from 'react';
+import ThemeResourcesContext from "../contexts/ThemeResourcesContext";
+
+/**
  * @typedef  {import('../contexts/ThemeResourcesContext').ThemeResourcesContextType
  * ThemeResourcesContextType}
- */ /**
+ */
+
+/**
  * @typedef {import('../contexts/ThemeResourcesContext').ThemeComponentMap ThemeComponentMap}
- */ /**
+ */
+
+/**
  * @typedef {import('../contexts/ThemeResourcesContext').ThemeWidgetMap ThemeWidgetMap}
- */ /**
+ */
+
+/**
  * Hook to access to the ThemeResourceContext. The context provides access to different groups
  * of React components provided by the active theme.
  * @returns {ThemeResourcesContextType} Value of the ThemeResourceContext
- */export function useThemeResources(){return useContext(ThemeResourcesContext);}/**
+ */
+export function useThemeResources() {
+  return useContext(ThemeResourcesContext);
+}
+
+/**
  * Hook to access the components provided by the ThemeResourceContext
  * @returns {ThemeComponentMap} 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;}/**
+ */
+export function useThemeComponents() {
+  const {
+    components
+  } = useThemeResources();
+  return components;
+}
+
+/**
  * Hook to access the widgets provided by the ThemeResourceContext
  * @param {string} [version='v1'] The version of the widget API to use. Defaults to 'v1'.
  * @returns {ThemeWidgetMap} Mapping object that contains all available widgets.
  * Key is the widget code, value is the widget component.
- */export function useThemeWidgets(){var version=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'v1';var _useThemeResources2=useThemeResources(),widgets=_useThemeResources2.widgets;return widgets[version]?widgets[version]:widgets.v1;}
+ */
+export function useThemeWidgets(version = 'v1') {
+  const {
+    widgets
+  } = useThemeResources();
+  return widgets[version] ? widgets[version] : widgets.v1;
+}

package/core/hooks/useWidgetConfig.js

@@ -1,8 +1,17 @@
-import{useRoute}from"./useRoute";import{getWidgetConfig}from"../config/getWidgetConfig";/**
+import { useRoute } from "./useRoute";
+import { getWidgetConfig } from "../config/getWidgetConfig";
+
+/**
  * Retrieves the pure config for widget by its id and optional index on the current page.
  * See documentation of `getWidgetConfig` for further details.
  *
  * @param {string} widgetId The id of the widget to look for, which must exist in the config.
  * @param {number|undefined} [index=0] The optional index of the widget.
  * @returns {Object}
- */export function useWidgetConfig(widgetId){var index=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var _useRoute=useRoute(),pagePattern=_useRoute.pattern;return getWidgetConfig(pagePattern,widgetId,index);}
+ */
+export function useWidgetConfig(widgetId, index = 0) {
+  const {
+    pattern: pagePattern
+  } = useRoute();
+  return getWidgetConfig(pagePattern, widgetId, index);
+}