@shopgate/pwa-common 7.30.0-alpha.7 → 7.30.0-alpha.9

package/components/Select/spec.js

@@ -1,4 +1,88 @@
-import React from'react';import{shallow,mount}from'enzyme';import Select from"./index";import SelectItem from"./components/Item";describe('<Select />',function(){jest.useFakeTimers();it('opens and closes the item list',function(){var wrapper=shallow(React.createElement(Select,null));var previousOpenState=wrapper.state('isOpen');wrapper.instance().toggleOpenState();expect(wrapper.state('isOpen')).toBe(!previousOpenState);previousOpenState=wrapper.state('isOpen');wrapper.instance().toggleOpenState();expect(wrapper.state('isOpen')).toBe(!previousOpenState);});it('renders without items',function(){var wrapper=mount(React.createElement(Select,null));wrapper.instance().toggleOpenState();expect(wrapper).toMatchSnapshot();expect(wrapper.find(SelectItem).length).toBe(0);});it('renders with implicit items (closed)',function(){var items=['a','b','c','d','e','f'];var wrapper=mount(React.createElement(Select,{items:items}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(SelectItem).length).toBe(0);});it('renders with implicit items (opened)',function(){var items=['a','b','c','d','e','f'];var wrapper=mount(React.createElement(Select,{items:items}));wrapper.instance().toggleOpenState();wrapper.update();expect(wrapper).toMatchSnapshot();expect(wrapper.find(SelectItem).length).toBe(items.length);});it('accepts implicit and explicit items',function(){var items=['a','b',{value:'c'},'d',{value:'e',label:'E'},'f'];var wrapper=mount(React.createElement(Select,{items:items}));wrapper.instance().toggleOpenState();wrapper.update();expect(wrapper).toMatchSnapshot();expect(wrapper.find(SelectItem).length).toBe(items.length);var i=0;wrapper.find(SelectItem).forEach(function(item){var expectedLabel=items[i];if(expectedLabel.label){expectedLabel=expectedLabel.label;}if(expectedLabel.value){expectedLabel=expectedLabel.value;}expect(item.prop('label')).toBe(expectedLabel);i+=1;});});it('triggers callback on change',function(){var items=['a','b','c','d','e','f'];var selectionIndex=Math.floor(items.length/2);/**
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Select from "./index";
+import SelectItem from "./components/Item";
+describe('<Select />', () => {
+  jest.useFakeTimers();
+  it('opens and closes the item list', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Select, null));
+    let previousOpenState = wrapper.state('isOpen');
+    wrapper.instance().toggleOpenState();
+    expect(wrapper.state('isOpen')).toBe(!previousOpenState);
+    previousOpenState = wrapper.state('isOpen');
+    wrapper.instance().toggleOpenState();
+    expect(wrapper.state('isOpen')).toBe(!previousOpenState);
+  });
+  it('renders without items', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Select, null));
+    wrapper.instance().toggleOpenState();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SelectItem).length).toBe(0);
+  });
+  it('renders with implicit items (closed)', () => {
+    const items = ['a', 'b', 'c', 'd', 'e', 'f'];
+    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+      items: items
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SelectItem).length).toBe(0);
+  });
+  it('renders with implicit items (opened)', () => {
+    const items = ['a', 'b', 'c', 'd', 'e', 'f'];
+    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+      items: items
+    }));
+    wrapper.instance().toggleOpenState();
+    wrapper.update();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SelectItem).length).toBe(items.length);
+  });
+  it('accepts implicit and explicit items', () => {
+    const items = ['a', 'b', {
+      value: 'c'
+    }, 'd', {
+      value: 'e',
+      label: 'E'
+    }, 'f'];
+    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+      items: items
+    }));
+    wrapper.instance().toggleOpenState();
+    wrapper.update();
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(SelectItem).length).toBe(items.length);
+    let i = 0;
+    wrapper.find(SelectItem).forEach(item => {
+      let expectedLabel = items[i];
+      if (expectedLabel.label) {
+        expectedLabel = expectedLabel.label;
+      }
+      if (expectedLabel.value) {
+        expectedLabel = expectedLabel.value;
+      }
+      expect(item.prop('label')).toBe(expectedLabel);
+      i += 1;
+    });
+  });
+  it('triggers callback on change', () => {
+    const items = ['a', 'b', 'c', 'd', 'e', 'f'];
+    const selectionIndex = Math.floor(items.length / 2);
+
+    /**
      * Mocked callback for the onSelect event
      * @param {string} value Mocked value
-     */var callback=function callback(value){expect(value).toBe(items[selectionIndex]);};var wrapper=mount(React.createElement(Select,{items:items,onChange:callback}));wrapper.instance().toggleOpenState();wrapper.update();expect(wrapper).toMatchSnapshot();var node=wrapper.find(SelectItem).at(selectionIndex);node.prop('onSelect')(node.prop('value'),node.prop('label'));});});
+     */
+    const callback = value => {
+      expect(value).toBe(items[selectionIndex]);
+    };
+    const wrapper = mount(/*#__PURE__*/React.createElement(Select, {
+      items: items,
+      onChange: callback
+    }));
+    wrapper.instance().toggleOpenState();
+    wrapper.update();
+    expect(wrapper).toMatchSnapshot();
+    const node = wrapper.find(SelectItem).at(selectionIndex);
+    node.prop('onSelect')(node.prop('value'), node.prop('label'));
+  });
+});

