@shopgate/pwa-ui-material 7.26.0-beta.1 → 7.26.0-beta.3

package/Accordion/index.js

@@ -13,6 +13,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @param {string} [props.contentClassName] Class name for the content wrapper
  * @param {string} [props.testId] Test ID for the component
  * @param {React.ReactNode} props.children Children used for the content section of the accordion
- * @param {React.ReactNode} props.header optional additional content for the accordion header
+ * @param {Function} props.renderAdditionalHeaderContent optional additional content
+ * for the accordion header
  * @returns {JSX.Element}
- */function Accordion(props){var renderLabel=props.renderLabel,handleLabel=props.handleLabel,role=props.role,children=props.children,testId=props.testId,className=props.className,contentClassName=props.contentClassName,chevronClassName=props.chevronClassName,openWithChevron=props.openWithChevron,startOpened=props.startOpened,chevronPosition=props.chevronPosition,header=props.header;if(!renderLabel||!children){return null;}var controlsId=testId?"".concat(testId,"-content").replace(/[^\w\s]/gi,'-').replace(' ','-'):'accordion-content';return React.createElement("div",{className:"ui-material__accordion-container"},React.createElement(AccordionContainer,{open:startOpened},function(_ref){var handleOpen=_ref.handleOpen,handleClose=_ref.handleClose,open=_ref.open;var clickHandlers={onClick:open?handleClose:handleOpen,onKeyDown:open?handleClose:handleOpen,role:role};return React.createElement(React.Fragment,null,React.createElement("div",{className:classnames('ui-material__accordion-title',className,styles.toggle),"data-test-id":testId},React.createElement("div",_extends({},openWithChevron?{}:clickHandlers,{key:"accordion-toggle","aria-expanded":open,"aria-controls":controlsId,"aria-label":handleLabel,className:classnames(styles.labelContainer,_defineProperty({},styles.toggleLeftAligned,chevronPosition==='left'))}),renderLabel({open:open}),React.createElement("div",_extends({className:classnames(styles.chevronContainer,chevronClassName,_defineProperty({},styles.clickable,openWithChevron))},openWithChevron?clickHandlers:{},{"aria-label":i18n.text(open?'favorites.close_list':'favorites.open_list')}),React.createElement(ChevronIcon,{className:open?styles.chevronOpen:styles.chevronClosed}))),React.createElement("div",null,header)),React.createElement(AccordionContent,{open:open,id:controlsId,key:controlsId,className:contentClassName},children));}));}Accordion.defaultProps={children:null,header:null,renderLabel:noop,className:null,contentClassName:null,chevronClassName:null,handleLabel:null,role:'button',testId:null,openWithChevron:false,chevronPosition:'right',startOpened:false};export default Accordion;
+ */function Accordion(props){var renderLabel=props.renderLabel,handleLabel=props.handleLabel,role=props.role,children=props.children,testId=props.testId,className=props.className,contentClassName=props.contentClassName,chevronClassName=props.chevronClassName,openWithChevron=props.openWithChevron,startOpened=props.startOpened,chevronPosition=props.chevronPosition,renderAdditionalHeaderContent=props.renderAdditionalHeaderContent;if(!renderLabel||!children){return null;}var controlsId=testId?"".concat(testId,"-content").replace(/[^\w\s]/gi,'-').replace(' ','-'):'accordion-content';return React.createElement("div",{className:"ui-material__accordion-container"},React.createElement(AccordionContainer,{open:startOpened},function(_ref){var handleOpen=_ref.handleOpen,handleClose=_ref.handleClose,open=_ref.open;var clickHandlers={onClick:open?handleClose:handleOpen,onKeyDown:open?handleClose:handleOpen,role:role};return React.createElement(React.Fragment,null,React.createElement("div",{className:classnames('ui-material__accordion-title',className,styles.toggle),"data-test-id":testId},React.createElement("div",_extends({},openWithChevron?{}:clickHandlers,{key:"accordion-toggle","aria-expanded":open,"aria-controls":controlsId,"aria-label":handleLabel,className:classnames(styles.labelContainer,_defineProperty({},styles.toggleLeftAligned,chevronPosition==='left'))}),renderLabel({open:open}),React.createElement("div",_extends({className:classnames(styles.chevronContainer,chevronClassName,_defineProperty({},styles.clickable,openWithChevron))},openWithChevron?clickHandlers:{},{"aria-label":i18n.text(open?'favorites.close_list':'favorites.open_list')}),React.createElement(ChevronIcon,{className:open?styles.chevronOpen:styles.chevronClosed}))),renderAdditionalHeaderContent&&React.createElement("div",null,renderAdditionalHeaderContent())),React.createElement(AccordionContent,{open:open,id:controlsId,key:controlsId,className:contentClassName},children));}));}Accordion.defaultProps={children:null,renderAdditionalHeaderContent:null,renderLabel:noop,className:null,contentClassName:null,chevronClassName:null,handleLabel:null,role:'button',testId:null,openWithChevron:false,chevronPosition:'right',startOpened:false};export default Accordion;

