@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.18

package/components/ResponsiveContainer/hooks.js

@@ -0,0 +1,20 @@
+function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _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{useState,useMemo,useEffect}from'react';import{addListener}from"./listener";import{parser}from"./breakpoints";var comparators={'>=':function _(from,to,width){return width>=from;},'>':function _(from,to,width){return width>=to;},'<':function _(from,to,width){return width<from;},'<=':function _(from,to,width){return width<to;},'':function _(from,to,width){return width>=from&&width<to;}};/**
+ * Custom hook to determine the visibility or value based on the current active breakpoint
+ * and provided conditions.
+ * It listens for changes in the viewport or platform breakpoints and returns a value.
+ *
+ * @param {string} [breakpoint=">=xs"] - The breakpoint condition to match (e.g., '>=md', '<lg').
+ * @param {Object} [options={}] - Additional options for customizing behavior.
+ * @param {*} [options.valueMatch=true] - Return value when the provided conditions match.
+ * @param {*} [options.valueMiss=false] - Return value when the provided conditions do not match.
+ * @param {boolean} [options.webOnly=false] If true, the hook will only match in PWA website mode.
+ * @param {boolean} [options.webAlways=false] If true, the hook will always match in PWA website
+ * mode regardless of the breakpoint.
+ * @param {boolean} [options.appOnly=false] If true, the hook will only match in PWA app mode.
+ * @param {boolean} [options.appAlways=false] If true, the hook will always match in PWA app mode,
+ * regardless of the breakpoint.
+ * @returns {boolean}
+ */export var useResponsiveValue=function useResponsiveValue(){var breakpoint=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'>=xs';var options=arguments.length>1?arguments[1]:undefined;var _valueMatch$valueMiss=_extends({valueMatch:true,valueMiss:false,appAlways:false,appOnly:false,webAlways:false,webOnly:false},options),webOnly=_valueMatch$valueMiss.webOnly,webAlways=_valueMatch$valueMiss.webAlways,appOnly=_valueMatch$valueMiss.appOnly,appAlways=_valueMatch$valueMiss.appAlways,valueMiss=_valueMatch$valueMiss.valueMiss,valueMatch=_valueMatch$valueMiss.valueMatch;// Active breakpoint used for triggering rerenders on resize.
+var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeBreakpoint=_useState2[0],setActiveBreakpoint=_useState2[1];// Calculate if we have a match for the conditions
+/* eslint-disable react-hooks/exhaustive-deps */var isMatch=useMemo(function(){var parsed=parser(comparators,breakpoint,{breakpoint:breakpoint,webOnly:webOnly,webAlways:webAlways,appOnly:appOnly,appAlways:appAlways});return parsed;},[activeBreakpoint,breakpoint]);/* eslint-enable react-hooks/exhaustive-deps */ // Watch for resize changes.
+useEffect(function(){return addListener(function(newBreakpoint){setActiveBreakpoint(newBreakpoint);});},[]);return isMatch?valueMatch:valueMiss;};

package/components/ResponsiveContainer/index.js

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

package/components/ResponsiveContainer/listener.js

@@ -0,0 +1,10 @@
+import debounce from'lodash/debounce';import breakpoints from"./breakpoints";var listeners=[];/**
+ * Adds a new listener to breakpoint changes.
+ * @param {Function} cb The callback that shall be triggered.
+ * @returns {Function}
+ */export var addListener=function addListener(cb){listeners.push(cb);return function(){listeners=listeners.filter(function(a){return a!==cb;});};};/**
+ * Calculates the active breakpoint.
+ * @returns {Object}
+ */var getActiveBreakpoint=function getActiveBreakpoint(){return breakpoints.find(function(bp){return bp.from<=document.documentElement.clientWidth&&bp.to>=document.documentElement.clientWidth;});};var activeBreakpoint=getActiveBreakpoint();/**
+ * Handles any event that might cause a breakpoint change.
+ */var handleEvent=function handleEvent(){var newBreakpoint=getActiveBreakpoint();if(activeBreakpoint.name!==newBreakpoint.name){activeBreakpoint=newBreakpoint;listeners.forEach(function(listener){return listener(newBreakpoint);});}};window.addEventListener('resize',debounce(handleEvent,200));window.addEventListener('orientationchange',handleEvent);

package/components/ResponsiveContainer/mediaQuery.js

@@ -0,0 +1,8 @@
+import{parser}from"./breakpoints";var comparators={'>=':function _(from){return"@media (min-width: ".concat(from,"px)");},'>':function _(from,to){return"@media (min-width: ".concat(to,"px)");},'<':function _(from){return"@media (max-width: ".concat(from+1,"px)");},'<=':function _(from,to){return"@media (max-width: ".concat(to-1,"px)");},'':function _(from,to){return"@media (min-width: ".concat(from,"px) and (max-width: ").concat(to,"px)");}};/**
+ * Generates a media query for different breakpoints and platform.
+ * @param {string} breakpoint Breakpoint rule.
+ * @param {Object} params Parameters needed to generation.
+ * @returns {string}
+ */export var responsiveMediaQuery=function responsiveMediaQuery(breakpoint){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var parsed=parser(comparators,breakpoint,params);// Return media query that never evaluates for now.
+if(!parsed){return'@media (height: 0)';}// Return media query that evaluates always.
+if(parsed===true){return'@media (min-height: 0)';}return parsed;};

package/components/ScrollHeader/index.js

@@ -1,6 +1,23 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen);}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i];}return arr2;}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{viewScroll$}from'@shopgate/pwa-common/streams/view';import{scrolledIn,scrolledOut,transition}from"./style";/**
- * Scroll Header component
- * @param {Object} props props
- * @returns {JSX}
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,forwardRef,useEffect}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{useScrollDirectionChange}from'@shopgate/engage/core/hooks';import{root,scrolledIn,scrolledOut,transition}from"./style";/* eslint-disable react/prop-types */ /**
+ * A container component that hides its content on scroll down and shows it on scroll up.
  *
- */function ScrollHeader(_ref){var children=_ref.children,hideOnScroll=_ref.hideOnScroll,scrollOffset=_ref.scrollOffset;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];var onScroll=useCallback(function(scrollEvent){var scrollTop=scrollEvent.scrollTop,scrolled=scrollEvent.scrolled,scrollOut=scrollEvent.scrollOut,scrollIn=scrollEvent.scrollIn;if(scrolled){if(!shouldHideHeader&&scrollOut&&scrollTop>=scrollOffset){setShouldHideHeader(true);}if(shouldHideHeader&&scrollIn){setShouldHideHeader(false);}}},[scrollOffset,shouldHideHeader]);useEffect(function(){if(hideOnScroll){var subscription=viewScroll$.subscribe(onScroll);return function(){return subscription.unsubscribe();};}return undefined;});var className=shouldHideHeader?scrolledOut:scrolledIn;return/*#__PURE__*/React.cloneElement(children,_extends({},children.props,{className:"".concat(children.props.className.toString()," ").concat(className," ").concat(transition)}));}ScrollHeader.defaultProps={hideOnScroll:true,scrollOffset:100};export default ScrollHeader;
+ * @param {Object} props The component props.
+ * @param {boolean}  [props.hideOnScroll] Toggle hide-on-scroll (default: true).
+ * @param {number} [props.scrollOffset] Pixels to scroll before toggling (default: 100).
+ * @param {boolean} [props.onlyShowAtTop] When set to true, the component content will not be shown
+ * till the user scrolls to the top of the page again.
+ * @param {number} [props.onlyShowAtTopOffset] Pixel threshold from the top of the page at which the
+ * component content will reappear when `showOnScrollToTop` is enabled. The content shows again once
+ * the scroll position is less than or equal to this value.
+ * @param {Function} [props.onChange] Callback function that is called when the header changes
+ * @param {string} [props.className] Extra CSS classes on the root element.
+ * @param {Object} [props.classes] Override internal class names.
+ * @param {string} [props.classes.scrolledIn] Override class for the scrolled-in state
+ * (content is hidden).
+ * @param {string} [props.classes.scrolledOut] Override class for the scrolled-out state
+ * (content is visible).
+ * visibility. Contains a boolean indicating whether the header is visible.
+ * @param {React.ReactNode} props.children  Content of the header.
+ * @param {React.Ref<HTMLDivElement>} ref   Forwarded ref to the header `<div>`.
+ * @returns {JSX.Element}
+ */function ScrollHeaderBase(_ref,ref){var className=_ref.className,children=_ref.children,_ref$hideOnScroll=_ref.hideOnScroll,hideOnScroll=_ref$hideOnScroll===void 0?true:_ref$hideOnScroll,_ref$scrollOffset=_ref.scrollOffset,scrollOffset=_ref$scrollOffset===void 0?100:_ref$scrollOffset,_ref$onlyShowAtTop=_ref.onlyShowAtTop,onlyShowAtTop=_ref$onlyShowAtTop===void 0?false:_ref$onlyShowAtTop,_ref$onlyShowAtTopOff=_ref.onlyShowAtTopOffset,onlyShowAtTopOffset=_ref$onlyShowAtTopOff===void 0?0:_ref$onlyShowAtTopOff,onChange=_ref.onChange,classes=_ref.classes;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),shouldHideHeader=_useState2[0],setShouldHideHeader=_useState2[1];useScrollDirectionChange({enabled:hideOnScroll,offset:scrollOffset,onlyFireOnScrollUpAtTop:onlyShowAtTop,onlyFireOnScrollUpAtTopOffset:onlyShowAtTopOffset,onScrollDown:function onScrollDown(){setShouldHideHeader(true);},onScrollUp:function onScrollUp(){setShouldHideHeader(false);}});useEffect(function(){if(typeof onChange!=='function'){return;}onChange(!shouldHideHeader);},[onChange,shouldHideHeader]);return React.createElement("div",{ref:ref,className:classNames(root,transition,className,_defineProperty(_defineProperty({},classNames(scrolledIn,classes===null||classes===void 0?void 0:classes.scrolledIn),!shouldHideHeader),classNames(scrolledOut,classes===null||classes===void 0?void 0:classes.scrolledOut),shouldHideHeader))},children);}/* eslint-enable react/prop-types */var ScrollHeader=forwardRef(ScrollHeaderBase);ScrollHeader.displayName='ScrollHeader';ScrollHeader.propTypes={children:PropTypes.node.isRequired,classes:PropTypes.shape({scrolledIn:PropTypes.string,scrolledOut:PropTypes.string}),className:PropTypes.string,hideOnScroll:PropTypes.bool,onChange:PropTypes.func,onlyShowAtTop:PropTypes.bool,onlyShowAtTopOffset:PropTypes.number,scrollOffset:PropTypes.number};ScrollHeader.defaultProps={className:null,hideOnScroll:true,scrollOffset:100,classes:{},onChange:null,onlyShowAtTop:false,onlyShowAtTopOffset:0};export default ScrollHeader;

