@shopgate/pwa-ui-material 7.25.0-beta.5 → 7.25.0

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'},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/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');jest.mock('@shopgate/engage/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);});});
+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.25.0-beta.5",
+  "version": "7.25.0",
   "description": "Shopgate's material design UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@shopgate/pwa-common": "7.25.0-beta.5",
+    "@shopgate/pwa-common": "7.25.0",
     "react": "~16.14.0",
     "react-dom": "~16.14.0",
     "redux": "^4.2.1"