package/Accordion/style.js

@@ -1 +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 toggle=css({padding:'12px 16px',position:'relative',display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',gap:12}).toString();export var clickable=css({cursor:'pointer'}).toString();export var toggleLeftAligned=css({flexDirection:'row-reverse'});export var chevronContainer=css(_defineProperty({display:'flex',flexShrink:0,fontSize:'1.5rem',marginRight:10},responsiveMediaQuery('>sm',{webOnly:true}),{backgroundColor:'rgba(0, 0, 0, 0.04)',borderRadius:32,padding:8})).toString();export var labelContainer=css({marginRight:'auto',display:'flex',flex:1,alignItems:'center'});export var chevron=css({transformOrigin:'center center',transition:'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'});export var chevronClosed=css(chevron,{transform:'rotateZ(-90deg)'}).toString();export var chevronOpen=css(chevron,{transform:'rotateZ(90deg)'}).toString();
+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 toggle=css({padding:'12px 16px',position:'relative',display:'flex',flexDirection:'row',alignItems:'center',justifyContent:'space-between',gap:12}).toString();export var clickable=css({cursor:'pointer'}).toString();export var toggleLeftAligned=css({flexDirection:'row-reverse'});export var chevronContainer=css(_defineProperty({display:'flex',flexShrink:0,fontSize:'1.5rem'},responsiveMediaQuery('>sm',{webOnly:true}),{backgroundColor:'rgba(0, 0, 0, 0.04)',borderRadius:32,padding:8})).toString();export var labelContainer=css({marginRight:'auto',display:'flex',flex:1,alignItems:'center',justifyContent:'space-between',gap:12});export var chevron=css({transformOrigin:'center center',transition:'transform 250ms cubic-bezier(0.25, 0.1, 0.25, 1)'});export var chevronClosed=css(chevron,{transform:'rotateZ(-90deg)'}).toString();export var chevronOpen=css(chevron,{transform:'rotateZ(90deg)'}).toString();

package/AppBar/components/Title/index.js

@@ -1,8 +1,5 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import 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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
  * The AppBarTitle component.
- */var AppBarTitle=/*#__PURE__*/function(_PureComponent){function AppBarTitle(){var _this2;_classCallCheck(this,AppBarTitle);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,AppBarTitle,[].concat(args));_defineProperty(_this2,"titleRef",React.createRef());return _this2;}_inherits(AppBarTitle,_PureComponent);return _createClass(AppBarTitle,[{key:"componentDidMount",value:/**
-   * focus the title for screen readers when page loads
-   */function componentDidMount(){var _this3=this;// Delay focus slightly to ensure it is recognized by screen readers
-setTimeout(function(){if(_this3.titleRef.current){_this3.titleRef.current.focus();}},100);}},{key:"render",value:/**
+ */var AppBarTitle=/*#__PURE__*/function(_PureComponent){function AppBarTitle(){_classCallCheck(this,AppBarTitle);return _callSuper(this,AppBarTitle,arguments);}_inherits(AppBarTitle,_PureComponent);return _createClass(AppBarTitle,[{key:"render",value:/**
    * @returns {JSX.Element}
-   */function render(){var _this$props=this.props,onClick=_this$props.onClick,title=_this$props.title;return React.createElement("div",{ref:this.titleRef,className:styles,role:"heading","aria-labelledby":"titleLabel","aria-level":"1","data-test-id":"title: ".concat(title),tabIndex:-1},React.createElement("span",{role:"presentation",onClick:onClick,id:"titleLabel",dangerouslySetInnerHTML:{__html:title}}));}}]);}(PureComponent);_defineProperty(AppBarTitle,"defaultProps",{onClick:null});export default AppBarTitle;
+   */function render(){var _this$props=this.props,onClick=_this$props.onClick,title=_this$props.title;if(!title)return null;return React.createElement("div",{className:classNames(styles,'theme__app-bar__title'),role:"heading","aria-labelledby":"titleLabel","aria-level":"1","data-test-id":"title: ".concat(title),tabIndex:-1},React.createElement("span",{role:"presentation",onClick:onClick,id:"titleLabel",dangerouslySetInnerHTML:{__html:title}}));}}]);}(PureComponent);_defineProperty(AppBarTitle,"defaultProps",{onClick:null});export default AppBarTitle;

package/BaseDialog/index.js

@@ -1,9 +1,9 @@
-import React from'react';import PropTypes from'prop-types';import{FocusTrap}from'focus-trap-react';import Title from"./components/Title";import Content from"./components/Content";import Buttons from"./components/Buttons";import styles from"./style";/**
+import React from'react';import PropTypes from'prop-types';import{FocusTrap}from'@shopgate/engage/a11y/components';import Title from"./components/Title";import Content from"./components/Content";import Buttons from"./components/Buttons";import styles from"./style";/**
  * This component renders a basic dialog in Google Material Design.
- * @param {Object} children The component children to render in the dialog.
- * @param {Object[]} actions The dialog actions.
- * @param {string} actions.label The label of the action.
- * @param {Function} actions.action The callback to invoke when the action is triggered.
- * @param {string|ReactElement} title The title of the dialog.
+ * @param {Object} props The component props.
+ * @param {ReactNode} props.children The component children to render in the dialog.
+ * @param {Array<{label: string, action: Function}>} props.actions The dialog actions:
+ * the label and the callback to invoke when the action is triggered
+ * @param {string | ReactNode} props.title The title of the dialog.
  * @return {JSX.Element} The rendered dialog.
  */var BasicDialog=function BasicDialog(_ref){var children=_ref.children,actions=_ref.actions,title=_ref.title;return React.createElement(FocusTrap,null,React.createElement("div",{className:"".concat(styles.container," ui-material__base-dialog"),"data-test-id":"basicDialog",role:"alertdialog","aria-modal":true,"aria-labelledby":"basicDialogTitle basicDialogDesc"},React.createElement("div",{className:styles.content},React.createElement(Title,{title:title}),React.createElement(Content,{content:children})),React.createElement("div",{className:styles.actions},React.createElement("div",{className:styles.innerActions},React.createElement(Buttons,{actions:actions})))));};BasicDialog.defaultProps={children:null,actions:[],title:null};export default BasicDialog;

package/BaseDialog/spec.js

@@ -1 +1 @@
-import React from'react';import{shallow}from'enzyme';import Title from"./components/Title";import Content from"./components/Content";import Buttons from"./components/Buttons";import BasicDialog from"./index";var props={title:'Hello World',children:React.createElement("div",null,"Hello World"),actions:[{label:'action0',action:jest.fn()},{label:'action1',action:jest.fn()},{label:'action2',action:jest.fn()}]};describe('<BasicDialog />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(BasicDialog,{actions:[]}));expect(wrapper).toMatchSnapshot();});it('should render as expected',function(){var wrapper=shallow(React.createElement(BasicDialog,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Title).length).toBe(1);expect(wrapper.find(Title).props().title).toEqual(props.title);expect(wrapper.find(Content).length).toBe(1);expect(wrapper.find(Content).props().content).toEqual(props.children);expect(wrapper.find(Buttons).length).toBe(1);expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);});});
+import React from'react';import{shallow}from'enzyme';import Title from"./components/Title";import Content from"./components/Content";import Buttons from"./components/Buttons";import BasicDialog from"./index";var props={title:'Hello World',children:React.createElement("div",null,"Hello World"),actions:[{label:'action0',action:jest.fn()},{label:'action1',action:jest.fn()},{label:'action2',action:jest.fn()}]};jest.mock('@shopgate/engage/a11y/components');describe('<BasicDialog />',function(){it('should render with minimal props',function(){var wrapper=shallow(React.createElement(BasicDialog,{actions:[]}));expect(wrapper).toMatchSnapshot();});it('should render as expected',function(){var wrapper=shallow(React.createElement(BasicDialog,props));expect(wrapper).toMatchSnapshot();expect(wrapper.find(Title).length).toBe(1);expect(wrapper.find(Title).props().title).toEqual(props.title);expect(wrapper.find(Content).length).toBe(1);expect(wrapper.find(Content).props().content).toEqual(props.children);expect(wrapper.find(Buttons).length).toBe(1);expect(wrapper.find(Buttons).props().actions).toEqual(props.actions);});});

package/NavDrawer/index.js

@@ -1,6 +1,9 @@
-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,Fragment}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import Transition from'react-transition-group/Transition';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import{UIEvents}from'@shopgate/pwa-core';import Divider from"./components/Divider";import Item from"./components/Item";import Section from"./components/Section";import Title from"./components/Title";import{contentStyle,drawerStyle}from"./style";import transition from"./transition";var OPEN='navdrawer_open';var CLOSE='navdrawer_close';/**
+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,Fragment}from'react';import PropTypes from'prop-types';import noop from'lodash/noop';import Transition from'react-transition-group/Transition';import{Backdrop}from'@shopgate/engage/components';import{ModalStateTracker}from'@shopgate/engage/a11y/components';import{UIEvents}from'@shopgate/pwa-core';import Divider from"./components/Divider";import Item from"./components/Item";import Section from"./components/Section";import Title from"./components/Title";import{contentStyle,drawerStyle}from"./style";import transition from"./transition";var OPEN='navdrawer_open';var CLOSE='navdrawer_close';/**
  * The NavDrawer component
- */var NavDrawer=/*#__PURE__*/function(_Component){function NavDrawer(props){var _this2;_classCallCheck(this,NavDrawer);_this2=_callSuper(this,NavDrawer,[props]);_defineProperty(_this2,"onEntering",function(){_this2.props.onOpen();});_defineProperty(_this2,"onEntered",function(){if(_this2.a11yCloseRef.current){_this2.a11yCloseRef.current.focus();}});_defineProperty(_this2,"onExited",function(){_this2.contentRef.current.scrollTop=0;});_defineProperty(_this2,"onExiting",function(){_this2.props.onClose();});_defineProperty(_this2,"open",function(){_this2.setState({open:true});});_defineProperty(_this2,"close",function(){_this2.setState({open:false});});_this2.contentRef=React.createRef();_this2.a11yCloseRef=React.createRef();_this2.state={open:false};UIEvents.addListener(OPEN,_this2.open);UIEvents.addListener(CLOSE,_this2.close);return _this2;}/**
+ */var NavDrawer=/*#__PURE__*/function(_Component){function NavDrawer(props){var _this2;_classCallCheck(this,NavDrawer);_this2=_callSuper(this,NavDrawer,[props]);_defineProperty(_this2,"onEntering",function(){_this2.props.onOpen();});_defineProperty(_this2,"onEntered",function(){if(_this2.a11yCloseRef.current){_this2.a11yCloseRef.current.focus();}});_defineProperty(_this2,"onExited",function(){_this2.contentRef.current.scrollTop=0;if(_this2.triggerElement&&typeof _this2.triggerElement.focus==='function'){// Focus the element that triggered the NavDrawer after it closes
+_this2.triggerElement.focus();}});_defineProperty(_this2,"onExiting",function(){_this2.props.onClose();});_defineProperty(_this2,"open",function(){// Save a reference to the element that triggered the NavDrawer
+_this2.triggerElement=document.activeElement;_this2.setState({open:true});});_defineProperty(_this2,"close",function(){_this2.setState({open:false});});_this2.contentRef=React.createRef();_this2.a11yCloseRef=React.createRef();_this2.state={open:false};// Save a reference to the element that triggered the NavDrawer
+_this2.triggerElement=null;UIEvents.addListener(OPEN,_this2.open);UIEvents.addListener(CLOSE,_this2.close);return _this2;}/**
    * @param {Object} nextProps The next component props.
    * @param {Object} nextState The next component state.
    * @returns {JSX}
@@ -8,6 +11,6 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * The unmount lifecycle hook
    */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(OPEN,this.open);UIEvents.removeListener(CLOSE,this.close);}},{key:"render",value:/**
    * @returns {JSX}
-   */function render(){var _this3=this;return React.createElement(Fragment,null,React.createElement(Transition,{onEntering:this.onEntering,onEntered:this.onEntered,onExited:this.onExited,onExiting:this.onExiting,"in":this.state.open,timeout:300},function(state){var ariaHidden=_this3.props['aria-hidden']||state==='exited';return React.createElement("section",{className:"".concat(drawerStyle," ui-material__nav-drawer"),"data-test-id":"NavDrawer",style:transition[state],"aria-hidden":ariaHidden,tabIndex:"-1"},React.createElement(Item,{label:"common.close",ref:_this3.a11yCloseRef,srOnly:true}),React.createElement("nav",{className:contentStyle,ref:_this3.contentRef},_this3.props.children));}),React.createElement(Backdrop,{isVisible:this.state.open,level:4,onClick:this.close,opacity:20}));}}]);}(Component);_defineProperty(NavDrawer,"close",function(){UIEvents.emit(CLOSE);});_defineProperty(NavDrawer,"open",function(){UIEvents.emit(OPEN);});_defineProperty(NavDrawer,"EVENT_OPEN",OPEN);_defineProperty(NavDrawer,"EVENT_CLOSE",CLOSE);_defineProperty(NavDrawer,"Divider",Divider);_defineProperty(NavDrawer,"Item",Item);_defineProperty(NavDrawer,"Section",Section);_defineProperty(NavDrawer,"Title",Title);_defineProperty(NavDrawer,"defaultProps",{'aria-hidden':false,onClose:noop,onOpen:noop/**
+   */function render(){var _this3=this;return React.createElement(Fragment,null,React.createElement(Transition,{onEntering:this.onEntering,onEntered:this.onEntered,onExited:this.onExited,onExiting:this.onExiting,"in":this.state.open,timeout:300},function(state){var ariaHidden=_this3.props['aria-hidden']||state==='exited';return React.createElement(ModalStateTracker,{isVisible:_this3.state.open},React.createElement("section",{className:"".concat(drawerStyle," ui-material__nav-drawer"),"data-test-id":"NavDrawer",style:transition[state],"aria-hidden":ariaHidden,tabIndex:"-1"},React.createElement(Item,{label:"common.close",ref:_this3.a11yCloseRef,srOnly:true}),React.createElement("nav",{className:contentStyle,ref:_this3.contentRef},_this3.props.children)));}),React.createElement(Backdrop,{isVisible:this.state.open,level:4,onClick:this.close,opacity:20}));}}]);}(Component);_defineProperty(NavDrawer,"close",function(){UIEvents.emit(CLOSE);});_defineProperty(NavDrawer,"open",function(){UIEvents.emit(OPEN);});_defineProperty(NavDrawer,"EVENT_OPEN",OPEN);_defineProperty(NavDrawer,"EVENT_CLOSE",CLOSE);_defineProperty(NavDrawer,"Divider",Divider);_defineProperty(NavDrawer,"Item",Item);_defineProperty(NavDrawer,"Section",Section);_defineProperty(NavDrawer,"Title",Title);_defineProperty(NavDrawer,"defaultProps",{'aria-hidden':false,onClose:noop,onOpen:noop/**
    * @param {Object} props The component props.
    */});export default NavDrawer;

