@shopgate/engage 7.25.1-beta.1 → 7.25.1-beta.2

package/a11y/components/Section/index.js

@@ -1,4 +1,4 @@
-var _excluded=["title","titleParams","children"];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;}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 React,{useRef,useState,useMemo,useLayoutEffect}from'react';import PropTypes from'prop-types';import kebabCase from'lodash/kebabCase';import{I18n}from'@shopgate/engage/components';import{VisuallyHidden}from"../index";/**
+var _excluded=["title","titleParams","children"];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;}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 React,{useRef,useState,useMemo,useLayoutEffect}from'react';import PropTypes from'prop-types';import kebabCase from'lodash/kebabCase';import{I18n}from'@shopgate/engage/components';import VisuallyHidden from"../VisuallyHidden";/**
  * Checks the section ref has suitable child nodes.
  * @param {Object} ref A React ref.
  * @param {string} headlineId The ID of the section headline.

package/cart/components/PaymentBar/PaymentBarContent.js

@@ -1,4 +1,4 @@
-import*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import Grid from'@shopgate/pwa-common/components/Grid';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR,CART_PAYMENT_BAR_TOTALS}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import PaymentBarShippingCost from"./PaymentBarShippingCost";import PaymentBarDiscounts from"./PaymentBarDiscounts";import PaymentBarTax from"./PaymentBarTax";import PaymentBarSubTotal from"./PaymentBarSubTotal";import PaymentBarGrandTotal from"./PaymentBarGrandTotal";import PaymentBarCheckoutButton from"./PaymentBarCheckoutButton";import PaymentBarPromotionCoupons from"./PaymentBarPromotionCoupons";import PaymentBarAppliedPromotions from"./PaymentBarAppliedPromotions";import{wrapper,container,checkoutButtonContainer,checkoutButton}from"./PaymentBarContent.style";/**
+import*as React from'react';import PropTypes from'prop-types';import Grid from'@shopgate/pwa-common/components/Grid';import{SurroundPortals}from'@shopgate/engage/components';import{CART_PAYMENT_BAR,CART_PAYMENT_BAR_TOTALS}from'@shopgate/pwa-common-commerce/cart/constants/Portals';import PaymentBarShippingCost from"./PaymentBarShippingCost";import PaymentBarDiscounts from"./PaymentBarDiscounts";import PaymentBarTax from"./PaymentBarTax";import PaymentBarSubTotal from"./PaymentBarSubTotal";import PaymentBarGrandTotal from"./PaymentBarGrandTotal";import PaymentBarCheckoutButton from"./PaymentBarCheckoutButton";import PaymentBarPromotionCoupons from"./PaymentBarPromotionCoupons";import PaymentBarAppliedPromotions from"./PaymentBarAppliedPromotions";import{wrapper,container,checkoutButtonContainer,checkoutButton}from"./PaymentBarContent.style";/**
  * The PaymentBarContent component.
  * @returns {JSX}
- */function PaymentBarContent(_ref){var showSeparator=_ref.showSeparator;return React.createElement("div",{className:classNames(wrapper,'theme__cart__payment-bar')},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR},React.createElement(Grid,{className:container},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS},React.createElement(PaymentBarSubTotal,{showSeparator:showSeparator}),React.createElement(PaymentBarAppliedPromotions,{showSeparator:showSeparator}),React.createElement(PaymentBarPromotionCoupons,{showSeparator:showSeparator}),React.createElement(PaymentBarDiscounts,{showSeparator:showSeparator}),React.createElement(PaymentBarShippingCost,{showSeparator:showSeparator}),React.createElement(PaymentBarTax,{showSeparator:showSeparator}),React.createElement(PaymentBarGrandTotal,{showSeparator:showSeparator}))),React.createElement("div",{className:checkoutButtonContainer},React.createElement("div",{className:checkoutButton},React.createElement(PaymentBarCheckoutButton,null)))));}PaymentBarContent.defaultProps={showSeparator:true};export default PaymentBarContent;
+ */function PaymentBarContent(_ref){var showSeparator=_ref.showSeparator;return React.createElement("div",{className:wrapper},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR},React.createElement(Grid,{className:container},React.createElement(SurroundPortals,{portalName:CART_PAYMENT_BAR_TOTALS},React.createElement(PaymentBarSubTotal,{showSeparator:showSeparator}),React.createElement(PaymentBarAppliedPromotions,{showSeparator:showSeparator}),React.createElement(PaymentBarPromotionCoupons,{showSeparator:showSeparator}),React.createElement(PaymentBarDiscounts,{showSeparator:showSeparator}),React.createElement(PaymentBarShippingCost,{showSeparator:showSeparator}),React.createElement(PaymentBarTax,{showSeparator:showSeparator}),React.createElement(PaymentBarGrandTotal,{showSeparator:showSeparator}))),React.createElement("div",{className:checkoutButtonContainer},React.createElement("div",{className:checkoutButton},React.createElement(PaymentBarCheckoutButton,null)))));}PaymentBarContent.defaultProps={showSeparator:true};export default PaymentBarContent;

package/cart/components/PaymentBar/PaymentBarContent.style.js

@@ -1 +1 @@
-import{css}from'glamor';import{isIOSTheme}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables,shadows=themeConfig.shadows;export var wrapper=css({background:colors.light,boxShadow:shadows.cart.paymentBar,position:'relative',zIndex:2,paddingBottom:'var(--safe-area-inset-bottom)'});export var container=css({padding:isIOSTheme()?variables.gap.small:variables.gap.big,paddingBottom:0,lineHeight:1.45,flexWrap:'wrap',flexDirection:'column',minWidth:'auto'}).toString();export var checkoutButton=css({display:'flex',justifyContent:'flex-end',flexDirection:'column'});export var checkoutButtonContainer=css({background:colors.light,alignItems:'center',padding:isIOSTheme()?variables.gap.small:variables.gap.big,position:'relative',zIndex:2});export var spacer=css({width:isIOSTheme()?27:32,order:1,flexShrink:0}).toString();
+import{css}from'glamor';import{isIOSTheme}from'@shopgate/engage/core';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables,shadows=themeConfig.shadows;export var wrapper=css({background:colors.light,boxShadow:shadows.cart.paymentBar,position:'relative',zIndex:2});export var container=css({padding:isIOSTheme()?variables.gap.small:variables.gap.big,paddingBottom:0,lineHeight:1.45,flexWrap:'wrap',flexDirection:'column',minWidth:'auto'}).toString();export var checkoutButton=css({display:'flex',justifyContent:'flex-end',flexDirection:'column'});export var checkoutButtonContainer=css({background:colors.light,alignItems:'center',padding:isIOSTheme()?variables.gap.small:variables.gap.big,position:'relative',zIndex:2});export var spacer=css({width:isIOSTheme()?27:32,order:1,flexShrink:0}).toString();

package/components/Footer/Footer.js