package/components/Select/style.js

@@ -1 +1,17 @@
-import{css}from'glamor';var container=css({margin:0,padding:0}).toString();var selectHandle=css({"float":'right'}).toString();var items=css({position:'absolute',width:'100%'}).toString();export default{container:container,selectHandle:selectHandle,items:items};
+import { css } from 'glamor';
+const container = css({
+  margin: 0,
+  padding: 0
+}).toString();
+const selectHandle = css({
+  float: 'right'
+}).toString();
+const items = css({
+  position: 'absolute',
+  width: '100%'
+}).toString();
+export default {
+  container,
+  selectHandle,
+  items
+};

package/components/SelectBox/components/Item/index.js

@@ -1,10 +1,52 @@
-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 classNames from'classnames';import PropTypes from'prop-types';import I18n from"../../../I18n";import{item}from"./style";/**
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import I18n from "../../../I18n";
+import { item } from "./style";
+
+/**
  * The SelectBoxItem component.
  * @param {Object} props The components props.
  * @returns {JSX}
- */var SelectBoxItem=/*#__PURE__*/function(_Component){function SelectBoxItem(){var _this2;_classCallCheck(this,SelectBoxItem);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,SelectBoxItem,[].concat(args));/**
-   * Calls the handleSelectionUpdate prop and prevents further events.
-   */_defineProperty(_this2,"handleSelectionUpdate",function(){_this2.props.handleSelectionUpdate(_this2.props.value);});return _this2;}_inherits(SelectBoxItem,_Component);return _createClass(SelectBoxItem,[{key:"render",value:/**
+ */
+class SelectBoxItem extends Component {
+  constructor(...args) {
+    super(...args);
+    /**
+     * Calls the handleSelectionUpdate prop and prevents further events.
+     */
+    this.handleSelectionUpdate = () => {
+      this.props.handleSelectionUpdate(this.props.value);
+    };
+  }
+  /**
    * Renders the component
    * @returns {JSX}
-   */function render(){var Wrapper=this.props.wrapper;var _this$props$className=this.props.classNames,selectItem=_this$props$className.selectItem,selectItemSelected=_this$props$className.selectItemSelected;return React.createElement("li",{className:classNames(selectItem,item,_defineProperty({},selectItemSelected,this.props.isSelected)),onKeyUp:function onKeyUp(){},onClick:this.handleSelectionUpdate,"data-test-id":this.props.label,role:"menuitem",ref:this.props.forwardedRef,tabIndex:this.props.isSelected?'0':'-1',"aria-current":this.props.isSelected},React.createElement(Wrapper,null,React.createElement(I18n.Text,{string:this.props.label})));}}]);}(Component);_defineProperty(SelectBoxItem,"defaultProps",{forwardedRef:null,classNames:{}});export default SelectBoxItem;
+   */
+  render() {
+    const Wrapper = this.props.wrapper;
+    const {
+      selectItem,
+      selectItemSelected
+    } = this.props.classNames;
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames(selectItem, item, {
+        [selectItemSelected]: this.props.isSelected
+      }),
+      onKeyUp: () => {},
+      onClick: this.handleSelectionUpdate,
+      "data-test-id": this.props.label,
+      role: "menuitem",
+      ref: this.props.forwardedRef,
+      tabIndex: this.props.isSelected ? '0' : '-1',
+      "aria-current": this.props.isSelected
+    }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(I18n.Text, {
+      string: this.props.label
+    })));
+  }
+}
+SelectBoxItem.defaultProps = {
+  forwardedRef: null,
+  classNames: {}
+};
+export default SelectBoxItem;

