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

package/components/Link/spec.js

@@ -1 +1,56 @@
-import React from'react';import{shallow,mount}from'enzyme';import{Disconnected as Link}from"./index";describe('<Link />',function(){var historyPush=jest.fn();var historyReplace=jest.fn();var pathname='/';var state={x:5};beforeEach(function(){jest.useFakeTimers();jest.clearAllMocks();});afterEach(function(){jest.useRealTimers();});it('renders with children',function(){var wrapper=shallow(React.createElement(Link,{href:pathname,historyPush:historyPush,historyReplace:historyReplace},React.createElement("span",null)));expect(wrapper).toMatchSnapshot();expect(wrapper.find('span').length).toBe(1);});it('handles a push',function(){var wrapper=mount(React.createElement(Link,{href:pathname,state:state,historyPush:historyPush,historyReplace:historyReplace},React.createElement("span",null)));wrapper.find('div').simulate('click');jest.runAllTimers();expect(historyPush).toHaveBeenLastCalledWith({pathname:pathname,state:state});});it('handles a replace',function(){var wrapper=mount(React.createElement(Link,{href:pathname,historyPush:historyPush,historyReplace:historyReplace,state:state,replace:true},React.createElement("span",null)));wrapper.find('div').simulate('click');jest.runAllTimers();expect(historyReplace).toHaveBeenLastCalledWith({pathname:pathname,state:state});});});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Disconnected as Link } from "./index";
+describe('<Link />', () => {
+  const historyPush = jest.fn();
+  const historyReplace = jest.fn();
+  const pathname = '/';
+  const state = {
+    x: 5
+  };
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('renders with children', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(Link, {
+      href: pathname,
+      historyPush: historyPush,
+      historyReplace: historyReplace
+    }, /*#__PURE__*/React.createElement("span", null)));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('span').length).toBe(1);
+  });
+  it('handles a push', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Link, {
+      href: pathname,
+      state: state,
+      historyPush: historyPush,
+      historyReplace: historyReplace
+    }, /*#__PURE__*/React.createElement("span", null)));
+    wrapper.find('div').simulate('click');
+    jest.runAllTimers();
+    expect(historyPush).toHaveBeenLastCalledWith({
+      pathname,
+      state
+    });
+  });
+  it('handles a replace', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(Link, {
+      href: pathname,
+      historyPush: historyPush,
+      historyReplace: historyReplace,
+      state: state,
+      replace: true
+    }, /*#__PURE__*/React.createElement("span", null)));
+    wrapper.find('div').simulate('click');
+    jest.runAllTimers();
+    expect(historyReplace).toHaveBeenLastCalledWith({
+      pathname,
+      state
+    });
+  });
+});

package/components/Link/style.js

@@ -1 +1,10 @@
-import{css}from'glamor';export default css({padding:0,margin:0,border:'none',textAlign:'left',alignItems:'stretch',width:'100%',cursor:'pointer'}).toString();
+import { css } from 'glamor';
+export default css({
+  padding: 0,
+  margin: 0,
+  border: 'none',
+  textAlign: 'left',
+  alignItems: 'stretch',
+  width: '100%',
+  cursor: 'pointer'
+}).toString();

package/components/List/components/Item/index.js

@@ -1,5 +1,37 @@
-import React from'react';import PropTypes from'prop-types';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from "./style";
+
+/**
  * The ListItem component.
  * @returns {JSX}
- */var ListItem=function ListItem(_ref){var children=_ref.children,className=_ref.className,isSelected=_ref.isSelected,role=_ref.role;if(!React.Children.count(children)){return null;}var classes=styles.item;if(className){classes+=" ".concat(className);}// Add selected or unselected styling.
-classes+=" common__list__list-item ".concat(isSelected?styles.selected:styles.unselected);return React.createElement("li",{className:classes,"data-test-id":"listItem",role:role},children);};ListItem.defaultProps={className:null,children:null,isSelected:false,role:null};export default ListItem;
+ */
+const ListItem = ({
+  children,
+  className,
+  isSelected,
+  role
+}) => {
+  if (!React.Children.count(children)) {
+    return null;
+  }
+  let classes = styles.item;
+  if (className) {
+    classes += ` ${className}`;
+  }
+
+  // Add selected or unselected styling.
+  classes += ` common__list__list-item ${isSelected ? styles.selected : styles.unselected}`;
+  return /*#__PURE__*/React.createElement("li", {
+    className: classes,
+    "data-test-id": "listItem",
+    role: role
+  }, children);
+};
+ListItem.defaultProps = {
+  className: null,
+  children: null,
+  isSelected: false,
+  role: null
+};
+export default ListItem;

