@shopgate/engage 7.28.0-beta.6 → 7.29.0-alpha.2

package/category/components/CategoryImage/index.js

@@ -1,5 +1,5 @@
 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}from'react';import PropTypes from'prop-types';import{Image}from'@shopgate/engage/components';import connect from"./connector";/**
  * The CategoryImage component
  * @param {Object} props The component props.
- * @returns {JSX}
+ * @returns {JSX.Element}
  */var CategoryImage=function CategoryImage(_ref){var className=_ref.className,src=_ref.src,placeholderSrc=_ref.placeholderSrc;var _useState=useState(!src),_useState2=_slicedToArray(_useState,2),showPlaceholder=_useState2[0],setShowPlaceholder=_useState2[1];var onImageError=useCallback(function(){setShowPlaceholder(true);},[setShowPlaceholder]);if(!showPlaceholder){return React.createElement(Image,{className:className,src:src,onError:onImageError});}if(!placeholderSrc){return null;}return React.createElement(Image,{key:"placeholder",className:className,src:placeholderSrc});};CategoryImage.defaultProps={src:null,placeholderSrc:null,className:null};export default connect(CategoryImage);

package/category/components/CategoryList/index.js

@@ -1,7 +1,11 @@
 import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import{CATEGORY_PATH}from'@shopgate/pwa-common-commerce/category/constants';import Portal from'@shopgate/pwa-common/components/Portal';import{Placeholder}from'@shopgate/pwa-ui-shared';import{CATEGORY_ITEM}from'@shopgate/pwa-common-commerce/category/constants/Portals';import{i18n}from'@shopgate/engage/core';import{getShowAllProductsFilters}from'@shopgate/engage/category';import{SheetList,TextLink}from'@shopgate/engage/components';import CategoryImage from"../CategoryImage";import styles from"./style";/**
  * The CategoryList component.
  * @param {Object} props The component props.
+ * @param {Object} props.parentCategory The parentCategory props.
  * @param {Array} props.categories The categories to display.
- * @param {Array} props.categories The number of rows to prerender.
- * @returns {JSX}
- */var CategoryList=function CategoryList(_ref){var categories=_ref.categories,parentCategory=_ref.parentCategory,prerender=_ref.prerender,showAllProducts=_ref.showAllProducts,showImages=_ref.showImages;if(!categories||!categories.length){if(prerender===0){return null;}return React.createElement(SheetList,{className:classNames(styles.sheet,'engage__category__category-list')},Array(Math.min(prerender,8)).fill('').map(function(val,index){var key="placeholder-".concat(index);return React.createElement(Placeholder,{height:20,key:key,left:0,top:18,width:220});}));}var filters=getShowAllProductsFilters(parentCategory);return React.createElement(SheetList,{className:classNames(styles.sheet,'engage__category__category-list')},showAllProducts?React.createElement("div",{className:classNames(styles.showAllProducts,'engage__category__category-show-all-products')},React.createElement(Portal,{key:parentCategory.id,name:"category.show-all-products",props:{categoryId:parentCategory.id}},React.createElement(SheetList.Item,{link:"".concat(CATEGORY_PATH,"/").concat(bin2hex(parentCategory.id),"/all"),title:i18n.text('category.showAllProducts.label'),linkState:{categoryName:parentCategory.name,categoryId:parentCategory.id,filters:filters},testId:"showAllProducts",linkComponent:TextLink}))):null,categories.map(function(category){return React.createElement(Portal,{key:category.id,name:CATEGORY_ITEM,props:{categoryId:category.id}},React.createElement(SheetList.Item,{link:"".concat(CATEGORY_PATH,"/").concat(bin2hex(category.id)),title:category.name,description:category.description,linkState:{categoryId:category.id,title:category.name},testId:category.name,rightComponent:showImages?React.createElement(CategoryImage,{className:styles.image,src:category.imageUrl}):null,linkComponent:TextLink}));}));};CategoryList.defaultProps={categories:null,parentCategory:null,prerender:0,showAllProducts:false,showImages:false};export default CategoryList;
+ * @param {number} props.prerender The number of rows to prerender.
+ * @param {boolean} props.showAllProducts Whether to show all products
+ * @param {boolean} props.showImages Whether to show category images
+ * @param {boolean} props.showLeftSideImages Whether to show category images on the left side
+ * @returns {JSX.Element}
+ */var CategoryList=function CategoryList(_ref){var categories=_ref.categories,parentCategory=_ref.parentCategory,prerender=_ref.prerender,showAllProducts=_ref.showAllProducts,showImages=_ref.showImages,showLeftSideImages=_ref.showLeftSideImages;if(!categories||!categories.length){if(prerender===0){return null;}return React.createElement(SheetList,{className:classNames(styles.sheet,'engage__category__category-list')},Array(Math.min(prerender,8)).fill('').map(function(val,index){var key="placeholder-".concat(index);return React.createElement(Placeholder,{height:20,key:key,left:0,top:18,width:220});}));}var filters=getShowAllProductsFilters(parentCategory);return React.createElement(SheetList,{className:classNames(styles.sheet,'engage__category__category-list')},showAllProducts?React.createElement("div",{className:classNames(styles.showAllProducts,'engage__category__category-show-all-products')},React.createElement(Portal,{key:parentCategory.id,name:"category.show-all-products",props:{categoryId:parentCategory.id}},React.createElement(SheetList.Item,{link:"".concat(CATEGORY_PATH,"/").concat(bin2hex(parentCategory.id),"/all"),title:i18n.text('category.showAllProducts.label'),linkState:{categoryName:parentCategory.name,categoryId:parentCategory.id,filters:filters},testId:"showAllProducts",linkComponent:TextLink}))):null,categories.map(function(category){return React.createElement(Portal,{key:category.id,name:CATEGORY_ITEM,props:{categoryId:category.id}},React.createElement(SheetList.Item,{link:"".concat(CATEGORY_PATH,"/").concat(bin2hex(category.id)),title:category.name,description:category.description,linkState:{categoryId:category.id,title:category.name},testId:category.name,rightComponent:showImages?React.createElement(CategoryImage,{className:styles.image,src:category.imageUrl}):null,leftComponent:showLeftSideImages?React.createElement(CategoryImage,{className:styles.image,src:category.imageUrl}):null,linkComponent:TextLink}));}));};CategoryList.defaultProps={categories:null,parentCategory:null,prerender:0,showAllProducts:false,showImages:false,showLeftSideImages:false};export default CategoryList;

package/category/components/CategoryList/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var sheet=css({background:colors.light}).toString();var showAllProducts=css({fontWeight:700}).toString();var image=css({display:'none',background:'red',borderRadius:20}).toString();export default{sheet:sheet,showAllProducts:showAllProducts,image:image};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;var sheet=css({background:colors.light}).toString();var showAllProducts=css({fontWeight:700}).toString();var image=css({width:'30px',marginRight:8}).toString();export default{sheet:sheet,showAllProducts:showAllProducts,image:image};

package/components/ResponsiveContainer/breakpoints.js

@@ -1,5 +1,5 @@
 // Ugly imports to avoid breaking tests due to circular dependencies
