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

package/components/ProductCharacteristics/connector.js

@@ -1,12 +1,41 @@
-import{connect}from'react-redux';import{router}from'@shopgate/pwa-common/helpers/router';import isEqual from'lodash/isEqual';import{getProductVariants}from'@shopgate/pwa-common-commerce/product/selectors/product';/**
+import { connect } from 'react-redux';
+import { router } from '@shopgate/pwa-common/helpers/router';
+import isEqual from 'lodash/isEqual';
+import { getProductVariants } from '@shopgate/pwa-common-commerce/product/selectors/product';
+
+/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @param {Object} props The component props.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state,props){return{variants:getProductVariants(state,props)};};/**
+ */
+const mapStateToProps = (state, props) => ({
+  variants: getProductVariants(state, props)
+});
+
+/**
  * @return {Object}
- */var mapDispatchToProps=function mapDispatchToProps(){return{navigate:function navigate(productId){var route=router.getCurrentRoute();router.update(route.id,{productId:productId});}};};/**
+ */
+const mapDispatchToProps = () => ({
+  navigate: productId => {
+    const route = router.getCurrentRoute();
+    router.update(route.id, {
+      productId
+    });
+  }
+});
+
+/**
  * @param {Object} next The next component props.
  * @param {Object} prev The previous component props.
  * @returns {boolean}
- */var areStatePropsEqual=function areStatePropsEqual(next,prev){if(!prev.variants&&next.variants||!isEqual(prev.variants,next.variants)){return false;}return true;};export default connect(mapStateToProps,mapDispatchToProps,null,{areStatePropsEqual:areStatePropsEqual});
+ */
+const areStatePropsEqual = (next, prev) => {
+  if (!prev.variants && next.variants || !isEqual(prev.variants, next.variants)) {
+    return false;
+  }
+  return true;
+};
+export default connect(mapStateToProps, mapDispatchToProps, null, {
+  areStatePropsEqual
+});

package/components/ProductCharacteristics/context.js

@@ -1 +1,2 @@
-import React from'react';export default React.createContext();
+import React from 'react';
+export default /*#__PURE__*/React.createContext();

package/components/ProductCharacteristics/helpers/index.js