package/components/List/components/Item/style.js

@@ -1 +1,16 @@
-import{css}from'glamor';var item=css({display:'block',position:'relative'}).toString();var unselected=css({zIndex:1}).toString();var selected=css({zIndex:2}).toString();export default{item:item,selected:selected,unselected:unselected};
+import { css } from 'glamor';
+const item = css({
+  display: 'block',
+  position: 'relative'
+}).toString();
+const unselected = css({
+  zIndex: 1
+}).toString();
+const selected = css({
+  zIndex: 2
+}).toString();
+export default {
+  item,
+  selected,
+  unselected
+};

package/components/List/index.js

@@ -1,5 +1,23 @@
-import React from'react';import PropTypes from'prop-types';import ListItem from"./components/Item";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListItem from "./components/Item";
+
+/**
  * The List component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var List=function List(_ref){var children=_ref.children,className=_ref.className,role=_ref.role;return React.createElement("ul",{className:"".concat(className," common_list"),role:role},children);};List.Item=ListItem;List.defaultProps={className:'',role:null};export default List;
+ */
+const List = ({
+  children,
+  className,
+  role
+}) => /*#__PURE__*/React.createElement("ul", {
+  className: `${className} common_list`,
+  role: role
+}, children);
+List.Item = ListItem;
+List.defaultProps = {
+  className: '',
+  role: null
+};
+export default List;

package/components/List/spec.js

@@ -1 +1,31 @@
-/* eslint-disable no-console */import React from'react';import{shallow}from'enzyme';import List from"./index";console.error=jest.fn();describe('<List />',function(){var children=[React.createElement(List.Item,{key:"0"}),React.createElement(List.Item,{key:"1"}),React.createElement(List.Item,{key:"2"})];beforeEach(function(){jest.clearAllMocks();});it('renders with children',function(){var numChildren=children.length;var wrapper=shallow(React.createElement(List,null,children));expect(wrapper).toMatchSnapshot();expect(wrapper.find(List.Item).length).toBe(numChildren);expect(console.error).not.toHaveBeenCalled();});it('renders without children',function(){var wrapper=shallow(React.createElement(List,null));expect(wrapper).toMatchSnapshot();expect(wrapper.find(List.Item).length).toBe(0);expect(console.error).toHaveBeenCalledTimes(1);});});/* eslint-enable no-console */
+/* eslint-disable no-console */
+import React from 'react';
+import { shallow } from 'enzyme';
+import List from "./index";
+console.error = jest.fn();
+describe('<List />', () => {
+  const children = [/*#__PURE__*/React.createElement(List.Item, {
+    key: "0"
+  }), /*#__PURE__*/React.createElement(List.Item, {
+    key: "1"
+  }), /*#__PURE__*/React.createElement(List.Item, {
+    key: "2"
+  })];
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('renders with children', () => {
+    const numChildren = children.length;
+    const wrapper = shallow(/*#__PURE__*/React.createElement(List, null, children));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(List.Item).length).toBe(numChildren);
+    expect(console.error).not.toHaveBeenCalled();
+  });
+  it('renders without children', () => {
+    const wrapper = shallow(/*#__PURE__*/React.createElement(List, null));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(List.Item).length).toBe(0);
+    expect(console.error).toHaveBeenCalledTimes(1);
+  });
+});
+/* eslint-enable no-console */

package/components/Loading/index.js

@@ -1,3 +1,7 @@
-import React,{Fragment}from'react';/**
+import React, { Fragment } from 'react';
+
+/**
  * @return {null}
- */var Loading=function Loading(){return React.createElement(Fragment,null,null);};export default Loading;
+ */
+const Loading = () => /*#__PURE__*/React.createElement(Fragment, null, null);
+export default Loading;