-import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
+import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBridge}from'@shopgate/engage/core/helpers/bridge';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';var iosThemeActive=isIOSTheme();/* eslint-disable extra-rules/no-single-line-objects */var breakpoints=[{name:'xs',from:0,to:600},{name:'sm',from:600,to:960},{name:'md',from:960,to:1280},{name:'lg',from:1280,to:1920},{name:'xl',from:1920,to:Number.MAX_VALUE}];/* eslint-enable extra-rules/no-single-line-objects */ /**
  * Generates a media query for different breakpoints and platform.
  * @param {Object} comparators Comparators.
  * @param {string} breakpoint Breakpoint rule.
@@ -9,6 +9,6 @@ import{isIOSTheme}from'@shopgate/engage/core/helpers/isIOSTheme';import{hasWebBr
 var breakpointStart=breakpoint.search(/[a-zA-Z]/);var comparatorString=breakpoint.substring(0,breakpointStart===-1?0:breakpointStart);var breakpointString=breakpoint.substring(breakpointStart===-1?0:breakpointStart);// Get configuration.
 var comparator=comparators[comparatorString];var config=breakpoints.find(function(b){return b.name===breakpointString;});// Web / App config.
 // Handle iOS theme as app for now so that media queries in shared components only work for app
-var isWeb=hasWebBridge()&&!iosThemeActive;// Always mode.
+var isWeb=hasWebBridge()&&!iosThemeActive&&!IS_PAGE_PREVIEW_ACTIVE;// Always mode.
 if(webAlways&&isWeb||appAlways&&!isWeb){return true;}// Return media query that never evaluates for now.
 if(appOnly&&isWeb||webOnly&&!isWeb){return false;}return comparator(config.from,config.to,window.innerWidth);};export default breakpoints;

package/components/SheetList/components/Item/index.js

@@ -1,17 +1,17 @@
 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 classNames from'classnames';import{withForwardedRef}from'@shopgate/engage/core';import Grid from'@shopgate/pwa-common/components/Grid';import Link from'@shopgate/pwa-common/components/Link';import Glow from'@shopgate/pwa-ui-shared/Glow';import styles from"./style";/**
  * The list item component.
  */var Item=/*#__PURE__*/function(_Component){function Item(){_classCallCheck(this,Item);return _callSuper(this,Item,arguments);}_inherits(Item,_Component);return _createClass(Item,[{key:"shouldComponentUpdate",value:/**
-   * Should only update what the `selected` or `disabled` props change.
+   * Should only update when the `selected` or `disabled` or 'leftComponent' props change.
    * @param {Object} nextProps The next set of component props.
-   * @returns {JSX}
-   */function shouldComponentUpdate(nextProps){return this.props.isSelected!==nextProps.isSelected||this.props.isDisabled!==nextProps.isDisabled;}/**
+   * @returns {boolean}
+   */function shouldComponentUpdate(nextProps){return this.props.isSelected!==nextProps.isSelected||this.props.isDisabled!==nextProps.isDisabled||this.props.leftComponent!==nextProps.leftComponent;}/**
    * Renders the bulk of the content.
    * @param {boolean} [isNested=true] Tells if the content is rendered nested.
-   * @returns {JSX}
-   */},{key:"renderContent",value:function renderContent(){var isNested=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var _this$props=this.props,isDisabled=_this$props.isDisabled,isSelected=_this$props.isSelected,title=_this$props.title,image=_this$props.image,rightComponent=_this$props.rightComponent,forwardedRef=_this$props.forwardedRef,description=_this$props.description;var gridStyles=_defineProperty(_defineProperty({},styles.grid,true),styles.selected,isSelected);var titleStyles=_defineProperty(_defineProperty({},styles.title,true),styles.disabled,isDisabled);var ref=isNested?null:forwardedRef;return React.createElement("div",{"data-test-id":this.props.testId,ref:ref,className:"engage__sheet-list__item"},React.createElement(Grid,{className:classNames(gridStyles),component:"div"},image!==null&&React.createElement("div",{className:styles.image},image),React.createElement(Grid.Item,{className:classNames(titleStyles),component:"div",grow:1},React.createElement("div",null,title),description&&React.createElement("div",{className:styles.description,dangerouslySetInnerHTML:{__html:description}})),rightComponent!==null&&React.createElement(Grid.Item,{component:"div",grow:1},rightComponent)));}/**
-   * @returns {JSX}
+   * @returns {JSX.Element}
+   */},{key:"renderContent",value:function renderContent(){var isNested=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;var _this$props=this.props,isDisabled=_this$props.isDisabled,isSelected=_this$props.isSelected,title=_this$props.title,image=_this$props.image,rightComponent=_this$props.rightComponent,leftComponent=_this$props.leftComponent,forwardedRef=_this$props.forwardedRef,description=_this$props.description;var gridStyles=_defineProperty(_defineProperty({},styles.grid,true),styles.selected,isSelected);var titleStyles=_defineProperty(_defineProperty({},styles.title,true),styles.disabled,isDisabled);var ref=isNested?null:forwardedRef;return React.createElement("div",{"data-test-id":this.props.testId,ref:ref,className:"engage__sheet-list__item"},React.createElement(Grid,{className:classNames(gridStyles),component:"div"},image!==null&&React.createElement("div",{className:styles.image},image),leftComponent!==null&&React.createElement(Grid.Item,{component:"div",grow:1},leftComponent),React.createElement(Grid.Item,{className:classNames(titleStyles),component:"div",grow:1},React.createElement("div",null,title),description&&React.createElement("div",{className:styles.description,dangerouslySetInnerHTML:{__html:description}})),rightComponent!==null&&React.createElement(Grid.Item,{component:"div",grow:1},rightComponent)));}/**
+   * @returns {JSX.Element}
    */},{key:"render",value:function render(){var _this$props2=this.props,link=_this$props2.link,linkState=_this$props2.linkState,LinkComponent=_this$props2.linkComponent,onClick=_this$props2.onClick,className=_this$props2.className,isDisabled=_this$props2.isDisabled,testId=_this$props2.testId,forwardedRef=_this$props2.forwardedRef,isSelected=_this$props2.isSelected;/**
      * If this item is disabled, selected or doesn't have a valid
      * link or click handler then wrap the content with other components.
      */if(isDisabled||!link&&!onClick){return this.renderContent(false);}// Wrap with a <Link> if the `link` prop is set.
-if(link){return React.createElement(Glow,{ref:forwardedRef,className:className,styles:{hover:styles.glowHover}},React.createElement(LinkComponent,{href:link,onClick:onClick,state:linkState,tabIndex:0},this.renderContent()));}return React.createElement("div",{onKeyPress:function onKeyPress(){},onClick:onClick,"data-test-id":testId,ref:forwardedRef,tabIndex:0,role:"option","aria-selected":isSelected},React.createElement(Glow,{className:className,styles:{hover:styles.glowHover}},this.renderContent()));}}]);}(Component);_defineProperty(Item,"defaultProps",{className:null,description:null,forwardedRef:null,image:null,isDisabled:false,isSelected:false,link:null,linkState:null,onClick:null,rightComponent:null,linkComponent:Link,testId:null});export default withForwardedRef(Item);
+if(link){return React.createElement(Glow,{ref:forwardedRef,className:className,styles:{hover:styles.glowHover}},React.createElement(LinkComponent,{href:link,onClick:onClick,state:linkState,tabIndex:0},this.renderContent()));}return React.createElement("div",{onKeyPress:function onKeyPress(){},onClick:onClick,"data-test-id":testId,ref:forwardedRef,tabIndex:0,role:"option","aria-selected":isSelected},React.createElement(Glow,{className:className,styles:{hover:styles.glowHover}},this.renderContent()));}}]);}(Component);_defineProperty(Item,"defaultProps",{className:null,description:null,forwardedRef:null,image:null,isDisabled:false,isSelected:false,leftComponent:null,link:null,linkComponent:Link,linkState:null,onClick:null,rightComponent:null,testId:null});export default withForwardedRef(Item);