@@ -1,19 +1,48 @@
-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);}import isMatch from'lodash/isMatch';import appConfig from'@shopgate/pwa-common/helpers/config';var variantSelectionMode=appConfig.variantSelectionMode,_appConfig$product=appConfig.product,_appConfig$product2=_appConfig$product===void 0?{}:_appConfig$product,variantPreselect=_appConfig$product2.variantPreselect;var preselectVariant=variantPreselect||parseInt(variantSelectionMode,10)===1;/**
+import "core-js/modules/es.array.reduce.js";
+import isMatch from 'lodash/isMatch';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+const {
+  variantSelectionMode,
+  product: {
+    variantPreselect
+  } = {}
+} = appConfig;
+const preselectVariant = variantPreselect || parseInt(variantSelectionMode, 10) === 1;
+
+/**
  * Returns the index of a particular characteristic from a set of characteristics.
  * @param {Array} characteristics The characteristics of a product.
  * @param {number} characteristicId The id of the characteristic to find.
  * @return {number}
- */export function findSelectionIndex(characteristics,characteristicId){return characteristics.findIndex(function(_char){return _char.id===characteristicId;});}/**
+ */
+export function findSelectionIndex(characteristics, characteristicId) {
+  return characteristics.findIndex(char => char.id === characteristicId);
+}
+
+/**
  * Returns true if the characteristic at the given index is the next characteristic to be selected.
  * @param {Array} characteristics The characteristics of a product.
  * @param {number} index The index of the characteristic to check.
  * @return {boolean}
- */export function isCharacteristicEnabled(characteristics,index){if(index===0){return true;}return!!Object.values(characteristics)[index-1];}/**
+ */
+export function isCharacteristicEnabled(characteristics, index) {
+  if (index === 0) {
+    return true;
+  }
+  return !!Object.values(characteristics)[index - 1];
+}
+
+/**
  * Returns the selected value by characteristic ID.
  * @param {string} charId The characteristic ID.
  * @param {Object} characteristics The already selected characteristics.
  * @return {string|null}
- */export function getSelectedValue(charId,characteristics){return characteristics[charId]?characteristics[charId]:null;}/**
+ */
+export function getSelectedValue(charId, characteristics) {
+  return characteristics[charId] ? characteristics[charId] : null;
+}
+
+/**
  * Prepares the new state after a selection has been made.
  * @param {string} id The selection ID
  * @param {string} value The selection value.
@@ -21,28 +50,113 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * @param {Array} characteristics The characteristics of a product.
  * @param {Array} products All available products.
  * @return {Object}
- */export function prepareState(id,value,selections,characteristics,products){var updateValid=!!characteristics.find(function(_ref){var cId=_ref.id,values=_ref.values;if(cId!==id){return false;}return!!values.find(function(_ref2){var vId=_ref2.id;return vId===value;});});if(!updateValid){// Input parameters are invalid.
-return selections;}// Merge the just changed value into the previous selection.
-var currentSelection=_extends({},selections,_defineProperty({},id,value));/**
+ */
+export function prepareState(id, value, selections, characteristics, products) {
+  const updateValid = !!characteristics.find(({
+    id: cId,
+    values
+  }) => {
+    if (cId !== id) {
+      return false;
+    }
+    return !!values.find(({
+      id: vId
+    }) => vId === value);
+  });
+  if (!updateValid) {
+    // Input parameters are invalid.
+    return selections;
+  }
+
+  // Merge the just changed value into the previous selection.
+  const currentSelection = {
+    ...selections,
+    [id]: value
+  };
+
+  /**
    * Determine if there are products for the current user selection.
-   */var matches=products.filter(function(product){return isMatch(product.characteristics,currentSelection);});if(matches.length===1){// Product found for the current selection.
-return _extends({},matches[0].characteristics);}if(!selections[id]){// Changed value wasn't set before.
-return currentSelection;}// Find the current index.
-var index=findSelectionIndex(characteristics,id);/**
+   */
+  const matches = products.filter(product => isMatch(product.characteristics, currentSelection));
+  if (matches.length === 1) {
+    // Product found for the current selection.
+    return {
+      ...matches[0].characteristics
+    };
+  }
+  if (!selections[id]) {
+    // Changed value wasn't set before.
+    return currentSelection;
+  }
+
+  // Find the current index.
+  const index = findSelectionIndex(characteristics, id);
+
+  /**
    * When the given index is the same as the complete set
    * of characteristics then there is nothing to reset.
-   */if(index===characteristics.length-1){return currentSelection;}// Find the selections after the given index.
-var after=characteristics.slice(index+1);// Delete the found selections.
-after.forEach(function(item){delete currentSelection[item.id];});return currentSelection;}/**
+   */
+  if (index === characteristics.length - 1) {
+    return currentSelection;
+  }
+
+  // Find the selections after the given index.
+  const after = characteristics.slice(index + 1);
+
+  // Delete the found selections.
+  after.forEach(item => {
+    delete currentSelection[item.id];
+  });
+  return currentSelection;
+}
+/**
  * Preselect characteristics for variant
  * or pre-select the first available product
  * @param {string} [variantId=null] The selected variant
  * @param {{products: Object[], characteristics: Object[]}} [variants=null] All possible variants.
  * @return {Object}
- */export function selectCharacteristics(_ref3){var variantId=_ref3.variantId,_ref3$variants=_ref3.variants,variants=_ref3$variants===void 0?{}:_ref3$variants;if(!variants||!variants.products||!variants.products.length){return{};}if(variantId){var variant=variants.products.find(function(product){return product.id===variantId;})||{};return _extends({},variant.characteristics);}// If product has only 1 variant preselect no matter if "preselect" is chosen or not.
-if(variants.products.length===1){return _extends({},variants.products[0].characteristics);}// Pre-selection is off
-if(!preselectVariant){return{};}// Find the first selectable product by characteristics
-return variants.characteristics.reduce(function(acc,_char2){// Find the first char value with selectable products
-var firstVal=_char2.values.find(function(val){// eslint-disable-next-line extra-rules/no-single-line-objects
-var source=_extends({},acc,_defineProperty({},_char2.id,val.id));return variants.products.filter(function(p){return isMatch(p.characteristics,source);}).length>0;});if(!firstVal){return acc;}// eslint-disable-next-line extra-rules/no-single-line-objects
-return _extends({},acc,_defineProperty({},_char2.id,firstVal.id));},{});}
+ */
+export function selectCharacteristics({
+  variantId,
+  variants = {}
+}) {
+  if (!variants || !variants.products || !variants.products.length) {
+    return {};
+  }
+  if (variantId) {
+    const variant = variants.products.find(product => product.id === variantId) || {};
+    return {
+      ...variant.characteristics
+    };
+  }
+  // If product has only 1 variant preselect no matter if "preselect" is chosen or not.
+  if (variants.products.length === 1) {
+    return {
+      ...variants.products[0].characteristics
+    };
+  }
+  // Pre-selection is off
+  if (!preselectVariant) {
+    return {};
+  }
+  // Find the first selectable product by characteristics
+  return variants.characteristics.reduce((acc, char) => {
+    // Find the first char value with selectable products
+    const firstVal = char.values.find(val => {
+      // eslint-disable-next-line extra-rules/no-single-line-objects
+      const source = {
+        ...acc,
+        [char.id]: val.id
+      };
+      return variants.products.filter(p => isMatch(p.characteristics, source)).length > 0;
+    });
+    if (!firstVal) {
+      return acc;
+    }
+    // eslint-disable-next-line extra-rules/no-single-line-objects
+    return {
+      ...acc,
+      [char.id]: firstVal.id
+    };
+  }, {});
+}