package/components/Modal/index.js

@@ -1,7 +1,42 @@
-var _excluded=["children","classes"];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,{forwardRef}from'react';import PropTypes from'prop-types';import{createPortal}from'react-dom';import{useTrackModalState}from'@shopgate/engage/a11y/hooks';import classNames from'classnames';import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import { useTrackModalState } from '@shopgate/engage/a11y/hooks';
+import classNames from 'classnames';
+import styles from "./style";
+
+/**
  * The Modal component.
  * @param {Object} props The component props.
  * @param {Object} props.classes The component classes.
  * @returns {JSX.Element}
- */var Modal=forwardRef(function(_ref,ref){var children=_ref.children,classes=_ref.classes,props=_objectWithoutProperties(_ref,_excluded);// Track modal visibility for accessibility purposes.
-useTrackModalState();return createPortal(React.createElement("div",_extends({className:classNames(styles.container,classes===null||classes===void 0?void 0:classes.container,'common__modal'),role:"alertdialog","aria-modal":true},props,{ref:ref}),React.createElement("div",{className:classNames(styles.layout,classes===null||classes===void 0?void 0:classes.layout)},React.createElement("div",{className:classNames(styles.content,classes===null||classes===void 0?void 0:classes.content)},children))),document.getElementById('portals'));});Modal.defaultProps={children:null,classes:{container:'',layout:'',content:''}};export default Modal;
+ */
+const Modal = /*#__PURE__*/forwardRef(({
+  children,
+  classes,
+  ...props
+}, ref) => {
+  // Track modal visibility for accessibility purposes.
+  useTrackModalState();
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(styles.container, classes?.container, 'common__modal'),
+    role: "alertdialog",
+    "aria-modal": true
+  }, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.layout, classes?.layout)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.content, classes?.content)
+  }, children))), document.getElementById('portals'));
+});
+Modal.defaultProps = {
+  children: null,
+  classes: {
+    container: '',
+    layout: '',
+    content: ''
+  }
+};
+export default Modal;

package/components/Modal/style.js

@@ -1 +1,36 @@
-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';var container=css({position:'fixed',top:0,bottom:0,left:0,right:0,overflow:'hidden',zIndex:2000}).toString();var layout=css({display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'100%'}).toString();var content=css(_defineProperty({position:'relative',maxWidth:'100vw',maxHeight:'100vh',paddingTop:'var(--safe-area-inset-top)',paddingBottom:'var(--safe-area-inset-bottom)',overflowY:'scroll'},responsiveMediaQuery('>xs',{webOnly:true}),{overflowY:'initial'})).toString();export default{container:container,layout:layout,content:content};
+import { css } from 'glamor';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+const container = css({
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  overflow: 'hidden',
+  zIndex: 2000
+}).toString();
+const layout = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%'
+}).toString();
+const content = css({
+  position: 'relative',
+  maxWidth: '100vw',
+  maxHeight: '100vh',
+  paddingTop: 'var(--safe-area-inset-top)',
+  paddingBottom: 'var(--safe-area-inset-bottom)',
+  overflowY: 'scroll',
+  [responsiveMediaQuery('>xs', {
+    webOnly: true
+  })]: {
+    overflowY: 'initial'
+  }
+}).toString();
+export default {
+  container,
+  layout,
+  content
+};

package/components/ModalContainer/connector.js

@@ -1,9 +1,23 @@
-import{connect}from'react-redux';import closeModal from"../../actions/modal/closeModal";import{getFirstModal}from"../../selectors/modal";/**
+import { connect } from 'react-redux';
+import closeModal from "../../actions/modal/closeModal";
+import { getFirstModal } from "../../selectors/modal";
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{modal:getFirstModal(state)};};/**
+ */
+const mapStateToProps = state => ({
+  modal: getFirstModal(state)
+});
+
+/**
  * Connects the dispatch function to a callable function in the props.
  * @param {Function} dispatch The redux dispatch function.
  * @return {Object} The extended component props.
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{confirm:function confirm(id){return dispatch(closeModal(id,true));},dismiss:function dismiss(id){return dispatch(closeModal(id,false));}};};export default connect(mapStateToProps,mapDispatchToProps);
+ */
+const mapDispatchToProps = dispatch => ({
+  confirm: id => dispatch(closeModal(id, true)),
+  dismiss: id => dispatch(closeModal(id, false))
+});
+export default connect(mapStateToProps, mapDispatchToProps);

