@shopgate/pwa-ui-shared 7.30.0-alpha.7 → 7.30.0-alpha.9

package/Form/RadioGroup/components/Item/index.js

@@ -1,6 +1,62 @@
-import _camelCase from"lodash/camelCase";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 _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,{PureComponent}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{I18n,CheckedIcon,UncheckedIcon}from'@shopgate/engage/components';import style from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import _camelCase from "lodash/camelCase";
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { I18n, CheckedIcon, UncheckedIcon } from '@shopgate/engage/components';
+import style from "./style";
+
+/**
  * RadioItem component.
- */var RadioItem=/*#__PURE__*/function(_PureComponent){function RadioItem(){_classCallCheck(this,RadioItem);return _callSuper(this,RadioItem,arguments);}_inherits(RadioItem,_PureComponent);return _createClass(RadioItem,[{key:"render",value:function render(){var _this$props=this.props,ItemLabel=_this$props.label,name=_this$props.name,onChange=_this$props.onChange,checked=_this$props.checked,className=_this$props.className,attributes=_this$props.attributes,id=_this$props.id;var _ref=attributes||{},disabled=_ref.disabled;return React.createElement("label",{className:classNames(style.container,className,_defineProperty({},style.disabled,!!disabled),_camelCase(name),'radioItem'),htmlFor:id||name},checked&&React.createElement(CheckedIcon,{className:classNames(style.active,style.icon,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(style.icon,'uncheckedIcon')}),React.createElement("input",_extends({className:classNames('sr-only','input'),checked:checked,id:id||name,type:"radio",name:name,onChange:onChange,"aria-labelledby":"".concat(id||name,"-label")},attributes)),React.createElement(I18n.Text,{string:ItemLabel,"aria-hidden":true,id:"".concat(id||name,"-label"),className:classNames(style.label,'label')}));}}]);}(PureComponent);_defineProperty(RadioItem,"defaultProps",{attributes:null,id:null,checked:false,className:'',onChange:function onChange(){}/**
+ */
+class RadioItem extends PureComponent {
+  /**
    * Renders the component.
    * @returns {JSX.Element}
-   */});export default RadioItem;
+   */
+  render() {
+    const {
+      label: ItemLabel,
+      name,
+      onChange,
+      checked,
+      className,
+      attributes,
+      id
+    } = this.props;
+    const {
+      disabled
+    } = attributes || {};
+    return /*#__PURE__*/React.createElement("label", {
+      className: classNames(style.container, className, {
+        [style.disabled]: !!disabled
+      }, _camelCase(name), 'radioItem'),
+      htmlFor: id || name
+    }, checked && /*#__PURE__*/React.createElement(CheckedIcon, {
+      className: classNames(style.active, style.icon, 'checkedIcon')
+    }), !checked && /*#__PURE__*/React.createElement(UncheckedIcon, {
+      className: classNames(style.icon, 'uncheckedIcon')
+    }), /*#__PURE__*/React.createElement("input", _extends({
+      className: classNames('sr-only', 'input'),
+      checked: checked,
+      id: id || name,
+      type: "radio",
+      name: name,
+      onChange: onChange,
+      "aria-labelledby": `${id || name}-label`
+    }, attributes)), /*#__PURE__*/React.createElement(I18n.Text, {
+      string: ItemLabel,
+      "aria-hidden": true,
+      id: `${id || name}-label`,
+      className: classNames(style.label, 'label')
+    }));
+  }
+}
+RadioItem.defaultProps = {
+  attributes: null,
+  id: null,
+  checked: false,
+  className: '',
+  onChange: () => {}
+};
+export default RadioItem;

package/Form/RadioGroup/components/Item/style.js

@@ -1,2 +1,32 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var container=css({display:'flex',marginLeft:-1// Removes margin of svg.
-}).toString();var icon=css({width:24,height:24,flexShrink:0}).toString();var disabled=css({opacity:0.25,pointerEvents:'none'}).toString();var label=css({flex:1,fontSize:'1rem',lineHeight:1.5,marginLeft:themeConfig.variables.gap.small,marginBottom:themeConfig.variables.gap.small}).toString();var active=css({color:"var(--color-primary, ".concat(themeConfig.colors.primary,")")}).toString();export default{icon:icon,disabled:disabled,container:container,label:label,active:active};
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const container = css({
+  display: 'flex',
+  marginLeft: -1 // Removes margin of svg.
+}).toString();
+const icon = css({
+  width: 24,
+  height: 24,
+  flexShrink: 0
+}).toString();
+const disabled = css({
+  opacity: 0.25,
+  pointerEvents: 'none'
+}).toString();
+const label = css({
+  flex: 1,
+  fontSize: '1rem',
+  lineHeight: 1.5,
+  marginLeft: themeConfig.variables.gap.small,
+  marginBottom: themeConfig.variables.gap.small
+}).toString();
+const active = css({
+  color: `var(--color-primary, ${themeConfig.colors.primary})`
+}).toString();
+export default {
+  icon,
+  disabled,
+  container,
+  label,
+  active
+};

package/Form/RadioGroup/index.js

@@ -1,13 +1,105 @@
-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,Children,cloneElement}from'react';import PropTypes from'prop-types';import classNames from'classnames';import FormElement from'@shopgate/pwa-ui-shared/FormElement';import style from"./style";/**
+import React, { Component, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import FormElement from '@shopgate/pwa-ui-shared/FormElement';
+import style from "./style";
+
+/**
  * RadioGroup component.
- */var RadioGroup=/*#__PURE__*/function(_Component){function RadioGroup(props){var _this2;_classCallCheck(this,RadioGroup);_this2=_callSuper(this,RadioGroup,[props]);/**
-   * @param {string} event click from radio element
-   */_defineProperty(_this2,"handleChange",function(_ref){var name=_ref.target.name;if(_this2.props.disabled){return;}if(!_this2.props.isControlled){_this2.setState({value:name});}_this2.props.onChange(name);});_this2.state={value:props.value};return _this2;}/**
+ */
+class RadioGroup extends Component {
+  /**
+   * Initializes the component.
+   * @param {Object} props The components props.
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * @param {string} event click from radio element
+     */
+    this.handleChange = ({
+      target: {
+        name
+      }
+    }) => {
+      if (this.props.disabled) {
+        return;
+      }
+      if (!this.props.isControlled) {
+        this.setState({
+          value: name
+        });
+      }
+      this.props.onChange(name);
+    };
+    this.state = {
+      value: props.value
+    };
+  }
+
+  /**
    * @param {Object} nextProps props
-   */_inherits(RadioGroup,_Component);return _createClass(RadioGroup,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.isControlled&&this.state.value!==nextProps.value){this.setState({value:nextProps.value});}}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.isControlled && this.state.value !== nextProps.value) {
+      this.setState({
+        value: nextProps.value
+      });
+    }
+  }
+  /**
    * Renders the component.
    * @returns {JSX}
-   */function render(){var _this3=this;var _this$props=this.props,children=_this$props.children,className=_this$props.className,label=_this$props.label,errorText=_this$props.errorText,direction=_this$props.direction,name=_this$props.name,translateErrorText=_this$props.translateErrorText,disabled=_this$props.disabled,showErrorText=_this$props.showErrorText;return React.createElement(FormElement,{className:classNames(className,'radioGroup','ui-shared__form__radio-group',{disabled:disabled}),label:label,labelStatic:true,errorText:errorText,translateErrorText:translateErrorText,showErrorText:showErrorText,htmlFor:"none",hasUnderline:false,hasValue:true},React.createElement("div",{className:classNames(style.container(direction),'radioGroup')},Children.map(children,function(child){if(!child){return null;}return cloneElement(child,{key:"".concat(name,"_").concat(child.props.name),checked:_this3.state.value===child.props.name,onChange:_this3.handleChange});})));}}]);}(Component);_defineProperty(RadioGroup,"defaultProps",{onChange:function onChange(){},children:null,className:'',direction:'column',disabled:false,errorText:'',isControlled:false,label:'',translateErrorText:true,value:null,showErrorText:true/**
-   * Initializes the component.
-   * @param {Object} props The components props.
-   */});export default RadioGroup;
+   */
+  render() {
+    const {
+      children,
+      className,
+      label,
+      errorText,
+      direction,
+      name,
+      translateErrorText,
+      disabled,
+      showErrorText
+    } = this.props;
+    return /*#__PURE__*/React.createElement(FormElement, {
+      className: classNames(className, 'radioGroup', 'ui-shared__form__radio-group', {
+        disabled
+      }),
+      label: label,
+      labelStatic: true,
+      errorText: errorText,
+      translateErrorText: translateErrorText,
+      showErrorText: showErrorText,
+      htmlFor: "none",
+      hasUnderline: false,
+      hasValue: true
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(style.container(direction), 'radioGroup')
+    }, Children.map(children, child => {
+      if (!child) {
+        return null;
+      }
+      return /*#__PURE__*/cloneElement(child, {
+        key: `${name}_${child.props.name}`,
+        checked: this.state.value === child.props.name,
+        onChange: this.handleChange
+      });
+    })));
+  }
+}
+RadioGroup.defaultProps = {
+  onChange: () => {},
+  children: null,
+  className: '',
+  direction: 'column',
+  disabled: false,
+  errorText: '',
+  isControlled: false,
+  label: '',
+  translateErrorText: true,
+  value: null,
+  showErrorText: true
+};
+export default RadioGroup;