package/components/ScrollHeader/style.js

@@ -1 +1 @@
-import{css}from'glamor';export var scrolledIn=css({'&&':{transform:'translateY(0%)'}}).toString();export var scrolledOut=css({'&&':{transform:'translateY(-250%)'}}).toString();export var transition=css({transition:'transform 0.2s ease,transform 0.2s'});
+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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var root=css(_defineProperty({position:'sticky',left:0,backgroundColor:'#fff'},responsiveMediaQuery('<=xs',{appAlways:true}),{boxShadow:'rgba(0, 0, 0, 0.118) 0px 1px 6px, rgba(0, 0, 0, 0.118) 0px 1px 4px'}));export var scrolledIn=css({'&&':{transform:'translateY(0%)'}});export var scrolledOut=css({'&&':{transform:'translateY(-250%)'}});export var transition=css({transition:'transform 0.2s ease,transform 0.2s'});

package/components/SheetDrawer/index.js

@@ -1,4 +1,5 @@
-import React from'react';import{createPortal}from'react-dom';import Sheet from'@shopgate/pwa-ui-shared/Sheet';var node=document.getElementById('portals');/**
+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{createPortal}from'react-dom';import classNames from'classnames';import{useTrackModalState}from'@shopgate/engage/a11y/hooks';import{Sheet}from'@shopgate/engage/components';var node=document.getElementById('portals');/**
  * @param {Object} props The props to be passed to the Sheet.
- * @returns {JSX}
- */function SheetDrawer(props){return/*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Sheet,props),node);}export default SheetDrawer;
+ * @returns {JSX.Element}
+ */function SheetDrawer(props){// Track modal visibility for accessibility purposes.
+useTrackModalState(props.isOpen);return createPortal(React.createElement(Sheet,_extends({},props,{className:classNames(props.className,'engage__sheet-drawer')})),node);}export default SheetDrawer;

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

@@ -1,6 +1,6 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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";/**
+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){_inherits(Item,_Component);var _super=_createSuper(Item);function Item(){_classCallCheck(this,Item);return _super.apply(this,arguments);}_createClass(Item,[{key:"shouldComponentUpdate",value:/**
+ */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.
    * @param {Object} nextProps The next set of component props.
    * @returns {JSX}
@@ -8,10 +8,10 @@ function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeo
    * 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 _gridStyles,_titleStyles;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;var gridStyles=(_gridStyles={},_defineProperty(_gridStyles,styles.grid,true),_defineProperty(_gridStyles,styles.selected,isSelected),_gridStyles);var titleStyles=(_titleStyles={},_defineProperty(_titleStyles,styles.title,true),_defineProperty(_titleStyles,styles.disabled,isDisabled),_titleStyles);var ref=isNested?null:forwardedRef;return/*#__PURE__*/React.createElement("div",{"data-test-id":this.props.testId,ref:ref,className:"engage__sheet-list__item"},/*#__PURE__*/React.createElement(Grid,{className:classNames(gridStyles),component:"div"},image!==null&&/*#__PURE__*/React.createElement("div",{className:styles.image},image),/*#__PURE__*/React.createElement(Grid.Item,{className:classNames(titleStyles),component:"div",grow:1},title),rightComponent!==null&&/*#__PURE__*/React.createElement(Grid.Item,{component:"div",grow:1},rightComponent)));}/**
+   */},{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}
-   */},{key:"render",value:function render(){var _this$props2=this.props,link=_this$props2.link,linkState=_this$props2.linkState,onClick=_this$props2.onClick,className=_this$props2.className,isDisabled=_this$props2.isDisabled,testId=_this$props2.testId,forwardedRef=_this$props2.forwardedRef,isSelected=_this$props2.isSelected;/**
+   */},{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/*#__PURE__*/React.createElement(Glow,{ref:forwardedRef,className:className,styles:{hover:styles.glowHover}},/*#__PURE__*/React.createElement(Link,{href:link,onClick:onClick,state:linkState,tabIndex:0},this.renderContent()));}return/*#__PURE__*/React.createElement("div",{onKeyPress:function onKeyPress(){},onClick:onClick,"data-test-id":testId,ref:forwardedRef,tabIndex:0,role:"option","aria-selected":isSelected},/*#__PURE__*/React.createElement(Glow,{className:className,styles:{hover:styles.glowHover}},this.renderContent()));}}]);return Item;}(Component);_defineProperty(Item,"defaultProps",{className:null,forwardedRef:null,image:null,isDisabled:false,isSelected:false,link:null,linkState:null,onClick:null,rightComponent:null,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,link:null,linkState:null,onClick:null,rightComponent:null,linkComponent:Link,testId:null});export default withForwardedRef(Item);

package/components/SheetList/components/Item/spec.js

