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

package/components/InfiniteContainer/spec.js

@@ -1,14 +1,203 @@
-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;}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);}import range from'lodash/range';import React from'react';import{shallow,mount}from'enzyme';import{ITEMS_PER_LOAD}from"../../constants/DisplayOptions";import InfiniteContainer from"./index";global.console.error=jest.fn();var context={state:{}};describe('<InfiniteContainer />',function(){var renderedElement;var renderedInstance;var mockLoader;var mockIterator;var mockItems;var mockData=range(100).map(function(id){return{id:id,title:"Item ".concat(id)};});/**
+import range from 'lodash/range';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { ITEMS_PER_LOAD } from "../../constants/DisplayOptions";
+import InfiniteContainer from "./index";
+global.console.error = jest.fn();
+const context = {
+  state: {}
+};
+describe('<InfiniteContainer />', () => {
+  let renderedElement;
+  let renderedInstance;
+  let mockLoader;
+  let mockIterator;
+  let mockItems;
+  const mockData = range(100).map(id => ({
+    id,
+    title: `Item ${id}`
+  }));
+
+  /**
    * The view component
    * @param {Object} props The component props.
-   */var renderComponent=function renderComponent(props){renderedElement=shallow(React.createElement(InfiniteContainer,props),{context:context});renderedInstance=renderedElement.instance();};/**
+   */
+  const renderComponent = props => {
+    renderedElement = shallow(/*#__PURE__*/React.createElement(InfiniteContainer, props), {
+      context
+    });
+    renderedInstance = renderedElement.instance();
+  };
+
+  /**
    * Mocks the mapStateToProps connector.
    * @param {number} amount The new product amount.
-   */var receiveItemsByProp=function receiveItemsByProp(amount){mockItems=mockData.slice(0,amount);var nextProps=_extends({},renderedInstance.props,{items:mockItems,totalItems:mockData.length});renderedElement.setProps(nextProps);};beforeEach(function(){mockLoader=jest.fn();mockIterator=jest.fn(function(data){return React.createElement("li",{key:data.id},data.title);});});describe('Given the component was mounted to the DOM',function(){beforeEach(function(){renderComponent({items:[],loader:mockLoader,iterator:mockIterator,totalItems:null});renderedInstance.componentDidMount();});it('should match snapshot',function(){expect(renderedElement).toMatchSnapshot();});it('should call the loader function',function(){var _renderedInstance$sta=_slicedToArray(renderedInstance.state.offset,1),offset=_renderedInstance$sta[0];expect(mockLoader).toBeCalledWith(offset);});describe('Given the loader requested new items',function(){var mockItemsLength=10;beforeEach(function(){receiveItemsByProp(mockItemsLength);});it('should call the iterator function according to the number of loaded items',function(){expect(mockIterator).toBeCalled();expect(mockIterator.mock.calls.length).toBe(mockItemsLength);});it('should render the loaded items',function(){expect(renderedElement.find('li').length).toBe(mockItemsLength);});});describe('Given the component was mounted within a scroll container',function(){var mockItemsLength=11;beforeEach(function(){// Receive items from initial mounting before proceeding...
-receiveItemsByProp(mockItemsLength);// Reset any previous calls (e.g. from componentDidMount())
-mockLoader.mock.calls=[];renderedInstance.componentDidUpdate();});it('should call the loader function if scrolled to the bottom',function(){renderedInstance.domScrollContainer={scrollTop:900,scrollHeight:1000,clientHeight:100};renderedInstance.handleLoading();expect(mockLoader).toBeCalled();});it('should not call the loader function if the scroll position did not change',function(){renderedInstance.domScrollContainer={scrollTop:0,scrollHeight:1000,clientHeight:100};renderedInstance.handleLoading();expect(mockLoader.mock.calls.length).toBe(0);});});describe('Given all items have been received',function(){var mockItemsLength=mockData.length;beforeEach(function(){receiveItemsByProp(mockItemsLength);});it('should expect no more items to be received',function(){expect(renderedInstance.needsToReceiveItems()).toBe(false);});it('should keep state.awaitingItems as true if not all items are rendered',function(){expect(renderedInstance.allItemsAreRendered()).toBe(false);expect(renderedInstance.state.awaitingItems).toBe(true);expect(renderedElement.find('li').length).toBeLessThan(mockItemsLength);});it('should set state.awaitingItems to false if all items are rendered',function(){renderedElement.setState({offset:[0,mockItemsLength]});renderedInstance.handleLoading();expect(renderedInstance.allItemsAreRendered()).toBe(true);expect(renderedInstance.state.awaitingItems).toBe(false);expect(renderedElement.find('li').length).toBe(mockItemsLength);});});});describe('Given that the initialLimit is used in the correct ways',function(){describe('Given that the initialLimit is used',function(){it('should render with the initialLimit',function(){renderComponent({items:mockData,loader:mockLoader,iterator:mockIterator,totalItems:mockData.length});// Check if the iniLimit was used
-expect(renderedElement.find('li').length).toBe(renderedInstance.props.initialLimit);// Reset the limit from props.initialLimit back to props.limit
-renderedInstance.componentDidMount();renderedInstance.handleLoading();// Re-render with the new limit
-renderedElement.update();// Check if the correct limit was used for the second render
-var newLimit=renderedInstance.props.initialLimit+renderedInstance.props.limit;expect(renderedElement.find('li').length).toBe(newLimit);});});describe('Given that the initialLimit is NOT used',function(){it('should render without the initialLimit',function(){renderComponent({items:[],loader:mockLoader,iterator:mockIterator,totalItems:null});renderedInstance.componentDidMount();receiveItemsByProp(ITEMS_PER_LOAD);// Check if the iniLimit wasn't used
-expect(renderedElement).toMatchSnapshot();expect(renderedElement.find('li').length).toBe(renderedInstance.props.limit);});});});describe('Given that the requestHash changes',function(){it('should reset the component',function(){var props={items:mockData,loader:mockLoader,iterator:mockIterator,totalItems:mockData.length,requestHash:'default'};var wrapper=mount(React.createElement(InfiniteContainer,props));var instance=wrapper.instance();instance.componentDidMount();instance.domScrollContainer=document.createElement('div');wrapper.setState({awaitingItems:false,offset:[10,10]});wrapper.setProps({requestHash:'price_desc'});expect(wrapper.state()).toEqual({offset:[0,32],awaitingItems:true,itemCount:0});});});});
+   */
+  const receiveItemsByProp = amount => {
+    mockItems = mockData.slice(0, amount);
+    const nextProps = {
+      ...renderedInstance.props,
+      items: mockItems,
+      totalItems: mockData.length
+    };
+    renderedElement.setProps(nextProps);
+  };
+  beforeEach(() => {
+    mockLoader = jest.fn();
+    mockIterator = jest.fn(data => /*#__PURE__*/React.createElement("li", {
+      key: data.id
+    }, data.title));
+  });
+  describe('Given the component was mounted to the DOM', () => {
+    beforeEach(() => {
+      renderComponent({
+        items: [],
+        loader: mockLoader,
+        iterator: mockIterator,
+        totalItems: null
+      });
+      renderedInstance.componentDidMount();
+    });
+    it('should match snapshot', () => {
+      expect(renderedElement).toMatchSnapshot();
+    });
+    it('should call the loader function', () => {
+      const [offset] = renderedInstance.state.offset;
+      expect(mockLoader).toBeCalledWith(offset);
+    });
+    describe('Given the loader requested new items', () => {
+      const mockItemsLength = 10;
+      beforeEach(() => {
+        receiveItemsByProp(mockItemsLength);
+      });
+      it('should call the iterator function according to the number of loaded items', () => {
+        expect(mockIterator).toBeCalled();
+        expect(mockIterator.mock.calls.length).toBe(mockItemsLength);
+      });
+      it('should render the loaded items', () => {
+        expect(renderedElement.find('li').length).toBe(mockItemsLength);
+      });
+    });
+    describe('Given the component was mounted within a scroll container', () => {
+      const mockItemsLength = 11;
+      beforeEach(() => {
+        // Receive items from initial mounting before proceeding...
+        receiveItemsByProp(mockItemsLength);
+
+        // Reset any previous calls (e.g. from componentDidMount())
+        mockLoader.mock.calls = [];
+        renderedInstance.componentDidUpdate();
+      });
+      it('should call the loader function if scrolled to the bottom', () => {
+        renderedInstance.domScrollContainer = {
+          scrollTop: 900,
+          scrollHeight: 1000,
+          clientHeight: 100
+        };
+        renderedInstance.handleLoading();
+        expect(mockLoader).toBeCalled();
+      });
+      it('should not call the loader function if the scroll position did not change', () => {
+        renderedInstance.domScrollContainer = {
+          scrollTop: 0,
+          scrollHeight: 1000,
+          clientHeight: 100
+        };
+        renderedInstance.handleLoading();
+        expect(mockLoader.mock.calls.length).toBe(0);
+      });
+    });
+    describe('Given all items have been received', () => {
+      const mockItemsLength = mockData.length;
+      beforeEach(() => {
+        receiveItemsByProp(mockItemsLength);
+      });
+      it('should expect no more items to be received', () => {
+        expect(renderedInstance.needsToReceiveItems()).toBe(false);
+      });
+      it('should keep state.awaitingItems as true if not all items are rendered', () => {
+        expect(renderedInstance.allItemsAreRendered()).toBe(false);
+        expect(renderedInstance.state.awaitingItems).toBe(true);
+        expect(renderedElement.find('li').length).toBeLessThan(mockItemsLength);
+      });
+      it('should set state.awaitingItems to false if all items are rendered', () => {
+        renderedElement.setState({
+          offset: [0, mockItemsLength]
+        });
+        renderedInstance.handleLoading();
+        expect(renderedInstance.allItemsAreRendered()).toBe(true);
+        expect(renderedInstance.state.awaitingItems).toBe(false);
+        expect(renderedElement.find('li').length).toBe(mockItemsLength);
+      });
+    });
+  });
+  describe('Given that the initialLimit is used in the correct ways', () => {
+    describe('Given that the initialLimit is used', () => {
+      it('should render with the initialLimit', () => {
+        renderComponent({
+          items: mockData,
+          loader: mockLoader,
+          iterator: mockIterator,
+          totalItems: mockData.length
+        });
+
+        // Check if the iniLimit was used
+        expect(renderedElement.find('li').length).toBe(renderedInstance.props.initialLimit);
+
+        // Reset the limit from props.initialLimit back to props.limit
+        renderedInstance.componentDidMount();
+        renderedInstance.handleLoading();
+
+        // Re-render with the new limit
+        renderedElement.update();
+
+        // Check if the correct limit was used for the second render
+        const newLimit = renderedInstance.props.initialLimit + renderedInstance.props.limit;
+        expect(renderedElement.find('li').length).toBe(newLimit);
+      });
+    });
+    describe('Given that the initialLimit is NOT used', () => {
+      it('should render without the initialLimit', () => {
+        renderComponent({
+          items: [],
+          loader: mockLoader,
+          iterator: mockIterator,
+          totalItems: null
+        });
+        renderedInstance.componentDidMount();
+        receiveItemsByProp(ITEMS_PER_LOAD);
+
+        // Check if the iniLimit wasn't used
+        expect(renderedElement).toMatchSnapshot();
+        expect(renderedElement.find('li').length).toBe(renderedInstance.props.limit);
+      });
+    });
+  });
+  describe('Given that the requestHash changes', () => {
+    it('should reset the component', () => {
+      const props = {
+        items: mockData,
+        loader: mockLoader,
+        iterator: mockIterator,
+        totalItems: mockData.length,
+        requestHash: 'default'
+      };
+      const wrapper = mount(/*#__PURE__*/React.createElement(InfiniteContainer, props));
+      const instance = wrapper.instance();
+      instance.componentDidMount();
+      instance.domScrollContainer = document.createElement('div');
+      wrapper.setState({
+        awaitingItems: false,
+        offset: [10, 10]
+      });
+      wrapper.setProps({
+        requestHash: 'price_desc'
+      });
+      expect(wrapper.state()).toEqual({
+        offset: [0, 32],
+        awaitingItems: true,
+        itemCount: 0
+      });
+    });
+  });
+});