package/components/Typography/Typography.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { Variant as ThemeVariant } from '../../styles/theme/createTheme/createTypography';
+
+type Variant = ThemeVariant | 'srOnly';
+
+export type TypographyClassKey =
+  | 'root'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'caption'
+  | 'button'
+  | 'overline'
+  | 'srOnly'
+  | 'alignLeft'
+  | 'alignCenter'
+  | 'alignRight'
+  | 'alignJustify'
+  | 'noWrap'
+  | 'gutterBottom'
+  | 'paragraph'
+  | 'colorInherit'
+  | 'colorPrimary'
+  | 'colorSecondary'
+  | 'colorTextPrimary'
+  | 'colorTextSecondary'
+  | 'colorTextTertiary'
+  | 'colorError'
+  | 'colorWarning'
+  | 'colorSuccess'
+  | 'displayInline'
+  | 'displayBlock';
+
+/**
+ * Props for the polymorphic Typography component.
+ *
+ * @template C - the element or component type to render (defaults to 'span')
+ */
+export type TypographyProps<
+  C extends React.ElementType = 'span'
+> = {
+  /**
+   * Set the text-align on the component.
+   * @default "inherit"
+   */
+  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+  color?:
+    | 'initial'
+    | 'inherit'
+    | 'primary'
+    | 'secondary'
+    | 'textPrimary'
+    | 'textSecondary'
+    | 'textTertiary'
+    | 'error'
+    | 'warning'
+    | 'success';
+  /**
+   * Controls the display type
+   * @default "initial"
+   */
+  display?: 'initial' | 'block' | 'inline';
+  /**
+   * If `true`, the text will have a bottom margin.
+   * @default false
+   */
+  gutterBottom?: boolean;
+  /**
+   * If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+   * Note that text overflow can only happen with block or inline-block level elements
+   * (the element needs to have a width in order to overflow).
+   * @default false
+   */
+  noWrap?: boolean;
+  /**
+   * 	If true, the text will have a bottom margin.
+   * @default false
+   */
+  paragraph?: boolean;
+  /**
+   * Applies the theme typography styles.
+   * @default "body1"
+   */
+  variant?: Variant | 'inherit';
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   * Overrides the behavior of the variantMapping prop.
+   */
+  component?: C;
+  /**
+   * The component maps the variant prop to a range of different HTML element types.
+   * For instance, subtitle1 to <h6>. If you wish to change that mapping, you can provide your own.
+   * Alternatively, you can use the component prop.
+   */
+  variantMapping?: Partial<Record<Variant, string>>;
+  /**
+   * Additional CSS class names to apply to the root element.
+   */
+  className?: string;
+  /**
+   * Override specific variant styles
+   */
+  classes?: Partial<Record<TypographyClassKey, string>>;
+  /**
+   * Content to render inside the component
+   */
+  children?: React.ReactNode;
+  /**
+   * Element type or custom component to render
+   * @internal
+   */
+  as?: C;
+} & Omit<React.ComponentPropsWithRef<C>, 'children' | 'as' | 'component'>;
+
+/**
+ * The Typography component is used to render text with various styles and alignments.
+ * It uses the theme's typography styles and can be customized with props.
+ */
+export declare const Typography: <
+  C extends React.ElementType = 'span'
+>(
+  props: TypographyProps<C> & { ref?: React.ComponentPropsWithRef<C>['ref'] }
+) => React.ReactElement | null;
+
+export default Typography;

package/components/Typography/Typography.js