@@ -1,8 +1,8 @@
 function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React from'react';import{mount}from'enzyme';import Glow from'@shopgate/pwa-ui-shared/Glow';import Item from"./index";jest.mock('@shopgate/pwa-common/components/Link',function(){/**
    * Mocked LinkComponent.
    * @return {JSX}
-   */var Link=function Link(){return/*#__PURE__*/React.createElement("div",null);};return Link;});describe('<SheetList.Item />',function(){var title='My Title';it('should render with a title but no image',function(){var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBeFalsy();});it('should render with an image',function(){var image=/*#__PURE__*/React.createElement("img",{src:"url/to/image",alt:"Alternative text"});var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,image:image}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBeTruthy();});it('should render with a right component',function(){var rightComponent=/*#__PURE__*/React.createElement("span",null,"I`m a span.");var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,rightComponent:rightComponent}));expect(wrapper).toMatchSnapshot();expect(wrapper.contains(/*#__PURE__*/React.createElement("span",null,"I`m a span."))).toEqual(true);});it('should render without a Glow when selected',function(){var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,isSelected:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Glow).exists()).toBeFalsy();});it('should render without a Glow when disabled',function(){var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,isDisabled:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Glow).exists()).toBeFalsy();});it('should render with a link',function(){var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,link:"url/to/somewhere"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('Link').exists()).toBeTruthy();});it('should render with an onClick element',function(){var spy=jest.fn();// eslint-disable-next-line require-jsdoc
+   */var Link=function Link(){return React.createElement("div",null);};return Link;});describe('<SheetList.Item />',function(){var title='My Title';it('should render with a title but no image',function(){var wrapper=mount(React.createElement(Item,{title:title}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBeFalsy();});it('should render with an image',function(){var image=React.createElement("img",{src:"url/to/image",alt:"Alternative text"});var wrapper=mount(React.createElement(Item,{title:title,image:image}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('img').exists()).toBeTruthy();});it('should render with a right component',function(){var rightComponent=React.createElement("span",null,"I`m a span.");var wrapper=mount(React.createElement(Item,{title:title,rightComponent:rightComponent}));expect(wrapper).toMatchSnapshot();expect(wrapper.contains(React.createElement("span",null,"I`m a span."))).toEqual(true);});it('should render without a Glow when selected',function(){var wrapper=mount(React.createElement(Item,{title:title,isSelected:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Glow).exists()).toBeFalsy();});it('should render without a Glow when disabled',function(){var wrapper=mount(React.createElement(Item,{title:title,isDisabled:true}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Glow).exists()).toBeFalsy();});it('should render with a link',function(){var wrapper=mount(React.createElement(Item,{title:title,link:"url/to/somewhere"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('Link').exists()).toBeTruthy();});it('should render with an onClick element',function(){var spy=jest.fn();// eslint-disable-next-line require-jsdoc
 var clickHandler=function clickHandler(){/**
        * The spy can't be assigned directly to the event, since the snapshot gets too big
        * and the test execution is heavily slowed down.
-       */spy();};var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,onClick:clickHandler}));wrapper.simulate('click');expect(wrapper).toMatchSnapshot();expect(spy).toHaveBeenCalledTimes(1);});it('should update the component when the isDisabled prop changed',function(){var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,isDisabled:true}));var props=wrapper.props();var updated=wrapper.find('Item').instance().shouldComponentUpdate(_extends({},props,{isDisabled:false}));expect(updated).toBe(true);});it('should update the component when the isSelected prop changed',function(){var wrapper=mount(/*#__PURE__*/React.createElement(Item,{title:title,isSelected:true}));var props=wrapper.props();var updated=wrapper.find('Item').instance().shouldComponentUpdate(_extends({},props,{isSelected:false}));expect(updated).toBe(true);});});
+       */spy();};var wrapper=mount(React.createElement(Item,{title:title,onClick:clickHandler}));wrapper.simulate('click');expect(wrapper).toMatchSnapshot();expect(spy).toHaveBeenCalledTimes(1);});it('should update the component when the isDisabled prop changed',function(){var wrapper=mount(React.createElement(Item,{title:title,isDisabled:true}));var props=wrapper.props();var updated=wrapper.find('Item').instance().shouldComponentUpdate(_extends({},props,{isDisabled:false}));expect(updated).toBe(true);});it('should update the component when the isSelected prop changed',function(){var wrapper=mount(React.createElement(Item,{title:title,isSelected:true}));var props=wrapper.props();var updated=wrapper.find('Item').instance().shouldComponentUpdate(_extends({},props,{isSelected:false}));expect(updated).toBe(true);});});

package/components/SheetList/components/Item/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{IMAGE_SPACE}from"../../style";var colors=themeConfig.colors,variables=themeConfig.variables;var disabled=css({color:colors.shade5}).toString();var selected=css({background:colors.shade7,boxShadow:"-16px 0 0 0 ".concat(colors.shade7," !important")}).toString();var title=css({width:'100%',marginTop:variables.gap.xsmall,paddingRight:16,hyphens:'auto',overflowWrap:'break-word',wordBreak:'break-word'}).toString();var grid=css({alignItems:'center',minHeight:56,padding:"".concat(variables.gap.small,"px 0"),position:'relative',zIndex:2}).toString();var image=css({alignSelf:'flex-start',flexShrink:0,margin:"0 ".concat(variables.gap.big,"px 0 ").concat(-IMAGE_SPACE+variables.gap.big,"px"),width:40}).toString();var glowHover={boxShadow:"-".concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade8,", ").concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade8)};export default{disabled:disabled,selected:selected,title:title,grid:grid,image:image,glowHover:glowHover};
+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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{IMAGE_SPACE}from"../../style";var colors=themeConfig.colors,variables=themeConfig.variables;var disabled=css({color:colors.shade5,cursor:'not-allowed'}).toString();var selected=css({background:"var(--color-background-accent, ".concat(colors.shade7,")"),boxShadow:"-16px 0 0 0 var(--color-background-accent, ".concat(colors.shade7,") !important")}).toString();var title=css(_defineProperty({width:'100%',marginTop:variables.gap.xsmall,paddingRight:variables.gap.big,hyphens:'auto',overflowWrap:'break-word',wordBreak:'break-word',color:'var(--color-text-high-emphasis)'},responsiveMediaQuery('>xs',{webOnly:true}),{padding:variables.gap.big,margin:0,fontSize:'1.25rem',lineHeight:'1.5rem'})).toString();var description=css(_defineProperty({display:'none'},responsiveMediaQuery('>xs',{webOnly:true}),{display:'block',color:'var(--color-text-medium-emphasis)',fontSize:'0.875rem',lineHeight:'1.25rem',fontWeight:'initial',paddingTop:variables.gap.small}));var grid=css(_defineProperty({alignItems:'center',minHeight:56,padding:"".concat(variables.gap.small,"px 0"),position:'relative',zIndex:2},responsiveMediaQuery('>xs',{webOnly:true}),{padding:0})).toString();var image=css({alignSelf:'flex-start',flexShrink:0,margin:"0 ".concat(variables.gap.big,"px 0 ").concat(-IMAGE_SPACE+variables.gap.big,"px"),width:40}).toString();var glowHover={boxShadow:"-".concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade8,", ").concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade8)};export default{disabled:disabled,selected:selected,title:title,description:description,grid:grid,image:image,glowHover:glowHover};

package/components/SheetList/index.js

@@ -1,9 +1,9 @@
-function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj;}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;},_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);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}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}});Object.defineProperty(subClass,"prototype",{writable:false});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 _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}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 _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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 List from'@shopgate/pwa-common/components/List';import Item from"./components/Item";import styles from"./style";/**
+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 List from'@shopgate/pwa-common/components/List';import Item from"./components/Item";import styles from"./style";/**
  * The SheetList component.
  * Styled sheet for List component
- */var SheetList=/*#__PURE__*/function(_Component){_inherits(SheetList,_Component);var _super=_createSuper(SheetList);function SheetList(){_classCallCheck(this,SheetList);return _super.apply(this,arguments);}_createClass(SheetList,[{key:"render",value:/**
+ */var SheetList=/*#__PURE__*/function(_Component){function SheetList(){_classCallCheck(this,SheetList);return _callSuper(this,SheetList,arguments);}_inherits(SheetList,_Component);return _createClass(SheetList,[{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _itemClasses;var _this$props=this.props,children=_this$props.children,className=_this$props.className,hasImages=_this$props.hasImages,testId=_this$props.testId;if(!React.Children.count(children)){return null;}var itemClasses=(_itemClasses={},_defineProperty(_itemClasses,styles.item,true),_defineProperty(_itemClasses,styles.itemWithImage,hasImages),_itemClasses);return/*#__PURE__*/React.createElement(List,{className:"".concat(className," engage__sheet-list"),role:"listbox"},React.Children.map(children,function(child,index){var _childClasses;if(!/*#__PURE__*/React.isValidElement(child)){return null;}// The key for each child.
+   */function render(){var _this$props=this.props,children=_this$props.children,className=_this$props.className,hasImages=_this$props.hasImages,testId=_this$props.testId;if(!React.Children.count(children)){return null;}var itemClasses=_defineProperty(_defineProperty({},styles.item,true),styles.itemWithImage,hasImages);return React.createElement(List,{className:"".concat(className," engage__sheet-list"),role:"listbox"},React.Children.map(children,function(child,index){if(!React.isValidElement(child)){return null;}// The key for each child.
 var key="child-".concat(index);// Selected state for the child.
-var isSelected=child.props.isSelected;var childClasses=(_childClasses={},_defineProperty(_childClasses,styles.itemSelected,isSelected),_defineProperty(_childClasses,styles.itemNotLast,!isSelected),_childClasses);return/*#__PURE__*/React.createElement(List.Item,{className:classNames(itemClasses,childClasses),isSelected:isSelected,key:key,tabIndex:0},/*#__PURE__*/React.createElement("div",{className:styles.innerContainer,"data-test-id":testId},child));}));}}]);return SheetList;}(Component);_defineProperty(SheetList,"Item",Item);_defineProperty(SheetList,"defaultProps",{children:null,className:null,hasImages:false,testId:null});export default SheetList;
+var isSelected=child.props.isSelected;var childClasses=_defineProperty(_defineProperty({},styles.itemSelected,isSelected),styles.itemNotLast,!isSelected);return React.createElement(List.Item,{className:classNames(itemClasses,childClasses),isSelected:isSelected,key:key,tabIndex:0},React.createElement("div",{className:styles.innerContainer,"data-test-id":testId},child));}));}}]);}(Component);_defineProperty(SheetList,"Item",Item);_defineProperty(SheetList,"defaultProps",{children:null,className:null,hasImages:false,testId:null});export default SheetList;