package/components/ModalContainer/index.js

@@ -1,7 +1,40 @@
-import React from'react';import PropTypes from'prop-types';import connect from"./connector";export var MODAL_EVENTS={SHOW:'Modal.show',HIDE:'Modal.hide'};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import connect from "./connector";
+export const MODAL_EVENTS = {
+  SHOW: 'Modal.show',
+  HIDE: 'Modal.hide'
+};
+
+/**
  * The ModalContainer is connected to the modal state
  * and renders the currently active modal.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var ModalContainer=function ModalContainer(_ref){var component=_ref.component,confirm=_ref.confirm,dismiss=_ref.dismiss,modal=_ref.modal;if(!modal){return null;}var componentProps={modal:modal,// A11Y focus is handled by the modal container itself.
-onConfirm:function onConfirm(){return confirm(modal.id);},onDismiss:function onDismiss(){return dismiss(modal.id);}};if(React.isValidElement(component)){return React.cloneElement(component,componentProps);}return React.createElement(component,componentProps);};ModalContainer.defaultProps={confirm:function confirm(){},dismiss:function dismiss(){},modal:null};export default connect(ModalContainer);
+ */
+const ModalContainer = ({
+  component,
+  confirm,
+  dismiss,
+  modal
+}) => {
+  if (!modal) {
+    return null;
+  }
+  const componentProps = {
+    modal,
+    // A11Y focus is handled by the modal container itself.
+    onConfirm: () => confirm(modal.id),
+    onDismiss: () => dismiss(modal.id)
+  };
+  if (/*#__PURE__*/React.isValidElement(component)) {
+    return /*#__PURE__*/React.cloneElement(component, componentProps);
+  }
+  return /*#__PURE__*/React.createElement(component, componentProps);
+};
+ModalContainer.defaultProps = {
+  confirm: () => {},
+  dismiss: () => {},
+  modal: null
+};
+export default connect(ModalContainer);

package/components/ModalContainer/spec.js

@@ -1,11 +1,111 @@
-/* eslint-disable no-unused-vars */import React from'react';import{mount}from'enzyme';import{Provider}from'react-redux';import{configureStore}from"../../store";import modalReducer from"../../reducers/modal";import showModal from"../../actions/modal/showModal";import ModalContainer from"./index";// const store = configureStore({ modal: modalReducer });
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { configureStore } from "../../store";
+import modalReducer from "../../reducers/modal";
+import showModal from "../../actions/modal/showModal";
+import ModalContainer from "./index";
+
+// const store = configureStore({ modal: modalReducer });
 // Replacement for commented out configureStore()