@@ -1,5 +1,24 @@
-import React,{useRef,useEffect,useCallback}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{UIEvents}from'@shopgate/engage/core/events';import{getAbsoluteHeight}from'@shopgate/engage/core/helpers';import{SHEET_EVENTS}from'@shopgate/engage/components';import*as classes from"./Footer.style";import{handleSafeAreaInsets,updateFooterHeight}from"./helpers";import{APP_FOOTER_ID,DATA_IGNORED}from"./constants";/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{APP_FOOTER_CONTENT_BEFORE,APP_FOOTER_CONTENT_AFTER}from'@shopgate/pwa-common/constants/Portals';import{getAbsoluteHeight,getStyle}from'@shopgate/pwa-common/helpers/dom';import{SHEET_EVENTS}from'@shopgate/pwa-ui-shared/Sheet';import{footer,updateInsetBackgroundColor,updateFooterHeight}from"./Footer.style";var APP_FOOTER_ID='AppFooter';var DATA_IGNORED='data-footer-inset-update-ignore';/**
  * The footer component.
- * @param {Object} props The component props.
- * @returns {JSX.Element}
- */var Footer=function Footer(_ref){var children=_ref.children;var footerRef=useRef(null);var performFooterUpdate=useCallback(function(){handleSafeAreaInsets(footerRef.current);updateFooterHeight(getAbsoluteHeight(footerRef.current));},[]);var handleShow=useCallback(function(){updateFooterHeight(getAbsoluteHeight(footerRef.current));},[]);var handleHide=useCallback(function(){updateFooterHeight(0);},[]);useEffect(function(){UIEvents.addListener(SHEET_EVENTS.OPEN,handleHide);UIEvents.addListener(SHEET_EVENTS.CLOSE,handleShow);return function(){UIEvents.removeListener(SHEET_EVENTS.OPEN,handleHide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,handleShow);};},[handleHide,handleShow]);useEffect(function(){performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){performFooterUpdate();}});observer.observe(footerRef.current,{childList:true,subtree:true,attributes:true,attributeFilter:['style','class']});return function(){observer.disconnect();};},[performFooterUpdate]);return React.createElement("div",{className:classNames(classes.footer,'engage__footer')},React.createElement("div",{id:APP_FOOTER_ID,ref:footerRef},children));};Footer.defaultProps={children:null};export default Footer;
+ */var Footer=/*#__PURE__*/function(_PureComponent){function Footer(){var _this2;_classCallCheck(this,Footer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Footer,[].concat(args));_defineProperty(_this2,"ref",React.createRef());/** Perform hide action */_defineProperty(_this2,"hide",function(){if(_this2.ref.current){updateFooterHeight(0);}});/** Perform show action */_defineProperty(_this2,"show",function(){if(_this2.ref.current){updateFooterHeight(getAbsoluteHeight(_this2.ref.current));}});return _this2;}_inherits(Footer,_PureComponent);return _createClass(Footer,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;this.performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){_this3.performFooterUpdate();}});observer.observe(this.ref.current,{attributes:true,childList:true,subtree:true});UIEvents.addListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.addListener(SHEET_EVENTS.CLOSE,this.show);}/** @inheritDoc */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,this.show);}},{key:"getInsetBackgroundColor",value:/**
+   * Retrieves the background color for the footer inset.
+   * @param {NodeList} elements The DOM elements to inspect.
+   * @returns {string|null}
+   */function getInsetBackgroundColor(elements){var _this4=this;/**
+     * The background color of the bottom inset needs to identical to the last entry of the footer.
+     * So we loop backwards to the elements to find the first visible one.
+     */var color=Array.from(elements).reverse().reduce(function(result,element){var ignore=element.getAttribute(DATA_IGNORED)==='true';if(result||ignore){// Nothing to do, since the color was already determined or the element can be ignored.
+return result;}if(element.id===APP_FOOTER_ID){// Inspect core portal.
+return _this4.getInsetBackgroundColor(element.children);}if('clientHeight'in element){// Take the background color of the last visible element from the end of the footer.
+return getStyle(element,'backgroundColor');}// Nothing happened within this loop - proceed with the next one.
+return result;},null);if(color==='rgba(0, 0, 0, 0)'||color==='transparent'){return null;}return color||null;}},{key:"performFooterUpdate",value:/**
+   * Performs an update of the footer: background color, height.
+   */function performFooterUpdate(){if(this.ref.current){updateFooterHeight(getAbsoluteHeight(this.ref.current));updateInsetBackgroundColor(this.getInsetBackgroundColor(this.ref.current.children));}}/**
+   * Checks if the footer has visible content.
+   * @returns {boolean}
+   */},{key:"hasVisibleContent",value:function hasVisibleContent(){if(this.ref.current){var elements=this.ref.current.parentElement.querySelectorAll("div.".concat(footer.toString()," > *:not(#").concat(APP_FOOTER_ID,"), #").concat(APP_FOOTER_ID," > *"));return Array.from(elements).filter(function(element){return element.getAttribute(DATA_IGNORED)!=='true'&&element.clientHeight>0;}).length>0;}return false;}/**
+   * @returns {JSX}
+   */},{key:"render",value:function render(){return React.createElement("div",{className:"".concat(footer," engage__footer"),ref:this.ref},React.createElement(Portal,{name:APP_FOOTER_CONTENT_BEFORE}),React.createElement("div",{id:APP_FOOTER_ID},this.props.children),React.createElement(Portal,{name:APP_FOOTER_CONTENT_AFTER}));}}]);}(PureComponent);_defineProperty(Footer,"defaultProps",{children:null/**
+   * Sets up the DOM Mutation Observer to take care that the footer inset always has the correct
+   * background color, which matches the background color of the last element within the footer.
+   */});export default Footer;

package/components/Footer/Footer.style.js

@@ -1 +1,7 @@
-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{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core/helpers';export var footer=css(_extends({bottom:0,flexShrink:1,position:'relative',zIndex:1},!useScrollContainer()?{position:'sticky'}:{}));
+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{css}from'glamor';import{useScrollContainer}from'@shopgate/engage/core/helpers/scrollContainer';var style=document.documentElement.style;/**
+ * Updates the background color of the bottom inset.
+ * @param {string} color The new background color
+ */export var updateInsetBackgroundColor=function updateInsetBackgroundColor(color){if(style.getPropertyValue('--footer-inset-background-color')!==color){style.setProperty('--footer-inset-background-color',color);}};/**
+ * Update the footer height
+ * @param {number} height height
+ */export var updateFooterHeight=function updateFooterHeight(height){var inset=Number(style.getPropertyValue('--safe-area-inset-bottom').replace(/\D/g,''));var footerHeight="".concat(inset+height,"px");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}};export var footer=css(_extends({bottom:0,flexShrink:1,position:'relative',zIndex:1},!useScrollContainer()?{position:'sticky'}:{},{':after':{backgroundColor:'var(--footer-inset-background-color, var(--page-background-color))',height:'var(--safe-area-inset-bottom)',content:' ',display:'inherit',position:'relative',zIndex:15}}));

package/components/ScrollHeader/index.js