package/components/SheetList/spec.js

@@ -1 +1 @@
-import React from'react';import{mount}from'enzyme';import BaseListItem from'@shopgate/pwa-common/components/List/components/Item';import SheetList from"./index";import styles from"./style";describe('<SheetList />',function(){it('should render with two children',function(){var wrapper=mount(/*#__PURE__*/React.createElement(SheetList,null,/*#__PURE__*/React.createElement(SheetList.Item,{title:"List Item"}),/*#__PURE__*/React.createElement(SheetList.Item,{title:"List Item"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(2);});it('should render a child and add styles for list items with images',function(){var wrapper=mount(/*#__PURE__*/React.createElement(SheetList,{hasImages:true},/*#__PURE__*/React.createElement(SheetList.Item,{title:"List Item"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(1);expect(wrapper.find(BaseListItem).first().hasClass(styles.itemWithImage)).toBeTruthy();});it('should not render without children',function(){var wrapper=mount(/*#__PURE__*/React.createElement(SheetList,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList).html()).toBe(null);});it('should not render invalid children',function(){var wrapper=mount(/*#__PURE__*/React.createElement(SheetList,null,/*#__PURE__*/React.createElement(SheetList.Item,{title:"List Item"}),"xxx"));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(1);});});
+import React from'react';import{mount}from'enzyme';import BaseListItem from'@shopgate/pwa-common/components/List/components/Item';import SheetList from"./index";import styles from"./style";describe('<SheetList />',function(){it('should render with two children',function(){var wrapper=mount(React.createElement(SheetList,null,React.createElement(SheetList.Item,{title:"List Item"}),React.createElement(SheetList.Item,{title:"List Item"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(2);});it('should render a child and add styles for list items with images',function(){var wrapper=mount(React.createElement(SheetList,{hasImages:true},React.createElement(SheetList.Item,{title:"List Item"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(1);expect(wrapper.find(BaseListItem).first().hasClass(styles.itemWithImage)).toBeTruthy();});it('should not render without children',function(){var wrapper=mount(React.createElement(SheetList,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList).html()).toBe(null);});it('should not render invalid children',function(){var wrapper=mount(React.createElement(SheetList,null,React.createElement(SheetList.Item,{title:"List Item"}),"xxx"));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SheetList.Item).length).toEqual(1);});});

package/components/SheetList/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var IMAGE_SPACE=72;var item=css({margin:"0 ".concat(variables.gap.big,"px")}).toString();var itemNotLast=css({'&:not(:last-child)':{boxShadow:"0 1px 0 0 ".concat(colors.darkGray),marginBottom:1}}).toString();var itemSelected=css({background:colors.shade7,boxShadow:"-".concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade7,", ").concat(variables.gap.bigger,"px 0 0 ").concat(colors.shade7),marginTop:-1}).toString();var itemWithImage=css({marginLeft:IMAGE_SPACE}).toString();var innerContainer=css({minHeight:56,position:'relative'}).toString();export default{item:item,itemNotLast:itemNotLast,itemSelected:itemSelected,itemWithImage:itemWithImage,innerContainer:innerContainer};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var IMAGE_SPACE=72;var item=css({margin:"0 ".concat(variables.gap.big,"px"),cursor:'pointer'}).toString();var itemNotLast=css({'&:not(:last-child)':{boxShadow:"0 1px 0 0 ".concat(colors.darkGray),marginBottom:1}}).toString();var itemSelected=css({background:"var(--color-background-accent, ".concat(colors.shade7,")"),boxShadow:"-".concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,"), ").concat(variables.gap.bigger,"px 0 0 var(--color-background-accent, ").concat(colors.shade7,")"),marginTop:-1}).toString();var itemWithImage=css({marginLeft:IMAGE_SPACE}).toString();var innerContainer=css({minHeight:56,position:'relative'}).toString();export default{item:item,itemNotLast:itemNotLast,itemSelected:itemSelected,itemWithImage:itemWithImage,innerContainer:innerContainer};

package/components/SideNavigation/SideNavigation.hooks.js

@@ -0,0 +1,4 @@
+import{useContext}from'react';import SideNavigationContext from"./SideNavigationProvider.context";/**
+ * Returns the value of the side navigation provider state.
+ * @returns {Object}
+ */export var useSideNavigation=function useSideNavigation(){return useContext(SideNavigationContext);};

package/components/SideNavigation/SideNavigation.js

@@ -0,0 +1,4 @@
+import React from'react';import{hot}from'react-hot-loader/root';import SideNavigationProvider from"./SideNavigationProvider";import SideNavigationContent from"./SideNavigationContent";/**
+ * The SideNavigation component
+ * @returns {JSX}
+ */var SideNavigation=function SideNavigation(_ref){var maxCategoryNesting=_ref.maxCategoryNesting,routePatternBlacklist=_ref.routePatternBlacklist,classNames=_ref.classNames;return React.createElement(SideNavigationProvider,{maxCategoryNesting:maxCategoryNesting,routePatternBlacklist:routePatternBlacklist},React.createElement(SideNavigationContent,{classNames:classNames}));};SideNavigation.defaultProps={maxCategoryNesting:3,routePatternBlacklist:[],classNames:null};export default hot(SideNavigation);

package/components/SideNavigation/SideNavigationCategories.connector.js

@@ -0,0 +1,8 @@
+import{connect}from'react-redux';import{fetchCategoryOrRootCategories}from'@shopgate/engage/category';import{makeGetAreRootCategoriesFetching,makeGetSubcategoriesByCategoryId}from"./selectors";/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getAreRootCategoriesFetching=makeGetAreRootCategoriesFetching();var getSubcategoriesByCategoryId=makeGetSubcategoriesByCategoryId();return function(state,_ref){var categoryId=_ref.categoryId;return{rootCategoriesFetching:getAreRootCategoriesFetching(state),subcategories:getSubcategoriesByCategoryId(state,{categoryId:categoryId})};};};/**
+ * Maps the contents of the state to the component props.
+ * @param  {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchCategory:function fetchCategory(id){return dispatch(fetchCategoryOrRootCategories(id));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/components/SideNavigation/SideNavigationCategories.js

@@ -0,0 +1,4 @@
+import React,{useEffect}from'react';import{LoadingIndicator}from'@shopgate/pwa-ui-shared';import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import connect from"./SideNavigationCategories.connector";import{list,loadingIndicator}from"./SideNavigationCategories.style";import{item}from"./SideNavigationItem.style";/**
+ * The SideNavigationCategories component
+ * @returns {JSX}
+ */var SideNavigationCategories=function SideNavigationCategories(_ref){var categoryId=_ref.categoryId,subcategories=_ref.subcategories,fetchCategory=_ref.fetchCategory,rootCategoriesFetching=_ref.rootCategoriesFetching;useEffect(function(){if(!subcategories){fetchCategory(categoryId);}},[categoryId,fetchCategory,subcategories]);if(!subcategories&&rootCategoriesFetching){return React.createElement("li",{className:item},React.createElement(LoadingIndicator,{className:loadingIndicator}));}if(!subcategories||Array.isArray(subcategories)&&subcategories.length===0){return null;}return React.createElement("li",{className:list},React.createElement(SideNavigationCategoriesItemChildren,{level:0,subcategories:subcategories}));};SideNavigationCategories.defaultProps={subcategories:null,categoryId:null,rootCategoriesFetching:false};export default connect(SideNavigationCategories);

package/components/SideNavigation/SideNavigationCategories.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var list=css({borderBottom:"1px solid ".concat(colors.shade7)});export var loadingIndicator=css({padding:0,margin:'auto'}).toString();

package/components/SideNavigation/SideNavigationCategoriesItem.connector.js

@@ -0,0 +1,8 @@
+import{connect}from'react-redux';import _fetchCategory from'@shopgate/pwa-common-commerce/category/actions/getCategory';import{getCategory}from'@shopgate/pwa-common-commerce/category/selectors';import{makeGetSubcategoriesByCategoryId,makeGetAreChildCategoriesFetching}from"./selectors";/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getSubcategoriesByCategoryId=makeGetSubcategoriesByCategoryId();var getAreChildCategoriesFetching=makeGetAreChildCategoriesFetching();return function(state,_ref){var categoryId=_ref.categoryId;return{category:getCategory(state,{categoryId:categoryId}),subcategories:getSubcategoriesByCategoryId(state,{categoryId:categoryId}),subcategoriesFetching:getAreChildCategoriesFetching(state,{categoryId:categoryId})};};};/**
+ * Maps the contents of the state to the component props.
+ * @param  {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchCategory:function fetchCategory(id){return dispatch(_fetchCategory(id));}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/components/SideNavigation/SideNavigationCategoriesItem.js

@@ -0,0 +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,useMemo,useEffect}from'react';import ArrowDrop from'@shopgate/pwa-ui-shared/icons/ArrowDropIcon';import{bin2hex}from'@shopgate/pwa-common/helpers/data';import{CATEGORY_PATH}from'@shopgate/pwa-common-commerce/category/constants';import{ProgressBar}from'@shopgate/pwa-ui-shared';// eslint-disable-next-line import/no-cycle
+import SideNavigationCategoriesItemChildren from"./SideNavigationCategoriesItemChildren";import SideNavigationItem from"./SideNavigationItem";import connect from"./SideNavigationCategoriesItem.connector";import{chevronButton,chevronUp,chevronDown,progressBar,open}from"./SideNavigationCategoriesItem.style";import{useSideNavigation}from"./SideNavigation.hooks";/**
+ * The SideNavigationCategoriesItem component
+ * @returns {JSX}
+ */var SideNavigationCategoriesItem=function SideNavigationCategoriesItem(_ref){var categoryId=_ref.categoryId,category=_ref.category,subcategories=_ref.subcategories,subcategoriesFetching=_ref.subcategoriesFetching,fetchCategory=_ref.fetchCategory,level=_ref.level;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isOpen=_useState2[0],setIsOpen=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isLoading=_useState4[0],setIsLoading=_useState4[1];var _useSideNavigation=useSideNavigation(),maxCategoryNesting=_useSideNavigation.maxCategoryNesting,activeCategoryId=_useSideNavigation.activeCategoryId;var hasSubcategories=useMemo(function(){return category.childrenCount!==0;},[category.childrenCount]);var maxNestingReached=useMemo(function(){return level+1===maxCategoryNesting;},[level,maxCategoryNesting]);var handleClick=useCallback(function(){setIsOpen(!isOpen);if(hasSubcategories&&!subcategories){setIsLoading(true);fetchCategory(categoryId);}},[categoryId,fetchCategory,hasSubcategories,isOpen,subcategories]);useEffect(function(){if(isLoading&&(subcategories||!subcategoriesFetching)){setIsLoading(false);}},[isLoading,subcategories,subcategoriesFetching]);var buttonRight=useMemo(function(){if(!maxNestingReached&&hasSubcategories){return React.createElement("button",{type:"button",onClick:handleClick,className:chevronButton},React.createElement(ArrowDrop,{className:(isOpen&&subcategories?chevronUp:chevronDown).toString()}));}return null;},[handleClick,hasSubcategories,isOpen,maxNestingReached,subcategories]);if(!category){return null;}return React.createElement(SideNavigationItem,{href:"".concat(CATEGORY_PATH,"/").concat(bin2hex(categoryId)),label:category.name,level:level,buttonRight:buttonRight,forceActive:activeCategoryId===categoryId,className:level===0&&isOpen?open:null},isLoading&&React.createElement("div",{className:progressBar},React.createElement(ProgressBar,null)),!maxNestingReached&&isOpen&&hasSubcategories&&subcategories&&React.createElement(SideNavigationCategoriesItemChildren,{subcategories:subcategories,level:level+1}));};SideNavigationCategoriesItem.defaultProps={subcategories:null,subcategoriesFetching:false,categoryId:null,level:0};export default connect(SideNavigationCategoriesItem);

package/components/SideNavigation/SideNavigationCategoriesItem.style.js

@@ -0,0 +1,2 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var chevronButton=css({flexShrink:0,outline:0,margin:"0 -".concat(variables.gap.big,"px 0 ").concat(variables.gap.small,"px"),fontSize:'1.6em',color:'#373D41',position:'relative'});export var chevron=css({transformOrigin:'center center',transition:'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'});export var chevronDown=css(chevron,{transform:'rotateZ(0deg)'});export var chevronUp=css(chevron,{transform:'rotateZ(180deg)'});export var progressBar=css({position:'absolute',overflow:'hidden',width:'100%',bottom:0,height:3});export var open=css({//  borderRight: '2px solid var(--color-primary)',
+}).toString();export var loadingIndicator=css({position:'absolute',padding:0,top:'50%',marginTop:'-50%',paddingTop:1,right:3}).toString();

package/components/SideNavigation/SideNavigationCategoriesItemChildren.js

@@ -0,0 +1,5 @@
+import React from'react';// eslint-disable-next-line import/no-cycle
+import SideNavigationCategoriesItem from"./SideNavigationCategoriesItem";/**
+ * The SideNavigationCategoriesItemChildren component
+ * @returns {JSX}
+ */var SideNavigationCategoriesItemChildren=function SideNavigationCategoriesItemChildren(_ref){var subcategories=_ref.subcategories,level=_ref.level;return React.createElement("ul",null,subcategories.map(function(category){return React.createElement(SideNavigationCategoriesItem,{key:category.id,level:level,categoryId:category.id});}));};export default SideNavigationCategoriesItemChildren;

package/components/SideNavigation/SideNavigationContent.js

@@ -0,0 +1,3 @@
+import React,{useMemo}from'react';import{INDEX_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import SideNavigationCategories from"./SideNavigationCategories";import SideNavigationLinks from"./SideNavigationLinks";import SideNavigationItem from"./SideNavigationItem";import{useSideNavigation}from"./SideNavigation.hooks";import{container}from"./SideNavigationContent.style";/**
+ * @returns {JSX}
+ */var SideNavigationContent=function SideNavigationContent(_ref){var classNames=_ref.classNames;var _useSideNavigation=useSideNavigation(),isVisible=_useSideNavigation.isVisible;var wrapperClass=useMemo(function(){if(!classNames){return'';}var _classNames$visible=classNames.visible,visible=_classNames$visible===void 0?'':_classNames$visible,_classNames$hidden=classNames.hidden,hidden=_classNames$hidden===void 0?'':_classNames$hidden;return isVisible?visible:hidden;},[classNames,isVisible]);return React.createElement("div",{className:wrapperClass},isVisible&&React.createElement("nav",{className:container},React.createElement("ul",null,React.createElement(SideNavigationItem,{href:INDEX_PATH,label:"navigation.home"}),React.createElement(SideNavigationCategories,null),React.createElement(SideNavigationLinks,null))));};SideNavigationContent.defaultProps={classNames:null};export default SideNavigationContent;

package/components/SideNavigation/SideNavigationContent.style.js

@@ -0,0 +1,4 @@
+import{css}from'glamor';export var container=css({background:'#fff'/*
+  position: 'sticky',
+  top: 'var(--app-bar-height)',
+  */});

package/components/SideNavigation/SideNavigationItem.js

@@ -0,0 +1,4 @@
+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,{useMemo,memo}from'react';import classNames from'classnames';import Link from'@shopgate/pwa-common/components/Link';import{i18n}from'@shopgate/engage/core';import{getIndentation,item,itemActive,link,linkActive,list}from"./SideNavigationItem.style";import{useSideNavigation}from"./SideNavigation.hooks";/**
+ * SideNavigationItem component
+ * @returns {JSX}
+ */var SideNavigationItem=function SideNavigationItem(_ref){var level=_ref.level,href=_ref.href,label=_ref.label,buttonRight=_ref.buttonRight,children=_ref.children,forceActive=_ref.forceActive,forceInactive=_ref.forceInactive,className=_ref.className,onClick=_ref.onClick;var _useSideNavigation=useSideNavigation(),currentPathname=_useSideNavigation.currentPathname;var isActive=useMemo(function(){return!forceInactive&&(currentPathname===href||forceActive);},[currentPathname,forceActive,forceInactive,href]);return React.createElement("li",{className:classNames(list,className)},React.createElement("div",{className:classNames(item,_defineProperty({},itemActive,isActive))},href?React.createElement(Link,{tag:"a",href:href,className:classNames(link,getIndentation(level),_defineProperty({},linkActive,isActive))},i18n.text(label)):React.createElement("button",{type:"button",className:classNames(link,getIndentation(level),_defineProperty({},linkActive,isActive)),onClick:onClick},i18n.text(label)),buttonRight),children);};SideNavigationItem.defaultProps={buttonRight:null,children:null,forceActive:false,forceInactive:false,level:0,href:null,className:null,onClick:function onClick(){}};export default memo(SideNavigationItem);

package/components/SideNavigation/SideNavigationItem.style.js

@@ -0,0 +1,4 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;/**
+ * @param {number} level The indentation level
+ * @returns {string}
+ */export var getIndentation=function getIndentation(){var level=arguments.length>0&&arguments[0]!==undefined?arguments[0]:0;return css({paddingLeft:level*variables.gap.big}).toString();};export var list=css({position:'relative'}).toString();export var item=css({alignItems:'center',display:'flex',textAlign:'left',outline:0,padding:variables.gap.big,position:'relative',width:'100%',lineHeight:'1.45em'}).toString();export var itemActive=css({background:'var(--color-side-navigation-active-background)'}).toString();export var link=css({flexGrow:1,textAlign:'left',outline:0,color:'var(--color-text-high-emphasis)',':hover':{color:'var(--color-primary)'}}).toString();export var linkActive=css({color:'var(--color-primary) !important'}).toString();

package/components/SideNavigation/SideNavigationLinks.js

@@ -0,0 +1,4 @@
+import React,{Fragment}from'react';import{FAVORITES_PATH}from'@shopgate/pwa-common-commerce/favorites/constants';import{CART_PATH}from'@shopgate/pwa-common-commerce/cart/constants';import{LOGIN_PATH}from'@shopgate/pwa-common/constants/RoutePaths';import appConfig from'@shopgate/pwa-common/helpers/config';import{useSideNavigation}from"./SideNavigation.hooks";import SideNavigationItem from"./SideNavigationItem";import SideNavigationNestedItem from"./SideNavigationNestedItem";import SideNavigationLinksQuicklinks from"./SideNavigationLinksQuicklinks";import SideNavigationLinksLegal from"./SideNavigationLinksLegal";import{PROFILE_PATH,WISH_LIST_PATH,ORDERS_PATH}from"../../account";/**
+ * SideNavigationLinks component
+ * @returns {JSX}
+ */var SideNavigationLinks=function SideNavigationLinks(){var _useSideNavigation=useSideNavigation(),isLoggedIn=_useSideNavigation.isLoggedIn,logout=_useSideNavigation.logout,currentPathname=_useSideNavigation.currentPathname;var isAccountActive=currentPathname===PROFILE_PATH||currentPathname===ORDERS_PATH||currentPathname===WISH_LIST_PATH;return React.createElement(Fragment,null,React.createElement(SideNavigationItem,{href:CART_PATH,label:"navigation.cart"}),!isLoggedIn&&appConfig.hasFavorites?React.createElement(SideNavigationItem,{href:FAVORITES_PATH,label:"navigation.favorites"}):null,isLoggedIn&&React.createElement(SideNavigationNestedItem,{href:PROFILE_PATH,label:"navigation.your_account",forceActive:isAccountActive,level:0},React.createElement("ul",null,React.createElement(SideNavigationItem,{level:1,href:PROFILE_PATH,label:"titles.profile"}),React.createElement(SideNavigationItem,{level:1,href:ORDERS_PATH,label:"titles.order_history"}),appConfig.hasFavorites?React.createElement(SideNavigationItem,{level:1,href:WISH_LIST_PATH,label:"titles.favorites"}):null)),React.createElement(SideNavigationLinksQuicklinks,null),React.createElement(SideNavigationLinksLegal,null),isLoggedIn?React.createElement(SideNavigationItem,{onClick:logout,label:"navigation.logout"}):React.createElement(SideNavigationItem,{href:LOGIN_PATH,label:"navigation.login_register"}));};export default SideNavigationLinks;

package/components/SideNavigation/SideNavigationLinksLegal.connector.js

@@ -0,0 +1,4 @@
+import{connect}from'react-redux';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core';import{LEGAL_MENU}from'@shopgate/pwa-common/constants/MenuIDs';/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getMenu=makeGetMenu(LEGAL_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(LEGAL_MENU);return function(state){return{links:getMenu(state),isFetching:getIsFetchingMenu(state)};};};export default connect(makeMapStateToProps);

package/components/SideNavigation/SideNavigationLinksLegal.js

@@ -0,0 +1,5 @@
+import React from'react';import SideNavigationItem from"./SideNavigationItem";import connect from"./SideNavigationLinksLegal.connector";/**
+ *
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var SideNavigationLinksLegal=function SideNavigationLinksLegal(_ref){var links=_ref.links;if(!links){return null;}return links.map(function(_ref2){var label=_ref2.label,url=_ref2.url;return React.createElement(SideNavigationItem,{key:url,href:url,label:label});});};SideNavigationLinksLegal.defaultProps={links:null,isFetching:false};export default connect(SideNavigationLinksLegal);

package/components/SideNavigation/SideNavigationLinksQuicklinks.connector.js

@@ -0,0 +1,4 @@
+import{connect}from'react-redux';import{makeGetMenu,makeGetIsFetchingMenu}from'@shopgate/engage/core';import{QUICKLINKS_MENU}from'@shopgate/pwa-common/constants/MenuIDs';/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getMenu=makeGetMenu(QUICKLINKS_MENU);var getIsFetchingMenu=makeGetIsFetchingMenu(QUICKLINKS_MENU);return function(state){return{links:getMenu(state),isFetching:getIsFetchingMenu(state)};};};export default connect(makeMapStateToProps);

package/components/SideNavigation/SideNavigationLinksQuicklinks.js

@@ -0,0 +1,5 @@
+import React from'react';import SideNavigationItem from"./SideNavigationItem";import connect from"./SideNavigationLinksQuicklinks.connector";/**
+ *
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var SideNavigationLinksQuicklinks=function SideNavigationLinksQuicklinks(_ref){var links=_ref.links;if(!links){return null;}return links.map(function(_ref2){var label=_ref2.label,url=_ref2.url;return React.createElement(SideNavigationItem,{key:url,href:url,label:label});});};SideNavigationLinksQuicklinks.defaultProps={links:null,isFetching:false};export default connect(SideNavigationLinksQuicklinks);

package/components/SideNavigation/SideNavigationNestedItem.js

@@ -0,0 +1,4 @@
+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,useMemo,useEffect}from'react';import ArrowDrop from'@shopgate/pwa-ui-shared/icons/ArrowDropIcon';import{chevronButton,chevronUp,chevronDown,open}from"./SideNavigationCategoriesItem.style";import SideNavigationItem from"./SideNavigationItem";/**
+ * The SideNavigationCategoriesItem component
+ * @returns {JSX}
+ */var SideNavigationNestedItem=function SideNavigationNestedItem(_ref){var level=_ref.level,label=_ref.label,href=_ref.href,children=_ref.children,forceActive=_ref.forceActive;var _useState=useState(forceActive),_useState2=_slicedToArray(_useState,2),isOpen=_useState2[0],setIsOpen=_useState2[1];useEffect(function(){if(forceActive){setIsOpen(true);}},[forceActive]);var handleClick=useCallback(function(){setIsOpen(!isOpen);},[isOpen]);var buttonRight=useMemo(function(){return React.createElement("button",{type:"button",onClick:handleClick,className:chevronButton},React.createElement(ArrowDrop,{className:(isOpen?chevronUp:chevronDown).toString()}));},[handleClick,isOpen]);return React.createElement(SideNavigationItem,{href:href,label:label,level:level,buttonRight:buttonRight,className:level===0&&isOpen?open:null,forceInactive:true},isOpen?children:null);};SideNavigationNestedItem.defaultProps={level:0,forceActive:false};export default SideNavigationNestedItem;

package/components/SideNavigation/SideNavigationProvider.connector.js

@@ -0,0 +1,8 @@
+import{connect}from'react-redux';import{getCurrentRoute,getCurrentPathname,getCurrentParams}from'@shopgate/pwa-common/selectors/router';import{isUserLoggedIn}from'@shopgate/pwa-common/selectors/user';import _logout from'@shopgate/pwa-common/actions/user/logout';/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{currentParams:getCurrentParams(state),currentPathname:getCurrentPathname(state),currentRoute:getCurrentRoute(state),isLoggedIn:isUserLoggedIn(state)};};};/**
+ * Maps the contents of the state to the component props.
+ * @param {Function} dispatch The dispatch method from the store.
+ * @return {Object}
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{logout:function logout(){return dispatch(_logout());}};};export default connect(makeMapStateToProps,mapDispatchToProps);

package/components/SideNavigation/SideNavigationProvider.context.js

@@ -0,0 +1 @@
+import{createContext}from'react';var initialContext={};export default createContext(initialContext);

package/components/SideNavigation/SideNavigationProvider.js

@@ -0,0 +1,4 @@
+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,useMemo,useEffect}from'react';import{CATEGORY_PATTERN,CATEGORY_FILTER_PATTERN}from'@shopgate/pwa-common-commerce/category/constants';import{ITEM_PATTERN,ITEM_GALLERY_PATTERN,ITEM_REVIEWS_PATTERN,ITEM_WRITE_REVIEW_PATTERN}from'@shopgate/pwa-common-commerce/product/constants';import{hex2bin}from'@shopgate/pwa-common/helpers/data';import Context from"./SideNavigationProvider.context";import connect from"./SideNavigationProvider.connector";var categoryPatterns=[CATEGORY_PATTERN,CATEGORY_FILTER_PATTERN];var itemPatterns=[ITEM_PATTERN,ITEM_GALLERY_PATTERN,ITEM_REVIEWS_PATTERN,ITEM_WRITE_REVIEW_PATTERN];/**
+ * SideNavigation Provider
+ * @returns {JSX}
+ */var SideNavigationProvider=function SideNavigationProvider(_ref){var maxCategoryNesting=_ref.maxCategoryNesting,routePatternBlacklist=_ref.routePatternBlacklist,currentParams=_ref.currentParams,currentPathname=_ref.currentPathname,currentRoute=_ref.currentRoute,isLoggedIn=_ref.isLoggedIn,logout=_ref.logout,children=_ref.children;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeCategoryId=_useState2[0],setActiveCategoryId=_useState2[1];var _useState3=useState(true),_useState4=_slicedToArray(_useState3,2),isVisible=_useState4[0],setIsVisible=_useState4[1];useEffect(function(){if(!currentRoute){return;}var pattern=currentRoute.pattern;if(categoryPatterns.includes(pattern)){var categoryId=currentParams.categoryId;setActiveCategoryId(hex2bin(categoryId));}else if(!itemPatterns.includes(pattern)){setActiveCategoryId(null);}setIsVisible(!routePatternBlacklist.includes(pattern));});var value=useMemo(function(){return{maxCategoryNesting:maxCategoryNesting,currentParams:currentParams,currentPathname:currentPathname,currentRoute:currentRoute,isLoggedIn:isLoggedIn,logout:logout,activeCategoryId:activeCategoryId,isVisible:isVisible};},[activeCategoryId,currentParams,currentPathname,currentRoute,isLoggedIn,isVisible,logout,maxCategoryNesting]);return React.createElement(Context.Provider,{value:value},children);};SideNavigationProvider.defaultProps={currentParams:null,currentPathname:'',routePatternBlacklist:[],currentRoute:null};export default connect(SideNavigationProvider);

package/components/SideNavigation/index.js

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

package/components/SideNavigation/selectors.js

@@ -0,0 +1,17 @@
+import{createSelector}from'reselect';import{getCategoryChildren,getRootCategories,getRootCategoriesState,getChildCategoriesForCategory}from'@shopgate/pwa-common-commerce/category/selectors';/**
+ * Creates a getCategoriesById selector
+ * @returns {Function}
+ */export var makeGetSubcategoriesByCategoryId=function makeGetSubcategoriesByCategoryId(){return(/**
+   * Retrieves categories from the state.
+   * If no category id is passed, root-categories will be returned.
+   * @param {Object} state The application state.
+   * @param {Object} props The component props.
+   * @returns {Object[]} The categories collection.
+   */createSelector(getCategoryChildren,getRootCategories,function(state,props){return props.categoryId;},function(childCategories,rootCategories,categoryId){// Check if we have to handle the root-category
+if(!categoryId&&rootCategories){return rootCategories;}return childCategories;}));};/**
+ * Creates a getAreRootCategoriesFetching selector
+ * @returns {Function}
+ */export var makeGetAreRootCategoriesFetching=function makeGetAreRootCategoriesFetching(){return createSelector(getRootCategoriesState,function(rootCategories){return(rootCategories===null||rootCategories===void 0?void 0:rootCategories.isFetching)||false;});};/**
+ * Creates a getIsCategoryFetching selector
+ * @returns {Function}
+ */export var makeGetAreChildCategoriesFetching=function makeGetAreChildCategoriesFetching(){return createSelector(getChildCategoriesForCategory,function(category){return(category===null||category===void 0?void 0:category.isFetching)||false;});};

package/components/SnackBarContainer/index.js

@@ -2,4 +2,4 @@ import React from'react';import{createPortal}from'react-dom';import{SnackBar}fro
  * The SnackBarContainer component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */function SnackBarContainer(props){if(!props.toasts.length){return null;}return/*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(SnackBar,props),document.getElementById('portals'));}export default SnackBarContainer;
+ */function SnackBarContainer(props){if(!props.toasts.length){return null;}return createPortal(React.createElement(SnackBar,props),document.getElementById('portals'));}export default SnackBarContainer;

package/components/Switch/index.js

@@ -9,4 +9,4 @@ import React,{useMemo}from'react';import PropTypes from'prop-types';import{Visua
  * when issues with the regular label are expected e.g. due to problematic layout.
  * @param {string} [props.id=null] Optional custom id for checkbox input and label
  * @returns {JSX.Element}
- */var Switch=function Switch(_ref){var disabled=_ref.disabled,checked=_ref.checked,onChange=_ref.onChange,id=_ref.id,a11yFallbackText=_ref.a11yFallbackText,children=_ref.children;var switchId=useMemo(function(){return id||Math.random();},[id]);return/*#__PURE__*/React.createElement("div",{className:styles.container},/*#__PURE__*/React.createElement("input",{type:"checkbox",disabled:disabled,checked:checked,onChange:onChange,className:styles.input,id:switchId}),children&&/*#__PURE__*/React.createElement("label",{htmlFor:switchId},/*#__PURE__*/React.createElement("span",{"aria-hidden":!!a11yFallbackText},children),a11yFallbackText&&/*#__PURE__*/React.createElement(VisuallyHidden,null,a11yFallbackText)));};Switch.defaultProps={children:null,disabled:false,a11yFallbackText:null,checked:false,onChange:null,id:null};export default Switch;
+ */var Switch=function Switch(_ref){var disabled=_ref.disabled,checked=_ref.checked,onChange=_ref.onChange,id=_ref.id,a11yFallbackText=_ref.a11yFallbackText,children=_ref.children;var switchId=useMemo(function(){return id||Math.random();},[id]);return React.createElement("div",{className:styles.container},React.createElement("input",{type:"checkbox",disabled:disabled,checked:checked,onChange:onChange,className:styles.input,id:switchId}),children&&React.createElement("label",{htmlFor:switchId},React.createElement("span",{"aria-hidden":!!a11yFallbackText},children),a11yFallbackText&&React.createElement(VisuallyHidden,null,a11yFallbackText)));};Switch.defaultProps={children:null,disabled:false,a11yFallbackText:null,checked:false,onChange:null,id:null};export default Switch;

package/components/Tabs/TabContext.js

@@ -0,0 +1,7 @@
+import*as React from'react';import*as PropTypes from'prop-types';var Context=React.createContext(null);/**
+ * Tab Context Provider
+ * @param {Object} props props
+ * @returns {JSX}
+ */var TabContext=function TabContext(props){var children=props.children,value=props.value;var context=React.useMemo(function(){return{value:value};},[value]);return React.createElement(Context.Provider,{value:context},children);};/**
+ * @returns {unknown}
+ */export var useTabContext=function useTabContext(){return React.useContext(Context);};export{TabContext};

package/components/Tabs/components/Tab.js

@@ -0,0 +1,11 @@
+import React,{useContext}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Button from'@shopgate/pwa-ui-shared/Button';import{root,wrapper}from"./Tab.style";import{ViewContext}from"../../View";/**
+ * Tab component
+ * @param {Object} props props
+ * @returns {JSX}
+ */var Tab=function Tab(props){var className=props.className,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,indicator=props.indicator,label=props.label,onChange=props.onChange,onFocus=props.onFocus,selected=props.selected,value=props.value;var _useContext=useContext(ViewContext),contentRef=_useContext.contentRef;/**
+   * Handle Click
+   * @param {Object} event event
+   */var handleClick=function handleClick(event){if(onChange){onChange(event,value);contentRef.current.scrollTop=0;}};/**
+   * Handle Focus
+   * @param {Object} event event
+   */var handleFocus=function handleFocus(event){if(onFocus){onFocus(event);}};return React.createElement(Button,{flat:true,type:selected?'secondary':'regular',className:classNames(root,className),role:"tab","aria-selected":selected,disabled:disabled,onClick:handleClick,onFocus:handleFocus,tabIndex:selected?0:-1},React.createElement("span",{className:wrapper},label),indicator);};Tab.defaultProps={className:null,value:null,disabled:false,onChange:null,onFocus:null};export default Tab;

package/components/Tabs/components/Tab.style.js

@@ -0,0 +1 @@
+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{css}from'glamor';import{responsiveMediaQuery}from'@shopgate/engage/styles';export var root=css(_defineProperty({'&&':{maxWidth:200,minWidth:72,position:'relative',boxSizing:'border-box',minHeight:48,flexShrink:0,flexGrow:1,padding:'6px 6px',overflow:'hidden',whiteSpace:'normal',textAlign:'center'}},responsiveMediaQuery('<=xs',{appAlways:true}),{flexShrink:1,flexGrow:1,flexBasis:0,maxWidth:'none'})).toString();export var wrapper=css({display:'inline-flex',alignItems:'center',justifyContent:'center',width:'100%',flexDirection:'column'}).toString();

package/components/Tabs/components/TabIndicator.js

@@ -0,0 +1,5 @@
+var _excluded=["className"];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 _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 classNames from'classnames';import{root}from"./TabIndicator.style";/**
+ * Tab indicator component
+ * @param {Object} props props
+ * @returns {JSX}
+ */var TabIndicator=function TabIndicator(_ref){var className=_ref.className,other=_objectWithoutProperties(_ref,_excluded);return React.createElement("span",_extends({className:classNames(root,className)},other));};TabIndicator.defaultProps={className:null};export default TabIndicator;

package/components/Tabs/components/TabIndicator.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var root=css({position:'absolute',height:2,bottom:0,width:'100%',transition:'left .2s ease',backgroundColor:"var(--color-primary, ".concat(colors.primary,")")}).toString();

package/components/Tabs/components/TabPanel.js

@@ -0,0 +1,5 @@
+import*as React from'react';import PropTypes from'prop-types';import{useTabContext}from"../TabContext";/**
+ * Tab panel component
+ * @param {Object} props props
+ * @returns {JSX}
+ */var TabPanel=function TabPanel(props){var children=props.children,className=props.className,value=props.value;var context=useTabContext();return React.createElement("div",{className:className,hidden:value!==context.value,role:"tabpanel"},value===context.value&&children);};TabPanel.defaultProps={children:null,className:null};export default TabPanel;

package/components/Tabs/components/Tabs.js

@@ -0,0 +1,11 @@
+function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import debounce from"../debounce";import ownerWindow from"../ownerWindow";import TabIndicator from"./TabIndicator";import useEventCallback from"../useEventCallback";import{root,fixed,flexContainer}from"./Tabs.style";import{useTabContext}from"../TabContext";/**
+ * C
+ * @param {Object} props props
+ * @returns {JSX}
+ */var Tabs=function Tabs(props){var childrenProp=props.children,className=props.className,onChange=props.onChange;var _useTabContext=useTabContext(),value=_useTabContext.value;var start='left';var size='width';var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),mounted=_React$useState2[0],setMounted=_React$useState2[1];var _React$useState3=React.useState({}),_React$useState4=_slicedToArray(_React$useState3,2),indicatorStyle=_React$useState4[0],setIndicatorStyle=_React$useState4[1];var valueToIndex=new Map();var tabsRef=React.useRef(null);var tabListRef=React.useRef(null);/**
+   * Get Tabs Meta
+   * @returns {Object}
+   */var getTabsMeta=function getTabsMeta(){var tabsNode=tabsRef.current;var tabsMeta;if(tabsNode){var rect=tabsNode.getBoundingClientRect();// create a new object with ClientRect class props + scrollLeft
+tabsMeta={clientWidth:tabsNode.clientWidth,top:rect.top,bottom:rect.bottom,left:rect.left,right:rect.right};}var tabMeta;if(tabsNode&&value!==false){var _children=tabListRef.current.children;if(_children.length>0){var tab=_children[valueToIndex.get(value)];tabMeta=tab?tab.getBoundingClientRect():null;}}return{tabsMeta:tabsMeta,tabMeta:tabMeta};};var updateIndicatorState=useEventCallback(function(){var _getTabsMeta=getTabsMeta(),tabsMeta=_getTabsMeta.tabsMeta,tabMeta=_getTabsMeta.tabMeta;var startValue=0;if(tabMeta&&tabsMeta){startValue=tabMeta.left-tabsMeta.left;}var newIndicatorStyle=_defineProperty(_defineProperty({},start,startValue),size,tabMeta?tabMeta[size]:0);// IE 11 support, replace with Number.isNaN
+// eslint-disable-next-line no-restricted-globals
+if(isNaN(indicatorStyle[start])||isNaN(indicatorStyle[size])){setIndicatorStyle(newIndicatorStyle);}else{var dStart=Math.abs(indicatorStyle[start]-newIndicatorStyle[start]);var dSize=Math.abs(indicatorStyle[size]-newIndicatorStyle[size]);if(dStart>=1||dSize>=1){setIndicatorStyle(newIndicatorStyle);}}});React.useEffect(function(){var handleResize=debounce(function(){updateIndicatorState();});var win=ownerWindow(tabsRef.current);win.addEventListener('resize',handleResize);return function(){handleResize.clear();win.removeEventListener('resize',handleResize);};},[updateIndicatorState]);React.useEffect(function(){setMounted(true);},[]);React.useEffect(function(){updateIndicatorState();});var indicator=React.createElement(TabIndicator,{style:indicatorStyle});var childIndex=0;var children=React.Children.map(childrenProp,function(child){if(!React.isValidElement(child)){return null;}var childValue=child.props.value===undefined?childIndex:child.props.value;valueToIndex.set(childValue,childIndex);var selected=childValue===value;childIndex+=1;return React.cloneElement(child,{indicator:selected&&!mounted&&indicator,selected:selected,onChange:onChange,value:childValue});});return React.createElement("div",{className:classNames(root,className)},React.createElement("div",{className:classNames(fixed),ref:tabsRef},React.createElement("div",{className:classNames(flexContainer),ref:tabListRef,role:"tablist"},children),mounted&&indicator));};Tabs.defaultProps={className:null};export default Tabs;

package/components/Tabs/components/Tabs.style.js

@@ -0,0 +1,2 @@
+import{css}from'glamor';export var root=css({overflow:'hidden',minHeight:48,WebkitOverflowScrolling:'touch',// Add iOS momentum scrolling.
+display:'flex',position:'relative'}).toString();export var fixed=css({overflowX:'hidden',width:'100%'}).toString();export var flexContainer=css({display:'flex'}).toString();export var centered=css({justifyContent:'center'}).toString();