-var store={};jest.mock('redux-logger',function(){return{createLogger:function createLogger(){return function(){return function(next){return function(action){return next(action);};};};}};});global.requestAnimationFrame=function(fn){return fn();};/**
+const store = {};
+jest.mock('redux-logger', () => ({
+  createLogger: () => () => next => action => next(action)
+}));
+global.requestAnimationFrame = fn => fn();
+
+/**
  * Some mock modal component.
  * @param {func} onConfirm Confirm callback
  * @param {func} onDismiss Dismiss callback
  * @constructor
- */var MockModal=function MockModal(_ref){var onConfirm=_ref.onConfirm,onDismiss=_ref.onDismiss;return React.createElement("div",{className:"modal"},React.createElement("button",{className:"confirmBtn",onClick:onConfirm,type:"button"}),React.createElement("button",{className:"dismissBtn",onClick:onDismiss,type:"button"}));};describe.skip('<ModalContainer />',function(){var renderedElement;var dispatch=store.dispatch,getState=store.getState;/**
+ */
+const MockModal = ({
+  onConfirm,
+  // eslint-disable-line react/prop-types
+  onDismiss // eslint-disable-line react/prop-types
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "modal"
+}, /*#__PURE__*/React.createElement("button", {
+  className: "confirmBtn",
+  onClick: onConfirm,
+  type: "button"
+}), /*#__PURE__*/React.createElement("button", {
+  className: "dismissBtn",
+  onClick: onDismiss,
+  type: "button"
+}));
+describe.skip('<ModalContainer />', () => {
+  let renderedElement;
+  const {
+    dispatch,
+    getState
+  } = store;
+
+  /**
    * The rendered component.
-   */var renderComponent=function renderComponent(){renderedElement=mount(React.createElement(Provider,{store:store},React.createElement("div",{id:"container"},React.createElement(ModalContainer,{component:MockModal}))));};beforeEach(function(){// Reset the modals state before each test.
-getState().modal=[];renderComponent();});describe('Given the component was mounted to the DOM',function(){it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should show no modal',function(){expect(renderedElement.find('.modal').length).toBe(0);});describe('Given a modal gets dispatched',function(){var modalPromise;beforeEach(function(){modalPromise=dispatch(showModal({title:'Title',message:'Message'}));renderedElement.update();});it('should contain a modal item in the state',function(){expect(getState().modal.length).toBe(1);});it('should show the modal',function(){expect(renderedElement.find('.modal').length).toBe(1);});describe('Given the modal gets confirmed',function(){beforeEach(function(){renderedElement.find('.confirmBtn').simulate('click');});it('should resolve the promise as confirmed',function(){modalPromise.then(function(confirmed){return expect(confirmed).toBe(true);});});it('should contain no modal item in the state',function(){expect(getState().modal.length).toBe(0);});it('should not show the modal anymore',function(){expect(renderedElement.find('.modal').length).toBe(0);});});describe('Given the modal gets dismissed',function(){beforeEach(function(){renderedElement.find('.dismissBtn').simulate('click');});it('should resolve the promise as dismissed',function(){modalPromise.then(function(confirmed){return expect(confirmed).toBe(false);});});});});});});/* eslint-enable no-unused-vars */
+   */
+  const renderComponent = () => {
+    renderedElement = mount(/*#__PURE__*/React.createElement(Provider, {
+      store: store
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "container"
+    }, /*#__PURE__*/React.createElement(ModalContainer, {
+      component: MockModal
+    }))));
+  };
+  beforeEach(() => {
+    // Reset the modals state before each test.
+    getState().modal = [];
+    renderComponent();
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    it('should match snapshot', () => {
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should show no modal', () => {
+      expect(renderedElement.find('.modal').length).toBe(0);
+    });
+    describe('Given a modal gets dispatched', () => {
+      let modalPromise;
+      beforeEach(() => {
+        modalPromise = dispatch(showModal({
+          title: 'Title',
+          message: 'Message'
+        }));
+        renderedElement.update();
+      });
+      it('should contain a modal item in the state', () => {
+        expect(getState().modal.length).toBe(1);
+      });
+      it('should show the modal', () => {
+        expect(renderedElement.find('.modal').length).toBe(1);
+      });
+      describe('Given the modal gets confirmed', () => {
+        beforeEach(() => {
+          renderedElement.find('.confirmBtn').simulate('click');
+        });
+        it('should resolve the promise as confirmed', () => {
+          modalPromise.then(confirmed => expect(confirmed).toBe(true));
+        });
+        it('should contain no modal item in the state', () => {
+          expect(getState().modal.length).toBe(0);
+        });
+        it('should not show the modal anymore', () => {
+          expect(renderedElement.find('.modal').length).toBe(0);
+        });
+      });
+      describe('Given the modal gets dismissed', () => {
+        beforeEach(() => {
+          renderedElement.find('.dismissBtn').simulate('click');
+        });
+        it('should resolve the promise as dismissed', () => {
+          modalPromise.then(confirmed => expect(confirmed).toBe(false));
+        });
+      });
+    });
+  });
+});
+
+/* eslint-enable no-unused-vars */

package/components/Picker/components/Button/index.js

@@ -1,4 +1,36 @@
-import React from'react';import PropTypes from'prop-types';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from "./style";
+
+/**
  * The default button for the Picker component.
  * @returns {JSX} The button component.
- */var PickerButton=function PickerButton(_ref){var value=_ref.value,label=_ref.label,openList=_ref.openList;if(value!==null){return React.createElement("button",{className:styles.button,onClick:openList,type:"button"},React.createElement("span",{className:styles.label},label),React.createElement("span",{className:styles.value},value));}return React.createElement("button",{className:styles.button,onClick:openList,type:"button"},React.createElement("span",{className:styles.label},label));};PickerButton.defaultProps={value:null};export default PickerButton;
+ */
+const PickerButton = ({
+  value,
+  label,
+  openList
+}) => {
+  if (value !== null) {
+    return /*#__PURE__*/React.createElement("button", {
+      className: styles.button,
+      onClick: openList,
+      type: "button"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.label
+    }, label), /*#__PURE__*/React.createElement("span", {
+      className: styles.value
+    }, value));
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    className: styles.button,
+    onClick: openList,
+    type: "button"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.label
+  }, label));
+};
+PickerButton.defaultProps = {
+  value: null
+};
+export default PickerButton;