@@ -1,5 +1,5 @@
-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";/**
+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,useCallback,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{viewScroll$}from'@shopgate/engage/core/streams';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 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];var onScroll=useCallback(function(scrollEvent){var scrollTop=scrollEvent.scrollTop,scrolled=scrollEvent.scrolled,scrollOut=scrollEvent.scrollOut,scrollIn=scrollEvent.scrollIn;if(!scrolled){return;}if(!shouldHideHeader&&scrollOut&&scrollTop>=scrollOffset){setShouldHideHeader(true);}if(shouldHideHeader&&scrollIn){setShouldHideHeader(false);}},[scrollOffset,shouldHideHeader]);useEffect(function(){if(hideOnScroll){var subscription=viewScroll$.subscribe(onScroll);return function(){return subscription.unsubscribe();};}return undefined;});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;

package/components/View/components/Content/index.js

@@ -23,6 +23,6 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
    * Removes the keyboardWillChange listener.
    */},{key:"componentWillUnmount",value:function componentWillUnmount(){var scrollTop;if(this.ref.current===window){scrollTop=window.scrollY;}else{scrollTop=this.ref.current.scrollTop;}router.update(this.context.id,{scrollTop:scrollTop},false);event.removeCallback(EVENT_KEYBOARD_WILL_CHANGE,this.handleKeyboardChange);}/**
    * @returns {Object}
-   */},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var keyboardHeight=this.state.keyboardHeight;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{overflow:overflow,paddingBottom:"calc(var(--page-content-offset-bottom) + ".concat(keyboardHeight,"px)")};}},{key:"render",value:/**
+   */},{key:"style",get:function get(){var noScrollOnKeyboard=this.props.noScrollOnKeyboard;var keyboardHeight=this.state.keyboardHeight;var overflow='inherit';if(this.scrollContainer){overflow=noScrollOnKeyboard&&keyboardHeight>0?'hidden':'auto';}return{overflow:overflow,paddingBottom:"calc(var(--tabbar-height) + ".concat(keyboardHeight,"px)")};}},{key:"render",value:/**
    * @return {JSX.Element}
    */function render(){return React.createElement(Swipeable,{onSwiped:this.handleSwipe,flickThreshold:0.6,delta:10},React.createElement("article",{className:"".concat(styles," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});

package/core/helpers/updateLegacyNavigationBar.js

@@ -1,7 +1,6 @@
-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 Color from'color';import{isAvailable,StatusBar}from'@shopgate/native-modules';import{broadcastEvent}from'@shopgate/engage/core/commands';import{isDev}from'@shopgate/engage/core/helpers';import{UIEvents}from'@shopgate/engage/core/events';/**
+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 Color from'color';import{isAvailable,StatusBar}from'@shopgate/native-modules';import broadcastEvent from'@shopgate/pwa-core/commands/broadcastEvent';/**
  * Updates the styles of the navigation bar of iOS devices.
  * @param {Object} options Options for the status bar.
  */export var updateLegacyNavigationBar=function updateLegacyNavigationBar(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var targetTab=options.targetTab||'main';var isDefault=options.isDefault;var styles=_extends({},options.color&&{color:options.color},{},options.background&&{background:options.background},{},options.buttonColor&&{buttonColor:options.buttonColor},{},options.buttonColorDisabled&&{buttonColorDisabled:options.buttonColorDisabled},{},options.statusBarBackground&&{statusBarBackground:options.statusBarBackground});if(!styles.statusBarBackground&&styles.background){styles.statusBarBackground=styles.background;}var statusBarStyle;if(options.statusBarStyle){statusBarStyle=options.statusBarStyle;}else if(styles.statusBarBackground){statusBarStyle=Color(styles.statusBarBackground).isDark()?'light':'dark';}// Status bar update via native-modules deactivated for now since it doesn't work
 // reliable when opening a page inside the In-App-Browser.
-if(false&&isAvailable()){var style=statusBarStyle==='dark'?'dark-content':'light-content';StatusBar.setBarStyle({style:style});if(styles.statusBarBackground){StatusBar.setBackgroundColor({color:styles.statusBarBackground});}return;}var payload=_extends({},statusBarStyle&&{statusBarStyle:statusBarStyle},{},isDefault&&{isDefault:isDefault},{targetTab:targetTab,styles:styles});broadcastEvent({event:'updateNavigationBarStyle',parameters:[payload]});if(isDev){// Dispatch the payload in dev as regular event, so that simulated top inset can adopt the color
-UIEvents.emit('devInternalUpdateStatusBarStyle',payload);}};
+if(false&&isAvailable()){var style=statusBarStyle==='dark'?'dark-content':'light-content';StatusBar.setBarStyle({style:style});if(styles.statusBarBackground){StatusBar.setBackgroundColor({color:styles.statusBarBackground});}return;}broadcastEvent({event:'updateNavigationBarStyle',parameters:[_extends({},statusBarStyle&&{statusBarStyle:statusBarStyle},{},isDefault&&{isDefault:isDefault},{targetTab:targetTab,styles:styles})]});};

package/core/hooks/index.js

@@ -1 +1 @@
-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*from"./html";export{default as useScrollDirectionChange}from"./useScrollDirectionChange";export{default as useLongPress}from"./useLongPress";export{usePrevious}from"./usePrevious";export{useResponsiveValue}from'@shopgate/engage/components/ResponsiveContainer/hooks';
+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*from"./html";export{useScroll}from"./useScroll";export{usePrevious}from"./usePrevious";export{useResponsiveValue}from'@shopgate/engage/components/ResponsiveContainer/hooks';

package/core/hooks/useScroll.js

@@ -0,0 +1,7 @@
+import _throttle from"lodash/throttle";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{useEffect,useState,useCallback}from'react';/**
+ *
+ * @param {Function} callback callback
+ * @param {Object} [element] element
+ */export function useScroll(callback,element){var _useState=useState(0),_useState2=_slicedToArray(_useState,2),setScrollPosition=_useState2[1];var previousScrollTop=0;/**
+   * Scroll handler
+   */var handleDocumentScroll=useCallback(_throttle(function(){var container=element||document.documentElement||document.body;var currentScrollTop=container.scrollY===undefined?container.scrollTop:container.scrollY;setScrollPosition(function(previousPosition){previousScrollTop=previousPosition;return currentScrollTop;});callback({previousScrollTop:previousScrollTop,currentScrollTop:currentScrollTop});},250),[setScrollPosition,element,callback]);useEffect(function(){(element||window).addEventListener('scroll',handleDocumentScroll);return function(){return(element||window).removeEventListener('scroll',handleDocumentScroll);};},[handleDocumentScroll,element]);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.25.1-beta.1",
+  "version": "7.25.1-beta.2",
   "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.22",
-    "@shopgate/pwa-common": "7.25.1-beta.1",
-    "@shopgate/pwa-common-commerce": "7.25.1-beta.1",
-    "@shopgate/pwa-core": "7.25.1-beta.1",
-    "@shopgate/pwa-ui-ios": "7.25.1-beta.1",
-    "@shopgate/pwa-ui-material": "7.25.1-beta.1",
-    "@shopgate/pwa-ui-shared": "7.25.1-beta.1",
+    "@shopgate/pwa-common": "7.25.1-beta.2",
+    "@shopgate/pwa-common-commerce": "7.25.1-beta.2",
+    "@shopgate/pwa-core": "7.25.1-beta.2",
+    "@shopgate/pwa-ui-ios": "7.25.1-beta.2",
+    "@shopgate/pwa-ui-material": "7.25.1-beta.2",
+    "@shopgate/pwa-ui-shared": "7.25.1-beta.2",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -1,4 +1,4 @@
 import React,{useEffect,memo}from'react';import PropTypes from'prop-types';import{Swiper,Card}from'@shopgate/engage/components';import ProductCard from"../ProductCard";import RelationsSheet from"./RelationsSheet";import{useWidgetSettings,useCurrentProduct}from"../../../core";import connect from"./RelationsSlider.connector";import{WIDGET_ID}from"./constants";import*as styles from"./style";/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var RelationsSliderContent=memo(function(_ref){var _ref$products=_ref.products,products=_ref$products.products,productsCount=_ref$products.productsCount,getRelations=_ref.getRelations;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline,hidePrice=_useWidgetSettings.hidePrice,hideRating=_useWidgetSettings.hideRating,titleRows=_useWidgetSettings.titleRows,showMoreButton=_useWidgetSettings.showMoreButton,type=_useWidgetSettings.type,_useWidgetSettings$sl=_useWidgetSettings.slidesPerView,slidesPerView=_useWidgetSettings$sl===void 0?2.3:_useWidgetSettings$sl;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;useEffect(function(){getRelations();},[getRelations]);if(products.length===0){return null;}return React.createElement("div",{className:styles.container},!!headline&&React.createElement("h3",{className:styles.headline},headline),!!showMoreButton&&productsCount>10&&React.createElement(RelationsSheet,{limit:100,productId:productId,type:type}),React.createElement(Swiper,{slidesPerView:slidesPerView,classNames:{container:styles.sliderContainer}},products.map(function(product){return React.createElement(Swiper.Item,{key:product.id},React.createElement(Card,{className:styles.card},React.createElement(ProductCard,{product:product,hidePrice:hidePrice,hideName:false,hideRating:hideRating,titleRows:titleRows})));})));});RelationsSliderContent.defaultProps={products:{products:[],productsCount:0}};export default connect(RelationsSliderContent);
+ */var RelationsSliderContent=memo(function(_ref){var _ref$products=_ref.products,products=_ref$products.products,productsCount=_ref$products.productsCount,getRelations=_ref.getRelations;var _useWidgetSettings=useWidgetSettings(WIDGET_ID),headline=_useWidgetSettings.headline,hidePrice=_useWidgetSettings.hidePrice,hideRating=_useWidgetSettings.hideRating,titleRows=_useWidgetSettings.titleRows,showMoreButton=_useWidgetSettings.showMoreButton,type=_useWidgetSettings.type,_useWidgetSettings$sl=_useWidgetSettings.slidesPerView,slidesPerView=_useWidgetSettings$sl===void 0?2.3:_useWidgetSettings$sl;var _useCurrentProduct=useCurrentProduct(),productId=_useCurrentProduct.productId;useEffect(function(){getRelations();},[getRelations]);if(products.length===0){return null;}return React.createElement("div",{className:styles.container},!!headline&&React.createElement("h3",{className:styles.headline},headline),!!showMoreButton&&productsCount>10&&React.createElement(RelationsSheet,{limit:100,productId:productId,type:type}),React.createElement(Swiper,{slidesPerView:slidesPerView,classNames:{container:styles.sliderContainer}},products.map(function(product){return React.createElement(Swiper.Item,{key:product.id,className:styles.sliderItem},React.createElement(Card,{className:styles.card},React.createElement(ProductCard,{product:product,hidePrice:hidePrice,hideName:false,hideRating:hideRating,titleRows:titleRows})));})));});RelationsSliderContent.defaultProps={products:{products:[],productsCount:0}};export default connect(RelationsSliderContent);

package/product/components/RelationsSlider/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({position:'relative'});export var headline=css({fontSize:'1rem',fontWeight:500,padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.small,"px"),margin:0});export var sliderContainer=css({marginLeft:'auto',marginRight:'auto',position:'relative',padding:"".concat(variables.gap.small,"px 0 ").concat(variables.gap.big,"px")}).toString();export var card=css({height:'100%',margin:"0 ".concat(variables.gap.small,"px")}).toString();export var gridCard=css({height:'100%',margin:0}).toString();export var showMore=css({position:'absolute !important',top:"-".concat(variables.gap.small/2),right:0,padding:"".concat(variables.gap.small/2,"px 0 !important")}).toString();export var sheet=css({maxHeight:"calc(100vh - ".concat(variables.navigator.height,"px)")}).toString();export var gridItem=css({':nth-child(even)':{padding:'8px 0 8px 8px'},':nth-child(odd)':{padding:'8px 8px 8px 0'},':first-child':{padding:'0 8px 8px 0'},':nth-child(2)':{padding:'0 0 8px 8px'},padding:8,width:'50%'}).toString();
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({position:'relative'});export var headline=css({fontSize:'1rem',fontWeight:500,padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.small,"px"),margin:0});export var sliderContainer=css({marginLeft:'auto',marginRight:'auto',position:'relative',padding:"".concat(variables.gap.small,"px 0 ").concat(variables.gap.big,"px")}).toString();export var sliderItem=css({paddingBottom:10}).toString();export var card=css({height:'100%',margin:"0 ".concat(variables.gap.small,"px")}).toString();export var gridCard=css({height:'100%',margin:0}).toString();export var showMore=css({position:'absolute !important',top:"-".concat(variables.gap.small/2),right:0,padding:"".concat(variables.gap.small/2,"px 0 !important")}).toString();export var sheet=css({maxHeight:"calc(100vh - ".concat(variables.navigator.height,"px)")}).toString();export var gridItem=css({':nth-child(even)':{padding:'8px 0 8px 8px'},':nth-child(odd)':{padding:'8px 8px 8px 0'},':first-child':{padding:'0 8px 8px 0'},':nth-child(2)':{padding:'0 0 8px 8px'},padding:8,width:'50%'}).toString();

package/components/Footer/constants.js

@@ -1 +0,0 @@
-export var APP_FOOTER_ID='AppFooter';export var DATA_IGNORED='data-footer-inset-update-ignore';

package/components/Footer/helpers.js

@@ -1,75 +0,0 @@
-import{logger,isDev}from'@shopgate/engage/core/helpers';import{DATA_IGNORED}from"./constants";/**
- * Determines if an element is visually present in the DOM.
- * Checks for display, visibility, opacity, and transform-based hiding.
- *
- * @param {HTMLElement} el The element to evaluate.
- * @returns {boolean} True if the element is visually visible; false otherwise.
- */export var isElementVisible=function isElementVisible(el){if(!el||!(el instanceof HTMLElement))return false;var style=window.getComputedStyle(el);if(style.display==='none'||style.visibility==='hidden'||parseFloat(style.opacity)===0)return false;var transform=style.transform;if(transform&&transform!=='none'){var match=transform.match(/translateY\((-?\d+)(px)?\)/);if(match){var translateY=parseInt(match[1],10);if(translateY>window.innerHeight)return false;}}return true;};/**
- * Finds the widest nested element inside a given container that has a background color
- * explicitly set via CSS (ignores transparent, inherited, or unset values), and returns
- * that background color.
- *
- * @param {HTMLElement} container The parent element to search within. Must be an actual DOM node.
- * @returns {string|null} The detected background color (e.g., "rgb(255, 0, 0)")
- */export var getElementBackgroundColor=function getElementBackgroundColor(container){if(!container){return null;}var widestElement=null;var maxWidth=-Infinity;/**
-   * Recursively traverses the DOM tree starting from the given node,
-   * tracking the widest element that has a background color explicitly set via CSS.
-   *
-   * @param {HTMLElement} node The DOM node to begin traversal from.
-   */function walk(node){if(!(node instanceof HTMLElement))return;var style=window.getComputedStyle(node);var bgColor=style.backgroundColor;var isStyledColor=bgColor&&!['transparent','rgba(0, 0, 0, 0)','inherit','initial','unset'].includes(bgColor);var rect=node.getBoundingClientRect();if(isElementVisible(node)&&isStyledColor&&rect.width>maxWidth){maxWidth=rect.width;widestElement=node;}Array.from(node.children).forEach(walk);}walk(container);if(widestElement){var result=window.getComputedStyle(widestElement).backgroundColor;return result;}return null;};/**
- * Checks if any of the provided class names reference the custom property in any loaded stylesheet.
- *
- * @param {string[]} classList Array of class names to check.
- * @param {string} customProp The custom property to search for in the stylesheets.
- * @returns {boolean} True if any class rule uses the custom property.
- */var classNamesUseCustomProp=function classNamesUseCustomProp(classList,customProp){var allRules=Array.from(document.styleSheets).filter(function(sheet){try{return sheet.cssRules;}catch(e){return false;// Skip cross-origin or restricted stylesheets
-}}).flatMap(function(sheet){return Array.from(sheet.cssRules||[]);});// eslint-disable-next-line no-restricted-syntax
-var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=allRules[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var rule=_step.value;// eslint-disable-next-line no-continue
-if(!rule.selectorText||!rule.cssText.includes("var(".concat(customProp,")")))continue;// eslint-disable-next-line no-restricted-syntax
-var _iteratorNormalCompletion2=true;var _didIteratorError2=false;var _iteratorError2=undefined;try{for(var _iterator2=classList[Symbol.iterator](),_step2;!(_iteratorNormalCompletion2=(_step2=_iterator2.next()).done);_iteratorNormalCompletion2=true){var className=_step2.value;if(rule.selectorText.includes(".".concat(className))){return true;}}}catch(err){_didIteratorError2=true;_iteratorError2=err;}finally{try{if(!_iteratorNormalCompletion2&&_iterator2["return"]!=null){_iterator2["return"]();}}finally{if(_didIteratorError2){throw _iteratorError2;}}}}}catch(err){_didIteratorError=true;_iteratorError=err;}finally{try{if(!_iteratorNormalCompletion&&_iterator["return"]!=null){_iterator["return"]();}}finally{if(_didIteratorError){throw _iteratorError;}}}return false;};/**
- * Checks if a single element uses the custom property via inline styles or class-based rules.
- *
- * @param {HTMLElement} el The element to check.
- * @param {string} customProp The CSS custom property to search for.
- * @returns {boolean} True if the element uses the custom property.
- */var elementUsesCustomProp=function elementUsesCustomProp(el,customProp){var _el$getAttribute;if(!(el instanceof Element))return false;var styleAttr=(_el$getAttribute=el.getAttribute)===null||_el$getAttribute===void 0?void 0:_el$getAttribute.call(el,'style');if(styleAttr&&styleAttr.includes("var(".concat(customProp,")"))){return true;}var classList=Array.from(el.classList||[]);return classList.length>0&&classNamesUseCustomProp(classList,customProp);};/**
- * Checks if an element or any of its descendants use the custom property.
- *
- * @param {HTMLElement} el The root element to inspect.
- * @param {string} customProp The CSS custom property to look for.
- * @returns {boolean} True if the element or any descendant uses the custom property.
- */var elementOrDescendantsUseCustomProp=function elementOrDescendantsUseCustomProp(el,customProp){// Check if the element itself uses the custom property
-if(elementUsesCustomProp(el,customProp))return true;var descendants=el.querySelectorAll('*');// eslint-disable-next-line no-restricted-syntax
-var _iteratorNormalCompletion3=true;var _didIteratorError3=false;var _iteratorError3=undefined;try{for(var _iterator3=descendants[Symbol.iterator](),_step3;!(_iteratorNormalCompletion3=(_step3=_iterator3.next()).done);_iteratorNormalCompletion3=true){var node=_step3.value;// eslint-disable-next-line no-continue
-if(!(node instanceof Element))continue;if(elementUsesCustomProp(node,customProp))return true;}}catch(err){_didIteratorError3=true;_iteratorError3=err;}finally{try{if(!_iteratorNormalCompletion3&&_iterator3["return"]!=null){_iterator3["return"]();}}finally{if(_didIteratorError3){throw _iteratorError3;}}}return false;};/**
- * Returns footer entries that do NOT have safe area insets applied,
- * either on themselves or in any of their descendants.
- *
- * @param {HTMLElement[]} footerElements The footer elements to check.
- * @returns {HTMLElement[]} An array of direct children that do not use safe area insets.
- */var getFooterEntriesWithoutSafeAreaInsets=function getFooterEntriesWithoutSafeAreaInsets(footerElements){return footerElements.filter(function(child){return!elementOrDescendantsUseCustomProp(child,'--safe-area-inset-bottom');});};/**
- * Searches for footer elements that do not have safe area insets applied, and adds a fallback.
- * @param {HTMLElement} footerEl The footer element whose children are to be checked.
- */export var handleSafeAreaInsets=function handleSafeAreaInsets(footerEl){if(!footerEl||!(footerEl instanceof HTMLElement)){return;}var directChildren=Array.from(footerEl.children);// Filter out elements that where already handled before
-var childrenToInspect=directChildren.filter(function(child){return child.getAttribute('data-has-safe-area-inset')!=='true';}).filter(function(child){return child.getAttribute(DATA_IGNORED)!=='true';});// Detect footer elements without safe area insets
-var childrenWithoutInsets=getFooterEntriesWithoutSafeAreaInsets(childrenToInspect);// Apply fallback and mark the elements as handled
-childrenWithoutInsets.forEach(function(child){child.style.setProperty('padding-bottom','var(--safe-area-inset-bottom)');child.style.setProperty('background-color',getElementBackgroundColor(child));child.setAttribute('data-has-safe-area-inset','true');});if(isDev&&childrenWithoutInsets.length>0){logger.warn('Footer elements without safe area insets detected. Please use the "--safe-area-inset-bottom" CSS custom property for bottom insets.',childrenWithoutInsets);}// Mark all other elements which already had insets as handled
-directChildren.filter(function(child){return childrenWithoutInsets.indexOf(child)===-1;}).forEach(function(child){if(!child.hasAttribute('data-has-safe-area-inset')){child.setAttribute('data-has-safe-area-inset','true');}});};var style=document.documentElement.style;/**
- * Update the footer height custom property
- * @param {number} height height
- */export var updateFooterHeight=function updateFooterHeight(height){// The TabBar is positioned with `position: fixed`, so it doesn’t contribute to the measured
-// height of the Footer. Additionally, it’s sometimes animated in/out, which makes dynamic
-// measurement via JavaScript more complex and error-prone.
-//
-// To simplify everything, we include the --tabbar-height CSS custom property to the calculation
-// of the --footer-height value.
-var footerHeight="max(".concat(height,"px, var(--tabbar-height, 0px))");if(style.getPropertyValue('--footer-height')!==footerHeight){style.setProperty('--footer-height',footerHeight);}// The View component wraps every app page and applies a bottom offset to centrally manage
-// safe area insets across screens.
-//
-// If the measured footer height is > 0px, it means the footer is rendering content that already
-// accounts for the safe area, so no additional offset is needed.
-//
-// If the measured footer height is 0px, the footer is either empty or only contains the tab bar
-// (which is measured via the CSS variable --footer-height). In that case, we still need to apply
-// an offset equal to the larger of the bottom safe area inset or the tab bar height.
-var pageContentOffset=height===0?'max(var(--footer-height), var(--safe-area-inset-bottom))':'0px';if(style.getPropertyValue('--page-content-offset-bottom')!==pageContentOffset){style.setProperty('--page-content-offset-bottom',pageContentOffset);}};

package/core/hooks/useLongPress.js

@@ -1,37 +0,0 @@
-import{useRef,useCallback}from'react';/**
- * Prevents the default context menu from appearing on long press.
- * @param {Object} e The event object.
- * @returns {void}
- */var preventContextMenu=function preventContextMenu(e){return e.preventDefault();};/**
- * 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] - This function is called when the user starts pressing.
- * @param {Function} [options.onFinish] - This function is called when a long press event finishes
- * successfully (the user releases after the threshold).
- * @param {Function} [options.onCancel] - This function is called when a press event is cancelled
- * (the user releases before the threshold).
- *
- * @returns {Object} Event handlers to attach to an element.
- * @returns {Function} return.onMouseDown
- * @returns {Function} return.onTouchStart
- * @returns {Function} return.onMouseUp
- * @returns {Function} return.onMouseLeave
- * @returns {Function} return.onTouchEnd
- * @returns {Function} return.onContextMenu
- *
- * @example
- * const bind = useLongPress(
- *   () => console.log('Long Pressed!'),
- *   {
- *     threshold: 2000,
- *     onStart: () => console.log('Start'),
- *     onFinish: () => console.log('Finish'),
- *     onCancel: () => console.log('Cancel'),
- *   }
- * );
- * <div {...bind}>Press and Hold</div>
- */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};}export default useLongPress;

package/core/hooks/useScrollDirectionChange.js

@@ -1,33 +0,0 @@
-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}
- */ /**
- * 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
- */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.
-   */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){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'){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,offset,onlyFireOnDirectionChange,onScrollUp,onScrollDown]);useEffect(function(){if(!enabled)return undefined;var subscription=viewScroll$.subscribe(handleScroll);return function(){return subscription.unsubscribe();};},[enabled,handleScroll]);}export default useScrollDirectionChange;

package/development/action-creators/index.js

@@ -1 +0,0 @@
-export*from"./settings";export*from"./storage";

package/development/action-creators/settings.js

@@ -1,9 +0,0 @@
-import{DEVELOPMENT_TOOLS_TOGGLE_INSETS,DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT}from"../constants";/**
- * Toggles the simulation of iOS safe area insets.
- * @param {boolean} visible Whether the insets should be visible or not.
- * @returns {Object} The action object.
- */export var toggleInsets=function toggleInsets(){var visible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;return{type:DEVELOPMENT_TOOLS_TOGGLE_INSETS,visible:visible};};/**
- * Toggles the highlighting of the simulated iOS safe area insets.
- * @param {boolean} visible Whether the insets should be visible or not.
- * @returns {Object} The action object.
- */export var toggleInsetHighlight=function toggleInsetHighlight(){var visible=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;return{type:DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT,visible:visible};};

package/development/action-creators/storage.js

@@ -1,6 +0,0 @@
-import{DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE}from"../constants";/**
- * Updates the status bar style storage where latest payload from the updateNavigationBarStyle
- * app event is stored.
- * @param {boolean} style The event payload
- * @returns {Object} The action object.
- */export var updateStatusBarStyleStorage=function updateStatusBarStyleStorage(){var style=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return{type:DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE,style:style};};

package/development/components/DevelopmentTools/DevelopmentTools.js

@@ -1,6 +0,0 @@
-import React,{memo}from'react';import PropTypes from'prop-types';import{isDev}from'@shopgate/engage/core/helpers';import Shortcuts from"./Shortcuts";import SimulatedInsets from"../SimulatedInsets";/**
- * Provides development tools for the app.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child components.
- * @returns {JSX.Element}
- */var DevelopmentTools=function DevelopmentTools(_ref){var children=_ref.children;if(!isDev){return children;}return React.createElement(React.Fragment,null,React.createElement(Shortcuts,null),React.createElement(SimulatedInsets,null,children));};export default memo(DevelopmentTools);

package/development/components/DevelopmentTools/Shortcuts.js

@@ -1,4 +0,0 @@
-import{useSelector,useDispatch}from'react-redux';import{toggleInsets}from'@shopgate/engage/development/action-creators';import{getAreSimulatedInsetsInjected}from'@shopgate/engage/development/selectors';import{useShortcut}from"./hooks";/**
- * The Shortcuts component maps shortcuts to actions in development mode.
- * @returns {JSX.Element}
- */var Shortcuts=function Shortcuts(){var dispatch=useDispatch();var areInsetsInjected=useSelector(getAreSimulatedInsetsInjected);useShortcut('ctrl+i',function(){dispatch(toggleInsets(!areInsetsInjected));});return null;};export default Shortcuts;

package/development/components/DevelopmentTools/hooks.js

@@ -1,8 +0,0 @@
-import{useEffect,useCallback}from'react';/**
- * Hook to handle a single keyboard shortcut.
- * Supports both 'cmd' (meta) and 'ctrl' keys explicitly.
- *
- * @param {string} shortcut - Shortcut string using mac-style notation, e.g. 'cmd+i'.
- * @param {Function} callback - Function to call when the shortcut is triggered.
- */export function useShortcut(shortcut,callback){var normalizeShortcut=useCallback(function(){return shortcut.toLowerCase().split('+').map(function(k){return k.trim();}).sort().join('+');},[shortcut]);var handleKeyDown=useCallback(function(event){var keys=[];if(event.ctrlKey)keys.push('ctrl');if(event.metaKey)keys.push('cmd');// Treat meta as cmd
-if(event.altKey)keys.push('alt');if(event.shiftKey)keys.push('shift');var key=event.key.toLowerCase();if(!['control','meta','alt','shift'].includes(key)){keys.push(key);}var pressed=keys.sort().join('+');if(pressed===normalizeShortcut()){event.preventDefault();callback(event);}},[callback,normalizeShortcut]);useEffect(function(){window.addEventListener('keydown',handleKeyDown);return function(){return window.removeEventListener('keydown',handleKeyDown);};},[handleKeyDown]);}

package/development/components/DevelopmentTools/index.js

@@ -1 +0,0 @@
-export{default}from"./DevelopmentTools";

package/development/components/SimulatedInsets/SimulatedInsetBottom.js

@@ -1,7 +0,0 @@
-var _excluded=["highlightInset","onClick"];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 _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 _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 React,{useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';var classes={container:css({position:'fixed',bottom:0,display:'flex',justifyContent:'center',alignItems:'center',height:'var(--safe-area-inset-bottom)',width:'100%',zIndex:10000000,pointerEvents:'auto',transition:'background 0.2s ease'}),containerHighlight:css({background:'rgba(255, 0, 0, 0.7)'}),handle:css({width:120,height:3,borderRadius:3,background:'rgba(0, 0, 0, 0.4)',border:'1px solid rgba(255, 255, 255, 0.5)',boxSizing:'content-box'})};/**
- * Renders a simulated iOS bottom inset in development.
- * @param {Object} props The component props.
- * @param {boolean} props.highlightInset Whether the inset is highlighted.
- * @param {Function} props.onClick The function to call when the inset is clicked.
- * @returns {JSX.Element}
- */var SimulatedInsetBottom=function SimulatedInsetBottom(_ref){var highlightInset=_ref.highlightInset,onClick=_ref.onClick,props=_objectWithoutProperties(_ref,_excluded);var containerClasses=useMemo(function(){return classNames(classes.container,_defineProperty({},classes.containerHighlight,highlightInset));},[highlightInset]);return React.createElement("div",_extends({"aria-hidden":true,role:"presentation",className:containerClasses},props,{onClick:onClick}),React.createElement("div",{className:classes.handle}));};export default SimulatedInsetBottom;

package/development/components/SimulatedInsets/SimulatedInsetTop.js

@@ -1,12 +0,0 @@
-var _excluded=["highlightInset","onClick"];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 _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;}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 React,{useState,useEffect,useMemo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useSelector}from'react-redux';import{css}from'glamor';import{getStatusBarStyleStorage}from'@shopgate/engage/development/selectors';var classes={container:css({position:'fixed',top:0,display:'flex',justifyContent:'space-between',alignItems:'center',height:'var(--safe-area-inset-top)',width:'100%',zIndex:10000000,pointerEvents:'auto',transition:'background 0.2s ease',fontSize:'16px'}),containerHighlight:css({background:'rgba(255, 0, 0, 0.7)'}),styleLight:css({color:'white'}),styleDark:css({color:'black'}),styleNone:css({color:'transparent'}),info:css({flex:1,textAlign:'center',fontWeight:500}),notch:css({flex:1,background:'black',height:'calc(var(--safe-area-inset-top) - 16px)',maxWidth:150,borderRadius:16,border:'1px solid rgba(255, 255, 255, 0.5)'})};/**
- * Creates a human readable time string to mimic the iOS clock.
- * @returns {string} The current time in a human readable format.
- */var getTime=function getTime(){var now=new Date();return now.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'});};/**
- * Renders a simulated iOS top inset in development.
- * @param {Object} props The component props.
- * @param {boolean} props.highlightInset Whether the inset is highlighted.
- * @param {Function} props.onClick The function to call when the inset is clicked.
- * @returns {JSX.Element}
- */var SimulatedInsetTop=function SimulatedInsetTop(_ref){var highlightInset=_ref.highlightInset,onClick=_ref.onClick,props=_objectWithoutProperties(_ref,_excluded);// State to hold the current time string for the status bar
-var _useState=useState(getTime()),_useState2=_slicedToArray(_useState,2),time=_useState2[0],setTime=_useState2[1];// Effect to update the time on regular intervals
-useEffect(function(){var interval=setInterval(function(){setTime(getTime());},10*1000);return function(){return clearInterval(interval);};},[]);var _useSelector=useSelector(getStatusBarStyleStorage),statusBarStyle=_useSelector.statusBarStyle;var containerClasses=useMemo(function(){return classNames(classes.container,_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes.containerHighlight,highlightInset),classes.styleDark,statusBarStyle==='dark'),classes.styleLight,statusBarStyle==='light'),classes.styleNone,statusBarStyle==='none'));},[highlightInset,statusBarStyle]);return React.createElement("div",_extends({"aria-hidden":true,role:"presentation",className:classNames(containerClasses)},props,{onClick:onClick}),React.createElement("div",{className:classes.info},time),React.createElement("div",{className:classes.notch}),React.createElement("div",{className:classes.info},"5G"));};export default SimulatedInsetTop;