package/components/Input/components/DateInput.js

@@ -1,17 +1,273 @@
-var _excluded=["onFocusChange","onChange","type","value"];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;}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 _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;}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,{useCallback,useState,useEffect,useRef}from'react';import PropTypes from'prop-types';import DayPicker from'react-day-picker';import MomentLocaleUtils from'react-day-picker/moment';import'react-day-picker/lib/style.css';import{css}from'glamor';import classNames from'classnames';import moment from'moment';import CalendarIcon from'@shopgate/pwa-ui-shared/icons/CalendarIcon';import appConfig,{themeConfig}from'@shopgate/pwa-common/helpers/config';import Backdrop from'@shopgate/pwa-common/components/Backdrop';import{i18n}from'@shopgate/engage/core/helpers';import SimpleInput from"./SimpleInput";var variables=themeConfig.variables;var locale=appConfig.language.substring(0,2);/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import DayPicker from 'react-day-picker';
+import MomentLocaleUtils from 'react-day-picker/moment';
+import 'react-day-picker/lib/style.css';
+import { css } from 'glamor';
+import classNames from 'classnames';
+import moment from 'moment';
+import CalendarIcon from '@shopgate/pwa-ui-shared/icons/CalendarIcon';
+import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import Backdrop from '@shopgate/pwa-common/components/Backdrop';
+import { i18n } from '@shopgate/engage/core/helpers';
+import SimpleInput from "./SimpleInput";
+const {
+  variables
+} = themeConfig;
+const locale = appConfig.language.substring(0, 2);
+
+/**
  * @param {Object|string} date The input date
  * @returns {string}
- */var getDateFromISO=function getDateFromISO(date){var result=moment(date);if(!result.isValid()){return null;}return result.toDate();};/**
+ */
+const getDateFromISO = date => {
+  const result = moment(date);
+  if (!result.isValid()) {
+    return null;
+  }
+  return result.toDate();
+};
+
+/**
  * @param {Object|string} date The input date
  * @param {boolean} validate Should the date be validated
  * @returns {string}
- */var getISOFormattedDate=function getISOFormattedDate(date){var validate=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;var result=moment(date,'L',locale);if(validate&&!result.isValid()){return'';}return result.format(moment.HTML5_FMT.DATE);};/**
+ */
+const getISOFormattedDate = (date, validate = true) => {
+  const result = moment(date, 'L', locale);
+  if (validate && !result.isValid()) {
+    return '';
+  }
+  return result.format(moment.HTML5_FMT.DATE);
+};
+
+/**
  * @param {Object|string} date The input date
  * @returns {string}
- */var getLocaleFormattedDate=function getLocaleFormattedDate(date){var result=moment(date);if(!result.isValid()){return'';}return result.format('L');};var styles={selectBox:css({WebkitAppearance:'none',border:'1px solid var(--color-text-low-emphasis)',padding:'2px 16px 2px 6px',marginRight:7,backgroundImage:'url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDA1LjQ1NiA0MDUuNDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDUuNDU2IDQwNS40NTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4NCjxnPg0KCTxwYXRoIGQ9Ik03NC4xMzQsNjQuMTQ3Yy00Ljk4NSwwLjA3OC05LjkxMSwyLjE2My0xMy40MzgsNS42ODhsLTU1LDU1QzIuMDk2LDEyOC40MzIsMCwxMzMuNDkyLDAsMTM4LjU4MyAgIHMyLjA5NiwxMC4xNTEsNS42OTcsMTMuNzVsMTgzLjI4MSwxODMuMjgxYzMuNTk5LDMuNjAxLDguNjU5LDUuNjk3LDEzLjc1LDUuNjk3czEwLjE1MS0yLjA5NiwxMy43NS01LjY5N2wxODMuMjgxLTE4My4yODEgICBjMy42MDEtMy41OTksNS42OTctOC42NTksNS42OTctMTMuNzVzLTIuMDk2LTEwLjE1MS01LjY5Ny0xMy43NWwtNTUtNTVjLTMuNTk4LTMuNTkxLTguNjUxLTUuNjgxLTEzLjczNC01LjY4MSAgIGMtNS4wODMsMC0xMC4xMzYsMi4wOS0xMy43MzQsNS42ODFMMjAyLjcyOCwxODQuMzk3TDg4LjE2Niw2OS44MzNDODQuNDk5LDY2LjE2OSw3OS4zMTgsNjQuMDcsNzQuMTM0LDY0LjE0N0w3NC4xMzQsNjQuMTQ3eiIgZmlsbD0iIzk2OTY5NiIvPg0KPC9nPg0KPC9zdmc+DQo=)',backgroundPosition:'right 4px top 50%',backgroundRepeat:'no-repeat',backgroundSize:10,borderRadius:0,outline:0,cursor:'pointer'}).toString(),iconWrapper:css({position:'absolute',right:variables.gap.small,top:'50%',cursor:'pointer',color:'var(--color-text-high-emphasis)'}).toString(),pickerWrapper:css({position:'relative',zIndex:12}).toString(),picker:css({left:'inherit !important',right:5,' .DayPicker-Day':{padding:'3px !important'},' .DayPicker-Day--selected':{backgroundColor:'var(--color-primary) !important'},' .DayPicker-Footer':{textAlign:'center'},' .DayPicker-TodayButton':{color:'var(--color-primary) !important'},' .DayPicker-TodayButton:hover':{backgroundColor:'var(--color-primary) !important',color:'#fff !important'},' .DayPicker-Caption':{padding:'0 !important'},' .DayPicker-NavButton':{right:'.5em !important'}}).toString(),pickerTop:css({bottom:30}).toString(),hidden:css({display:'none'}).toString()};var currentYear=new Date().getFullYear();var fromMonth=new Date(currentYear-100,11);var toMonth=new Date(currentYear+10,11);/**
+ */
+const getLocaleFormattedDate = date => {
+  const result = moment(date);
+  if (!result.isValid()) {
+    return '';
+  }
+  return result.format('L');
+};
+const styles = {
+  selectBox: css({
+    WebkitAppearance: 'none',
+    border: '1px solid var(--color-text-low-emphasis)',
+    padding: '2px 16px 2px 6px',
+    marginRight: 7,
+    backgroundImage: 'url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDA1LjQ1NiA0MDUuNDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDUuNDU2IDQwNS40NTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4NCjxnPg0KCTxwYXRoIGQ9Ik03NC4xMzQsNjQuMTQ3Yy00Ljk4NSwwLjA3OC05LjkxMSwyLjE2My0xMy40MzgsNS42ODhsLTU1LDU1QzIuMDk2LDEyOC40MzIsMCwxMzMuNDkyLDAsMTM4LjU4MyAgIHMyLjA5NiwxMC4xNTEsNS42OTcsMTMuNzVsMTgzLjI4MSwxODMuMjgxYzMuNTk5LDMuNjAxLDguNjU5LDUuNjk3LDEzLjc1LDUuNjk3czEwLjE1MS0yLjA5NiwxMy43NS01LjY5N2wxODMuMjgxLTE4My4yODEgICBjMy42MDEtMy41OTksNS42OTctOC42NTksNS42OTctMTMuNzVzLTIuMDk2LTEwLjE1MS01LjY5Ny0xMy43NWwtNTUtNTVjLTMuNTk4LTMuNTkxLTguNjUxLTUuNjgxLTEzLjczNC01LjY4MSAgIGMtNS4wODMsMC0xMC4xMzYsMi4wOS0xMy43MzQsNS42ODFMMjAyLjcyOCwxODQuMzk3TDg4LjE2Niw2OS44MzNDODQuNDk5LDY2LjE2OSw3OS4zMTgsNjQuMDcsNzQuMTM0LDY0LjE0N0w3NC4xMzQsNjQuMTQ3eiIgZmlsbD0iIzk2OTY5NiIvPg0KPC9nPg0KPC9zdmc+DQo=)',
+    backgroundPosition: 'right 4px top 50%',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 10,
+    borderRadius: 0,
+    outline: 0,
+    cursor: 'pointer'
+  }).toString(),
+  iconWrapper: css({
+    position: 'absolute',
+    right: variables.gap.small,
+    top: '50%',
+    cursor: 'pointer',
+    color: 'var(--color-text-high-emphasis)'
+  }).toString(),
+  pickerWrapper: css({
+    position: 'relative',
+    zIndex: 12
+  }).toString(),
+  picker: css({
+    left: 'inherit !important',
+    right: 5,
+    ' .DayPicker-Day': {
+      padding: '3px !important'
+    },
+    ' .DayPicker-Day--selected': {
+      backgroundColor: 'var(--color-primary) !important'
+    },
+    ' .DayPicker-Footer': {
+      textAlign: 'center'
+    },
+    ' .DayPicker-TodayButton': {
+      color: 'var(--color-primary) !important'
+    },
+    ' .DayPicker-TodayButton:hover': {
+      backgroundColor: 'var(--color-primary) !important',
+      color: '#fff !important'
+    },
+    ' .DayPicker-Caption': {
+      padding: '0 !important'
+    },
+    ' .DayPicker-NavButton': {
+      right: '.5em !important'
+    }
+  }).toString(),
+  pickerTop: css({
+    bottom: 30
+  }).toString(),
+  hidden: css({
+    display: 'none'
+  }).toString()
+};
+const currentYear = new Date().getFullYear();
+const fromMonth = new Date(currentYear - 100, 11);
+const toMonth = new Date(currentYear + 10, 11);
+
+/**
  * @param {Object} props The components props
  * @returns {JSX}
- */var Caption=function Caption(_ref){var date=_ref.date,localeUtils=_ref.localeUtils,onChange=_ref.onChange;var months=localeUtils.getMonths(locale);var years=[];for(var i=fromMonth.getFullYear();i<=toMonth.getFullYear();i+=1){years.push(i);}var handleChange=function handleChange(e){var _e$target$form=e.target.form,year=_e$target$form.year,month=_e$target$form.month;onChange(new Date(year.value,month.value));};return React.createElement("div",{className:"DayPicker-Caption"},React.createElement("select",{name:"month",onChange:handleChange,value:date.getMonth(),className:styles.selectBox},months.map(function(month,i){return React.createElement("option",{key:month,value:i},month);})),React.createElement("select",{name:"year",onChange:handleChange,value:date.getFullYear(),className:styles.selectBox},years.map(function(year){return React.createElement("option",{key:year,value:year},year);})));};/**
+ */
+const Caption = ({
+  date,
+  localeUtils,
+  onChange
+}) => {
+  const months = localeUtils.getMonths(locale);
+  const years = [];
+  for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
+    years.push(i);
+  }
+  const handleChange = function handleChange(e) {
+    const {
+      year,
+      month
+    } = e.target.form;
+    onChange(new Date(year.value, month.value));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "DayPicker-Caption"
+  }, /*#__PURE__*/React.createElement("select", {
+    name: "month",
+    onChange: handleChange,
+    value: date.getMonth(),
+    className: styles.selectBox
+  }, months.map((month, i) => /*#__PURE__*/React.createElement("option", {
+    key: month,
+    value: i
+  }, month))), /*#__PURE__*/React.createElement("select", {
+    name: "year",
+    onChange: handleChange,
+    value: date.getFullYear(),
+    className: styles.selectBox
+  }, years.map(year => /*#__PURE__*/React.createElement("option", {
+    key: year,
+    value: year
+  }, year))));
+};
+/**
  * @param {Object} props The components props
  * @returns {JSX}
- */var DateInput=function DateInput(_ref2){var onFocusChange=_ref2.onFocusChange,onChange=_ref2.onChange,type=_ref2.type,value=_ref2.value,rest=_objectWithoutProperties(_ref2,_excluded);var wrapperRef=useRef(null);var _useState=useState(getLocaleFormattedDate(value)),_useState2=_slicedToArray(_useState,2),inputValue=_useState2[0],setInputValue=_useState2[1];var _useState3=useState(getDateFromISO(value)),_useState4=_slicedToArray(_useState3,2),pickerValue=_useState4[0],setPickerValue=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isFocused=_useState6[0],setIsFocused=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),pickerVisible=_useState8[0],setPickerVisible=_useState8[1];useEffect(function(){var updated=getLocaleFormattedDate(value);if(updated){setInputValue(updated);setPickerValue(getDateFromISO(value));}},[value]);var needsPositionTop=useCallback(function(){var element=wrapperRef.current;if(!element){return false;}var _element$getBoundingC=element.getBoundingClientRect(),top=_element$getBoundingC.top,height=_element$getBoundingC.height;var distToBottom=document.body.offsetHeight-(top+height);return distToBottom<=300;},[wrapperRef]);var handleInputValueChange=useCallback(function(val){setInputValue(val);},[]);var handleFocusChange=useCallback(function(focused,e){if(!focused){setPickerValue(getDateFromISO(getISOFormattedDate(inputValue)));onChange(inputValue.length!==0?getISOFormattedDate(inputValue,false):null);}setIsFocused(focused);onFocusChange(focused,e);},[inputValue,onChange,onFocusChange]);var handlePickerChange=useCallback(function(date){setPickerVisible(false);setPickerValue(date);setInputValue(getLocaleFormattedDate(date));onChange(getISOFormattedDate(date));},[onChange]);var handleMonthChange=useCallback(function(date){setPickerValue(date);},[]);var handleIconClick=useCallback(function(){setPickerVisible(!pickerVisible);},[pickerVisible]);var handleBackdropClick=useCallback(function(){setPickerVisible(false);},[]);return React.createElement(React.Fragment,null,React.createElement("div",{ref:wrapperRef},React.createElement(SimpleInput,_extends({},rest,{attributes:{placeholder:isFocused?i18n.text('formats.date.pattern'):null},value:inputValue,type:"text",onFocusChange:handleFocusChange,onChange:handleInputValueChange})),React.createElement("div",{className:styles.iconWrapper,onClick:handleIconClick,role:"button",tabIndex:"0",onKeyDown:handleIconClick},React.createElement(CalendarIcon,null))),React.createElement("div",{className:classNames(styles.pickerWrapper,_defineProperty({},styles.hidden,!pickerVisible))},React.createElement(DayPicker,{className:classNames('DayPickerInput-Overlay',styles.picker,_defineProperty({},styles.pickerTop,needsPositionTop())),onDayClick:handlePickerChange,selectedDays:pickerValue,localeUtils:MomentLocaleUtils,locale:locale,todayButton:i18n.text('locations.your_current_timeslot.today'),onTodayButtonClick:handlePickerChange,month:pickerValue,showOutsideDays:true,captionElement:function captionElement(_ref3){var date=_ref3.date,localeUtils=_ref3.localeUtils;return React.createElement(Caption,{date:date,localeUtils:localeUtils,onChange:handleMonthChange});}})),pickerVisible&&React.createElement(Backdrop,{isVisible:true,level:11,opacity:0,onClick:handleBackdropClick}));};DateInput.defaultProps={onFocusChange:function onFocusChange(){},onChange:function onChange(){},type:null,value:null};export default DateInput;
+ */
+const DateInput = ({
+  onFocusChange,
+  onChange,
+  type,
+  value,
+  ...rest
+}) => {
+  const wrapperRef = useRef(null);
+  const [inputValue, setInputValue] = useState(getLocaleFormattedDate(value));
+  const [pickerValue, setPickerValue] = useState(getDateFromISO(value));
+  const [isFocused, setIsFocused] = useState(false);
+  const [pickerVisible, setPickerVisible] = useState(false);
+  useEffect(() => {
+    const updated = getLocaleFormattedDate(value);
+    if (updated) {
+      setInputValue(updated);
+      setPickerValue(getDateFromISO(value));
+    }
+  }, [value]);
+  const needsPositionTop = useCallback(() => {
+    const element = wrapperRef.current;
+    if (!element) {
+      return false;
+    }
+    const {
+      top,
+      height
+    } = element.getBoundingClientRect();
+    const distToBottom = document.body.offsetHeight - (top + height);
+    return distToBottom <= 300;
+  }, [wrapperRef]);
+  const handleInputValueChange = useCallback(val => {
+    setInputValue(val);
+  }, []);
+  const handleFocusChange = useCallback((focused, e) => {
+    if (!focused) {
+      setPickerValue(getDateFromISO(getISOFormattedDate(inputValue)));
+      onChange(inputValue.length !== 0 ? getISOFormattedDate(inputValue, false) : null);
+    }
+    setIsFocused(focused);
+    onFocusChange(focused, e);
+  }, [inputValue, onChange, onFocusChange]);
+  const handlePickerChange = useCallback(date => {
+    setPickerVisible(false);
+    setPickerValue(date);
+    setInputValue(getLocaleFormattedDate(date));
+    onChange(getISOFormattedDate(date));
+  }, [onChange]);
+  const handleMonthChange = useCallback(date => {
+    setPickerValue(date);
+  }, []);
+  const handleIconClick = useCallback(() => {
+    setPickerVisible(!pickerVisible);
+  }, [pickerVisible]);
+  const handleBackdropClick = useCallback(() => {
+    setPickerVisible(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(SimpleInput, _extends({}, rest, {
+    attributes: {
+      placeholder: isFocused ? i18n.text('formats.date.pattern') : null
+    },
+    value: inputValue,
+    type: "text",
+    onFocusChange: handleFocusChange,
+    onChange: handleInputValueChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.iconWrapper,
+    onClick: handleIconClick,
+    role: "button",
+    tabIndex: "0",
+    onKeyDown: handleIconClick
+  }, /*#__PURE__*/React.createElement(CalendarIcon, null))), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.pickerWrapper, {
+      [styles.hidden]: !pickerVisible
+    })
+  }, /*#__PURE__*/React.createElement(DayPicker, {
+    className: classNames('DayPickerInput-Overlay', styles.picker, {
+      [styles.pickerTop]: needsPositionTop()
+    }),
+    onDayClick: handlePickerChange,
+    selectedDays: pickerValue,
+    localeUtils: MomentLocaleUtils,
+    locale: locale,
+    todayButton: i18n.text('locations.your_current_timeslot.today'),
+    onTodayButtonClick: handlePickerChange,
+    month: pickerValue,
+    showOutsideDays: true,
+    captionElement: ({
+      date,
+      localeUtils
+    }) => /*#__PURE__*/React.createElement(Caption, {
+      date: date,
+      localeUtils: localeUtils,
+      onChange: handleMonthChange
+    })
+  })), pickerVisible && /*#__PURE__*/React.createElement(Backdrop, {
+    isVisible: true,
+    level: 11,
+    opacity: 0,
+    onClick: handleBackdropClick
+  }));
+};
+DateInput.defaultProps = {
+  onFocusChange: () => {},
+  onChange: () => {},
+  type: null,
+  value: null
+};
+export default DateInput;

