@shopgate/engage 7.27.1-beta.2 → 7.27.2-beta.1

package/a11y/styles.js

@@ -1,2 +1,2 @@
 import{css}from'glamor';// global class for screen readers only, visually hidden
-css.global('.sr-only',{border:'0',clip:'rect(0 0 0 0)',height:'1px',margin:'-1px',overflow:'hidden',padding:'0',position:'absolute',width:'1px',whiteSpace:'nowrap'});
+css.global('.sr-only',{border:'0',clip:'rect(0 0 0 0)',height:'1px',margin:'-1px',overflow:'hidden',padding:'0',position:'absolute',width:'1px',whiteSpace:'nowrap',top:0,left:0});

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

@@ -1,4 +1,4 @@
-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 _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,{Component}from'react';import PropTypes from'prop-types';import Swipeable from'react-swipeable';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer}from'@shopgate/engage/core';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import styles from"./style";/**
+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 _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,{Component}from'react';import PropTypes from'prop-types';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer}from'@shopgate/engage/core';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import styles from"./style";/**
  * The ViewContent component.
  */var ViewContent=/*#__PURE__*/function(_Component){/**
    * @param {Object} props The component props.
@@ -6,14 +6,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
    * Handles a keyboard change event.
    * @param {boolean} open If the keyboard is now open.
    * @param {boolean} overlap The height of the keyboard.
-   */_defineProperty(_this2,"handleKeyboardChange",function(_ref){var open=_ref.open,overlap=_ref.overlap;if(_this2.props.noKeyboardListener){return;}var height=open?overlap:0;if(_this2.props.visible&&height!==_this2.state.keyboardHeight){_this2.setState({keyboardHeight:height});}});/**
-   * Handles the swipe down gesture.
-   * @param {Object} e The event object.
-   * @param {number} x The change on the x axis.
-   * @param {number} y The change on the y axis.
-   * @param {boolean} isFlick Whether this is a flick or swipe.
-   * @param {number} velocity The velocity of the gesture.
-   */_defineProperty(_this2,"handleSwipe",function(e,x,y,isFlick,velocity){var swipeEvent=new CustomEvent('swipe',{detail:{event:e,x:x,y:y,isFlick:isFlick,velocity:velocity}});_this2.ref.current.dispatchEvent(swipeEvent);});_this2.ref=React.createRef();_this2.state={keyboardHeight:0};_this2.scrollContainer=useScrollContainer();if(!_this2.scrollContainer){_this2.ref.current=window;}_this2.props.setContentRef(_this2.ref);event.addCallback(EVENT_KEYBOARD_WILL_CHANGE,_this2.handleKeyboardChange);return _this2;}/**
+   */_defineProperty(_this2,"handleKeyboardChange",function(_ref){var open=_ref.open,overlap=_ref.overlap;if(_this2.props.noKeyboardListener){return;}var height=open?overlap:0;if(_this2.props.visible&&height!==_this2.state.keyboardHeight){_this2.setState({keyboardHeight:height});}});_this2.ref=React.createRef();_this2.state={keyboardHeight:0};_this2.scrollContainer=useScrollContainer();if(!_this2.scrollContainer){_this2.ref.current=window;}_this2.props.setContentRef(_this2.ref);event.addCallback(EVENT_KEYBOARD_WILL_CHANGE,_this2.handleKeyboardChange);return _this2;}/**
    * @param {Object} props The component props.
    * @param {Object} state The component state.
    * @returns {Object}
@@ -25,4 +18,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
    * @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:/**
    * @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,'_'))}));});});
+   */function render(){return 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/contexts/ThemeResourcesContext.js

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

package/core/contexts/index.js

@@ -1 +1 @@
-export*from'@shopgate/pwa-common/context';export{default as AppContext}from"./AppContext";
+export*from'@shopgate/pwa-common/context';export{default as AppContext}from"./AppContext";export{default as ThemeResourcesContext}from"./ThemeResourcesContext";

package/core/hocs/index.js

@@ -1 +1 @@
-export{default as withShowModal}from'@shopgate/pwa-common/helpers/modal/withShowModal';export{withTheme}from"./withTheme";export{withRoute}from"./withRoute";export{withCurrentProduct}from"./withCurrentProduct";export{withForwardedRef}from"./withForwardedRef";export{withNavigation}from"./withNavigation";export{withWidgetSettings}from"./withWidgetSettings";export{withWidgetStyles}from"./withWidgetStyles";export{withApp}from"./withApp";
+export{default as withShowModal}from'@shopgate/pwa-common/helpers/modal/withShowModal';export{withTheme}from"./withTheme";export{withRoute}from"./withRoute";export{withCurrentProduct}from"./withCurrentProduct";export{withForwardedRef}from"./withForwardedRef";export{withNavigation}from"./withNavigation";export{withWidgetSettings}from"./withWidgetSettings";export{withWidgetStyles}from"./withWidgetStyles";export{withApp}from"./withApp";export{withThemeResources,withThemeComponents,withThemeWidgets}from"./withThemeResources";

package/core/hocs/withTheme.js

@@ -8,10 +8,49 @@ var _excluded=["contexts"];function _objectWithoutProperties(source,excluded){if
  * @param {Function} WrappedComponent The react component to wrap.
  * @param {Object} [options={}] Options for the HOC.
  * @param {string} [options.prop] An optional prop name to inject the theme properties.
- * @returns {JSX}
+ * @deprecated
+ *
+ * Use `withThemeComponents()` instead.
+ * ```js
+ * import { withThemeComponents } from '@shopgate/engage/core/hocs';
+ *
+ * function MyComponent({ themeComponents }) {
+ *   const { ProductCard } = themeComponents;
+ *   return <ProductCard />;
+ * }
+ * ````
+ * This HOC will NOT expose components that can be imported directly from the `@shopgate/engage`
+ * package (see list below).
+ *
+ * ---
+ * Use these updated imports instead of deprecated context values:
+ *
+ * ```js
+ * // Deprecated: Drawer → use SheetDrawer
+ * import { SheetDrawer } from '@shopgate/engage/components';
+ *
+ * // Deprecated: PriceDifference → use PriceDifference
+ * import { PriceDifference } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: ProductSlider → use ProductSlider
+ * import { ProductSlider } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: SelectOption → use SelectOption
+ * import { SelectOption } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: TextOption → use TextOption
+ * import { TextOption } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: View → use View
+ * import { View } from '@shopgate/engage/components'
+ *
+ * // Deprecated: { contexts: { ProductContext }} → use ProductContext
+ * import { ProductContext } from '@shopgate/engage/product/contexts';
+ * ```
+ * @returns {JSX.Element}
  */export function withTheme(WrappedComponent){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};/**
    * The actual HOC.
    * @param {Object} props The component props.
-   * @returns {JSX}
+   * @returns {JSX.Element}
    */var WithTheme=function WithTheme(props){return React.createElement(ThemeContext.Consumer,null,function(_ref2){var contexts=_ref2.contexts,themeContext=_objectWithoutProperties(_ref2,_excluded);return(// The contexts are left out in favor of other HOCs.
 React.createElement(WrappedComponent,_extends({},getInjectedProps(themeContext,options.prop),props)));});};var displayName=WrappedComponent.displayName||WrappedComponent.name||'Component';WithTheme.displayName="WithTheme(".concat(displayName,")");return WithTheme;}

package/core/hocs/withThemeResources.js

@@ -0,0 +1,16 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{useThemeResources,useThemeComponents,useThemeWidgets}from'@shopgate/engage/core/hooks';/**
+ * HOC that injects the value of the ThemeResources context as a prop called `themeResources`.
+ * The context provides access to different groups of React components provided by the theme.
+ * @param {React.ComponentType<any>} WrappedComponent The wrapped component
+ * @returns {React.FC<any>}
+ */export var withThemeResources=function withThemeResources(WrappedComponent){return function ThemeResourcesWrapper(props){var themeResources=useThemeResources();return React.createElement(WrappedComponent,_extends({},props,{themeResources:themeResources}));};};/**
+ * HOC that injects the `components` value of the ThemeResources context as a prop called
+ * `themeComponents`.
+ * @param {React.ComponentType<any>} WrappedComponent The wrapped component
+ * @returns {React.FC<any>}
+ */export var withThemeComponents=function withThemeComponents(WrappedComponent){return function ThemeResourcesWrapper(props){var themeComponents=useThemeComponents();return React.createElement(WrappedComponent,_extends({},props,{themeComponents:themeComponents}));};};/**
+ * HOC that injects the `widgets` value of the ThemeResources context as a prop called
+ * `themeWidgets`.
+ * @param {React.ComponentType<any>} WrappedComponent The wrapped component
+ * @returns {React.FC<any>}
+ */export var withThemeWidgets=function withThemeWidgets(WrappedComponent){return function ThemeResourcesWrapper(props){var themeWidgets=useThemeWidgets();return React.createElement(WrappedComponent,_extends({},props,{themeWidgets:themeWidgets}));};};

package/core/hooks/index.js

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

package/core/hooks/useTheme.js

@@ -1,5 +1,41 @@
-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';/**
+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
+/**
  * Provides the theme API. This does not include the contexts.
- * @returns {Object}
+ * @deprecated
+ * Use `useThemeComponents()` instead.
+ *
+ * ```js
+ * import { useThemeComponents } from '@shopgate/engage/core/hooks';
+ * const { ProductCard } = useThemeComponents();
+ * ```
+ *
+ * This hook will NOT expose components that can be imported directly from the `@shopgate/engage`
+ * package (see list below).
+ *
+ * ---
+ * Use these updated imports instead of deprecated context values:
+ *
+ * ```js
+ * // Deprecated: Drawer → use SheetDrawer
+ * import { SheetDrawer } from '@shopgate/engage/components';
+ *
+ * // Deprecated: PriceDifference → use PriceDifference
+ * import { PriceDifference } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: ProductSlider → use ProductSlider
+ * import { ProductSlider } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: SelectOption → use SelectOption
+ * import { SelectOption } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: TextOption → use TextOption
+ * import { TextOption } from '@shopgate/engage/product/components';
+ *
+ * // Deprecated: View → use View
+ * import { View } from '@shopgate/engage/components'
+ *
+ * // 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;}

package/core/hooks/useThemeResources.js

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

package/core/providers/ThemeResourcesProvider.js

@@ -0,0 +1,15 @@
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{ThemeContext as LegacyThemeContext}from'@shopgate/pwa-common/context';import{ThemeResourcesContext}from"../contexts";/**
+ * @typedef {Object<string, React.ComponentType<any>>} ComponentMap
+ */ /**
+ * ThemeResourcesProvider component.
+ * @param {Object} props The component props.
+ * @param {ComponentMap} props.widgets Mapping object with all available widget components for the
+ * theme. Key is the widget code, value is the widget component.
+ * @param {ComponentMap} props.components Object with shared theme components. Can be used by
+ * extensions the get unified visual presentation.
+ * @param {ComponentMap} [props.legacyThemeAPI] Object with shared theme components. Can be used by
+ * extensions the get unified visual presentation.
+ * Kept for backward compatibility with existing extensions which use the deprecated `ThemeContext`.
+ * @param {React.ReactNode} props.children The component children.
+ * @returns {JSX.Element}
+ */var ThemeResourcesProvider=function ThemeResourcesProvider(_ref){var widgets=_ref.widgets,components=_ref.components,legacyThemeAPI=_ref.legacyThemeAPI,children=_ref.children;var value=useMemo(function(){return{widgets:widgets,components:components};},[components,widgets]);return React.createElement(ThemeResourcesContext.Provider,{value:value},legacyThemeAPI?React.createElement(LegacyThemeContext.Provider,{value:legacyThemeAPI},children):children);};ThemeResourcesProvider.defaultProps={legacyThemeAPI:null};export default ThemeResourcesProvider;

package/core/providers/index.js

@@ -1 +1 @@
-export{default as LoadingProvider}from'@shopgate/pwa-common/providers/loading';export{default as LoadingContext}from'@shopgate/pwa-common/providers/loading/context';export{default as ToastProvider}from'@shopgate/pwa-common/providers/toast';export{default as ToastContext}from'@shopgate/pwa-common/providers/toast/context';export{default as AppProvider}from"./AppProvider";
+export{default as LoadingProvider}from'@shopgate/pwa-common/providers/loading';export{default as LoadingContext}from'@shopgate/pwa-common/providers/loading/context';export{default as ToastProvider}from'@shopgate/pwa-common/providers/toast';export{default as ToastContext}from'@shopgate/pwa-common/providers/toast/context';export{default as AppProvider}from"./AppProvider";export{default as ThemeResourcesProvider}from"./ThemeResourcesProvider";

package/favorites/components/Item/ItemCharacteristics.js

@@ -1,4 +1,4 @@
-import React from'react';import PropTypes from'prop-types';import{css}from'glamor';var styles={property:css({fontSize:14,color:'var(--color-text-medium-emphasis)',fontWeight:400,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'})};/**
+import React from'react';import PropTypes from'prop-types';import{css}from'glamor';var styles={property:css({fontSize:14,color:'var(--color-text-medium-emphasis)',fontWeight:400})};/**
  * @param {Object} props The component props
  * @returns {JSX}
  */var ItemCharacteristics=function ItemCharacteristics(_ref){var characteristics=_ref.characteristics;if(!characteristics||characteristics.length===0){return null;}return React.createElement("ul",null,characteristics.map(function(_ref2){var label=_ref2.label,value=_ref2.value;return React.createElement("li",{key:"".concat(label,"-").concat(value),className:styles.property},label,': ',value);}));};ItemCharacteristics.defaultProps={characteristics:null};export default ItemCharacteristics;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.27.1-beta.2",
+  "version": "7.27.2-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -16,12 +16,12 @@
   ],
   "dependencies": {
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.27.1-beta.2",
-    "@shopgate/pwa-common-commerce": "7.27.1-beta.2",
-    "@shopgate/pwa-core": "7.27.1-beta.2",
-    "@shopgate/pwa-ui-ios": "7.27.1-beta.2",
-    "@shopgate/pwa-ui-material": "7.27.1-beta.2",
-    "@shopgate/pwa-ui-shared": "7.27.1-beta.2",
+    "@shopgate/pwa-common": "7.27.2-beta.1",
+    "@shopgate/pwa-common-commerce": "7.27.2-beta.1",
+    "@shopgate/pwa-core": "7.27.2-beta.1",
+    "@shopgate/pwa-ui-ios": "7.27.2-beta.1",
+    "@shopgate/pwa-ui-material": "7.27.2-beta.1",
+    "@shopgate/pwa-ui-shared": "7.27.2-beta.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",
@@ -40,7 +40,6 @@
     "react-phone-number-input": "^3.2.16",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
-    "react-swipeable": "^4.0.1",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {

package/product/components/ProductSlider/index.js

@@ -1,4 +1,5 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{useWidgetSettings}from'@shopgate/engage/core';import{Swiper}from'@shopgate/engage/components';import{Theme}from'@shopgate/engage/core/contexts';import{ProductListTypeProvider,ProductListEntryProvider}from'@shopgate/engage/product/providers';import{container,items}from"./style";export var WIDGET_ID='@shopgate/engage/product/ProductSlider';/**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import PropTypes from'prop-types';import{useWidgetSettings}from'@shopgate/engage/core';import{useThemeComponents}from'@shopgate/engage/core/hooks';import{Swiper}from'@shopgate/engage/components';import{ProductListTypeProvider,ProductListEntryProvider}from'@shopgate/engage/product/providers';import{container,items}from"./style";export var WIDGET_ID='@shopgate/engage/product/ProductSlider';/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */function ProductSlider(props){var autoplay=props.autoplay,className=props.className,delay=props.delay,productIds=props.productIds,snap=props.snap,scope=props.scope,meta=props.meta;var widgetSettings=useWidgetSettings(WIDGET_ID)||{};var _ref=props.slidesPerView?props:widgetSettings,_ref$slidesPerView=_ref.slidesPerView,slidesPerView=_ref$slidesPerView===void 0?2.3:_ref$slidesPerView;return React.createElement(Theme,null,function(_ref2){var ProductCard=_ref2.ProductCard;var Item=props.item||ProductCard;return React.createElement(ProductListTypeProvider,{type:"productSlider",subType:scope,meta:meta},React.createElement(Swiper,_extends({},autoplay&&{autoplay:{delay:delay}},{className:"".concat(className," engage__product__product-slider"),controls:false,indicators:false,loop:false,freeMode:!snap,slidesPerView:slidesPerView}),productIds.map(function(id){return React.createElement(Swiper.Item,{key:id,className:container},React.createElement(ProductListEntryProvider,{productId:id},React.createElement(Item,{productId:id,style:items})));})));});}ProductSlider.WIDGET_ID=WIDGET_ID;ProductSlider.defaultProps={autoplay:false,className:null,delay:10,item:null,slidesPerView:null,snap:false,scope:null,meta:null};export default ProductSlider;
+ */function ProductSlider(props){var autoplay=props.autoplay,className=props.className,delay=props.delay,productIds=props.productIds,snap=props.snap,scope=props.scope,meta=props.meta;var widgetSettings=useWidgetSettings(WIDGET_ID)||{};var _ref=props.slidesPerView?props:widgetSettings,_ref$slidesPerView=_ref.slidesPerView,slidesPerView=_ref$slidesPerView===void 0?2.3:_ref$slidesPerView;// ProductSlider items are rendered with the ProductCard component provided by the theme.
+var _useThemeComponents=useThemeComponents(),ProductCard=_useThemeComponents.ProductCard;var Item=props.item||ProductCard;return React.createElement(ProductListTypeProvider,{type:"productSlider",subType:scope,meta:meta},React.createElement(Swiper,_extends({},autoplay&&{autoplay:{delay:delay}},{className:"".concat(className," engage__product__product-slider"),controls:false,indicators:false,loop:false,freeMode:!snap,slidesPerView:slidesPerView}),productIds.map(function(id){return React.createElement(Swiper.Item,{key:id,className:container},React.createElement(ProductListEntryProvider,{productId:id},React.createElement(Item,{productId:id,style:items})));})));}ProductSlider.WIDGET_ID=WIDGET_ID;ProductSlider.defaultProps={autoplay:false,className:null,delay:10,item:null,slidesPerView:null,snap:false,scope:null,meta:null};export default ProductSlider;

package/product/components/ProductSlider/spec.js

@@ -1 +1 @@
-/* eslint-disable require-jsdoc */import React from'react';import{shallow}from'enzyme';import ProductSlider from"./index";jest.mock('@shopgate/engage/core',function(){return{useWidgetSettings:jest.fn()};});jest.mock('@shopgate/engage/components',function(){var Swiper=function Swiper(_ref){var children=_ref.children;return children;};Swiper.Item=function(_ref2){var children=_ref2.children;return children;};Swiper.Item.displayName='Swiper.Item';return{Swiper:Swiper};});jest.mock('@shopgate/engage/product',function(){return{ProductListTypeProvider:function ProductListTypeProvider(_ref3){var children=_ref3.children;return children;},ProductListEntryProvider:function ProductListEntryProvider(_ref4){var children=_ref4.children;return children;}};});jest.mock('@shopgate/pwa-common/context',function(){var ProductCard=function ProductCard(props){return React.createElement(ProductCard,props);};return{Theme:function Theme(_ref5){var children=_ref5.children;return children({ProductCard:ProductCard});}};});describe('<ProductSlider />',function(){it('should match snapshot',function(){var wrapper=shallow(React.createElement(ProductSlider,{productIds:['prod1']})).dive();expect(wrapper).toMatchSnapshot();});});/* eslint-enable require-jsdoc */
+/* eslint-disable require-jsdoc */import React from'react';import{shallow}from'enzyme';import ProductSlider from"./index";jest.mock('@shopgate/engage/core',function(){return{useWidgetSettings:jest.fn()};});jest.mock('@shopgate/engage/components',function(){var Swiper=function Swiper(_ref){var children=_ref.children;return children;};Swiper.Item=function(_ref2){var children=_ref2.children;return children;};Swiper.Item.displayName='Swiper.Item';return{Swiper:Swiper};});jest.mock('@shopgate/engage/core/hooks',function(){var ProductCard=function ProductCard(props){return React.createElement(ProductCard,props);};return{useThemeComponents:function useThemeComponents(){return{ProductCard:ProductCard};}};});describe('<ProductSlider />',function(){it('should match snapshot',function(){var wrapper=shallow(React.createElement(ProductSlider,{productIds:['prod1']}));expect(wrapper).toMatchSnapshot();});});/* eslint-enable require-jsdoc */

package/product/components/index.js

@@ -1 +1 @@
-export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";
+export*from"./Availability";export{default as Characteristics}from"./Characteristics";export{default as Description}from"./Description";export{default as EffectivityDates}from"./EffectivityDates";export{default as MapPriceHint}from"./MapPriceHint";export*from"./Media";export{default as MediaSlider}from"./MediaSlider";export{default as Options}from"./Options";export{SelectOption,TextOption}from"./Options";export{default as OrderQuantityHint}from"./OrderQuantityHint";export{default as PriceDifference}from"./PriceDifference";export*from"./PriceInfo";export{default as ProductBadges}from"./ProductBadges";export{default as ProductCard}from"./ProductCard";export{default as ProductCharacteristics}from"./ProductCharacteristics";export{default as ProductDiscountBadge}from"./ProductDiscountBadge";export{default as ProductGridPrice}from"./ProductGridPrice";export{default as ProductImage}from"./ProductImage";export{default as ProductList}from"./ProductList";export*from"./ProductName";export{default as ProductProperties}from"./ProductProperties/ProductProperties";export{default as ProductSlider}from"./ProductSlider";export*from"./ProductVariants";export{default as QuantityPicker}from"./QuantityPicker";export{default as Rating}from"./Rating";export*from"./RelationsSlider";export*from"./Swatch";export*from"./Swatches";export*from"./UnitQuantityPicker";