package/development/components/SimulatedInsets/SimulatedInsets.js

@@ -1,6 +0,0 @@
-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,{useCallback}from'react';import{useSelector,useDispatch}from'react-redux';import PropTypes from'prop-types';import{useLongPress}from'@shopgate/engage/core/hooks';import{getAreSimulatedInsetsInjected,getIsInsetHighlightVisible}from'@shopgate/engage/development/selectors';import{toggleInsetHighlight,toggleInsets}from'@shopgate/engage/development/action-creators';import SimulatedInsetTop from"./SimulatedInsetTop";import SimulatedInsetBottom from"./SimulatedInsetBottom";/**
- * Simulates iOS insets in development mode.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child components.
- * @returns {JSX.Element}
- */var SimulatedInsets=function SimulatedInsets(_ref){var children=_ref.children;var hasSimulatedSafeAreaInsets=useSelector(getAreSimulatedInsetsInjected);var dispatch=useDispatch();var highlightInset=useSelector(getIsInsetHighlightVisible);var handleClick=useCallback(function(){dispatch(toggleInsetHighlight(!highlightInset));},[dispatch,highlightInset]);var attrs=useLongPress(function(){dispatch(toggleInsets(!hasSimulatedSafeAreaInsets));});return React.createElement(React.Fragment,null,hasSimulatedSafeAreaInsets&&React.createElement(SimulatedInsetTop,_extends({onClick:handleClick,highlightInset:highlightInset},attrs)),children,hasSimulatedSafeAreaInsets&&React.createElement(SimulatedInsetBottom,_extends({onClick:handleClick,highlightInset:highlightInset},attrs)));};export default SimulatedInsets;