@@ -0,0 +1,11 @@
+var _excluded=["align","className","color","component","display","gutterBottom","noWrap","paragraph","variant","variantMapping","classes"];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*as React from'react';import PropTypes from'prop-types';import{withStyles}from'@shopgate/engage/styles';import classNames from'classnames';/**
+ * Capitalizes the first letter of a string.
+ * @param {string} string The string to capitalize.
+ * @returns {string} The string with the first letter capitalized.
+ */var capitalize=function capitalize(string){return string.charAt(0).toUpperCase()+string.slice(1);};/**
+ * @typedef {import('../../styles').Theme} Theme
+ */ /**
+ * Creates the styles for the Typography component.
+ * @param {Theme} theme The theme object.
+ * @returns {Object} The styles object.
+ */export var styles=function styles(theme){return{/* Styles applied to the root element. */root:{margin:0},/* Styles applied to the root element if `variant="body2"`. */body2:theme.typography.body2,/* Styles applied to the root element if `variant="body1"`. */body1:theme.typography.body1,/* Styles applied to the root element if `variant="caption"`. */caption:theme.typography.caption,/* Styles applied to the root element if `variant="button"`. */button:theme.typography.button,/* Styles applied to the root element if `variant="h1"`. */h1:theme.typography.h1,/* Styles applied to the root element if `variant="h2"`. */h2:theme.typography.h2,/* Styles applied to the root element if `variant="h3"`. */h3:theme.typography.h3,/* Styles applied to the root element if `variant="h4"`. */h4:theme.typography.h4,/* Styles applied to the root element if `variant="h5"`. */h5:theme.typography.h5,/* Styles applied to the root element if `variant="h6"`. */h6:theme.typography.h6,/* Styles applied to the root element if `variant="subtitle1"`. */subtitle1:theme.typography.subtitle1,/* Styles applied to the root element if `variant="subtitle2"`. */subtitle2:theme.typography.subtitle2,/* Styles applied to the root element if `variant="overline"`. */overline:theme.typography.overline,/* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */srOnly:{position:'absolute',height:1,width:1,overflow:'hidden'},/* Styles applied to the root element if `align="left"`. */alignLeft:{textAlign:'left'},/* Styles applied to the root element if `align="center"`. */alignCenter:{textAlign:'center'},/* Styles applied to the root element if `align="right"`. */alignRight:{textAlign:'right'},/* Styles applied to the root element if `align="justify"`. */alignJustify:{textAlign:'justify'},/* Styles applied to the root element if `nowrap={true}`. */noWrap:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'},/* Styles applied to the root element if `gutterBottom={true}`. */gutterBottom:{marginBottom:'0.35em'},/* Styles applied to the root element if `paragraph={true}`. */paragraph:{marginBottom:16},/* Styles applied to the root element if `color="inherit"`. */colorInherit:{color:'inherit'},/* Styles applied to the root element if `color="primary"`. */colorPrimary:{color:theme.palette.primary.main},/* Styles applied to the root element if `color="secondary"`. */colorSecondary:{color:theme.palette.secondary.main},/* Styles applied to the root element if `color="textPrimary"`. */colorTextPrimary:{color:theme.palette.text.primary},/* Styles applied to the root element if `color="textSecondary"`. */colorTextSecondary:{color:theme.palette.text.secondary},colorTextTertiary:{color:theme.palette.text.tertiary},/* Styles applied to the root element if `color="error"`. */colorError:{color:theme.palette.error.main},/* Styles applied to the root element if `color="warning"` */colorWarning:{color:theme.palette.warning.main},/* Styles applied to the root element if `color="success"` */colorSuccess:{color:theme.palette.success.main},/* Styles applied to the root element if `display="inline"`. */displayInline:{display:'inline'},/* Styles applied to the root element if `display="block"`. */displayBlock:{display:'block'}};};var defaultVariantMapping={h1:'h1',h2:'h2',h3:'h3',h4:'h4',h5:'h5',h6:'h6',subtitle1:'h6',subtitle2:'h6',body1:'p',body2:'p'};var Typography=React.forwardRef(function(props,ref){var _props$align=props.align,align=_props$align===void 0?'inherit':_props$align,className=props.className,_props$color=props.color,color=_props$color===void 0?'initial':_props$color,component=props.component,_props$display=props.display,display=_props$display===void 0?'initial':_props$display,_props$gutterBottom=props.gutterBottom,gutterBottom=_props$gutterBottom===void 0?false:_props$gutterBottom,_props$noWrap=props.noWrap,noWrap=_props$noWrap===void 0?false:_props$noWrap,_props$paragraph=props.paragraph,paragraph=_props$paragraph===void 0?false:_props$paragraph,_props$variant=props.variant,variant=_props$variant===void 0?'body1':_props$variant,_props$variantMapping=props.variantMapping,variantMapping=_props$variantMapping===void 0?defaultVariantMapping:_props$variantMapping,classes=props.classes,other=_objectWithoutProperties(props,_excluded);var Component=component||(paragraph?'p':variantMapping[variant]||defaultVariantMapping[variant])||'span';return React.createElement(Component,_extends({className:classNames(classes.root,_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes[variant],variant!=='inherit'),classes["color".concat(capitalize(color))],color!=='initial'),classes.noWrap,noWrap),classes.gutterBottom,gutterBottom),classes.paragraph,paragraph),classes["align".concat(capitalize(align))],align!=='inherit'),classes["display".concat(capitalize(display))],display!=='initial'),className),ref:ref},other));});Typography.defaultProps={align:'inherit',children:null,className:undefined,color:'initial',component:null,display:'initial',gutterBottom:false,noWrap:false,paragraph:false,variant:'body1',variantMapping:defaultVariantMapping};export default withStyles(Typography,styles,{name:'Typography'});

package/components/Typography/index.js

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

package/components/View/components/Content/style.js

@@ -1,3 +1,3 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var container=css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?{bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'}:{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));export var containerInner=css(_extends({},isIOs&&useScrollContainer()?{// Make the scroll container content a bit higher than the actual scroll container to
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';export var container=css(_extends({display:'flex',flexDirection:'column',width:'100vw'},useScrollContainer()?_extends({bottom:0,top:0,overflowScrolling:'touch',position:'absolute',WebkitOverflowScrolling:'touch'},IS_PAGE_PREVIEW_ACTIVE&&{scrollbarWidth:'thin',backgroundColor:'var(--page-background-color)'}):{height:'100%',backgroundColor:'var(--page-background-color)'},_defineProperty({},responsiveMediaQuery('>xs',{webOnly:true}),{width:'var(--page-content-width)'})));export var containerInner=css(_extends({},isIOs&&useScrollContainer()?{// Make the scroll container content a bit higher than the actual scroll container to
 // get a rubber band effect in all situations
 minHeight:'calc(100% + var(--extra-ios-scroll-space, 0px))'}:{},{':after':{content:"''",display:'block',pointerEvents:'none',paddingBottom:'calc(var(--page-content-offset-bottom) + var(--keyboard-height))'}}));

package/components/View/context.js

@@ -1 +1 @@
-import React from'react';export var ViewContext=React.createContext();
+import React from'react';import noop from'lodash/noop';export var ViewContext=React.createContext({top:null,bottom:null,ariaHidden:false,set:noop,setTop:noop,setBottom:noop,setContentRef:noop,getContentRef:function getContentRef(){return{current:null};},scrollTop:noop,setAriaHidden:noop});

package/components/index.js

