@shopgate/pwa-ui-shared 6.18.0-beta.1 → 6.18.0-beta.5

package/Sheet/components/Header/components/SearchBar/index.js

@@ -0,0 +1,3 @@
+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}from'react';import PropTypes from'prop-types';import classNames from'classnames';import I18n from'@shopgate/pwa-common/components/I18n';import Input from'@shopgate/pwa-common/components/Input';import MagnifierIcon from"../../../../../icons/MagnifierIcon";import styles from"./style";/**
+ * @return {JSX}
+ */var SearchBar=function SearchBar(_ref){var handleChange=_ref.handleChange;var _useState=useState(''),_useState2=_slicedToArray(_useState,2),query=_useState2[0],setQuery=_useState2[1];var name='search';return React.createElement("div",{className:"ui-shared__sheet__search-field","data-test-id":"SearchField"},React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.inputWrapper},React.createElement("form",{onSubmit:function onSubmit(e){e.preventDefault();}},React.createElement("label",{htmlFor:name,className:styles.label},React.createElement("div",{className:styles.icon},React.createElement(MagnifierIcon,null)),!query.length&&React.createElement(I18n.Text,{string:"search.placeholder"})),React.createElement(Input,{name:name,autoComplete:false,className:classNames(styles.input),onChange:function onChange(value){handleChange(value);setQuery(value);},value:query,type:"search"})))));};export default SearchBar;

package/Sheet/components/Header/components/SearchBar/spec.js

@@ -0,0 +1,3 @@
+import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React from'react';import{mount}from'enzyme';import SearchBar from"./index";describe('<SearchBar />',function(){it('should call handleChange on input',/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var handleChange,wrapper;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:handleChange=jest.fn();_context.next=3;return mount(React.createElement(SearchBar,{handleChange:handleChange}));case 3:wrapper=_context.sent;expect(wrapper).toMatchSnapshot();// Update input
+wrapper.find('input').first().simulate('change',{target:{name:'search',value:'asdf'}});// Should call with updated state.
+expect(handleChange).toHaveBeenCalledWith('asdf');case 7:case"end":return _context.stop();}}},_callee);})));});

package/Sheet/components/Header/components/SearchBar/style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',flexDirection:'row',flexWrap:'nowrap',marginBottom:4,paddingLeft:16,paddingRight:16,paddingTop:5,paddingBottom:10}).toString();var inputWrapper=css({position:'relative',flexGrow:1}).toString();var input=css({borderRadius:10,width:'100%',padding:'4px 10px 4px 30px',lineHeight:'28px',outline:'none',background:themeColors.shade7,verticalAlign:'middle',WebkitAppearance:'none'}).toString();var label=css({alignItems:'center',color:themeColors.shade3,display:'flex',height:'36px',position:'absolute',pointerEvents:'none',width:'100%'}).toString();var icon=css({padding:'0 6px',color:themeColors.shade3,fontSize:'1.235rem'}).toString();export default{container:container,inputWrapper:inputWrapper,input:input,label:label,icon:icon};

package/Sheet/components/Header/index.js