package/NavDrawer/spec.js

@@ -1 +1 @@
-import React from'react';import{shallow,mount}from'enzyme';import NavDrawer from"./index";jest.unmock('@shopgate/pwa-core');describe('NavDrawer',function(){it('should match the snapshot',function(){var wrapper=shallow(React.createElement(NavDrawer,null,"Content"));expect(wrapper).toMatchSnapshot();});it('should open and close with an event',function(){var onOpen=jest.fn();var onClose=jest.fn();var wrapper=mount(React.createElement(NavDrawer,{onOpen:onOpen,onClose:onClose},"Content"));NavDrawer.open();expect(wrapper.state().open).toEqual(true);expect(onOpen).toHaveBeenCalled();expect(onClose).not.toHaveBeenCalled();NavDrawer.close();expect(wrapper.state().open).toEqual(false);expect(onClose).toHaveBeenCalled();});it('should close when Backdrop is clicked',function(){var wrapper=shallow(React.createElement(NavDrawer,null,"Content"));var backdrop=wrapper.find('Backdrop');NavDrawer.open();expect(wrapper.state().open).toEqual(true);backdrop.simulate('click');expect(wrapper.state().open).toEqual(false);});});
+import React from'react';import{shallow,mount}from'enzyme';import NavDrawer from"./index";jest.unmock('@shopgate/pwa-core');jest.mock('@shopgate/engage/components');jest.mock('@shopgate/engage/a11y/components');describe('NavDrawer',function(){it('should match the snapshot',function(){var wrapper=shallow(React.createElement(NavDrawer,null,"Content"));expect(wrapper).toMatchSnapshot();});it('should open and close with an event',function(){var onOpen=jest.fn();var onClose=jest.fn();var wrapper=mount(React.createElement(NavDrawer,{onOpen:onOpen,onClose:onClose},"Content"));NavDrawer.open();expect(wrapper.state().open).toEqual(true);expect(onOpen).toHaveBeenCalled();expect(onClose).not.toHaveBeenCalled();NavDrawer.close();expect(wrapper.state().open).toEqual(false);expect(onClose).toHaveBeenCalled();});it('should close when Backdrop is clicked',function(){var wrapper=shallow(React.createElement(NavDrawer,null,"Content"));var backdrop=wrapper.find('Backdrop');NavDrawer.open();expect(wrapper.state().open).toEqual(true);backdrop.simulate('click');expect(wrapper.state().open).toEqual(false);});});

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@shopgate/pwa-ui-material",
-  "version": "7.26.0-beta.1",
+  "version": "7.26.0-beta.3",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.26.0-beta.1",
+    "@shopgate/pwa-common": "7.26.0-beta.3",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
     "redux": "^4.2.1"