@@ -9,4 +9,4 @@ export{default as AccordionContainer}from'@shopgate/pwa-ui-shared/AccordionConta
 export{default as CartIconIOS}from'@shopgate/pwa-ui-ios/icons/CartIcon';export{default as FilterIconIOS}from'@shopgate/pwa-ui-ios/icons/FilterIcon';export{default as HomeIconIOS}from'@shopgate/pwa-ui-ios/icons/HomeIcon';export{default as ShareIconIOS}from'@shopgate/pwa-ui-ios/icons/ShareIcon';// ICONS ANDROID
 export{default as ShareIconAndroid}from'@shopgate/pwa-ui-material/icons/ShareIcon';// ICONS SHARED
 export{default as AccountBoxIcon}from'@shopgate/pwa-ui-shared/icons/AccountBoxIcon';export{default as AddMoreIcon}from'@shopgate/pwa-ui-shared/icons/AddMoreIcon';export{default as ArrowDropIcon}from'@shopgate/pwa-ui-shared/icons/ArrowDropIcon';export{default as ArrowIcon}from'@shopgate/pwa-ui-shared/icons/ArrowIcon';export{default as BarcodeScannerIcon}from'@shopgate/pwa-ui-shared/icons/BarcodeScannerIcon';export{default as BoxIcon}from'@shopgate/pwa-ui-shared/icons/BoxIcon';export{default as BrowseIcon}from'@shopgate/pwa-ui-shared/icons/BrowseIcon';export{default as BurgerIcon}from'@shopgate/pwa-ui-shared/icons/BurgerIcon';export{default as CartIcon}from'@shopgate/pwa-ui-shared/icons/CartIcon';export{default as CartPlusIcon}from'@shopgate/pwa-ui-shared/icons/CartPlusIcon';export{default as CartCouponIcon}from'@shopgate/pwa-ui-shared/icons/CartCouponIcon';export{default as CheckedIcon}from'@shopgate/pwa-ui-shared/icons/CheckedIcon';export{default as CheckIcon}from'@shopgate/pwa-ui-shared/icons/CheckIcon';export{default as ChevronIcon}from'@shopgate/pwa-ui-shared/icons/ChevronIcon';export{default as CreditCardIcon}from'@shopgate/pwa-ui-shared/icons/CreditCardIcon';export{default as CrossIcon}from'@shopgate/pwa-ui-shared/icons/CrossIcon';export{default as DescriptionIcon}from'@shopgate/pwa-ui-shared/icons/DescriptionIcon';export{default as FilterIcon}from'@shopgate/pwa-ui-shared/icons/FilterIcon';export{default as FlashEnabledIcon}from'@shopgate/pwa-ui-shared/icons/FlashEnabledIcon';export{default as FlashDisabledIcon}from'@shopgate/pwa-ui-shared/icons/FlashDisabledIcon';export{default as GridIcon}from'@shopgate/pwa-ui-shared/icons/GridIcon';export{default as HeartIcon}from'@shopgate/pwa-ui-shared/icons/HeartIcon';export{default as HeartOutlineIcon}from'@shopgate/pwa-ui-shared/icons/HeartOutlineIcon';export{default as HeartPlusIcon}from'@shopgate/pwa-ui-shared/icons/HeartPlusIcon';export{default as HeartPlusOutlineIcon}from'@shopgate/pwa-ui-shared/icons/HeartPlusOutlineIcon';export{default as HomeIcon}from'@shopgate/pwa-ui-shared/icons/HomeIcon';export{default as InfoIcon}from'@shopgate/pwa-ui-shared/icons/InfoIcon';export{default as InfoOutlineIcon}from'@shopgate/pwa-ui-shared/icons/InfoOutlineIcon';export{default as ListIcon}from'@shopgate/pwa-ui-shared/icons/ListIcon';export{default as LocatorIcon}from'@shopgate/pwa-ui-shared/icons/LocatorIcon';export{default as LocalShippingIcon}from'@shopgate/pwa-ui-shared/icons/LocalShippingIcon';export{default as LocationIcon}from'@shopgate/pwa-ui-shared/icons/LocationIcon';export{default as LockIcon}from'@shopgate/pwa-ui-shared/icons/LockIcon';export{default as LogoutIcon}from'@shopgate/pwa-ui-shared/icons/LogoutIcon';export{default as MagnifierIcon}from'@shopgate/pwa-ui-shared/icons/MagnifierIcon';export{default as MoreIcon}from'@shopgate/pwa-ui-shared/icons/MoreIcon';export{default as MoreVertIcon}from'@shopgate/pwa-ui-shared/icons/MoreVertIcon';export{default as PersonIcon}from'@shopgate/pwa-ui-shared/icons/PersonIcon';export{default as PhoneIcon}from'@shopgate/pwa-ui-shared/icons/PhoneIcon';export{default as PlaceholderIcon}from'@shopgate/pwa-ui-shared/icons/PlaceholderIcon';export{default as RadioCheckedIcon}from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';export{default as RadioUncheckedIcon}from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';export{default as SecurityIcon}from'@shopgate/pwa-ui-shared/icons/SecurityIcon';export{default as ShoppingCartIcon}from'@shopgate/pwa-ui-shared/icons/ShoppingCartIcon';export{default as SortIcon}from'@shopgate/pwa-ui-shared/icons/SortIcon';export{default as StarHalfIcon}from'@shopgate/pwa-ui-shared/icons/StarHalfIcon';export{default as StarIcon}from'@shopgate/pwa-ui-shared/icons/StarIcon';export{default as StarOutlineIcon}from'@shopgate/pwa-ui-shared/icons/StarOutlineIcon';export{default as TickIcon}from'@shopgate/pwa-ui-shared/icons/TickIcon';export{default as TrashIcon}from'@shopgate/pwa-ui-shared/icons/TrashIcon';export{default as TrashOutlineIcon}from'@shopgate/pwa-ui-shared/icons/TrashOutlineIcon';export{default as UncheckedIcon}from'@shopgate/pwa-ui-shared/icons/UncheckedIcon';export{default as ViewListIcon}from'@shopgate/pwa-ui-shared/icons/ViewListIcon';export{default as VisibilityIcon}from'@shopgate/pwa-ui-shared/icons/VisibilityIcon';export{default as VisibilityOffIcon}from'@shopgate/pwa-ui-shared/icons/VisibilityOffIcon';export{default as TimeIcon}from'@shopgate/pwa-ui-shared/icons/TimeIcon';export{default as NotificationIcon}from'@shopgate/pwa-ui-shared/icons/NotificationIcon';// LOCAL
-export{MessageBar}from"./MessageBar";export{default as NavigationHandler}from"./NavigationHandler";export{default as TimeBoundary}from"./TimeBoundary";export{default as IntersectionVisibility}from"./IntersectionVisibility";export{default as VideoPlayer}from"./VideoPlayer";export{default as SheetDrawer}from"./SheetDrawer";export{default as SheetList}from"./SheetList";export{default as NullComponent}from"./NullComponent";export{default as View,ViewContext}from"./View";export{default as QuantityInput}from"./QuantityInput";export{default as QuantityLabel}from"./QuantityLabel";export{default as ResponsiveContainer}from"./ResponsiveContainer";export{default as BrandingColorBanner}from"./BrandingColorBanner";export{default as ScrollHeader}from"./ScrollHeader";export{default as Menu}from"./Menu";export{default as Toggle}from"./Toggle";export{Form}from"./Form";export{FormBuilder}from"./Form";export{Footer}from"./Footer";export{SideNavigation}from"./SideNavigation";export{default as TextLink}from"./TextLink/TextLink";export{ConditionalWrapper}from"./ConditionalWrapper";export{default as RadioGroupV2,useRadioGroup}from"./RadioGroup";export{default as RadioV2}from"./Radio";export{default as RadioCard}from"./RadioCard";export{default as ChipLayout}from"./ChipLayout";export{default as Logo}from"./Logo";export{default as PickerUtilize}from"./PickerUtilize";export{default as Switch}from"./Switch";export{default as SnackBarContainer}from"./SnackBarContainer";export{default as ConnectedReactPortal}from"./ConnectedReactPortal";
+export{MessageBar}from"./MessageBar";export{default as NavigationHandler}from"./NavigationHandler";export{default as TimeBoundary}from"./TimeBoundary";export{default as IntersectionVisibility}from"./IntersectionVisibility";export{default as VideoPlayer}from"./VideoPlayer";export{default as SheetDrawer}from"./SheetDrawer";export{default as SheetList}from"./SheetList";export{default as NullComponent}from"./NullComponent";export{default as View,ViewContext}from"./View";export{default as QuantityInput}from"./QuantityInput";export{default as QuantityLabel}from"./QuantityLabel";export{default as ResponsiveContainer}from"./ResponsiveContainer";export{default as BrandingColorBanner}from"./BrandingColorBanner";export{default as ScrollHeader}from"./ScrollHeader";export{default as Menu}from"./Menu";export{default as Toggle}from"./Toggle";export{Form}from"./Form";export{FormBuilder}from"./Form";export{Footer}from"./Footer";export{SideNavigation}from"./SideNavigation";export{default as TextLink}from"./TextLink/TextLink";export{ConditionalWrapper}from"./ConditionalWrapper";export{default as RadioGroupV2,useRadioGroup}from"./RadioGroup";export{default as RadioV2}from"./Radio";export{default as RadioCard}from"./RadioCard";export{default as ChipLayout}from"./ChipLayout";export{default as Logo}from"./Logo";export{default as PickerUtilize}from"./PickerUtilize";export{default as Switch}from"./Switch";export{default as SnackBarContainer}from"./SnackBarContainer";export{default as ConnectedReactPortal}from"./ConnectedReactPortal";export{Typography}from"./Typography";

package/core/constants/index.js