@@ -1,4 +1,4 @@
-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 _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 Grid from'@shopgate/pwa-common/components/Grid';import Ripple from"../../../Ripple";import CrossIcon from"../../../icons/CrossIcon";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 _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 Grid from'@shopgate/pwa-common/components/Grid';import Ripple from"../../../Ripple";import CrossIcon from"../../../icons/CrossIcon";import styles from"./style";import SearchBar from"./components/SearchBar";/**
  * Header component.
  */var Header=/*#__PURE__*/function(_Component){_inherits(Header,_Component);function Header(){_classCallCheck(this,Header);return _possibleConstructorReturn(this,_getPrototypeOf(Header).apply(this,arguments));}_createClass(Header,[{key:"shouldComponentUpdate",/**
    * The component's default props.
@@ -9,4 +9,4 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    */value:function shouldComponentUpdate(nextProps){return this.props.shadow!==nextProps.shadow||this.props.title!==nextProps.title;}/**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var classes=classNames(styles.wrapper,_defineProperty({},styles.shadow,this.props.shadow));var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;return React.createElement(Grid,{className:classes,component:"div",wrap:false},React.createElement("button",{className:styles.closeButton,onClick:this.props.onToggleClose,"aria-label":__('common.close'),type:"button"},React.createElement(Ripple,{className:styles.closeIcon},React.createElement(CrossIcon,{size:24}))),React.createElement(Grid.Item,{className:styles.title,component:"div",grow:1,role:"heading"},this.props.title));}}]);return Header;}(Component);_defineProperty(Header,"defaultProps",{onToggleClose:function onToggleClose(){},shadow:false});_defineProperty(Header,"contextTypes",{i18n:PropTypes.func});export default Header;
+   */},{key:"render",value:function render(){var classes=classNames(styles.wrapper);var _this$context$i18n=this.context.i18n(),__=_this$context$i18n.__;return React.createElement("div",{className:classNames(_defineProperty({},styles.shadow,this.props.shadow))},React.createElement(Grid,{className:classes,component:"div",wrap:false},React.createElement("button",{className:styles.closeButton,onClick:this.props.onToggleClose,"aria-label":__('common.close'),type:"button"},React.createElement(Ripple,{className:styles.closeIcon},React.createElement(CrossIcon,{size:24}))),React.createElement(Grid.Item,{className:styles.title,component:"div",grow:1,role:"heading"},this.props.title)),this.props.showSearch&&React.createElement(SearchBar,{handleChange:this.props.handleChange}));}}]);return Header;}(Component);_defineProperty(Header,"defaultProps",{onToggleClose:function onToggleClose(){},shadow:false,handleChange:function handleChange(){},showSearch:false});_defineProperty(Header,"contextTypes",{i18n:PropTypes.func});export default Header;

package/Sheet/components/Header/spec.js