package/components/Input/components/MultiLineInput.js

@@ -1,26 +1,112 @@
-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 _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 _get(target,property,receiver){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get;}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(receiver);}return desc.value;};}return _get(target,property,receiver||target);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}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 from'react';import classNames from'classnames';import{logger}from'@shopgate/pwa-core';import SimpleInput from"./SimpleInput";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import classNames from 'classnames';
+import { logger } from '@shopgate/pwa-core';
+import SimpleInput from "./SimpleInput";
+
+/**
  * A component that takes care of rendering and validation of input fields.
  * This component has no styling and should not be used directly.
  * You may want to use an appropriate form field component from the template instead.
- */var MultiLineInput=/*#__PURE__*/function(_SimpleInput){/**
+ */
+class MultiLineInput extends SimpleInput {
+  /**
    * Creates a new input component.
    * @param {Object} props The component properties.
-   */function MultiLineInput(props){var _this2;_classCallCheck(this,MultiLineInput);_this2=_callSuper(this,MultiLineInput,[props]);/**
-   * Sets an initial height of the multiline HTMLElement.
-   */_defineProperty(_this2,"setBaseHeight",function(){if(_this2.baseHeight!==null){return;}_this2.baseHeight=_this2.ref.clientHeight;});_this2.baseHeight=null;// First render must be empty.
-var sanitizedValue=_this2.props.onSanitize('');_this2.state={value:sanitizedValue,isValid:_this2.props.onValidate(sanitizedValue,true),isFocused:false};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * Sets an initial height of the multiline HTMLElement.
+     */
+    this.setBaseHeight = () => {
+      if (this.baseHeight !== null) {
+        return;
+      }
+      this.baseHeight = this.ref.clientHeight;
+    };
+    this.baseHeight = null;
+    // First render must be empty.
+    const sanitizedValue = this.props.onSanitize('');
+    this.state = {
+      value: sanitizedValue,
+      isValid: this.props.onValidate(sanitizedValue, true),
+      isFocused: false
+    };
+  }
+
+  /**
    * Additional function to make avoid .setState use in componentDidMount
    * usage violation.
-   */_inherits(MultiLineInput,_SimpleInput);return _createClass(MultiLineInput,[{key:"doComponentDidMount",value:function doComponentDidMount(){var sanitizedValue=this.props.onSanitize(this.props.value||'');this.props.onChange(sanitizedValue);this.setState({value:sanitizedValue,isValid:this.props.onValidate(sanitizedValue,true),isFocused:false});}/**
+   */
+  doComponentDidMount() {
+    const sanitizedValue = this.props.onSanitize(this.props.value || '');
+    this.props.onChange(sanitizedValue);
+    this.setState({
+      value: sanitizedValue,
+      isValid: this.props.onValidate(sanitizedValue, true),
+      isFocused: false
+    });
+  }
+
+  /**
    * Set real value and trigger second render.
    * Initially trigger onChange() to set the initial value.
-   */},{key:"componentDidMount",value:function componentDidMount(){// No super, would have to sanitize anyway.
-this.doComponentDidMount();}/**
+   */
+  componentDidMount() {
+    // No super, would have to sanitize anyway.
+    this.doComponentDidMount();
+  }
+
+  /**
    * Adjusts the element height.
-   */},{key:"componentDidUpdate",value:function componentDidUpdate(){if(!(this.ref instanceof HTMLElement)){logger.error('Ref is not an HTMLElement');return;}this.ref.style.height="".concat(this.baseHeight,"px");this.ref.style.height="".concat(this.ref.scrollHeight,"px");}},{key:"handleRef",value:/**
+   */
+  componentDidUpdate() {
+    if (!(this.ref instanceof HTMLElement)) {
+      logger.error('Ref is not an HTMLElement');
+      return;
+    }
+    this.ref.style.height = `${this.baseHeight}px`;
+    this.ref.style.height = `${this.ref.scrollHeight}px`;
+  }
+  /**
    * Handles reference passing to callback and assignation.
    * @param {HTMLElement} ref The element
-   */function handleRef(ref){_get(_getPrototypeOf(MultiLineInput.prototype),"handleRef",this).call(this,ref);this.setBaseHeight();}/**
+   */
+  handleRef(ref) {
+    super.handleRef(ref);
+    this.setBaseHeight();
+  }
+
+  /**
    * Renders the component.
    * @returns {JSX}
-   */},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,className=_this$props.className,password=_this$props.password,attributes=_this$props.attributes,disabled=_this$props.disabled,required=_this$props.required;var type=password?'password':this.props.type;var value=this.state.value;return React.createElement("textarea",_extends({id:this.props.id,name:this.props.name,ref:function ref(_ref){return _this3.handleRef(_ref);},className:classNames(className,'multiLineInput','common__multi-line-input'),type:type,value:value,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur,required:required,disabled:disabled},attributes));}}]);}(SimpleInput);export default MultiLineInput;
+   */
+  render() {
+    const {
+      className,
+      password,
+      attributes,
+      disabled,
+      required
+    } = this.props;
+    const type = password ? 'password' : this.props.type;
+    const {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("textarea", _extends({
+      id: this.props.id,
+      name: this.props.name,
+      ref: ref => this.handleRef(ref),
+      className: classNames(className, 'multiLineInput', 'common__multi-line-input'),
+      type: type,
+      value: value,
+      onChange: this.handleChange,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      required: required,
+      disabled: disabled
+    }, attributes));
+  }
+}
+export default MultiLineInput;