@@ -3,4 +3,10 @@ export*from'@shopgate/pwa-core/constants/ErrorManager';export*from'@shopgate/pwa
 export*from'@shopgate/pwa-common/constants/ActionTypes';export*from'@shopgate/pwa-common/constants/Configuration';export*from'@shopgate/pwa-common/constants/Device';export*from'@shopgate/pwa-common/constants/DisplayOptions';export*from'@shopgate/pwa-common/constants/Pipelines';export*from'@shopgate/pwa-common/constants/Portals';// CLIENT CONSTANTS
 export*from'@shopgate/pwa-common/constants/client';// MENU CONSTANTS
 export*from'@shopgate/pwa-common/constants/MenuIDs';// MODAL CONSTANTS
-export*from'@shopgate/pwa-common/constants/ModalTypes';export{INDEX_PATH,INDEX_PATH_DEEPLINK,LOGIN_PATH};
+export*from'@shopgate/pwa-common/constants/ModalTypes';export{INDEX_PATH,INDEX_PATH_DEEPLINK,LOGIN_PATH};/**
+ * Helper constant that can be used as a return value in Redux selectors to prevent
+ * unnecessary re-renders.
+ */export var EMPTY_OBJECT=Object.freeze({});/**
+ * Helper constant that can be used as a return value in Redux selectors to prevent
+ * unnecessary re-renders.
+ */export var EMPTY_ARRAY=Object.freeze([]);

package/core/contexts/ThemeResourcesContext.d.ts

