@shopgate/pwa-common 7.25.0-beta.1 → 7.26.0-beta.1

package/components/Drawer/index.js

@@ -1,17 +1,22 @@
-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 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{FocusTrap}from'focus-trap-react';import styles from"./style";/**
  * Drawer component.
  */var Drawer=/*#__PURE__*/function(_Component){/**
    * Initializes the Drawer component.
    * @param {Object} props The components props.
    */function Drawer(props){var _this2;_classCallCheck(this,Drawer);_this2=_callSuper(this,Drawer,[props]);/**
    * Syncs the internal active state when an animation ends.
-   */_defineProperty(_this2,"handleAnimationEnd",function(){_this2.setState({active:_this2.props.isOpen});if(!_this2.props.isOpen){_this2.props.onDidClose();}else{_this2.props.onDidOpen();}});_this2.state={active:props.isOpen};return _this2;}/**
+   */_defineProperty(_this2,"handleAnimationEnd",function(){_this2.setState({active:_this2.props.isOpen});if(!_this2.props.isOpen){_this2.props.onDidClose();}else{_this2.props.onDidOpen();}});_this2.sheetRef=React.createRef();_this2.state={active:props.isOpen};return _this2;}/**
    * Update state when isOpen changes.
    * @param {Object} nextProps The next component props.
-   */_inherits(Drawer,_Component);return _createClass(Drawer,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){if(nextProps.isOpen){if(typeof nextProps.onOpen==='function'){nextProps.onOpen();}this.setState({active:true});}else if(typeof nextProps.onClose==='function'){nextProps.onClose();}}}},{key:"render",value:/**
+   */_inherits(Drawer,_Component);return _createClass(Drawer,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isOpen!==nextProps.isOpen){if(nextProps.isOpen){if(typeof nextProps.onOpen==='function'){nextProps.onOpen();}this.setState({active:true});}else if(typeof nextProps.onClose==='function'){nextProps.onClose();}}}/**
+   * Set focus for a11y when sheet opens
+   * @param {Object} prevProps The previous component props.
+   */},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(!prevProps.isOpen&&this.props.isOpen){if(this.sheetRef.current){this.sheetRef.current.focus();}}}},{key:"render",value:/**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this$props=this.props,alwaysActive=_this$props.alwaysActive,className=_this$props.className,children=_this$props.children,isOpen=_this$props.isOpen,animation=_this$props.animation;var active=this.state.active;var animationIn=animation["in"]||styles.animation["in"];var animationOut=animation.out||styles.animation.out;var combinedClassName=classNames(className,styles.container,_defineProperty({},animationIn,isOpen),_defineProperty({},animationOut,!isOpen),'common__drawer');var style={};if(typeof animation.duration==='number'){style.animationDuration="".concat(animation.duration,"ms");}return active||alwaysActive?React.createElement("div",{className:combinedClassName,style:style,onAnimationEnd:this.handleAnimationEnd,role:"dialog","aria-modal":true},children):null;}}]);}(Component);/**
+   */function render(){var _this3=this;var _this$props=this.props,alwaysActive=_this$props.alwaysActive,className=_this$props.className,children=_this$props.children,isOpen=_this$props.isOpen,animation=_this$props.animation;var active=this.state.active;var animationIn=animation["in"]||styles.animation["in"];var animationOut=animation.out||styles.animation.out;var combinedClassName=classNames(className,styles.container,_defineProperty({},animationIn,isOpen),_defineProperty({},animationOut,!isOpen),'common__drawer');var style={};if(typeof animation.duration==='number'){style.animationDuration="".concat(animation.duration,"ms");}return active||alwaysActive?React.createElement(FocusTrap,{active:isOpen},React.createElement("div",{ref:this.sheetRef,className:combinedClassName,style:style,onAnimationEnd:function onAnimationEnd(){var _this3$sheetRef;_this3.handleAnimationEnd();// clear any residual animation style to fix a11y issue on Android
+// (focus ring is misaligned)
+if((_this3$sheetRef=_this3.sheetRef)===null||_this3$sheetRef===void 0?void 0:_this3$sheetRef.style){_this3.sheetRef.style.animation='';_this3.sheetRef.style.transform='none';}},role:"dialog","aria-modal":true,tabIndex:-1},children)):null;}}]);}(Component);/**
    * The component prop types.
    * @type {Object}
    */ /**

package/components/Drawer/style.js

@@ -1 +1 @@
-import{css}from'glamor';var duration=150;var easing='ease';var slideInBaseDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var slideOutBaseDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var container=css({position:'fixed',bottom:0,left:0,zIndex:5}).toString();var animation={"in":css({animation:"".concat(slideInBaseDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutBaseDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString()};export default{container:container,animation:animation};
+import{css}from'glamor';var duration=150;var easing='ease';var slideInBaseDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var slideOutBaseDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var container=css({position:'fixed',bottom:0,left:0,zIndex:5}).toString();var animation={"in":css({animation:"".concat(slideInBaseDrawer," ").concat(duration,"ms 1 forwards ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutBaseDrawer," ").concat(duration,"ms 1 forwards ").concat(easing)}).toString()};export default{container:container,animation:animation};

package/components/Ellipsis/index.js

@@ -1,5 +1,5 @@
 import React from'react';import PropTypes from'prop-types';import Dotdotdot from'react-dotdotdot';/**
  * The ellipsis text component.
  * @param {Object} props The component props.
- * @returns {JSX}
- */var Ellipsis=function Ellipsis(props){return React.createElement(Dotdotdot,{clamp:props.rows,ellipsis:props.ellipsis,className:"".concat(props.className," common__ellipsis"),useNativeClamp:true},props.children);};Ellipsis.defaultProps={className:'',ellipsis:'...',rows:3};export default Ellipsis;
+ * @returns {JSX.Element}
+ */var Ellipsis=function Ellipsis(props){return React.createElement(Dotdotdot,{clamp:props.rows,className:"".concat(props.className," common__ellipsis"),useNativeClamp:true},props.children);};Ellipsis.defaultProps={className:'',rows:3};export default Ellipsis;