package/components/Picker/components/Button/style.js

@@ -1 +1,19 @@
-import{css}from'glamor';var button=css({display:'block',width:'100%',textAlign:'left',padding:'10px 20px'}).toString();var label=css({display:'block'}).toString();var value=css({display:'block',fontWeight:'bold'}).toString();export default{button:button,label:label,value:value};
+import { css } from 'glamor';
+const button = css({
+  display: 'block',
+  width: '100%',
+  textAlign: 'left',
+  padding: '10px 20px'
+}).toString();
+const label = css({
+  display: 'block'
+}).toString();
+const value = css({
+  display: 'block',
+  fontWeight: 'bold'
+}).toString();
+export default {
+  button,
+  label,
+  value
+};

package/components/Picker/components/List/index.js

@@ -1,4 +1,35 @@
-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 from'react';import PropTypes from'prop-types';import classNames from'classnames';import styles from"./style";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from "./style";
+
+/**
  * The default button for the Picker component.
  * @returns {JSX} The button component.
- */var PickerList=function PickerList(_ref){var items=_ref.items,onClose=_ref.onClose,onSelect=_ref.onSelect,selectedIndex=_ref.selectedIndex;return React.createElement("ul",{className:"common__picker__list"},items.map(function(item,currentIndex){return React.createElement("li",{key:item.value,className:classNames(_defineProperty({},styles.active,currentIndex===selectedIndex))},React.createElement("button",{className:styles.button,disabled:item.disabled,onClick:function onClick(){onSelect(item.value);onClose();},type:"button"},item.label));}));};PickerList.defaultProps={onClose:function onClose(){},selectedIndex:null};export default PickerList;
+ */
+const PickerList = ({
+  items,
+  onClose,
+  onSelect,
+  selectedIndex
+}) => /*#__PURE__*/React.createElement("ul", {
+  className: "common__picker__list"
+}, items.map((item, currentIndex) => /*#__PURE__*/React.createElement("li", {
+  key: item.value,
+  className: classNames({
+    [styles.active]: currentIndex === selectedIndex
+  })
+}, /*#__PURE__*/React.createElement("button", {
+  className: styles.button,
+  disabled: item.disabled,
+  onClick: () => {
+    onSelect(item.value);
+    onClose();
+  },
+  type: "button"
+}, item.label))));
+PickerList.defaultProps = {
+  onClose: () => {},
+  selectedIndex: null
+};
+export default PickerList;

package/components/Picker/components/List/style.js

@@ -1 +1,17 @@
-import{css}from'glamor';var button=css({display:'block',width:'100%',padding:'10px 20px',outline:'none',textAlign:'left'}).toString();var active=css({button:{fontWeight:'bold'}}).toString();export default{button:button,active:active};
+import { css } from 'glamor';
+const button = css({
+  display: 'block',
+  width: '100%',
+  padding: '10px 20px',
+  outline: 'none',
+  textAlign: 'left'
+}).toString();
+const active = css({
+  button: {
+    fontWeight: 'bold'
+  }
+}).toString();
+export default {
+  button,
+  active
+};