@@ -43,7 +43,16 @@ export interface ThemeResourcesContextType {
    * Mapping object that contains all available widgets.
    * Key is the widget code, value is the widget component.
    */
-  widgets: ThemeWidgetMap;
+  widgets: {
+    /**
+     * All available widgets for Widget API v1
+     */
+    v1: ThemeWidgetMap;
+    /**
+     * All available widgets for Widget API v2
+     */
+    v2: ThemeWidgetMap;
+  };
 
   /**
    * Mapping object that contains multiple components provided by the theme.

package/core/contexts/ThemeResourcesContext.js

@@ -1,3 +1,3 @@
 import{createContext}from'react';/**
  * @typedef  {import('./ThemeResourcesContext').ThemeResourcesContextType ThemeResourcesContextType}
- */ /** @type {import('react').Context<ThemeResourcesContextType>} */export default createContext({widgets:{},components:{}});
+ */ /** @type {import('react').Context<ThemeResourcesContextType>} */export default createContext({widgets:{v1:{},v2:{}},components:{}});

package/core/helpers/scrollContainer.js

@@ -1,4 +1,4 @@
-import{hasWebBridge}from"./bridge";/**
+import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{hasWebBridge}from"./bridge";/**
  * Checks whether the app shall use a scroll container
  * @returns {boolean}
- */export var useScrollContainer=function useScrollContainer(){return!hasWebBridge();};
+ */export var useScrollContainer=function useScrollContainer(){return IS_PAGE_PREVIEW_ACTIVE||!hasWebBridge();};

package/core/hocs/withThemeResources.js

@@ -12,5 +12,8 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * HOC that injects the `widgets` value of the ThemeResources context as a prop called
  * `themeWidgets`.
  * @param {React.ComponentType<any>} WrappedComponent The wrapped component
+ * @param {Object} [options={}] Options for the HOC.
+ * @param {"v1"|"v2"} [options.version='v1'] The API version of the widgets to return. Can be 'v1'
+ * or 'v2'.
  * @returns {React.FC<any>}
- */export var withThemeWidgets=function withThemeWidgets(WrappedComponent){return function ThemeResourcesWrapper(props){var themeWidgets=useThemeWidgets();return React.createElement(WrappedComponent,_extends({},props,{themeWidgets:themeWidgets}));};};
+ */export var withThemeWidgets=function withThemeWidgets(WrappedComponent){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return function ThemeResourcesWrapper(props){var _options$version=options.version,version=_options$version===void 0?'v1':_options$version;var themeWidgets=useThemeWidgets(version);return React.createElement(WrappedComponent,_extends({},props,{themeWidgets:themeWidgets}));};};

package/core/hooks/events/index.js

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

package/core/hooks/events/usePressHandler.js

@@ -0,0 +1,38 @@
+import{useCallback}from'react';/**
+ * @typedef {Object} PressHandlers
+ * @property {Function} onClick - Click event handler.
+ * @property {Function} onKeyDown - Keydown handler for Enter/Space.
+ */ /**
+ * Improves development for accessibility by simplifying registration of multiple
+ * listeners (click, Enter, Space) to invoke the a callback when an element is
+ * interacted with.
+ *
+ * @param {Function} onPress Callback to run when the element is interacted with
+ * @param {Object} [options] Optional configuration
+ * @param {boolean} [options.triggerOnSpace=true] Whether Space triggers onActivate
+ * @param {boolean} [options.triggerOnEnter=false] Whether Enter triggers onActivate
+ * @returns {PressHandlers} handlers - Event handlers to spread onto an element
+ *
+ * @example
+ * ```js
+ * function MyPressableButton({ onActivate }) {
+ *   // Only Enter will trigger activation; Space is disabled
+ *   const handlers = usePressHandler(onActivate, {
+ *     triggerOnEnter: true,
+ *     triggerOnSpace: false,
+ *   })
+ * //
+ *   return (
+ *     <div
+ *       {...handlers}
+ *       role="button"
+ *       tabIndex={0}
+ *     >
+ *       Press Me (Enter only)
+ *     </div>
+ *   )
+ * }
+ * ```
+ */function usePressHandler(onPress){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var _options$triggerOnSpa=options.triggerOnSpace,triggerOnSpace=_options$triggerOnSpa===void 0?true:_options$triggerOnSpa,_options$triggerOnEnt=options.triggerOnEnter,triggerOnEnter=_options$triggerOnEnt===void 0?false:_options$triggerOnEnt;var handleKeyDown=useCallback(function(e){// Check for Enter
+if(triggerOnEnter&&e.key==='Enter'){e.preventDefault();onPress(e);}// Check for Space (may be ' ' or 'Spacebar')
+if(triggerOnSpace&&(e.key===' '||e.key==='Spacebar')){e.preventDefault();onPress(e);}},[onPress,triggerOnEnter,triggerOnSpace]);var handleClick=useCallback(function(e){onPress(e);},[onPress]);return{onClick:handleClick,onKeyDown:handleKeyDown};}export default usePressHandler;

package/core/hooks/useThemeResources.js

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

package/core/providers/ThemeResourcesProvider.js

@@ -1,14 +1,18 @@
 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
+ * @typedef {import('../contexts/ThemeResourcesContext').ThemeComponentMap} ThemeComponentMap
+ */ /**
+ * @typedef {Object} Widgets
+ * @property {ThemeComponentMap} v1 All available widgets for Widget API v1
+ * @property {ThemeComponentMap} v2 All available widgets for Widget API v2
  */ /**
  * ThemeResourcesProvider component.
  * @param {Object} props The component props.
- * @param {ComponentMap} props.widgets Mapping object with all available widget components for the
+ * @param {Widgets} 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
+ * @param {ThemeComponentMap} props.components Object with shared theme components. Can be used by
  * extensions the get unified visual presentation.
+ * @param {ThemeComponentMap} [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}

package/locations/subscriptions.js

@@ -1,4 +1,4 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{getProductsResult,productIsReady$,productsReceived$,productsReceivedCached$,RECEIVE_PRODUCTS_CACHED,variantDidChange$}from'@shopgate/engage/product';import{appDidStart$,routeWillEnter$,UIEvents,getCurrentRoute,hex2bin,getThemeSettings,getCurrentSearchQuery,appWillInit$,appInitialization}from'@shopgate/engage/core';import{cartReceived$,fetchCart,cartDidEnter$,getCartItems}from'@shopgate/engage/cart';import{userDidLogin$}from'@shopgate/engage/user';import{receiveFavoritesWhileVisible$}from'@shopgate/pwa-common-commerce/favorites/streams';import{getFavoritesProductsIds,isFetching}from'@shopgate/pwa-common-commerce/favorites/selectors';import{categoryDidBackEnter$}from'@shopgate/pwa-common-commerce/category/streams';import{searchDidBackEntered$}from'@shopgate/pwa-common-commerce/search/streams';import{hasNewServices}from'@shopgate/engage/core/helpers';import{cookieConsentInitialized$}from'@shopgate/engage/tracking/streams';import{getUserSearch,getStoreFinderSearch,getPreferredLocation,getIsPending,getProductAlternativeLocationParams,getProductAlternativeLocations,makeGetLocation}from"./selectors";import{fetchDefaultLocation,fetchLocations,fetchProductLocations,setPending,setUserGeolocation}from"./actions";import{setShowInventoryInLists,showInventoryInLists}from"./helpers";import fetchInventories from"./actions/fetchInventories";import{EVENT_SET_OPEN}from"./providers/FulfillmentProvider";import fetchProductInventories from"./actions/fetchProductInventories";import{submitReservationSuccess$,userSearchChanged$,storeFinderWillEnter$,preferredLocationDidUpdateOnPDP$,provideAlternativeLocation$,preferredLocationDidUpdateGlobalOnWishlist$,storeDetailPageWillEnter$}from"./locations.streams";import selectLocation from"./action-creators/selectLocation";import{NEARBY_LOCATIONS_RADIUS,SET_STORE_FINDER_SEARCH_RADIUS,NEARBY_LOCATIONS_LIMIT}from"./constants";import selectGlobalLocation from"./action-creators/selectGlobalLocation";var initialLocationsResolve;var initialLocationsReject;var initialLocationsPromise=new Promise(function(resolve,reject){initialLocationsResolve=resolve;initialLocationsReject=reject;});/**
+import _regeneratorRuntime from"@babel/runtime/regenerator";function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{getProductsResult,productIsReady$,productsReceived$,productsReceivedCached$,RECEIVE_PRODUCTS_CACHED,variantDidChange$}from'@shopgate/engage/product';import{appDidStart$,routeWillEnter$,UIEvents,getCurrentRoute,hex2bin,getThemeSettings,getCurrentSearchQuery,appWillInit$,appInitialization}from'@shopgate/engage/core';import{cartReceived$,fetchCart,cartDidEnter$,getCartItems}from'@shopgate/engage/cart';import{userDidLogin$}from'@shopgate/engage/user';import{receiveFavoritesWhileVisible$}from'@shopgate/pwa-common-commerce/favorites/streams';import{getFavoritesProductsIds,isFetching}from'@shopgate/pwa-common-commerce/favorites/selectors';import{categoryDidBackEnter$}from'@shopgate/pwa-common-commerce/category/streams';import{searchDidBackEntered$}from'@shopgate/pwa-common-commerce/search/streams';import{hasNewServices}from'@shopgate/engage/core/helpers';import{cookieConsentInitialized$}from'@shopgate/engage/tracking/streams';import{IS_PAGE_PREVIEW_ACTIVE}from'@shopgate/engage/page/constants';import{getUserSearch,getStoreFinderSearch,getPreferredLocation,getIsPending,getProductAlternativeLocationParams,getProductAlternativeLocations,makeGetLocation}from"./selectors";import{fetchDefaultLocation,fetchLocations,fetchProductLocations,setPending,setUserGeolocation}from"./actions";import{setShowInventoryInLists,showInventoryInLists}from"./helpers";import fetchInventories from"./actions/fetchInventories";import{EVENT_SET_OPEN}from"./providers/FulfillmentProvider";import fetchProductInventories from"./actions/fetchProductInventories";import{submitReservationSuccess$,userSearchChanged$,storeFinderWillEnter$,preferredLocationDidUpdateOnPDP$,provideAlternativeLocation$,preferredLocationDidUpdateGlobalOnWishlist$,storeDetailPageWillEnter$}from"./locations.streams";import selectLocation from"./action-creators/selectLocation";import{NEARBY_LOCATIONS_RADIUS,SET_STORE_FINDER_SEARCH_RADIUS,NEARBY_LOCATIONS_LIMIT}from"./constants";import selectGlobalLocation from"./action-creators/selectGlobalLocation";var initialLocationsResolve;var initialLocationsReject;var initialLocationsPromise=new Promise(function(resolve,reject){initialLocationsResolve=resolve;initialLocationsReject=reject;});/**
  * Sets a location once the location has been validated.
  * @param {string} locationCode Location code
  * @param {Function} dispatch Redux dispatch function
@@ -6,7 +6,7 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function _extends(){
  */var setLocationOnceAvailable=/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(locationCode,dispatch){var _ref3,initialLocations;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return initialLocationsPromise;case 3:_ref3=_context.sent;initialLocations=_ref3.locations;if(initialLocations.some(function(l){return l.code===locationCode;})){_context.next=7;break;}return _context.abrupt("return");case 7:_context.next=9;return dispatch(selectLocation({location:{code:locationCode}}));case 9:requestAnimationFrame(function(){dispatch(setPending(false));});_context.next=14;break;case 12:_context.prev=12;_context.t0=_context["catch"](0);case 14:case"end":return _context.stop();}},_callee,null,[[0,12]]);}));return function setLocationOnceAvailable(_x,_x2){return _ref.apply(this,arguments);};}();/**
  * Locations subscriptions.
  * @param {Function} subscribe The subscribe function.
- */function locationsSubscriber(subscribe){subscribe(appWillInit$,function(){appInitialization.set('location',/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref4){var dispatch;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:dispatch=_ref4.dispatch;if(!hasNewServices()){_context2.next=4;break;}_context2.next=4;return dispatch(fetchDefaultLocation());case 4:case"end":return _context2.stop();}},_callee2);}));return function(_x3){return _ref5.apply(this,arguments);};}());});subscribe(cookieConsentInitialized$,/*#__PURE__*/function(){var _ref7=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref6){var dispatch,getState,userSearch,_ref9,locations,preferredLocation,code,hasLocation,_ref11,preferredLocationDefault,locationToPreselect;return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:dispatch=_ref6.dispatch,getState=_ref6.getState;if(hasNewServices()){_context3.next=3;break;}return _context3.abrupt("return");case 3:// Fetch merchants locations.
+ */function locationsSubscriber(subscribe){subscribe(appWillInit$,function(){appInitialization.set('location',/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref4){var dispatch;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:dispatch=_ref4.dispatch;if(!(hasNewServices()&&!IS_PAGE_PREVIEW_ACTIVE)){_context2.next=4;break;}_context2.next=4;return dispatch(fetchDefaultLocation());case 4:case"end":return _context2.stop();}},_callee2);}));return function(_x3){return _ref5.apply(this,arguments);};}());});subscribe(cookieConsentInitialized$,/*#__PURE__*/function(){var _ref7=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref6){var dispatch,getState,userSearch,_ref9,locations,preferredLocation,code,hasLocation,_ref11,preferredLocationDefault,locationToPreselect;return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:dispatch=_ref6.dispatch,getState=_ref6.getState;if(hasNewServices()){_context3.next=3;break;}return _context3.abrupt("return");case 3:// Fetch merchants locations.
 userSearch=getUserSearch(getState());_context3.prev=4;_context3.next=7;return dispatch(fetchLocations(userSearch));case 7:_ref9=_context3.sent;locations=_ref9.locations;preferredLocation=getPreferredLocation(getState());if(!preferredLocation){_context3.next=16;break;}code=preferredLocation.code;// Check if the preferred location is included within the fetched locations
 hasLocation=!!locations.find(function(location){return location.code===code;});if(hasLocation){_context3.next=16;break;}_context3.next=16;return dispatch(fetchLocations({codes:[code]}));case 16:// Preset preferredLocation if configured
 _ref11=getThemeSettings('@shopgate/engage/locations')||{},preferredLocationDefault=_ref11.preferredLocationDefault;if(!preferredLocationDefault){_context3.next=23;break;}if(preferredLocation){_context3.next=23;break;}locationToPreselect=locations.find(function(l){return l.code===preferredLocationDefault;});if(!locationToPreselect){_context3.next=23;break;}_context3.next=23;return dispatch(selectLocation({location:{code:preferredLocationDefault}}));case 23:initialLocationsResolve(locations);_context3.next=29;break;case 26:_context3.prev=26;_context3.t0=_context3["catch"](4);initialLocationsReject(_context3.t0);case 29:UIEvents.addListener(EVENT_SET_OPEN,function(){var route=getCurrentRoute(getState());if(!route.params.productId&&!route.state.productId){return;}var productId=route.state.productId||hex2bin(route.params.productId);if(productId){dispatch(fetchProductLocations(productId,getUserSearch(getState())));}});case 30:case"end":return _context3.stop();}},_callee3,null,[[4,26]]);}));return function(_x4){return _ref7.apply(this,arguments);};}());subscribe(userSearchChanged$,/*#__PURE__*/function(){var _ref13=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref12){var dispatch,getState,action,productId,isStoreFinder,silent,state,userSearch,storeFinderSearch;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:dispatch=_ref12.dispatch,getState=_ref12.getState,action=_ref12.action;productId=action.productId,isStoreFinder=action.isStoreFinder,silent=action.silent;if(!(silent===true)){_context4.next=4;break;}return _context4.abrupt("return");case 4:state=getState();userSearch=getUserSearch(state);if(!(isStoreFinder||action.type===SET_STORE_FINDER_SEARCH_RADIUS)){_context4.next=12;break;}storeFinderSearch=getStoreFinderSearch(state);_context4.next=10;return dispatch(fetchLocations(_extends({},userSearch,{},storeFinderSearch,{enableInLocationFinder:true})));case 10:_context4.next=19;break;case 12:if(productId){_context4.next=17;break;}_context4.next=15;return dispatch(fetchLocations(userSearch));case 15:_context4.next=19;break;case 17:_context4.next=19;return dispatch(fetchProductLocations(productId,userSearch));case 19:case"end":return _context4.stop();}},_callee4);}));return function(_x5){return _ref13.apply(this,arguments);};}());var productInventoryNeedsUpdate$=productIsReady$.merge(variantDidChange$).merge(preferredLocationDidUpdateOnPDP$).debounceTime(200);subscribe(productInventoryNeedsUpdate$,function(_ref14){var action=_ref14.action,dispatch=_ref14.dispatch,getState=_ref14.getState;var productData=action.productData;// Skip if no fulfillment methods are set.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.28.0-beta.6",
+  "version": "7.29.0-alpha.2",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -15,13 +15,14 @@
     "connect"
   ],
   "dependencies": {
+    "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.28.0-beta.6",
-    "@shopgate/pwa-common-commerce": "7.28.0-beta.6",
-    "@shopgate/pwa-core": "7.28.0-beta.6",
-    "@shopgate/pwa-ui-ios": "7.28.0-beta.6",
-    "@shopgate/pwa-ui-material": "7.28.0-beta.6",
-    "@shopgate/pwa-ui-shared": "7.28.0-beta.6",
+    "@shopgate/pwa-common": "7.29.0-alpha.2",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.2",
+    "@shopgate/pwa-core": "7.29.0-alpha.2",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.2",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.2",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.2",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",
@@ -40,6 +41,7 @@
     "react-phone-number-input": "^3.2.16",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
+    "tss-react": "^4.9.18",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {

package/page/action-creators/index.js

@@ -0,0 +1,22 @@
+import{REQUEST_PAGE_CONFIG_V2,RECEIVE_PAGE_CONFIG_V2,ERROR_PAGE_CONFIG_V2}from"../constants";/**
+ * @typedef {'cms' | 'category'} PageType
+ */ /**
+ * Creates the dispatched REQUEST_PAGE_CONFIG_V2 action object.
+ * @param {Object} params The action params
+ * @param {PageType} params.type The type of the page.
+ * @param {string} [params.slug=null] The slug of the page (optional).
+ * @returns {Object} The dispatched action object.
+ */export var requestPageConfigV2=function requestPageConfigV2(_ref){var type=_ref.type,_ref$slug=_ref.slug,slug=_ref$slug===void 0?null:_ref$slug;return{type:REQUEST_PAGE_CONFIG_V2,pageType:type,pageSlug:slug};};/**
+ * Creates the dispatched RECEIVE_PAGE_CONFIG_V2 action object.
+ * @param {Object} params The action params
+ * @param {PageType} params.type The type of the page.
+ * @param {Object} params.data The page data
+ * @param {string} [params.slug=null] The slug of the page (optional).
+ * @returns {Object} The dispatched action object.
+ */export var receivePageConfigV2=function receivePageConfigV2(_ref2){var type=_ref2.type,data=_ref2.data,_ref2$slug=_ref2.slug,slug=_ref2$slug===void 0?null:_ref2$slug;return{type:RECEIVE_PAGE_CONFIG_V2,pageType:type,pageSlug:slug,data:data};};/**
+ * Creates the dispatched ERROR_PAGE_CONFIG_V2 action object.
+ * @param {Object} params The action params
+ * @param {PageType} params.type The type of the page.
+ * @param {string} [params.slug=null] The slug of the page (optional).
+ * @returns {Object} The dispatched action object.
+ */export var errorPageConfigV2=function errorPageConfigV2(_ref3){var type=_ref3.type,_ref3$slug=_ref3.slug,slug=_ref3$slug===void 0?null:_ref3$slug;return{type:ERROR_PAGE_CONFIG_V2,pageType:type,pageSlug:slug};};