package/components/ProductCharacteristics/index.js

@@ -1,38 +1,273 @@
-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 isMatch from'lodash/isMatch';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{responsiveCondition}from'@shopgate/engage/styles';import connect from"./connector";import VariantsContext from"./context";import{isCharacteristicEnabled,getSelectedValue,prepareState,selectCharacteristics}from"./helpers";/**
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import isMatch from 'lodash/isMatch';
+import { broadcastLiveMessage } from '@shopgate/engage/a11y';
+import { responsiveCondition } from '@shopgate/engage/styles';
+import connect from "./connector";
+import VariantsContext from "./context";
+import { isCharacteristicEnabled, getSelectedValue, prepareState, selectCharacteristics } from "./helpers";
+
+/**
  * The ProductCharacteristics component.
  * @deprecated Please use the component via
  *            `import { ProductCharacteristics } from '@shopgate/engage/product'`
- */var ProductCharacteristics=/*#__PURE__*/function(_Component){function ProductCharacteristics(_props){var _this2;_classCallCheck(this,ProductCharacteristics);_this2=_callSuper(this,ProductCharacteristics,[_props]);/**
-   * Sets the refs to the characteristics selects.
-   * @param {Object} props The props to check against.
-   */_defineProperty(_this2,"setRefs",function(props){var variants=props.variants;if(variants){variants.characteristics.forEach(function(_char){_this2.refsStore[_char.id]=React.createRef();});}});/**
-   * Checks if all selections have been made.
-   * @return {boolean}
-   */_defineProperty(_this2,"checkSelection",function(){var characteristics=_this2.state.characteristics;var _this2$props=_this2.props,variants=_this2$props.variants,variantId=_this2$props.variantId;if(!variants){return true;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});var selected=!!(filteredValues.length===variants.characteristics.length&&variantId);if(!selected){var firstUnselected=_this2.findUnselectedCharacteristic();if(firstUnselected){var ref=_this2.refsStore[firstUnselected.id];// Focus the item for screen readers and broadcast a related live message.
-ref.current.focus();var option=ref.current.innerText;broadcastLiveMessage('product.pick_option_first',{params:{option:option}});if(responsiveCondition('>xs',{webOnly:true})){ref.current.scrollIntoView({behavior:'smooth',block:'center'});}else{ref.current.scrollIntoView({behavior:'smooth'});}_this2.setState({highlight:firstUnselected.id});}}return selected;});_defineProperty(_this2,"checkSelectedCharacteristics",function(){var characteristics=_this2.state.characteristics;var _this2$props2=_this2.props,variantId=_this2$props2.variantId,variants=_this2$props2.variants,finishTimeout=_this2$props2.finishTimeout;if(!variants){return;}var filteredValues=Object.keys(characteristics).filter(function(key){return!!characteristics[key];});if(filteredValues.length!==variants.characteristics.length){return;}var products=variants.products.filter(function(product){return isMatch(product.characteristics,characteristics);});if(!products.length){return;}if(products[0].id===variantId){return;}setTimeout(function(){_this2.props.navigate(products[0].id);},finishTimeout);});/**
-   * Stores a selected characteristic into the local state.
-   * @param {Object} selection The selected item.
-   */_defineProperty(_this2,"handleSelection",function(selection){var _this2$props3=_this2.props,variants=_this2$props3.variants,setCharacteristics=_this2$props3.setCharacteristics;var id=selection.id,value=selection.value;_this2.setState(function(_ref){var characteristics=_ref.characteristics;var state=prepareState(id,value,characteristics,variants.characteristics,variants.products);setCharacteristics(state);return{characteristics:_extends({},state),highlight:null};},_this2.checkSelectedCharacteristics);});/**
-   * @param {Object} selections The selections stored in the state.
-   * @param {string} charId The current characteristic ID.
-   * @param {Array} values The characteristic values.
-   * @param {number} charIndex The characteristic index.
-   * @param {string|null} selectedValue selectedValue
-   * @return {Array}
-   */_defineProperty(_this2,"buildValues",function(selections,charId,values,charIndex,selectedValue){// If this is the first characteristic then all values are selectable.
-if(charIndex===0){return values.map(function(value){return _extends({},value,{selectable:true,selected:selectedValue===value.id});});}var variants=_this2.props.variants;var subset={};Object.keys(selections).forEach(function(item,index){if(index<charIndex){subset[item]=selections[item];}});// Filter products that match or partially match the current characteristic selection.
-var products=variants.products.filter(function(_ref2){var characteristics=_ref2.characteristics;return isMatch(characteristics,subset);});// Check if any of the values are present inside any of the matching products.
-return values.map(function(value){var selectable=products.some(function(_ref3){var characteristics=_ref3.characteristics;return isMatch(characteristics,_defineProperty({},charId,value.id));});return _extends({},value,{selectable:selectable,selected:selectedValue===value.id});});});/**
-   * Resets the highlight state
-   */_defineProperty(_this2,"resetHighlight",function(){_this2.setState({highlight:null});});_this2.refsStore={};_this2.state={highlight:null,characteristics:selectCharacteristics(_props)};_this2.setRefs(_props);_props.conditioner.addConditioner('product-variants',_this2.checkSelection);return _this2;}/** @inheritDoc */_inherits(ProductCharacteristics,_Component);return _createClass(ProductCharacteristics,[{key:"componentDidMount",value:function componentDidMount(){this.checkSelectedCharacteristics();}/**
+ */
+class ProductCharacteristics extends Component {
+  /**
+   * @param {Object} props The component props.
+   */
+  constructor(_props) {
+    super(_props);
+    /**
+     * Sets the refs to the characteristics selects.
+     * @param {Object} props The props to check against.
+     */
+    this.setRefs = props => {
+      const {
+        variants
+      } = props;
+      if (variants) {
+        variants.characteristics.forEach(char => {
+          this.refsStore[char.id] = /*#__PURE__*/React.createRef();
+        });
+      }
+    };
+    /**
+     * Checks if all selections have been made.
+     * @return {boolean}
+     */
+    this.checkSelection = () => {
+      const {
+        characteristics
+      } = this.state;
+      const {
+        variants,
+        variantId
+      } = this.props;
+      if (!variants) {
+        return true;
+      }
+      const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
+      const selected = !!(filteredValues.length === variants.characteristics.length && variantId);
+      if (!selected) {
+        const firstUnselected = this.findUnselectedCharacteristic();
+        if (firstUnselected) {
+          const ref = this.refsStore[firstUnselected.id];
+
+          // Focus the item for screen readers and broadcast a related live message.
+          ref.current.focus();
+          const option = ref.current.innerText;
+          broadcastLiveMessage('product.pick_option_first', {
+            params: {
+              option
+            }
+          });
+          if (responsiveCondition('>xs', {
+            webOnly: true
+          })) {
+            ref.current.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center'
+            });
+          } else {
+            ref.current.scrollIntoView({
+              behavior: 'smooth'
+            });
+          }
+          this.setState({
+            highlight: firstUnselected.id
+          });
+        }
+      }
+      return selected;
+    };
+    this.checkSelectedCharacteristics = () => {
+      const {
+        characteristics
+      } = this.state;
+      const {
+        variantId,
+        variants,
+        finishTimeout
+      } = this.props;
+      if (!variants) {
+        return;
+      }
+      const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
+      if (filteredValues.length !== variants.characteristics.length) {
+        return;
+      }
+      const products = variants.products.filter(product => isMatch(product.characteristics, characteristics));
+      if (!products.length) {
+        return;
+      }
+      if (products[0].id === variantId) {
+        return;
+      }
+      setTimeout(() => {
+        this.props.navigate(products[0].id);
+      }, finishTimeout);
+    };
+    /**
+     * Stores a selected characteristic into the local state.
+     * @param {Object} selection The selected item.
+     */
+    this.handleSelection = selection => {
+      const {
+        variants,
+        setCharacteristics
+      } = this.props;
+      const {
+        id,
+        value
+      } = selection;
+      this.setState(({
+        characteristics
+      }) => {
+        const state = prepareState(id, value, characteristics, variants.characteristics, variants.products);
+        setCharacteristics(state);
+        return {
+          characteristics: {
+            ...state
+          },
+          highlight: null
+        };
+      }, this.checkSelectedCharacteristics);
+    };
+    /**
+     * @param {Object} selections The selections stored in the state.
+     * @param {string} charId The current characteristic ID.
+     * @param {Array} values The characteristic values.
+     * @param {number} charIndex The characteristic index.
+     * @param {string|null} selectedValue selectedValue
+     * @return {Array}
+     */
+    this.buildValues = (selections, charId, values, charIndex, selectedValue) => {
+      // If this is the first characteristic then all values are selectable.
+      if (charIndex === 0) {
+        return values.map(value => ({
+          ...value,
+          selectable: true,
+          selected: selectedValue === value.id
+        }));
+      }
+      const {
+        variants
+      } = this.props;
+      const subset = {};
+      Object.keys(selections).forEach((item, index) => {
+        if (index < charIndex) {
+          subset[item] = selections[item];
+        }
+      });
+
+      // Filter products that match or partially match the current characteristic selection.
+      const products = variants.products.filter(({
+        characteristics
+      }) => isMatch(characteristics, subset));
+
+      // Check if any of the values are present inside any of the matching products.
+      return values.map(value => {
+        const selectable = products.some(({
+          characteristics
+        }) => isMatch(characteristics, {
+          [charId]: value.id
+        }));
+        return {
+          ...value,
+          selectable,
+          selected: selectedValue === value.id
+        };
+      });
+    };
+    /**
+     * Resets the highlight state
+     */
+    this.resetHighlight = () => {
+      this.setState({
+        highlight: null
+      });
+    };
+    this.refsStore = {};
+    this.state = {
+      highlight: null,
+      characteristics: selectCharacteristics(_props)
+    };
+    this.setRefs(_props);
+    _props.conditioner.addConditioner('product-variants', this.checkSelection);
+  }
+
+  /** @inheritDoc */
+  componentDidMount() {
+    this.checkSelectedCharacteristics();
+  }
+
+  /**
    * @param {Object} nextProps The next component props.
-   */},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(!this.props.variants&&nextProps.variants){// Initialize refs and characteristics when the variants prop was updated with a valid value.
-this.setRefs(nextProps);this.setState({characteristics:selectCharacteristics(nextProps)},this.checkSelectedCharacteristics);}}},{key:"findUnselectedCharacteristic",value:/**
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!this.props.variants && nextProps.variants) {
+      // Initialize refs and characteristics when the variants prop was updated with a valid value.
+      this.setRefs(nextProps);
+      this.setState({
+        characteristics: selectCharacteristics(nextProps)
+      }, this.checkSelectedCharacteristics);
+    }
+  }
+  /**
    * Finds the first unselected characteristic.
    * @return {Object|null}
-   */function findUnselectedCharacteristic(){var characteristics=this.state.characteristics;var unselected=this.props.variants.characteristics.filter(function(_char2){return!characteristics.hasOwnProperty(_char2.id);});if(unselected.length){return unselected[0];}return null;}/**
+   */
+  findUnselectedCharacteristic() {
+    const {
+      characteristics
+    } = this.state;
+    const unselected = this.props.variants.characteristics.filter(char => !characteristics.hasOwnProperty(char.id));
+    if (unselected.length) {
+      return unselected[0];
+    }
+    return null;
+  }
+
+  /**
    * @return {JSX}
-   */},{key:"render",value:function render(){var _this3=this;var characteristics=this.state.characteristics;var variants=this.props.variants;if(!variants){return null;}return React.createElement(VariantsContext.Provider,{value:this.state},variants.characteristics.map(function(_char3,index){var disabled=!isCharacteristicEnabled(characteristics,index);var selected=getSelectedValue(_char3.id,characteristics);var values=_this3.buildValues(characteristics,_char3.id,_char3.values,index,selected);return _this3.props.render({charRef:_this3.refsStore[_char3.id],disabled:disabled,highlight:_this3.state.highlight===_char3.id,id:_char3.id,key:_char3.id,label:_char3.label,swatch:!!_char3.swatch,// BETA
-select:_this3.handleSelection,selected:selected,values:values,resetHighlight:_this3.resetHighlight});}));}}]);}(Component);_defineProperty(ProductCharacteristics,"defaultProps",{finishTimeout:0,variantId:null,variants:null/**
-   * @param {Object} props The component props.
-   */});export default connect(ProductCharacteristics);
+   */
+  render() {
+    const {
+      characteristics
+    } = this.state;
+    const {
+      variants
+    } = this.props;
+    if (!variants) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(VariantsContext.Provider, {
+      value: this.state
+    }, variants.characteristics.map((char, index) => {
+      const disabled = !isCharacteristicEnabled(characteristics, index);
+      const selected = getSelectedValue(char.id, characteristics);
+      const values = this.buildValues(characteristics, char.id, char.values, index, selected);
+      return this.props.render({
+        charRef: this.refsStore[char.id],
+        disabled,
+        highlight: this.state.highlight === char.id,
+        id: char.id,
+        key: char.id,
+        label: char.label,
+        swatch: !!char.swatch,
+        // BETA
+        select: this.handleSelection,
+        selected,
+        values,
+        resetHighlight: this.resetHighlight
+      });
+    }));
+  }
+}
+ProductCharacteristics.defaultProps = {
+  finishTimeout: 0,
+  variantId: null,
+  variants: null
+};
+export default connect(ProductCharacteristics);