package/components/Link/index.js

@@ -12,4 +12,4 @@ setTimeout(function(){if(_this2.props.replace){_this2.props.historyReplace(param
    */function render(){var _this$props=this.props,tag=_this$props.tag,className=_this$props.className,href=_this$props.href,children=_this$props.children,role=_this$props.role,ariaLabel=_this$props['aria-label'],ariaHidden=_this$props['aria-hidden'],tabIndex=_this$props.tabIndex;var Tag=tag;if(!hasWebBridge()&&tag==='a'){/**
        * Don't use link tags on apps. Sometimes links are really opened since the preventDefault
        * doesn't work as expected which results in white pages.
-       */Tag='span';}return React.createElement(Tag,{className:"".concat(styles," ").concat(className," common__link"),onClick:this.handleOpenLink,role:role,"data-test-id":"link: ".concat(href),"aria-label":ariaLabel,tabIndex:tabIndex,"aria-hidden":ariaHidden,href:href&&Tag==='a'?href:null},children);}}]);}(Component);_defineProperty(Link,"defaultProps",{'aria-hidden':null,'aria-label':null,className:'',disabled:false,replace:false,role:'link',tag:'div',tabIndex:null,target:null,state:{}});export var Disconnected=Link;export default connect(Link);
+       */Tag='span';}return React.createElement(Tag,{className:"".concat(styles," ").concat(className," common__link"),onClick:this.handleOpenLink,role:role,"data-test-id":"link: ".concat(href),"aria-label":ariaLabel,tabIndex:tabIndex,"aria-hidden":ariaHidden,href:href&&Tag==='a'?href:null},children);}}]);}(Component);_defineProperty(Link,"defaultProps",{'aria-hidden':false,'aria-label':null,className:'',disabled:false,replace:false,role:'link',tag:'div',tabIndex:null,target:null,state:{}});export var Disconnected=Link;export default connect(Link);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.25.0-beta.1",
+  "version": "7.26.0-beta.1",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.25.0-beta.1",
+    "@shopgate/pwa-benchmark": "7.26.0-beta.1",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -43,7 +43,7 @@
     "url-search-params": "^0.10.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.25.0-beta.1",
+    "@shopgate/pwa-core": "7.26.0-beta.1",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.4",
     "prop-types": "~15.8.1",