package/Form/RadioGroup/spec.js

@@ -1,3 +1,83 @@
-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 _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);}import React from'react';import{mount}from'enzyme';import RadioItem from"./components/Item";import RadioGroup from'.';var defProps={name:'radio'};jest.mock('@shopgate/engage/components');describe('<RadioGroup />',function(){it('should render empty group',function(){var wrapper=mount(React.createElement(RadioGroup,defProps));expect(wrapper).toMatchSnapshot();});it('should render column group with items',function(){var wrapper=mount(React.createElement(RadioGroup,defProps,React.createElement(RadioItem,{name:"foo",label:"foo"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RadioItem).length).toEqual(1);expect(_typeof(wrapper.find(RadioItem).prop('onChange'))).toEqual('function');});it('should render rows group with items',function(){var wrapper=mount(React.createElement(RadioGroup,_extends({},defProps,{direction:"rows"}),React.createElement(RadioItem,{name:"foo",label:"foo"})));expect(wrapper).toMatchSnapshot();});it('should use default value',function(){var wrapper=mount(React.createElement(RadioGroup,_extends({},defProps,{value:"foo"}),React.createElement(RadioItem,{name:"foo",label:"foo"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RadioItem).length).toEqual(1);expect(wrapper.find(RadioItem).prop('checked')).toEqual(true);});it('should have on value at a time',function(){var wrapper=mount(React.createElement(RadioGroup,defProps,React.createElement(RadioItem,{name:"foo",label:"foo"}),React.createElement(RadioItem,{name:"bar",label:"bar"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RadioItem).length).toEqual(2);var radio1=wrapper.find(RadioItem).at(0).find('input');var radio2=wrapper.find(RadioItem).at(1).find('input');// First element value
-radio1.simulate('change');wrapper.update();expect(wrapper.find(RadioItem).at(0).prop('checked')).toEqual(true);expect(wrapper.find(RadioItem).at(1).prop('checked')).toEqual(false);// Second element value
-radio2.simulate('change');wrapper.update();expect(wrapper.find(RadioItem).at(0).prop('checked')).toEqual(false);expect(wrapper.find(RadioItem).at(1).prop('checked')).toEqual(true);});it('should call onChange callback',function(){var onChange=jest.fn();var wrapper=mount(React.createElement(RadioGroup,_extends({},defProps,{onChange:onChange}),React.createElement(RadioItem,{name:"foo",label:"foo"})));expect(wrapper).toMatchSnapshot();expect(wrapper.find(RadioItem).length).toEqual(1);var radio=wrapper.find(RadioItem).at(0).find('input');radio.simulate('change');expect(onChange).toHaveBeenCalledWith('foo');});});
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { mount } from 'enzyme';
+import RadioItem from "./components/Item";
+import RadioGroup from '.';
+const defProps = {
+  name: 'radio'
+};
+jest.mock('@shopgate/engage/components');
+describe('<RadioGroup />', () => {
+  it('should render empty group', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioGroup, defProps));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render column group with items', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioGroup, defProps, /*#__PURE__*/React.createElement(RadioItem, {
+      name: "foo",
+      label: "foo"
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(RadioItem).length).toEqual(1);
+    expect(typeof wrapper.find(RadioItem).prop('onChange')).toEqual('function');
+  });
+  it('should render rows group with items', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioGroup, _extends({}, defProps, {
+      direction: "rows"
+    }), /*#__PURE__*/React.createElement(RadioItem, {
+      name: "foo",
+      label: "foo"
+    })));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should use default value', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioGroup, _extends({}, defProps, {
+      value: "foo"
+    }), /*#__PURE__*/React.createElement(RadioItem, {
+      name: "foo",
+      label: "foo"
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(RadioItem).length).toEqual(1);
+    expect(wrapper.find(RadioItem).prop('checked')).toEqual(true);
+  });
+  it('should have on value at a time', () => {
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioGroup, defProps, /*#__PURE__*/React.createElement(RadioItem, {
+      name: "foo",
+      label: "foo"
+    }), /*#__PURE__*/React.createElement(RadioItem, {
+      name: "bar",
+      label: "bar"
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(RadioItem).length).toEqual(2);
+    const radio1 = wrapper.find(RadioItem).at(0).find('input');
+    const radio2 = wrapper.find(RadioItem).at(1).find('input');
+
+    // First element value
+    radio1.simulate('change');
+    wrapper.update();
+    expect(wrapper.find(RadioItem).at(0).prop('checked')).toEqual(true);
+    expect(wrapper.find(RadioItem).at(1).prop('checked')).toEqual(false);
+
+    // Second element value
+    radio2.simulate('change');
+    wrapper.update();
+    expect(wrapper.find(RadioItem).at(0).prop('checked')).toEqual(false);
+    expect(wrapper.find(RadioItem).at(1).prop('checked')).toEqual(true);
+  });
+  it('should call onChange callback', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(/*#__PURE__*/React.createElement(RadioGroup, _extends({}, defProps, {
+      onChange: onChange
+    }), /*#__PURE__*/React.createElement(RadioItem, {
+      name: "foo",
+      label: "foo"
+    })));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(RadioItem).length).toEqual(1);
+    const radio = wrapper.find(RadioItem).at(0).find('input');
+    radio.simulate('change');
+    expect(onChange).toHaveBeenCalledWith('foo');
+  });
+});