package/components/RangeSlider/components/Handle/index.js

@@ -1,4 +1,8 @@
-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 range slider handle component.
  * @param {Object} props The component properties
  * @param {boolean} props.active Whether this handle is currently touched or was recently touched.
@@ -6,4 +10,23 @@ import React from'react';import PropTypes from'prop-types';import styles from"./
  * @param {Function} props.onTouchStart The touch start event callback.
  * @param {Object} props.classNames (Optional) An additional style classes for the handle.
  * @returns {JSX}
- */var RangeSliderHandle=function RangeSliderHandle(_ref){var active=_ref.active,index=_ref.index,_onTouchStart=_ref.onTouchStart,classNames=_ref.classNames;return React.createElement("div",{className:"".concat(classNames.handleOuter||''," ").concat(styles),style:{zIndex:Number(active)||0},onTouchStart:function onTouchStart(event){return _onTouchStart(event,index);}},React.createElement("div",{className:classNames.handleInner||''}));};RangeSliderHandle.defaultProps={active:false,classNames:{}};export default RangeSliderHandle;
+ */
+const RangeSliderHandle = ({
+  active,
+  index,
+  onTouchStart,
+  classNames
+}) => /*#__PURE__*/React.createElement("div", {
+  className: `${classNames.handleOuter || ''} ${styles}`,
+  style: {
+    zIndex: Number(active) || 0
+  },
+  onTouchStart: event => onTouchStart(event, index)
+}, /*#__PURE__*/React.createElement("div", {
+  className: classNames.handleInner || ''
+}));
+RangeSliderHandle.defaultProps = {
+  active: false,
+  classNames: {}
+};
+export default RangeSliderHandle;

package/components/RangeSlider/components/Handle/style.js

@@ -1 +1,14 @@
-import{css}from'glamor';export default css({top:'50%',position:'absolute',':first-child':{left:0,transform:'translate(-50%, -50%)'},':last-child':{left:'auto',right:0,transform:'translate(50%, -50%)'}});
+import { css } from 'glamor';
+export default css({
+  top: '50%',
+  position: 'absolute',
+  ':first-child': {
+    left: 0,
+    transform: 'translate(-50%, -50%)'
+  },
+  ':last-child': {
+    left: 'auto',
+    right: 0,
+    transform: 'translate(50%, -50%)'
+  }
+});