@@ -1 +1 @@
-import React from'react';import{shallow}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import Header from"./index";describe('<Header />',function(){it('should render with correct title',function(){var title='My Title';var wrapper=shallow(React.createElement(Header,{title:title}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find('GridItem').first().props().children).toEqual(title);});});
+import React from'react';import{shallow,mount}from'enzyme';import mockRenderOptions from'@shopgate/pwa-common/helpers/mocks/mockRenderOptions';import Header from"./index";describe('<Header />',function(){it('should render with correct title',function(){var title='My Title';var wrapper=shallow(React.createElement(Header,{title:title}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find('GridItem').first().props().children).toEqual(title);});it('should render searchbar',function(){var title='My Title';var wrapper=mount(React.createElement(Header,{title:title,showSearch:true}),mockRenderOptions);expect(wrapper).toMatchSnapshot();expect(wrapper.find('SearchBar').length).toBe(1);});it('should call handleChange on input',function(){var title='My Title';var handleChange=jest.fn();var wrapper=mount(React.createElement(Header,{title:title,showSearch:true,handleChange:handleChange}),mockRenderOptions);wrapper.find('input').first().simulate('change',{target:{name:'search',value:'asdf'}});expect(handleChange).toHaveBeenCalledWith('asdf');});});

package/Sheet/index.js

@@ -1,4 +1,4 @@
-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 _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 _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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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 throttle from'lodash/throttle';import classNames from'classnames';import UIEvents from'@shopgate/pwa-core/emitters/ui';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Drawer from'@shopgate/pwa-common/components/Drawer';import SearchBar from"./components/SearchBar";import Header from"./components/Header";import styles from"./style";export var SHEET_EVENTS={OPEN:'Sheet.open',CLOSE:'Sheet.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 _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 _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 _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}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 throttle from'lodash/throttle';import classNames from'classnames';import UIEvents from'@shopgate/pwa-core/emitters/ui';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import Drawer from'@shopgate/pwa-common/components/Drawer';import Header from"./components/Header";import styles from"./style";export var SHEET_EVENTS={OPEN:'Sheet.open',CLOSE:'Sheet.close'};/**
  * Sheet component.
  */var Sheet=/*#__PURE__*/function(_Component){_inherits(Sheet,_Component);/**
    * The component default props.
@@ -15,7 +15,7 @@ function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="s
    * Renders the component.
    * @returns {JSX}
    */value:function render(){var _this2=this;var children=React.Children.map(this.props.children,function(child){return React.cloneElement(child,// Only add onClose prop to other components
-typeof child.type==='function'&&_this2.props.onClose!==null?{onClose:_this2.props.onClose,query:_this2.state.query}:{});});var drawerClassNames=classNames(styles.container,_defineProperty({},styles.containerFullScreen,this.props.showSearch),_defineProperty({},this.props.className,this.props.className));var contentClassNames=classNames(styles.content,_defineProperty({},this.props.contentClassName,this.props.contentClassName),_defineProperty({},styles.shadow,!this.props.backdrop));return React.createElement("section",{className:"ui-shared__sheet"},React.createElement(Drawer,{className:drawerClassNames,isOpen:this.state.isOpen,onDidOpen:this.handleDidOpen,onDidClose:this.handleDidClose,onOpen:this.props.onOpen,onClose:this.handleClose,animation:this.animationProps},this.props.title&&React.createElement(Sheet.Header,{onToggleClose:this.handleClose,shadow:this.state.scrolled,title:this.props.title}),React.createElement("div",{ref:this.content,onScroll:this.handleScroll,className:contentClassNames},this.props.showSearch&&React.createElement("div",{style:{backgroundColor:'white',position:'sticky',width:'100%',top:0,zIndex:2},className:""},React.createElement(SearchBar,{handleChange:this.handleSearchInput})),children)),this.props.backdrop&&React.createElement(Backdrop,{isVisible:this.state.isOpen,level:4,onClick:this.handleClose,opacity:20}));}},{key:"animationProps",/**
+typeof child.type==='function'&&_this2.props.onClose!==null?{onClose:_this2.props.onClose,query:_this2.state.query}:{});});var drawerClassNames=classNames(styles.container,_defineProperty({},this.props.className,this.props.className));var contentClassNames=classNames(styles.content,_defineProperty({},styles.containerFullScreen,this.props.showSearch),_defineProperty({},this.props.contentClassName,this.props.contentClassName),_defineProperty({},styles.shadow,!this.props.backdrop));return React.createElement("section",{className:"ui-shared__sheet"},React.createElement(Drawer,{className:drawerClassNames,isOpen:this.state.isOpen,onDidOpen:this.handleDidOpen,onDidClose:this.handleDidClose,onOpen:this.props.onOpen,onClose:this.handleClose,animation:this.animationProps},this.props.title&&React.createElement(Sheet.Header,{showSearch:this.props.showSearch,handleChange:this.handleSearchInput,onToggleClose:this.handleClose,shadow:this.state.scrolled,title:this.props.title}),React.createElement("div",{ref:this.content,onScroll:this.handleScroll,className:contentClassNames},children)),this.props.backdrop&&React.createElement(Backdrop,{isVisible:this.state.isOpen,level:4,onClick:this.handleClose,opacity:20}));}},{key:"animationProps",/**
    * Getter for the animation props of the Sheet.
    * @returns {Object}
    */get:function get(){return _extends({duration:this.props.duration},styles.drawerAnimation,{},this.props.animation);}/**

package/Sheet/style.js

@@ -1 +1 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var container=css({bottom:0,background:themeConfig.colors.light,color:themeConfig.colors.dark,width:'100vw',maxWidth:640,left:0,right:0,margin:'0 auto'}).toString();var containerFullScreen=css({height:'100%'});var shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css({position:'relative',maxHeight:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")],paddingBottom:['var(--safe-area-inset-bottom)'],overflowY:'scroll',WebkitOverflowScrolling:'touch'}).toString();var slideInSheetDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var drawerAnimation={"in":css({animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString()};export default{container:container,containerFullScreen:containerFullScreen,shadow:shadow,content:content,drawerAnimation:drawerAnimation};
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var duration=300;var easing='cubic-bezier(0.25, 0.1, 0.25, 1)';var container=css({bottom:0,background:themeConfig.colors.light,color:themeConfig.colors.dark,width:'100vw',maxWidth:640,left:0,right:0,margin:'0 auto'}).toString();var containerFullScreen=css({height:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - 51px)"),"calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - 51px - var(--safe-area-inset-top))")]});var searchBarWrapper=css({backgroundColor:'white',height:52,position:'sticky',width:'100%',top:0,zIndex:2});var shadow=css({boxShadow:themeConfig.shadows.sheet}).toString();var content=css({position:'relative',maxHeight:["calc(100vh - ".concat(themeConfig.variables.navigator.height,"px)"),"calc(100vh - ".concat(themeConfig.variables.navigator.height,"px - var(--safe-area-inset-top))")],paddingBottom:['var(--safe-area-inset-bottom)'],overflowY:'scroll',WebkitOverflowScrolling:'touch'}).toString();var slideInSheetDrawer=css.keyframes({'0%':{transform:'translateY(100%)'},'100%':{transform:'translateY(0)'}});var slideOutSheetDrawer=css.keyframes({'0%':{transform:'translateY(0)'},'100%':{transform:'translateY(100%)'}});var drawerAnimation={"in":css({animation:"".concat(slideInSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString(),out:css({animation:"".concat(slideOutSheetDrawer," ").concat(duration,"ms 1 both ").concat(easing)}).toString()};export default{container:container,containerFullScreen:containerFullScreen,searchBarWrapper:searchBarWrapper,shadow:shadow,content:content,drawerAnimation:drawerAnimation};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@shopgate/pwa-ui-shared",
-  "version": "6.18.0-beta.1",
+  "version": "6.18.0-beta.5",
   "description": "Shopgate's shared UI components.",
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@shopgate/pwa-ui-ios": "6.18.0-beta.1",
-    "@shopgate/pwa-ui-material": "6.18.0-beta.1"
+    "@shopgate/pwa-ui-ios": "6.18.0-beta.5",
+    "@shopgate/pwa-ui-material": "6.18.0-beta.5"
   },
   "devDependencies": {
-    "@shopgate/pwa-common": "6.18.0-beta.1",
-    "@shopgate/pwa-common-commerce": "6.18.0-beta.1",
+    "@shopgate/pwa-common": "6.18.0-beta.5",
+    "@shopgate/pwa-common-commerce": "6.18.0-beta.5",
     "classnames": "^2.2.5",
     "react": "~16.12.0"
   },

package/Sheet/components/SearchBar/index.js

@@ -1,3 +0,0 @@
-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}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{I18n,Input,MagnifierIcon}from'@shopgate/engage/components';import styles from"./style";/**
- * @return {JSX}
- */var SearchBar=function SearchBar(_ref){var handleChange=_ref.handleChange,name=_ref.name;var _useState=useState(''),_useState2=_slicedToArray(_useState,2),query=_useState2[0],setQuery=_useState2[1];return React.createElement("div",{className:"theme__browse__search-field","data-test-id":"SearchField"},React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.inputWrapper},React.createElement("form",null,React.createElement("label",{htmlFor:name,className:styles.label},React.createElement("div",{className:styles.icon},React.createElement(MagnifierIcon,null)),!query.length&&React.createElement(I18n.Text,{string:"search.label"})),React.createElement(Input,{autoComplete:false,className:classNames(styles.input),onChange:function onChange(value){handleChange(value);setQuery(value);},value:query,type:"search"})))));};SearchBar.defaultProps={name:'search'};export default SearchBar;

package/Sheet/components/SearchBar/style.js

@@ -1 +0,0 @@
-import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',position:'relative',flexDirection:'row',flexWrap:'nowrap',marginBottom:4,paddingLeft:16,paddingRight:16}).toString();var inputWrapper=css({position:'relative',flexGrow:1}).toString();var input=css({borderRadius:10,width:'100%',padding:'4px 10px 4px 30px',lineHeight:'28px',outline:'none',background:themeColors.shade7,verticalAlign:'middle',WebkitAppearance:'none'}).toString();var label=css({alignItems:'center',color:themeColors.shade3,display:'flex',height:'36px',position:'absolute',pointerEvents:'none',width:'100%'}).toString();var icon=css({padding:'0 6px',color:themeColors.shade3,fontSize:'1.235rem'}).toString();var searchBarWrapper=css({});export default{container:container,inputWrapper:inputWrapper,input:input,label:label,icon:icon,searchBarWrapper:searchBarWrapper};