package/development/components/SimulatedInsets/index.js

@@ -1 +0,0 @@
-export{default}from"./SimulatedInsets";

package/development/components/index.js

@@ -1 +0,0 @@
-export{default as DevelopmentTools}from"./DevelopmentTools";

package/development/constants/actionTypes.js

@@ -1 +0,0 @@
-export var DEVELOPMENT_TOOLS_TOGGLE_INSETS='DEVELOPMENT_TOOLS_TOGGLE_INSETS';export var DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT='DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT';export var DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE='DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE';

package/development/constants/index.js

@@ -1 +0,0 @@
-export*from"./actionTypes";

package/development/reducers/index.js

@@ -1 +0,0 @@
-import{combineReducers}from'redux';import settings from"./settings";import storage from"./storage";export default combineReducers({settings:settings,storage:storage});

package/development/reducers/settings.js

@@ -1,10 +0,0 @@
-import{produce}from'immer';import{isDev}from'@shopgate/engage/core/helpers';import{DEVELOPMENT_TOOLS_TOGGLE_INSETS,DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT}from"../constants";/**
- * @typedef {Object} DevToolsSettingsState
- * @property {boolean} showInsets
- * @property {boolean} showInsetHighlight
- */ /** @type DevToolsSettingsState */var initialState={showInsets:null,showInsetHighlight:false};/**
- * The reducer for all development tools settings related states.
- * @param {Object} state The application state.
- * @param {Object} action The redux action.
- * @returns {Object}
- */export default function settingsReducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:initialState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(/** @param {DevToolsSettingsState} draft The draft */function(draft){if(!isDev){return;}switch(action.type){case DEVELOPMENT_TOOLS_TOGGLE_INSETS:{draft.showInsets=action.visible;break;}case DEVELOPMENT_TOOLS_TOGGLE_INSET_HIGHLIGHT:{draft.showInsetHighlight=action.visible;break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/development/reducers/storage.js

@@ -1,9 +0,0 @@
-import{produce}from'immer';import{isDev}from'@shopgate/engage/core/helpers';import{DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE}from"../constants";/**
- * @typedef {Object} DevToolsStorageState
- * @property {Object} statusBarStyle
- */ /** @type DevToolsStorageState */var initialState={statusBarStyle:{styles:{}}};/**
- * The reducer for all developer tools storage related states.
- * @param {Object} state The application state.
- * @param {Object} action The redux action.
- * @returns {Object}
- */export default function storageReducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:initialState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(/** @param {DevToolsStorageState} draft The draft */function(draft){if(!isDev){return;}switch(action.type){case DEVELOPMENT_TOOLS_UPDATE_STATUS_BAR_STYLE_STORAGE:{draft.statusBarStyle=action.style;break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}

package/development/selectors/index.js

@@ -1 +0,0 @@
-export*from"./settings";export*from"./storage";

package/development/selectors/settings.js

@@ -1,21 +0,0 @@
-import{createSelector}from'reselect';import MobileDetect from'mobile-detect';import{isDev as isDevelopment,hasSGJavaScriptBridge}from'@shopgate/engage/core/helpers';var md=new MobileDetect(navigator.userAgent);/**
- * Retrieves the development settings state from the store.
- * @param {Object} state The current application state.
- * @return {Object} The development settings state.
- */var getState=function getState(state){return state.development.settings;};/**
- * Creates a selector to determine if development mode is enabled.
- * @type {(state: any) => boolean}
- */export var getIsDev=createSelector(function(){return isDevelopment;});/**
- * Creates a selector to determine if the simulated iOS insets are supposed to be shown.
- * @type {(state: any) => boolean}
- */export var getAreInsetsVisible=createSelector(getIsDev,getState,function(isDev,settings){if(!isDev){return false;}return settings.showInsets;});/**
- * Creates a selector to determine if the inset highlight is visible.
- * @type {(state: any) => boolean}
- */export var getIsInsetHighlightVisible=createSelector(getIsDev,getState,function(isDev,settings){if(!isDev){return false;}return settings.showInsetHighlight;});/**
- * Creates a selector to check if simulated safe area insets are supposed to be injected.
- * @type {(state: any) => boolean}
- */export var getAreSimulatedInsetsInjected=createSelector(getIsDev,getAreInsetsVisible,function(isDev,insetsVisible){// No insets injected if the app is not in development mode.
-if(!isDev){return false;}// No insets injected if PWA is running inside the app
-if(hasSGJavaScriptBridge()){return false;}// If the state contains a bool value, respect is.
-if(typeof insetsVisible==='boolean'){return insetsVisible;}// Show insets on simulated iOS devices by default if insets decision is not set.
-return insetsVisible===null&&md.os()==='iOS';});

package/development/selectors/storage.js

@@ -1,16 +0,0 @@
-import{createSelector}from'reselect';/**
- * Retrieves the development storage state from the store.
- * @param {Object} state The current application state.
- * @return {Object} The development storage state.
- */var getState=function getState(state){return state.development.storage;};/**
- * @typedef {Object} StatusBarStyleStyles
- * @property {string} statusBarBackground Current background color of the app bar
- */ /**
- * @typedef {Object} StatusBarStyle
- * @property {boolean} isDefault Whether the style is the default one which was initially applied
- * @property {"light"|"dark"} statusBarStyle The status style for the iOS status bar
- * @property {StatusBarStyleStyles} styles Additional styles for the status bar
- */ /**
- * Creates a selector that returns the current status bar style object from the storage.
- * @type {(state: any) => StatusBarStyle}
- */export var getStatusBarStyleStorage=createSelector(getState,function(state){return state.statusBarStyle;});

package/development/streams/index.js

@@ -1 +0,0 @@
-export*from"./insets";

package/development/streams/insets.js

@@ -1,4 +0,0 @@
-import{main$}from'@shopgate/engage/core/streams';import{DEVELOPMENT_TOOLS_TOGGLE_INSETS}from"../constants";/**
- * Gets triggered after the simulated page insets were updated
- * @type {Observable}
- */export var simulatedPageInsetsDidUpdate$=main$.filter(function(_ref){var action=_ref.action;return action.type===DEVELOPMENT_TOOLS_TOGGLE_INSETS;});

package/development/subscriptions/index.js

@@ -1,6 +0,0 @@
-import{appWillStart$}from'@shopgate/engage/core/streams';import{UIEvents}from'@shopgate/engage/core/events';import{updateStatusBarStyleStorage}from'@shopgate/engage/development/action-creators';/**
- * Development subscriptions
- * @param {Function} subscribe The subscribe function
- */export default function development(subscribe){subscribe(appWillStart$,function(_ref){var dispatch=_ref.dispatch;// Listen for the app event which updates the status bar style and store it into the
-// development storage redux store.
-UIEvents.addListener('devInternalUpdateStatusBarStyle',function(event){dispatch(updateStatusBarStyleStorage(event));});});}