package/Form/RadioGroup/style.js

@@ -1,4 +1,20 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';/**
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+
+/**
  * @param {string} direction flex direction
  * @returns {*}
- */var container=function container(direction){return css({display:'flex',flexDirection:direction}).toString();};var label=css({fontSize:'0.8rem',paddingBottom:themeConfig.variables.gap.small,color:themeConfig.colors.shade12}).toString();export default{container:container,label:label};
+ */
+const container = direction => css({
+  display: 'flex',
+  flexDirection: direction
+}).toString();
+const label = css({
+  fontSize: '0.8rem',
+  paddingBottom: themeConfig.variables.gap.small,
+  color: themeConfig.colors.shade12
+}).toString();
+export default {
+  container,
+  label
+};

package/Form/Select/index.js

@@ -1,18 +1,166 @@
-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 _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 Chevron from"../../icons/ChevronIcon";import FormElement from"../../FormElement";import styles from"./style";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Chevron from "../../icons/ChevronIcon";
+import FormElement from "../../FormElement";
+import styles from "./style";
+
+/**
  * A component that provides a styled select for user input in material design.
- */var Select=/*#__PURE__*/function(_Component){/**
+ */
+class Select extends Component {
+  /**
    * Creates a new text field component.
    * @param {Object} props The component properties.
-   */function Select(props){var _this2;_classCallCheck(this,Select);_this2=_callSuper(this,Select,[props]);/**
-   * @param {string} value The entered text.
-   */_defineProperty(_this2,"handleChange",function(_ref){var target=_ref.target;var multiple=_this2.props.multiple;var value=target.value;if(multiple){value=Array.from(target.selectedOptions,function(option){return option.value;});}if(!_this2.props.isControlled){_this2.setState({value:value});}_this2.props.onChange(value);});/**
-   * @param {boolean} isFocused focused
-   */_defineProperty(_this2,"handleFocusChange",function(isFocused){_this2.setState({isFocused:isFocused});});_this2.state={value:props.value,isFocused:false};return _this2;}/**
+   */
+  constructor(props) {
+    super(props);
+    /**
+     * @param {string} value The entered text.
+     */
+    this.handleChange = ({
+      target
+    }) => {
+      const {
+        multiple
+      } = this.props;
+      let {
+        value
+      } = target;
+      if (multiple) {
+        value = Array.from(target.selectedOptions, option => option.value);
+      }
+      if (!this.props.isControlled) {
+        this.setState({
+          value
+        });
+      }
+      this.props.onChange(value);
+    };
+    /**
+     * @param {boolean} isFocused focused
+     */
+    this.handleFocusChange = isFocused => {
+      this.setState({
+        isFocused
+      });
+    };
+    this.state = {
+      value: props.value,
+      isFocused: false
+    };
+  }
+
+  /**
    * Corrects the selected value to the first option when the initial value is not located within
    * the options.
-   */_inherits(Select,_Component);return _createClass(Select,[{key:"componentDidMount",value:function componentDidMount(){var _this$props=this.props,multiple=_this$props.multiple,options=_this$props.options;var value=this.state.value;if(!multiple&&(options===null||options===void 0?void 0:options[value])===undefined){var _Object$entries,_Object$entries$;var fallback=(_Object$entries=Object.entries(options))===null||_Object$entries===void 0?void 0:(_Object$entries$=_Object$entries[0])===null||_Object$entries$===void 0?void 0:_Object$entries$[0];if(fallback!==undefined){this.handleChange({target:{value:fallback}});}}}/**
+   */
+  componentDidMount() {
+    const {
+      multiple,
+      options
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    if (!multiple && options?.[value] === undefined) {
+      const fallback = Object.entries(options)?.[0]?.[0];
+      if (fallback !== undefined) {
+        this.handleChange({
+          target: {
+            value: fallback
+          }
+        });
+      }
+    }
+  }
+
+  /**
    * Update state with new props.
    * @param {Object} nextProps The new props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){this.setState({value:nextProps.value});}},{key:"render",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      value: nextProps.value
+    });
+  }
+  /**
    * @return {JSX.Element}
-   */function render(){var _this3=this;var _this$props2=this.props,name=_this$props2.name,options=_this$props2.options,translateErrorText=_this$props2.translateErrorText,disabled=_this$props2.disabled,multiple=_this$props2.multiple,size=_this$props2.size,showErrorText=_this$props2.showErrorText,className=_this$props2.className,placeholder=_this$props2.placeholder,label=_this$props2.label,errorText=_this$props2.errorText,required=_this$props2.required,ariaInvalid=_this$props2['aria-invalid'],ariaDescribedBy=_this$props2['aria-describedby'];var _this$state=this.state,value=_this$state.value,isFocused=_this$state.isFocused;return React.createElement(FormElement,{className:"".concat(className," ui-shared__form__select"),placeholder:placeholder,htmlFor:name,label:label,errorText:errorText,translateErrorText:translateErrorText,isFocused:isFocused,hasValue:!!value||!!options[''],hasPlaceholder:!disabled||value!=='',disabled:disabled,showErrorText:showErrorText},React.createElement("select",_extends({id:name,name:name,onChange:this.handleChange,onFocus:function onFocus(){return _this3.handleFocusChange(true);},onBlur:function onBlur(){return _this3.handleFocusChange(false);},value:value,className:classNames(styles.select,'select'),disabled:disabled,required:required,"aria-invalid":ariaInvalid,"aria-describedby":ariaDescribedBy},multiple&&{multiple:multiple,size:size}),Object.keys(options).map(function(key){return React.createElement("option",{className:"option",value:key,key:"".concat(name,"_").concat(key)},options[key]);})),React.createElement(Chevron,{className:styles.chevron}));}}]);}(Component);_defineProperty(Select,"defaultProps",{'aria-invalid':false,'aria-describedby':null,className:'',errorText:'',isControlled:false,placeholder:'',label:'',onChange:function onChange(){},options:{},translateErrorText:true,showErrorText:true,size:null,value:'',disabled:false,required:false,multiple:false});export default Select;
+   */
+  render() {
+    const {
+      name,
+      options,
+      translateErrorText,
+      disabled,
+      multiple,
+      size,
+      showErrorText,
+      className,
+      placeholder,
+      label,
+      errorText,
+      required,
+      'aria-invalid': ariaInvalid,
+      'aria-describedby': ariaDescribedBy
+    } = this.props;
+    const {
+      value,
+      isFocused
+    } = this.state;
+    return /*#__PURE__*/React.createElement(FormElement, {
+      className: `${className} ui-shared__form__select`,
+      placeholder: placeholder,
+      htmlFor: name,
+      label: label,
+      errorText: errorText,
+      translateErrorText: translateErrorText,
+      isFocused: isFocused,
+      hasValue: !!value || !!options[''],
+      hasPlaceholder: !disabled || value !== '',
+      disabled: disabled,
+      showErrorText: showErrorText
+    }, /*#__PURE__*/React.createElement("select", _extends({
+      id: name,
+      name: name,
+      onChange: this.handleChange,
+      onFocus: () => this.handleFocusChange(true),
+      onBlur: () => this.handleFocusChange(false),
+      value: value,
+      className: classNames(styles.select, 'select'),
+      disabled: disabled,
+      required: required,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": ariaDescribedBy
+    }, multiple && {
+      multiple,
+      size
+    }), Object.keys(options).map(key => /*#__PURE__*/React.createElement("option", {
+      className: "option",
+      value: key,
+      key: `${name}_${key}`
+    }, options[key]))), /*#__PURE__*/React.createElement(Chevron, {
+      className: styles.chevron
+    }));
+  }
+}
+Select.defaultProps = {
+  'aria-invalid': false,
+  'aria-describedby': null,
+  className: '',
+  errorText: '',
+  isControlled: false,
+  placeholder: '',
+  label: '',
+  onChange: () => {},
+  options: {},
+  translateErrorText: true,
+  showErrorText: true,
+  size: null,
+  value: '',
+  disabled: false,
+  required: false,
+  multiple: false
+};
+export default Select;

package/Form/Select/spec.js

@@ -1,5 +1,36 @@
-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 React from'react';import{mount}from'enzyme';import Select from"./index";var inputProps={name:'test-name'};describe('<Select />',function(){// Simple tests for snapshots
-var tests={'should render select with no options':{},// eslint-disable-next-line extra-rules/no-single-line-objects
-'should render select with 2 options':{options:{DE:'Germany',US:'United states'}},// eslint-disable-next-line extra-rules/no-single-line-objects
-'should render select with 1 selected option':{options:{DE:'Germany',US:'United states'},value:'DE'}};Object.keys(tests).forEach(function(test){it(test,function(){var testFixtures=tests[test];// eslint-disable-next-line extra-rules/no-single-line-objects
-var wrapper=mount(React.createElement(Select,_extends({},inputProps,{},testFixtures)));expect(wrapper).toMatchSnapshot();});});});
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { mount } from 'enzyme';
+import Select from "./index";
+const inputProps = {
+  name: 'test-name'
+};
+describe('<Select />', () => {
+  // Simple tests for snapshots
+  const tests = {
+    'should render select with no options': {},
+    // eslint-disable-next-line extra-rules/no-single-line-objects
+    'should render select with 2 options': {
+      options: {
+        DE: 'Germany',
+        US: 'United states'
+      }
+    },
+    // eslint-disable-next-line extra-rules/no-single-line-objects
+    'should render select with 1 selected option': {
+      options: {
+        DE: 'Germany',
+        US: 'United states'
+      },
+      value: 'DE'
+    }
+  };
+  Object.keys(tests).forEach(test => {
+    it(test, () => {
+      const testFixtures = tests[test];
+      // eslint-disable-next-line extra-rules/no-single-line-objects
+      const wrapper = mount(/*#__PURE__*/React.createElement(Select, _extends({}, inputProps, testFixtures)));
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/Form/Select/style.js

@@ -1 +1,27 @@
-import{css}from'glamor';var select=css({appearance:'none',position:'relative',overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis',padding:'0 20px 0 0',width:'100%',margin:'24px 0 0 0',outline:0,fontSize:16,lineHeight:'19px',zIndex:10}).toString();var chevron=css({position:'absolute',top:'50%',right:0,transform:'translateY(-50%) rotateZ(-90deg)',fontSize:'1.3em !important',marginTop:-3}).toString();export default{select:select,chevron:chevron};
+import { css } from 'glamor';
+const select = css({
+  appearance: 'none',
+  position: 'relative',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  padding: '0 20px 0 0',
+  width: '100%',
+  margin: '24px 0 0 0',
+  outline: 0,
+  fontSize: 16,
+  lineHeight: '19px',
+  zIndex: 10
+}).toString();
+const chevron = css({
+  position: 'absolute',
+  top: '50%',
+  right: 0,
+  transform: 'translateY(-50%) rotateZ(-90deg)',
+  fontSize: '1.3em !important',
+  marginTop: -3
+}).toString();
+export default {
+  select,
+  chevron
+};