package/components/SelectBox/components/Item/style.js

@@ -1 +1,7 @@
-import{css}from'glamor';export var item=css({cursor:'pointer'}).toString();export var selected=css({fontWeight:500});
+import { css } from 'glamor';
+export const item = css({
+  cursor: 'pointer'
+}).toString();
+export const selected = css({
+  fontWeight: 500
+});

package/components/SelectBox/index.js

@@ -1,24 +1,180 @@
-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 find from'lodash/find';import Dropdown from"../Dropdown";import I18n from"../I18n";import SelectBoxItem from"./components/Item";import styles from"./style";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import find from 'lodash/find';
+import Dropdown from "../Dropdown";
+import I18n from "../I18n";
+import SelectBoxItem from "./components/Item";
+import styles from "./style";
+
+/**
  * The select box component.
- */var SelectBox=/*#__PURE__*/function(_Component){/**
+ */
+class SelectBox extends Component {
+  /**
    * Initializes the component.
    * @param {Object} props The components props.
-   */function SelectBox(props){var _this2;_classCallCheck(this,SelectBox);_this2=_callSuper(this,SelectBox,[props]);/**
-   * When dropdown animation is finished.
-   */_defineProperty(_this2,"onDropdownComplete",function(){_this2.dropdownCompleted=true;});/**
-   * Handles any interaction the user does outside of the component.
-   * In this case the select gets closed.
-   * @param {Object} event The event object.
-   */_defineProperty(_this2,"handleInteractionOutside",function(event){_this2.setState({isOpen:false});event.preventDefault();event.stopPropagation();});/**
-   * Sets the open state to true
-   */_defineProperty(_this2,"handleOpenList",function(){if(_this2.state.isOpen){return;}_this2.dropdownCompleted=false;_this2.setState({isOpen:true});if(_this2.firstItemRef){_this2.firstItemRef.focus();}});/**
-   * Sets the new active selection.
-   * @param {string} value Value of the selected item.
-   */_defineProperty(_this2,"handleSelectionUpdate",function(value){var selection=find(_this2.props.items,{value:value});_this2.setState({selected:selection,isOpen:false});// Delay the callback to make sure actions are fired after animations are done.
-setTimeout(function(){_this2.props.handleSelectionUpdate(selection.value);},_this2.props.duration);if(_this2.controlRef){_this2.controlRef.focus();}});/** @param {HTMLElement} ref The element */_defineProperty(_this2,"setControlRef",function(ref){_this2.controlRef=ref;});/** @param {HTMLElement} ref The element */_defineProperty(_this2,"setFirstItemRef",function(ref){_this2.firstItemRef=ref;});_this2.dropdownCompleted=false;_this2.state={isOpen:false,selected:find(props.items,{value:props.initialValue})};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * When dropdown animation is finished.
+     */
+    this.onDropdownComplete = () => {
+      this.dropdownCompleted = true;
+    };
+    /**
+     * Handles any interaction the user does outside of the component.
+     * In this case the select gets closed.
+     * @param {Object} event The event object.
+     */
+    this.handleInteractionOutside = event => {
+      this.setState({
+        isOpen: false
+      });
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    /**
+     * Sets the open state to true
+     */
+    this.handleOpenList = () => {
+      if (this.state.isOpen) {
+        return;
+      }
+      this.dropdownCompleted = false;
+      this.setState({
+        isOpen: true
+      });
+      if (this.firstItemRef) {
+        this.firstItemRef.focus();
+      }
+    };
+    /**
+     * Sets the new active selection.
+     * @param {string} value Value of the selected item.
+     */
+    this.handleSelectionUpdate = value => {
+      const selection = find(this.props.items, {
+        value
+      });
+      this.setState({
+        selected: selection,
+        isOpen: false
+      });
+
+      // Delay the callback to make sure actions are fired after animations are done.
+      setTimeout(() => {
+        this.props.handleSelectionUpdate(selection.value);
+      }, this.props.duration);
+      if (this.controlRef) {
+        this.controlRef.focus();
+      }
+    };
+    /** @param {HTMLElement} ref The element */
+    this.setControlRef = ref => {
+      this.controlRef = ref;
+    };
+    /** @param {HTMLElement} ref The element */
+    this.setFirstItemRef = ref => {
+      this.firstItemRef = ref;
+    };
+    this.dropdownCompleted = false;
+    this.state = {
+      isOpen: false,
+      selected: find(props.items, {
+        value: props.initialValue
+      })
+    };
+  }
+
+  /**
    * Reset selected when changing the initial value.
     * @param {Object} nextProps The next props the component will receive.
-   */_inherits(SelectBox,_Component);return _createClass(SelectBox,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.initialValue!==nextProps.initialValue){this.setState({selected:find(nextProps.items,{value:nextProps.initialValue})});}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.initialValue !== nextProps.initialValue) {
+      this.setState({
+        selected: find(nextProps.items, {
+          value: nextProps.initialValue
+        })
+      });
+    }
+  }
+  /**
    * Renders the component
    * @returns {JSX}
-   */function render(){var _this3=this;var Icon=this.props.icon;var _this$props$className=this.props.classNames,icon=_this$props$className.icon,_this$props$className2=_this$props$className.iconOpen,iconOpen=_this$props$className2===void 0?null:_this$props$className2,selection=_this$props$className.selection,button=_this$props$className.button,dropdown=_this$props$className.dropdown,selectItem=_this$props$className.selectItem,selectItemSelected=_this$props$className.selectItemSelected;var buttonLabel=this.state.selected?this.state.selected.label:this.props.defaultText;var iconClasses=classNames(icon,_defineProperty({},iconOpen,this.state.isOpen&&iconOpen!==null));return React.createElement("div",{className:"".concat(this.props.className," common__select-box"),"data-test-id":this.props.testId},React.createElement("button",{className:button,onClick:this.handleOpenList,"data-test-id":buttonLabel,type:"button","aria-haspopup":true,"aria-expanded":this.state.isOpen?true:null,"aria-controls":buttonLabel,ref:this.setControlRef},React.createElement("span",{className:selection},React.createElement(I18n.Text,{string:buttonLabel})),React.createElement("div",{className:iconClasses},React.createElement(Icon,null))),React.createElement(Dropdown,{className:dropdown,isOpen:this.state.isOpen,onComplete:this.onDropdownComplete,duration:this.props.duration},React.createElement("ul",{role:"menu",id:buttonLabel,tabIndex:"-1"},this.props.items.map(function(item){return React.createElement(SelectBoxItem,{classNames:{selectItem:selectItem,selectItemSelected:selectItemSelected},wrapper:_this3.props.item,key:item.value,value:item.value,label:item.label,handleSelectionUpdate:_this3.handleSelectionUpdate,isSelected:buttonLabel===item.label,forwardedRef:buttonLabel===item.label?_this3.setFirstItemRef:null});}))),this.state.isOpen&&React.createElement("button",{className:styles.overlay,onClick:this.handleInteractionOutside,onTouchMove:this.handleInteractionOutside,type:"button","aria-hidden":true}));}}]);}(Component);_defineProperty(SelectBox,"defaultProps",{className:'',classNames:{},duration:225,defaultText:'filter.sort.default',handleSelectionUpdate:function handleSelectionUpdate(){},initialValue:null,testId:null});export default SelectBox;
+   */
+  render() {
+    const Icon = this.props.icon;
+    const {
+      icon,
+      iconOpen = null,
+      selection,
+      button,
+      dropdown,
+      selectItem,
+      selectItemSelected
+    } = this.props.classNames;
+    const buttonLabel = this.state.selected ? this.state.selected.label : this.props.defaultText;
+    const iconClasses = classNames(icon, {
+      [iconOpen]: this.state.isOpen && iconOpen !== null
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${this.props.className} common__select-box`,
+      "data-test-id": this.props.testId
+    }, /*#__PURE__*/React.createElement("button", {
+      className: button,
+      onClick: this.handleOpenList,
+      "data-test-id": buttonLabel,
+      type: "button",
+      "aria-haspopup": true,
+      "aria-expanded": this.state.isOpen ? true : null,
+      "aria-controls": buttonLabel,
+      ref: this.setControlRef
+    }, /*#__PURE__*/React.createElement("span", {
+      className: selection
+    }, /*#__PURE__*/React.createElement(I18n.Text, {
+      string: buttonLabel
+    })), /*#__PURE__*/React.createElement("div", {
+      className: iconClasses
+    }, /*#__PURE__*/React.createElement(Icon, null))), /*#__PURE__*/React.createElement(Dropdown, {
+      className: dropdown,
+      isOpen: this.state.isOpen,
+      onComplete: this.onDropdownComplete,
+      duration: this.props.duration
+    }, /*#__PURE__*/React.createElement("ul", {
+      role: "menu",
+      id: buttonLabel,
+      tabIndex: "-1"
+    }, this.props.items.map(item => /*#__PURE__*/React.createElement(SelectBoxItem, {
+      classNames: {
+        selectItem,
+        selectItemSelected
+      },
+      wrapper: this.props.item,
+      key: item.value,
+      value: item.value,
+      label: item.label,
+      handleSelectionUpdate: this.handleSelectionUpdate,
+      isSelected: buttonLabel === item.label,
+      forwardedRef: buttonLabel === item.label ? this.setFirstItemRef : null
+    })))), this.state.isOpen && /*#__PURE__*/React.createElement("button", {
+      className: styles.overlay,
+      onClick: this.handleInteractionOutside,
+      onTouchMove: this.handleInteractionOutside,
+      type: "button",
+      "aria-hidden": true
+    }));
+  }
+}
+SelectBox.defaultProps = {
+  className: '',
+  classNames: {},
+  duration: 225,
+  defaultText: 'filter.sort.default',
+  handleSelectionUpdate: () => {},
+  initialValue: null,
+  testId: null
+};
+export default SelectBox;

package/components/SelectBox/spec.js

@@ -1,9 +1,65 @@
-import React from'react';import PropTypes from'prop-types';import{mount}from'enzyme';import SelectBox from"./index";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { mount } from 'enzyme';
+import SelectBox from "./index";
+
+/**
  * Mock Icon component.
  * @returns {JSX}
- */var MockIconComponent=function MockIconComponent(){return React.createElement("span",{id:"icon"});};/**
+ */
+const MockIconComponent = () => /*#__PURE__*/React.createElement("span", {
+  id: "icon"
+});
+
+/**
  * Mock Item component.
  * @param {Object} props The components props.
  * @param {JSX} props.children The components children.
  * @returns {JSX}
- */var MockItemComponent=function MockItemComponent(_ref){var children=_ref.children;return React.createElement("div",null,children);};describe('<SelectBox>',function(){var dummyItems=[{label:'My item #1',value:'item_1'},{label:'My item #2',value:'item_2'},{label:'My item #3',value:'item_3'}];it('should render the selectbox with given mock components',function(){var wrapper=mount(React.createElement(SelectBox,{icon:MockIconComponent,item:MockItemComponent,items:dummyItems}));expect(wrapper).toMatchSnapshot();expect(wrapper.find(MockIconComponent).length).toEqual(1);expect(wrapper.find(MockItemComponent).length).toEqual(3);});it('should render with a default text',function(){var wrapper=mount(React.createElement(SelectBox,{icon:MockIconComponent,item:MockItemComponent,items:dummyItems,defaultText:"Foo"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('span').at(0).text()).toEqual('Foo');});it('should render with a preselected selection',function(){var wrapper=mount(React.createElement(SelectBox,{icon:MockIconComponent,item:MockItemComponent,items:dummyItems,defaultText:"Foo",initialValue:"item_2"}));expect(wrapper).toMatchSnapshot();expect(wrapper.find('span').at(0).text()).toEqual('My item #2');});});
+ */
+const MockItemComponent = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", null, children);
+describe('<SelectBox>', () => {
+  const dummyItems = [{
+    label: 'My item #1',
+    value: 'item_1'
+  }, {
+    label: 'My item #2',
+    value: 'item_2'
+  }, {
+    label: 'My item #3',
+    value: 'item_3'
+  }];
+  it('should render the selectbox with given mock components', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(SelectBox, {
+      icon: MockIconComponent,
+      item: MockItemComponent,
+      items: dummyItems
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(MockIconComponent).length).toEqual(1);
+    expect(wrapper.find(MockItemComponent).length).toEqual(3);
+  });
+  it('should render with a default text', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(SelectBox, {
+      icon: MockIconComponent,
+      item: MockItemComponent,
+      items: dummyItems,
+      defaultText: "Foo"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('span').at(0).text()).toEqual('Foo');
+  });
+  it('should render with a preselected selection', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(SelectBox, {
+      icon: MockIconComponent,
+      item: MockItemComponent,
+      items: dummyItems,
+      defaultText: "Foo",
+      initialValue: "item_2"
+    }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('span').at(0).text()).toEqual('My item #2');
+  });
+});

package/components/SelectBox/style.js

@@ -1 +1,18 @@
-import{css}from'glamor';var overlay=css({position:'fixed',top:0,left:0,width:'100%',height:'100%',overflow:'auto',zIndex:1,outline:0}).toString();var rotatedIcon=css({transform:'rotate(180deg)'}).toString();export default{overlay:overlay,rotatedIcon:rotatedIcon};
+import { css } from 'glamor';
+const overlay = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  overflow: 'auto',
+  zIndex: 1,
+  outline: 0
+}).toString();
+const rotatedIcon = css({
+  transform: 'rotate(180deg)'
+}).toString();
+export default {
+  overlay,
+  rotatedIcon
+};

package/components/Slider/index.js

@@ -1,5 +1,9 @@
-import Swiper from"../Swiper";/**
+import Swiper from "../Swiper";
+
+/**
  * The basic slider component.
  * @param {Object} props The component properties.
  * @deprecated
- */var Slider=Swiper;export default Slider;
+ */
+const Slider = Swiper;
+export default Slider;

package/components/SurroundPortals/index.js

@@ -1,4 +1,9 @@
-import React,{Fragment}from'react';import PropTypes from'prop-types';import Portal from"../Portal";import{AFTER,BEFORE}from"../../constants/Portals";/**
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Portal from "../Portal";
+import { AFTER, BEFORE } from "../../constants/Portals";
+
+/**
  * The SurroundPortals component renders three Portal component. The main portal is wrapped around
  * its children, the two additional portals are rendered before and after the main portal.
  * The names of the additional portals are automatically created from the name of the main portal
@@ -9,4 +14,23 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import Port
  * @param {Object} props.portalProps Props that are assigned to the portals
  * @param {React.ReactNode} props.children Component children
  * @returns {JSX.Element}
- */var SurroundPortals=function SurroundPortals(_ref){var portalName=_ref.portalName,portalProps=_ref.portalProps,children=_ref.children;return React.createElement(Fragment,null,React.createElement(Portal,{name:"".concat(portalName,".").concat(BEFORE),props:portalProps}),React.createElement(Portal,{name:portalName,props:portalProps},children),React.createElement(Portal,{name:"".concat(portalName,".").concat(AFTER),props:portalProps}));};SurroundPortals.defaultProps={children:null,portalProps:null};export default SurroundPortals;
+ */
+const SurroundPortals = ({
+  portalName,
+  portalProps,
+  children
+}) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Portal, {
+  name: `${portalName}.${BEFORE}`,
+  props: portalProps
+}), /*#__PURE__*/React.createElement(Portal, {
+  name: portalName,
+  props: portalProps
+}, children), /*#__PURE__*/React.createElement(Portal, {
+  name: `${portalName}.${AFTER}`,
+  props: portalProps
+}));
+SurroundPortals.defaultProps = {
+  children: null,
+  portalProps: null
+};
+export default SurroundPortals;

package/components/Swiper/components/SwiperItem/index.js

@@ -1,8 +1,32 @@
-var _excluded=["children","className"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React from'react';import PropTypes from'prop-types';import classNames from'classnames';// eslint-disable-next-line import/no-unresolved
-import{SwiperSlide}from'swiper/react';import{item}from"./styles";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+// eslint-disable-next-line import/no-unresolved
+import { SwiperSlide } from 'swiper/react';
+import { item } from "./styles";
+
+/**
  * @typedef {import('swiper/react').SwiperSlideProps} SwiperSlideProps
- */ /**
+ */
+
+/**
  * The basic swiper item component.
  * @param {SwiperSlideProps} props The component props.
  * @returns {React.Node}
- */function SwiperItem(_ref){var children=_ref.children,className=_ref.className,slideProps=_objectWithoutProperties(_ref,_excluded);return React.createElement(SwiperSlide,_extends({},slideProps,{className:classNames(item,className),"data-test-id":"Slider"}),children);}SwiperItem.displayName='SwiperSlide';SwiperItem.defaultProps={className:null};export default SwiperItem;
+ */
+function SwiperItem({
+  children,
+  className,
+  ...slideProps
+}) {
+  return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, slideProps, {
+    className: classNames(item, className),
+    "data-test-id": "Slider"
+  }), children);
+}
+SwiperItem.displayName = 'SwiperSlide';
+SwiperItem.defaultProps = {
+  className: null
+};
+export default SwiperItem;

package/components/Swiper/components/SwiperItem/spec.js

@@ -1 +1,21 @@
-import React from'react';import{shallow}from'enzyme';import SwiperItem from'.';describe('<SwiperItem />',function(){it('should not render without children',function(){var wrapper=shallow(React.createElement(SwiperItem,null,React.createElement("div",null)));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv" data-test-id="Slider"><div></div></div>');});it('should add custom className',function(){var wrapper=shallow(React.createElement(SwiperItem,{className:"test"},React.createElement("div",null)));expect(wrapper).toMatchSnapshot();expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv test" data-test-id="Slider"><div></div></div>');});});
+import React from 'react';
+import { shallow } from 'enzyme';
+import SwiperItem from '.';
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useLayoutEffect: jest.requireActual('react').useEffect
+}));
+describe('<SwiperItem />', () => {
+  it('should not render without children', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(SwiperItem, null, /*#__PURE__*/React.createElement("div", null)));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv" data-test-id="Slider"><div></div></div>');
+  });
+  it('should add custom className', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(SwiperItem, {
+      className: "test"
+    }, /*#__PURE__*/React.createElement("div", null)));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.html()).toEqual('<div class="swiper-slide css-10a4qrv test" data-test-id="Slider"><div></div></div>');
+  });
+});

package/components/Swiper/components/SwiperItem/styles.js

@@ -1 +1,5 @@
-import{css}from'glamor';export var item=css({position:'relative',height:'100%'}).toString();
+import { css } from 'glamor';
+export const item = css({
+  position: 'relative',
+  height: '100%'
+}).toString();