instantsearch.js 4.55.0 → 4.56.1

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.55.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
+/*! InstantSearch.js 4.56.1 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -641,6 +641,8 @@
     highlightPreTag: '<mark>',
     highlightPostTag: '</mark>'
   };
+
+  // @MAJOR: in the future, this should only escape, not replace
   function replaceTagsAndEscape(value) {
     return escape$1(value).replace(new RegExp(TAG_PLACEHOLDER.highlightPreTag, 'g'), TAG_REPLACEMENT.highlightPreTag).replace(new RegExp(TAG_PLACEHOLDER.highlightPostTag, 'g'), TAG_REPLACEMENT.highlightPostTag);
   }
@@ -1202,6 +1204,7 @@
   }
 
   function getHighlightedParts(highlightedValue) {
+    // @MAJOR: this should use TAG_PLACEHOLDER
     var highlightPostTag = TAG_REPLACEMENT.highlightPostTag,
       highlightPreTag = TAG_REPLACEMENT.highlightPreTag;
     var splitByPreTag = highlightedValue.split(highlightPreTag);
@@ -1446,6 +1449,18 @@
     return isMiddleClick || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
   }
 
+  /**
+   * Recurse over all child indices
+   */
+  function walkIndex(indexWidget, callback) {
+    callback(indexWidget);
+    indexWidget.getWidgets().forEach(function (widget) {
+      if (isIndexWidget(widget)) {
+        walkIndex(widget, callback);
+      }
+    });
+  }
+
   function uniq(array) {
     return array.filter(function (value, index, self) {
       return self.indexOf(value) === index;
@@ -1615,13 +1630,14 @@
   }
   function createRenderArgs(instantSearchInstance, parent) {
     var results = parent.getResults();
+    var helper = parent.getHelper();
     return {
-      helper: parent.getHelper(),
+      helper: helper,
       parent: parent,
       instantSearchInstance: instantSearchInstance,
       results: results,
       scopedResults: parent.getScopedResults(),
-      state: results._state,
+      state: results ? results._state : helper.state,
       renderState: instantSearchInstance.renderState,
       templatesConfig: instantSearchInstance.templatesConfig,
       createURL: parent.createURL,
@@ -3063,6 +3079,7 @@
             });
             isFirstPage = state.page === undefined || getFirstReceivedPage(state, cachedHits) === 0;
           } else {
+            var _results$disjunctiveF, _results$facets, _results$hierarchical;
             var _state$page3 = state.page,
               _page = _state$page3 === void 0 ? 0 : _state$page3;
             if (escapeHTML && results.hits.length > 0) {
@@ -3073,7 +3090,21 @@
             var transformedHits = transformItems(hitsWithAbsolutePositionAndQueryID, {
               results: results
             });
-            if (cachedHits[_page] === undefined && !results.__isArtificial && instantSearchInstance.status === 'idle') {
+
+            /*
+              With dynamic widgets, facets are not included in the state before their relevant widgets are mounted. Until then, we need to bail out of writing this incomplete state representation in cache.
+            */
+            var hasDynamicWidgets = false;
+            walkIndex(instantSearchInstance.mainIndex, function (indexWidget) {
+              if (!hasDynamicWidgets && indexWidget.getWidgets().some(function (_ref7) {
+                var $$type = _ref7.$$type;
+                return $$type === 'ais.dynamicWidgets';
+              })) {
+                hasDynamicWidgets = true;
+              }
+            });
+            var hasNoFacets = !((_results$disjunctiveF = results.disjunctiveFacets) !== null && _results$disjunctiveF !== void 0 && _results$disjunctiveF.length) && !((_results$facets = results.facets) !== null && _results$facets !== void 0 && _results$facets.length) && !((_results$hierarchical = results.hierarchicalFacets) !== null && _results$hierarchical !== void 0 && _results$hierarchical.length);
+            if (cachedHits[_page] === undefined && !results.__isArtificial && instantSearchInstance.status === 'idle' && !(hasDynamicWidgets && hasNoFacets)) {
               cachedHits[_page] = transformedHits;
               cache.write({
                 state: normalizeState(state),
@@ -3098,8 +3129,8 @@
             widgetParams: widgetParams
           };
         },
-        dispose: function dispose(_ref7) {
-          var state = _ref7.state;
+        dispose: function dispose(_ref8) {
+          var state = _ref8.state;
           unmountFn();
           var stateWithoutPage = state.setQueryParameter('page', undefined);
           if (!escapeHTML) {
@@ -3109,8 +3140,8 @@
             return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, key, undefined));
           }, {}));
         },
-        getWidgetUiState: function getWidgetUiState(uiState, _ref8) {
-          var searchParameters = _ref8.searchParameters;
+        getWidgetUiState: function getWidgetUiState(uiState, _ref9) {
+          var searchParameters = _ref9.searchParameters;
           var page = searchParameters.page || 0;
           if (!page) {
             // return without adding `page` to uiState
@@ -3123,8 +3154,8 @@
             page: page + 1
           });
         },
-        getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref9) {
-          var uiState = _ref9.uiState;
+        getWidgetSearchParameters: function getWidgetSearchParameters(searchParameters, _ref10) {
+          var uiState = _ref10.uiState;
           var widgetSearchParameters = searchParameters;
           if (escapeHTML) {
             widgetSearchParameters = searchParameters.setQueryParameters(TAG_PLACEHOLDER);
@@ -9409,7 +9440,7 @@
 
   var requestBuilder_1 = requestBuilder;
 
-  var version = '3.11.3';
+  var version = '3.13.0';
 
   var escapeFacetValue$4 = escapeFacetValue_1.escapeFacetValue;
 
@@ -10675,7 +10706,9 @@
 
     var derivedQueries = this.derivedHelpers.map(function(derivedHelper) {
       var derivedState = derivedHelper.getModifiedState(state);
-      var derivedStateQueries = requestBuilder_1._getQueries(derivedState.index, derivedState);
+      var derivedStateQueries = derivedState.index
+        ? requestBuilder_1._getQueries(derivedState.index, derivedState)
+        : [];
 
       states.push({
         state: derivedState,
@@ -10692,10 +10725,16 @@
     });
 
     var queries = Array.prototype.concat.apply(mainQueries, derivedQueries);
-    var queryId = this._queryId++;
 
+    var queryId = this._queryId++;
     this._currentNbQueries++;
 
+    if (!queries.length) {
+      return Promise.resolve({results: []}).then(
+        this._dispatchAlgoliaResponse.bind(this, states, queryId)
+      );
+    }
+
     try {
       this.client.search(queries)
         .then(this._dispatchAlgoliaResponse.bind(this, states, queryId))
@@ -10740,6 +10779,14 @@
       var helper = s.helper;
       var specificResults = results.splice(0, queriesCount);
 
+      if (!state.index) {
+        helper.emit('result', {
+          results: null,
+          state: state
+        });
+        return;
+      }
+
       var formattedResponse = helper.lastResults = new SearchResults_1(state, specificResults);
 
       helper.emit('result', {
@@ -13062,6 +13109,48 @@
     }
   };
   var BrowserHistory = /*#__PURE__*/function () {
+    /**
+     * Transforms a UI state into a title for the page.
+     */
+
+    /**
+     * Time in milliseconds before performing a write in the history.
+     * It prevents from adding too many entries in the history and
+     * makes the back button more usable.
+     *
+     * @default 400
+     */
+
+    /**
+     * Creates a full URL based on the route state.
+     * The storage adaptor maps all syncable keys to the query string of the URL.
+     */
+
+    /**
+     * Parses the URL into a route state.
+     * It should be symmetrical to `createURL`.
+     */
+
+    /**
+     * Returns the location to store in the history.
+     * @default () => window.location
+     */
+
+    /**
+     * Indicates if last action was back/forward in the browser.
+     */
+
+    /**
+     * Indicates whether the history router is disposed or not.
+     */
+
+    /**
+     * Indicates the window.history.length before the last call to
+     * window.history.pushState (called in `write`).
+     * It allows to determine if a `pushState` has been triggered elsewhere,
+     * and thus to prevent the `write` method from calling `pushState`.
+     */
+
     /**
      * Initializes a new storage provider that syncs the search state to the URL
      * using web APIs (`window.location.pushState` and `onpopstate` event).
@@ -13085,6 +13174,7 @@
       _defineProperty(this, "parseURL", void 0);
       _defineProperty(this, "getLocation", void 0);
       _defineProperty(this, "writeTimer", void 0);
+      _defineProperty(this, "_onPopState", void 0);
       _defineProperty(this, "inPopState", false);
       _defineProperty(this, "isDisposed", false);
       _defineProperty(this, "latestAcknowledgedHistory", 0);
@@ -13190,11 +13280,21 @@
     }, {
       key: "createURL",
       value: function createURL(routeState) {
-        return this._createURL({
+        var url = this._createURL({
           qsModule: lib$1,
           routeState: routeState,
           location: this.getLocation()
         });
+        {
+          try {
+            // We just want to check if the URL is valid.
+            // eslint-disable-next-line no-new
+            new URL(url);
+          } catch (e) {
+             _warning(false, "The URL returned by the `createURL` function is invalid.\nPlease make sure it returns an absolute URL to avoid issues, e.g: `https://algolia.com/search?query=iphone`.") ;
+          }
+        }
+        return url;
       }
 
       /**
@@ -13715,7 +13815,7 @@
           // does not have access to lastResults, which it used to in pre-federated
           // search behavior.
           helper.lastResults = results;
-          lastValidSearchParameters = results._state;
+          lastValidSearchParameters = results === null || results === void 0 ? void 0 : results._state;
         });
 
         // We compute the render state before calling `init` in a separate loop
@@ -13771,16 +13871,16 @@
       render: function render(_ref5) {
         var _this4 = this;
         var instantSearchInstance = _ref5.instantSearchInstance;
-        if (!this.getResults()) {
-          return;
-        }
-
         // we can't attach a listener to the error event of search, as the error
         // then would no longer be thrown for global handlers.
-        if (instantSearchInstance.status === 'error' && !instantSearchInstance.mainHelper.hasPendingRequests()) {
+        if (instantSearchInstance.status === 'error' && !instantSearchInstance.mainHelper.hasPendingRequests() && lastValidSearchParameters) {
           helper.setState(lastValidSearchParameters);
         }
-        localWidgets.forEach(function (widget) {
+
+        // We only render index widgets if there are no results.
+        // This makes sure `render` is never called with `results` being `null`.
+        var widgetsToRender = this.getResults() ? localWidgets : localWidgets.filter(isIndexWidget);
+        widgetsToRender.forEach(function (widget) {
           if (widget.getRenderState) {
             var renderState = widget.getRenderState(instantSearchInstance.renderState[_this4.getIndexId()] || {}, createRenderArgs(instantSearchInstance, _this4));
             storeRenderState({
@@ -13790,7 +13890,7 @@
             });
           }
         });
-        localWidgets.forEach(function (widget) {
+        widgetsToRender.forEach(function (widget) {
           // At this point, all the variables used below are set. Both `helper`
           // and `derivedHelper` have been created at the `init` step. The attribute
           // `lastResults` might be `null` though. It's possible that a stalled render
@@ -13932,7 +14032,7 @@
     };
   }
 
-  var version$1 = '4.55.0';
+  var version$1 = '4.56.1';
 
   var withUsage$r = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -14011,7 +14111,7 @@
       }));
       _this.setMaxListeners(100);
       var _options$indexName = options.indexName,
-        indexName = _options$indexName === void 0 ? null : _options$indexName,
+        indexName = _options$indexName === void 0 ? '' : _options$indexName,
         numberLocale = options.numberLocale,
         _options$initialUiSta = options.initialUiState,
         initialUiState = _options$initialUiSta === void 0 ? {} : _options$initialUiSta,
@@ -14028,9 +14128,6 @@
         insightsClient = _options$insightsClie === void 0 ? null : _options$insightsClie,
         _options$onStateChang = options.onStateChange,
         onStateChange = _options$onStateChang === void 0 ? null : _options$onStateChang;
-      if (indexName === null) {
-        throw new Error(withUsage$r('The `indexName` option is required.'));
-      }
       if (searchClient === null) {
         throw new Error(withUsage$r('The `searchClient` option is required.'));
       }
@@ -14272,6 +14369,7 @@
         mainHelper.search = function () {
           _this3.status = 'loading';
           _this3.scheduleRender(false);
+           _warning(Boolean(_this3.indexName) || _this3.mainIndex.getWidgets().some(isIndexWidget), 'No indexName provided, nor an explicit index widget in the widgets tree. This is required to be able to display results.') ;
 
           // This solution allows us to keep the exact same API for the users but
           // under the hood, we have a different implementation. It should be
@@ -16134,10 +16232,10 @@
       rootTagName: "a",
       rootProps: {
         className: cssClasses.link,
-        href: createURL(undefined),
+        href: createURL(null),
         onClick: function onClick(event) {
           event.preventDefault();
-          refine(undefined);
+          refine(null);
         }
       }
     }))), items.map(function (item, idx) {
@@ -17264,49 +17362,36 @@
   var RefinementList$1 = /*#__PURE__*/function (_Component) {
     _inherits(RefinementList, _Component);
     var _super = _createSuper(RefinementList);
-    function RefinementList(props) {
+    function RefinementList() {
       var _this;
       _classCallCheck(this, RefinementList);
-      _this = _super.call(this, props);
-      _defineProperty(_assertThisInitialized(_this), "searchBox", y());
-      _this.handleItemClick = _this.handleItemClick.bind(_assertThisInitialized(_this));
-      return _this;
-    }
-    _createClass(RefinementList, [{
-      key: "shouldComponentUpdate",
-      value: function shouldComponentUpdate(nextProps) {
-        var areFacetValuesDifferent = !isEqual(this.props.facetValues, nextProps.facetValues);
-        return areFacetValuesDifferent;
-      }
-    }, {
-      key: "refine",
-      value: function refine(facetValueToRefine) {
-        this.props.toggleRefinement(facetValueToRefine);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
       }
-    }, {
-      key: "_generateFacetItem",
-      value: function _generateFacetItem(facetValue) {
+      _this = _super.call.apply(_super, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "searchBox", y());
+      _defineProperty(_assertThisInitialized(_this), "_generateFacetItem", function (facetValue) {
         var subItems;
         if (isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) {
-          var _this$props$cssClasse = this.props.cssClasses,
+          var _this$props$cssClasse = _this.props.cssClasses,
             root = _this$props$cssClasse.root,
             cssClasses = _objectWithoutProperties(_this$props$cssClasse, _excluded$k);
-          subItems = h(RefinementList, _extends({}, this.props, {
+          subItems = h(RefinementList, _extends({}, _this.props, {
             // We want to keep `root` required for external usage but not for the
             // sub items.
             cssClasses: cssClasses,
-            depth: this.props.depth + 1,
+            depth: _this.props.depth + 1,
             facetValues: facetValue.data,
             showMore: false,
-            className: this.props.cssClasses.childList
+            className: _this.props.cssClasses.childList
           }));
         }
-        var url = this.props.createURL(facetValue.value);
+        var url = _this.props.createURL(facetValue.value);
         var templateData = _objectSpread2(_objectSpread2({}, facetValue), {}, {
           url: url,
-          attribute: this.props.attribute,
-          cssClasses: this.props.cssClasses,
-          isFromSearch: this.props.isFromSearch
+          attribute: _this.props.attribute,
+          cssClasses: _this.props.cssClasses,
+          isFromSearch: _this.props.isFromSearch
         });
         var key = facetValue.value;
         if (facetValue.isRefined !== undefined) {
@@ -17315,38 +17400,20 @@
         if (facetValue.count !== undefined) {
           key += "/".concat(facetValue.count);
         }
-        var refinementListItemClassName = cx(this.props.cssClasses.item, facetValue.isRefined && this.props.cssClasses.selectedItem, !facetValue.count && this.props.cssClasses.disabledItem, Boolean(isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) && this.props.cssClasses.parentItem);
+        var refinementListItemClassName = cx(_this.props.cssClasses.item, facetValue.isRefined && _this.props.cssClasses.selectedItem, !facetValue.count && _this.props.cssClasses.disabledItem, Boolean(isHierarchicalMenuItem(facetValue) && Array.isArray(facetValue.data) && facetValue.data.length > 0) && _this.props.cssClasses.parentItem);
         return h(RefinementListItem, {
           templateKey: "item",
           key: key,
           facetValueToRefine: facetValue.value,
-          handleClick: this.handleItemClick,
+          handleClick: _this.handleItemClick,
           isRefined: facetValue.isRefined,
           className: refinementListItemClassName,
           subItems: subItems,
           templateData: templateData,
-          templateProps: this.props.templateProps
+          templateProps: _this.props.templateProps
         });
-      }
-
-      // Click events on DOM tree like LABEL > INPUT will result in two click events
-      // instead of one.
-      // No matter the framework, see https://www.google.com/search?q=click+label+twice
-      //
-      // Thus making it hard to distinguish activation from deactivation because both click events
-      // are very close. Debounce is a solution but hacky.
-      //
-      // So the code here checks if the click was done on or in a LABEL. If this LABEL
-      // has a checkbox inside, we ignore the first click event because we will get another one.
-      //
-      // We also check if the click was done inside a link and then e.preventDefault() because we already
-      // handle the url
-      //
-      // Finally, we always stop propagation of the event to avoid multiple levels RefinementLists to fail: click
-      // on child would click on parent also
-    }, {
-      key: "handleItemClick",
-      value: function handleItemClick(_ref) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleItemClick", function (_ref) {
         var facetValueToRefine = _ref.facetValueToRefine,
           isRefined = _ref.isRefined,
           originalEvent = _ref.originalEvent;
@@ -17363,7 +17430,7 @@
           return;
         }
         if (originalEvent.target.tagName === 'INPUT') {
-          this.refine(facetValueToRefine);
+          _this.refine(facetValueToRefine);
           return;
         }
         var parent = originalEvent.target;
@@ -17377,7 +17444,20 @@
           parent = parent.parentNode;
         }
         originalEvent.stopPropagation();
-        this.refine(facetValueToRefine);
+        _this.refine(facetValueToRefine);
+      });
+      return _this;
+    }
+    _createClass(RefinementList, [{
+      key: "shouldComponentUpdate",
+      value: function shouldComponentUpdate(nextProps) {
+        var areFacetValuesDifferent = !isEqual(this.props.facetValues, nextProps.facetValues);
+        return areFacetValuesDifferent;
+      }
+    }, {
+      key: "refine",
+      value: function refine(facetValueToRefine) {
+        this.props.toggleRefinement(facetValueToRefine);
       }
     }, {
       key: "componentWillReceiveProps",
@@ -17693,6 +17773,10 @@
           onClick: function onClick(event) {
             handleInsightsClick(event);
             sendEvent('click:internal', hit, 'Hit Clicked');
+          },
+          onAuxClick: function onAuxClick(event) {
+            handleInsightsClick(event);
+            sendEvent('click:internal', hit, 'Hit Clicked');
           }
         },
         key: hit.objectID,
@@ -17835,7 +17919,9 @@
       }, h(Selector, {
         cssClasses: cssClasses,
         currentValue: currentValue,
-        options: items,
+        options: items
+        // @ts-expect-error: the refine function expects a number, but setValue will call it with a string. We don't want to change the type of the refine function because it's part of the connector API.
+        ,
         setValue: refine
       })), containerNode);
     };
@@ -17923,6 +18009,10 @@
           onClick: function onClick(event) {
             handleInsightsClick(event);
             sendEvent('click:internal', hit, 'Hit Clicked');
+          },
+          onAuxClick: function onAuxClick(event) {
+            handleInsightsClick(event);
+            sendEvent('click:internal', hit, 'Hit Clicked');
           }
         },
         key: hit.objectID,
@@ -19194,10 +19284,17 @@
     });
   };
 
+  // Strips leading `0` from a positive number value
+  function stripLeadingZeroFromInput(value) {
+    return value.replace(/^(0+)\d/, function (part) {
+      return Number(part).toString();
+    });
+  }
   var RangeInput = /*#__PURE__*/function (_Component) {
     _inherits(RangeInput, _Component);
     var _super = _createSuper(RangeInput);
     function RangeInput() {
+      var _this$props$values$mi, _this$props$values$ma;
       var _this;
       _classCallCheck(this, RangeInput);
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -19205,36 +19302,40 @@
       }
       _this = _super.call.apply(_super, [this].concat(args));
       _defineProperty(_assertThisInitialized(_this), "state", {
-        min: _this.props.values.min,
-        max: _this.props.values.max
+        min: (_this$props$values$mi = _this.props.values.min) === null || _this$props$values$mi === void 0 ? void 0 : _this$props$values$mi.toString(),
+        max: (_this$props$values$ma = _this.props.values.max) === null || _this$props$values$ma === void 0 ? void 0 : _this$props$values$ma.toString()
       });
       _defineProperty(_assertThisInitialized(_this), "onInput", function (key) {
         return function (event) {
           var _ref = event.currentTarget,
             value = _ref.value;
-          _this.setState(_defineProperty({}, key, Number(value)));
+          _this.setState(_defineProperty({}, key, value));
         };
       });
       _defineProperty(_assertThisInitialized(_this), "onSubmit", function (event) {
         event.preventDefault();
-        _this.props.refine([_this.state.min, _this.state.max]);
+        var _this$state = _this.state,
+          min = _this$state.min,
+          max = _this$state.max;
+        _this.props.refine([min ? Number(min) : undefined, max ? Number(max) : undefined]);
       });
       return _this;
     }
     _createClass(RangeInput, [{
       key: "componentWillReceiveProps",
       value: function componentWillReceiveProps(nextProps) {
+        var _nextProps$values$min, _nextProps$values$max;
         this.setState({
-          min: nextProps.values.min,
-          max: nextProps.values.max
+          min: (_nextProps$values$min = nextProps.values.min) === null || _nextProps$values$min === void 0 ? void 0 : _nextProps$values$min.toString(),
+          max: (_nextProps$values$max = nextProps.values.max) === null || _nextProps$values$max === void 0 ? void 0 : _nextProps$values$max.toString()
         });
       }
     }, {
       key: "render",
       value: function render() {
-        var _this$state = this.state,
-          minValue = _this$state.min,
-          maxValue = _this$state.max;
+        var _this$state2 = this.state,
+          minValue = _this$state2.min,
+          maxValue = _this$state2.max;
         var _this$props = this.props,
           min = _this$props.min,
           max = _this$props.max,
@@ -19257,7 +19358,7 @@
           min: min,
           max: max,
           step: step,
-          value: minValue !== null && minValue !== void 0 ? minValue : '',
+          value: stripLeadingZeroFromInput(minValue !== null && minValue !== void 0 ? minValue : ''),
           onInput: this.onInput('min'),
           placeholder: min === null || min === void 0 ? void 0 : min.toString(),
           disabled: isDisabled
@@ -19275,7 +19376,7 @@
           min: min,
           max: max,
           step: step,
-          value: maxValue !== null && maxValue !== void 0 ? maxValue : '',
+          value: stripLeadingZeroFromInput(maxValue !== null && maxValue !== void 0 ? maxValue : ''),
           onInput: this.onInput('max'),
           placeholder: max === null || max === void 0 ? void 0 : max.toString(),
           disabled: isDisabled
@@ -19478,10 +19579,16 @@
   var Rheostat = /*#__PURE__*/function (_Component) {
     _inherits(Rheostat, _Component);
     var _super = _createSuper(Rheostat);
-    function Rheostat(props) {
+    function Rheostat() {
       var _this;
       _classCallCheck(this, Rheostat);
-      _this = _super.call(this, props);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, [this].concat(args));
+      _defineProperty(_assertThisInitialized(_this), "x", [0, 0].map(function (y) {
+        return y;
+      }));
       _defineProperty(_assertThisInitialized(_this), "state", {
         className: getClassName(_this.props),
         // non-null thanks to defaultProps
@@ -19496,44 +19603,14 @@
         values: _this.props.values
       });
       _defineProperty(_assertThisInitialized(_this), "rheostat", y());
-      _this.getPublicState = _this.getPublicState.bind(_assertThisInitialized(_this));
-      _this.getSliderBoundingBox = _this.getSliderBoundingBox.bind(_assertThisInitialized(_this));
-      _this.getProgressStyle = _this.getProgressStyle.bind(_assertThisInitialized(_this));
-      _this.getMinValue = _this.getMinValue.bind(_assertThisInitialized(_this));
-      _this.getMaxValue = _this.getMaxValue.bind(_assertThisInitialized(_this));
-      _this.getHandleDimensions = _this.getHandleDimensions.bind(_assertThisInitialized(_this));
-      _this.getClosestSnapPoint = _this.getClosestSnapPoint.bind(_assertThisInitialized(_this));
-      _this.getSnapPosition = _this.getSnapPosition.bind(_assertThisInitialized(_this));
-      _this.getNextPositionForKey = _this.getNextPositionForKey.bind(_assertThisInitialized(_this));
-      _this.getNextState = _this.getNextState.bind(_assertThisInitialized(_this));
-      _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-      _this.getClosestHandle = _this.getClosestHandle.bind(_assertThisInitialized(_this));
-      _this.setStartSlide = _this.setStartSlide.bind(_assertThisInitialized(_this));
-      _this.startMouseSlide = _this.startMouseSlide.bind(_assertThisInitialized(_this));
-      _this.startTouchSlide = _this.startTouchSlide.bind(_assertThisInitialized(_this));
-      _this.handleMouseSlide = _this.handleMouseSlide.bind(_assertThisInitialized(_this));
-      _this.handleTouchSlide = _this.handleTouchSlide.bind(_assertThisInitialized(_this));
-      _this.handleSlide = _this.handleSlide.bind(_assertThisInitialized(_this));
-      _this.endSlide = _this.endSlide.bind(_assertThisInitialized(_this));
-      _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized(_this));
-      _this.validatePosition = _this.validatePosition.bind(_assertThisInitialized(_this));
-      _this.validateValues = _this.validateValues.bind(_assertThisInitialized(_this));
-      _this.canMove = _this.canMove.bind(_assertThisInitialized(_this));
-      _this.fireChangeEvent = _this.fireChangeEvent.bind(_assertThisInitialized(_this));
-      _this.slideTo = _this.slideTo.bind(_assertThisInitialized(_this));
-      _this.updateNewValues = _this.updateNewValues.bind(_assertThisInitialized(_this));
-      return _this;
-    }
-    _createClass(Rheostat, [{
-      key: "componentWillReceiveProps",
-      value: function componentWillReceiveProps(nextProps) {
-        var _this$props = this.props,
+      _defineProperty(_assertThisInitialized(_this), "componentWillReceiveProps", function (nextProps) {
+        var _this$props = _this.props,
           className = _this$props.className,
           disabled = _this$props.disabled,
           min = _this$props.min,
           max = _this$props.max,
           orientation = _this$props.orientation;
-        var _this$state = this.state,
+        var _this$state = _this.state,
           values = _this$state.values,
           slidingIndex = _this$state.slidingIndex;
         var minMaxChanged = nextProps.min !== min || nextProps.max !== max;
@@ -19543,33 +19620,29 @@
         var orientationChanged = nextProps.className !== className || nextProps.orientation !== orientation;
         var willBeDisabled = nextProps.disabled && !disabled;
         if (orientationChanged) {
-          this.setState({
+          _this.setState({
             className: getClassName(nextProps)
           });
         }
-        if (minMaxChanged || valuesChanged) this.updateNewValues(nextProps);
+        if (minMaxChanged || valuesChanged) _this.updateNewValues(nextProps);
         if (willBeDisabled && slidingIndex !== null) {
-          this.endSlide();
+          _this.endSlide();
         }
-      }
-    }, {
-      key: "getPublicState",
-      value: function getPublicState() {
-        var _this$props2 = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "getPublicState", function () {
+        var _this$props2 = _this.props,
           min = _this$props2.min,
           max = _this$props2.max;
-        var values = this.state.values;
+        var values = _this.state.values;
         return {
           max: max,
           min: min,
           values: values
         };
-      }
-    }, {
-      key: "getSliderBoundingBox",
-      value: function getSliderBoundingBox() {
+      });
+      _defineProperty(_assertThisInitialized(_this), "getSliderBoundingBox", function () {
         // only gets called after render, so it will always be defined
-        var node = this.rheostat.current;
+        var node = _this.rheostat.current;
         var rect = node.getBoundingClientRect();
         return {
           height: rect.height || node.clientHeight,
@@ -19577,14 +19650,12 @@
           top: rect.top,
           width: rect.width || node.clientWidth
         };
-      }
-    }, {
-      key: "getProgressStyle",
-      value: function getProgressStyle(idx) {
-        var handlePos = this.state.handlePos;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getProgressStyle", function (idx) {
+        var handlePos = _this.state.handlePos;
         var value = handlePos[idx];
         if (idx === 0) {
-          return this.props.orientation === 'vertical' ? {
+          return _this.props.orientation === 'vertical' ? {
             height: "".concat(value, "%"),
             top: 0
           } : {
@@ -19594,63 +19665,51 @@
         }
         var prevValue = handlePos[idx - 1];
         var diffValue = value - prevValue;
-        return this.props.orientation === 'vertical' ? {
+        return _this.props.orientation === 'vertical' ? {
           height: "".concat(diffValue, "%"),
           top: "".concat(prevValue, "%")
         } : {
           left: "".concat(prevValue, "%"),
           width: "".concat(diffValue, "%")
         };
-      }
-    }, {
-      key: "getMinValue",
-      value: function getMinValue(idx) {
-        return this.state.values[idx - 1] ? Math.max(this.props.min, this.state.values[idx - 1]) : this.props.min;
-      }
-    }, {
-      key: "getMaxValue",
-      value: function getMaxValue(idx) {
-        return this.state.values[idx + 1] ? Math.min(this.props.max, this.state.values[idx + 1]) : this.props.max;
-      }
-    }, {
-      key: "getHandleDimensions",
-      value: function getHandleDimensions(ev, sliderBox) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "getMinValue", function (idx) {
+        return _this.state.values[idx - 1] ? Math.max(_this.props.min, _this.state.values[idx - 1]) : _this.props.min;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getMaxValue", function (idx) {
+        return _this.state.values[idx + 1] ? Math.min(_this.props.max, _this.state.values[idx + 1]) : _this.props.max;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getHandleDimensions", function (ev, sliderBox) {
         var handleNode = ev.currentTarget || null;
         if (!handleNode) return 0;
-        return this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
-      }
-    }, {
-      key: "getClosestSnapPoint",
-      value: function getClosestSnapPoint(value) {
+        return _this.props.orientation === 'vertical' ? handleNode.clientHeight / sliderBox.height * PERCENT_FULL / 2 : handleNode.clientWidth / sliderBox.width * PERCENT_FULL / 2;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getClosestSnapPoint", function (value) {
         // non-null thanks to defaultProps
-        if (!this.props.snapPoints.length) return value;
-        return this.props.snapPoints.reduce(function (snapTo, snap) {
+        if (!_this.props.snapPoints.length) return value;
+        return _this.props.snapPoints.reduce(function (snapTo, snap) {
           return Math.abs(snapTo - value) < Math.abs(snap - value) ? snapTo : snap;
         });
-      }
-    }, {
-      key: "getSnapPosition",
-      value: function getSnapPosition(positionPercent) {
-        if (!this.props.snap) return positionPercent;
-        var _ref = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "getSnapPosition", function (positionPercent) {
+        if (!_this.props.snap) return positionPercent;
+        var _ref = _this.props,
           max = _ref.max,
           min = _ref.min;
         var value = getValue$1(positionPercent, min, max);
-        var snapValue = this.getClosestSnapPoint(value);
+        var snapValue = _this.getClosestSnapPoint(value);
         return getPosition(snapValue, min, max);
-      }
-    }, {
-      key: "getNextPositionForKey",
-      value: function getNextPositionForKey(idx, keyCode) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "getNextPositionForKey", function (idx, keyCode) {
         var _stepMultiplier;
-        var _this$state2 = this.state,
+        var _this$state2 = _this.state,
           handlePos = _this$state2.handlePos,
           values = _this$state2.values;
-        var _ref2 = this.props,
+        var _ref2 = _this.props,
           max = _ref2.max,
           min = _ref2.min,
           snapPoints = _ref2.snapPoints;
-        var shouldSnap = this.props.snap;
+        var shouldSnap = _this.props.snap;
         var proposedValue = values[idx];
         var proposedPercentage = handlePos[idx];
         var originalPercentage = proposedPercentage;
@@ -19662,7 +19721,7 @@
         }
         var currentIndex = null;
         if (shouldSnap) {
-          currentIndex = snapPoints.indexOf(this.getClosestSnapPoint(values[idx]));
+          currentIndex = snapPoints.indexOf(_this.getClosestSnapPoint(values[idx]));
         }
         var stepMultiplier = (_stepMultiplier = {}, _defineProperty(_stepMultiplier, KEYS.LEFT, function (v) {
           return v * -1;
@@ -19704,15 +19763,13 @@
           return null;
         }
         return shouldSnap ? getPosition(proposedValue, min, max) : proposedPercentage;
-      }
-    }, {
-      key: "getNextState",
-      value: function getNextState(idx, proposedPosition) {
-        var handlePos = this.state.handlePos;
-        var _ref3 = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "getNextState", function (idx, proposedPosition) {
+        var handlePos = _this.state.handlePos;
+        var _ref3 = _this.props,
           max = _ref3.max,
           min = _ref3.min;
-        var actualPosition = this.validatePosition(idx, proposedPosition);
+        var actualPosition = _this.validatePosition(idx, proposedPosition);
         var nextHandlePos = handlePos.map(function (pos, index) {
           return index === idx ? actualPosition : pos;
         });
@@ -19722,23 +19779,19 @@
             return getValue$1(pos, min, max);
           })
         };
-      }
-    }, {
-      key: "getClosestHandle",
-      value: function getClosestHandle(positionPercent) {
-        var handlePos = this.state.handlePos;
+      });
+      _defineProperty(_assertThisInitialized(_this), "getClosestHandle", function (positionPercent) {
+        var handlePos = _this.state.handlePos;
         return handlePos.reduce(function (closestIdx, _node, idx) {
           var challenger = Math.abs(handlePos[idx] - positionPercent);
           var current = Math.abs(handlePos[closestIdx] - positionPercent);
           return challenger < current ? idx : closestIdx;
         }, 0);
-      }
-    }, {
-      key: "setStartSlide",
-      value: function setStartSlide(ev, x, y) {
-        var sliderBox = this.getSliderBoundingBox();
-        this.setState({
-          handleDimensions: this.getHandleDimensions(ev, sliderBox),
+      });
+      _defineProperty(_assertThisInitialized(_this), "setStartSlide", function (ev, x, y) {
+        var sliderBox = _this.getSliderBoundingBox();
+        _this.setState({
+          handleDimensions: _this.getHandleDimensions(ev, sliderBox),
           mousePos: {
             x: x,
             y: y
@@ -19746,144 +19799,118 @@
           sliderBox: sliderBox,
           slidingIndex: getHandleFor(ev)
         });
-      }
-    }, {
-      key: "startMouseSlide",
-      value: function startMouseSlide(ev) {
-        this.setStartSlide(ev, ev.clientX, ev.clientY);
-        document.addEventListener('mousemove', this.handleMouseSlide, false);
-        document.addEventListener('mouseup', this.endSlide, false);
+      });
+      _defineProperty(_assertThisInitialized(_this), "startMouseSlide", function (ev) {
+        _this.setStartSlide(ev, ev.clientX, ev.clientY);
+        document.addEventListener('mousemove', _this.handleMouseSlide, false);
+        document.addEventListener('mouseup', _this.endSlide, false);
         killEvent(ev);
-      }
-    }, {
-      key: "startTouchSlide",
-      value: function startTouchSlide(ev) {
+      });
+      _defineProperty(_assertThisInitialized(_this), "startTouchSlide", function (ev) {
         if (ev.changedTouches.length > 1) return;
         var touch = ev.changedTouches[0];
-        this.setStartSlide(ev, touch.clientX, touch.clientY);
-        document.addEventListener('touchmove', this.handleTouchSlide, false);
-        document.addEventListener('touchend', this.endSlide, false);
-        if (this.props.onSliderDragStart) this.props.onSliderDragStart();
+        _this.setStartSlide(ev, touch.clientX, touch.clientY);
+        document.addEventListener('touchmove', _this.handleTouchSlide, false);
+        document.addEventListener('touchend', _this.endSlide, false);
+        if (_this.props.onSliderDragStart) _this.props.onSliderDragStart();
         killEvent(ev);
-      }
-    }, {
-      key: "handleMouseSlide",
-      value: function handleMouseSlide(ev) {
-        if (this.state.slidingIndex === null) return;
-        this.handleSlide(ev.clientX, ev.clientY);
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleMouseSlide", function (ev) {
+        if (_this.state.slidingIndex === null) return;
+        _this.handleSlide(ev.clientX, ev.clientY);
         killEvent(ev);
-      }
-    }, {
-      key: "handleTouchSlide",
-      value: function handleTouchSlide(ev) {
-        if (this.state.slidingIndex === null) return;
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleTouchSlide", function (ev) {
+        if (_this.state.slidingIndex === null) return;
         if (ev.changedTouches.length > 1) {
-          this.endSlide();
+          _this.endSlide();
           return;
         }
         var touch = ev.changedTouches[0];
-        this.handleSlide(touch.clientX, touch.clientY);
+        _this.handleSlide(touch.clientX, touch.clientY);
         killEvent(ev);
-      }
-    }, {
-      key: "handleSlide",
-      value: function handleSlide(x, y) {
-        var _this$state3 = this.state,
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleSlide", function (x, y) {
+        var _this$state3 = _this.state,
           idx = _this$state3.slidingIndex,
           sliderBox = _this$state3.sliderBox;
-        var positionPercent = this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
-        this.slideTo(idx, positionPercent);
-        if (this.canMove(idx, positionPercent)) {
+        var positionPercent = _this.props.orientation === 'vertical' ? (y - sliderBox.top) / sliderBox.height * PERCENT_FULL : (x - sliderBox.left) / sliderBox.width * PERCENT_FULL;
+        _this.slideTo(idx, positionPercent);
+        if (_this.canMove(idx, positionPercent)) {
           // update mouse positions
-          this.setState({
+          _this.setState({
             mousePos: {
               x: x,
               y: y
             }
           });
-          if (this.props.onSliderDragMove) this.props.onSliderDragMove();
+          if (_this.props.onSliderDragMove) _this.props.onSliderDragMove();
         }
-      }
-    }, {
-      key: "endSlide",
-      value: function endSlide() {
-        var _this2 = this;
-        var idx = this.state.slidingIndex;
-        this.setState({
+      });
+      _defineProperty(_assertThisInitialized(_this), "endSlide", function () {
+        var idx = _this.state.slidingIndex;
+        _this.setState({
           slidingIndex: null
         });
-        document.removeEventListener('mouseup', this.endSlide, false);
-        document.removeEventListener('touchend', this.endSlide, false);
-        document.removeEventListener('touchmove', this.handleTouchSlide, false);
-        document.removeEventListener('mousemove', this.handleMouseSlide, false);
-        if (this.props.onSliderDragEnd) this.props.onSliderDragEnd();
-        if (this.props.snap) {
-          var positionPercent = this.getSnapPosition(this.state.handlePos[idx]);
-          this.slideTo(idx, positionPercent, function () {
-            return _this2.fireChangeEvent();
+        document.removeEventListener('mouseup', _this.endSlide, false);
+        document.removeEventListener('touchend', _this.endSlide, false);
+        document.removeEventListener('touchmove', _this.handleTouchSlide, false);
+        document.removeEventListener('mousemove', _this.handleMouseSlide, false);
+        if (_this.props.onSliderDragEnd) _this.props.onSliderDragEnd();
+        if (_this.props.snap) {
+          var positionPercent = _this.getSnapPosition(_this.state.handlePos[idx]);
+          _this.slideTo(idx, positionPercent, function () {
+            return _this.fireChangeEvent();
           });
         } else {
-          this.fireChangeEvent();
+          _this.fireChangeEvent();
         }
-      }
-    }, {
-      key: "handleClick",
-      value: function handleClick(ev) {
-        var _this3 = this;
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleClick", function (ev) {
         if (ev.target.getAttribute('data-handle-key')) {
           return;
         }
 
         // Calculate the position of the slider on the page so we can determine
         // the position where you click in relativity.
-        var sliderBox = this.getSliderBoundingBox();
-        var positionDecimal = this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
+        var sliderBox = _this.getSliderBoundingBox();
+        var positionDecimal = _this.props.orientation === 'vertical' ? (ev.clientY - sliderBox.top) / sliderBox.height : (ev.clientX - sliderBox.left) / sliderBox.width;
         var positionPercent = positionDecimal * PERCENT_FULL;
-        var handleId = this.getClosestHandle(positionPercent);
-        var validPositionPercent = this.getSnapPosition(positionPercent);
+        var handleId = _this.getClosestHandle(positionPercent);
+        var validPositionPercent = _this.getSnapPosition(positionPercent);
 
         // Move the handle there
-        this.slideTo(handleId, validPositionPercent, function () {
-          return _this3.fireChangeEvent();
+        _this.slideTo(handleId, validPositionPercent, function () {
+          return _this.fireChangeEvent();
         });
-        if (this.props.onClick) this.props.onClick();
-      }
-    }, {
-      key: "handleKeydown",
-      value: function handleKeydown(ev) {
-        var _this4 = this;
+        if (_this.props.onClick) _this.props.onClick();
+      });
+      _defineProperty(_assertThisInitialized(_this), "handleKeydown", function (ev) {
         var idx = getHandleFor(ev);
         if (ev.keyCode === KEYS.ESC) {
           ev.currentTarget.blur();
           return;
         }
-        var proposedPercentage = this.getNextPositionForKey(idx, ev.keyCode);
+        var proposedPercentage = _this.getNextPositionForKey(idx, ev.keyCode);
         if (proposedPercentage === null) return;
-        if (this.canMove(idx, proposedPercentage)) {
-          this.slideTo(idx, proposedPercentage, function () {
-            return _this4.fireChangeEvent();
+        if (_this.canMove(idx, proposedPercentage)) {
+          _this.slideTo(idx, proposedPercentage, function () {
+            return _this.fireChangeEvent();
           });
-          if (this.props.onKeyPress) this.props.onKeyPress();
+          if (_this.props.onKeyPress) _this.props.onKeyPress();
         }
         killEvent(ev);
-      }
-
-      // Make sure the proposed position respects the bounds and
-      // does not collide with other handles too much.
-    }, {
-      key: "validatePosition",
-      value: function validatePosition(idx, proposedPosition) {
-        var _this$state4 = this.state,
+      });
+      _defineProperty(_assertThisInitialized(_this), "validatePosition", function (idx, proposedPosition) {
+        var _this$state4 = _this.state,
           handlePos = _this$state4.handlePos,
           handleDimensions = _this$state4.handleDimensions;
         return Math.max(Math.min(proposedPosition, handlePos[idx + 1] !== undefined ? handlePos[idx + 1] - handleDimensions : PERCENT_FULL // 100% is the highest value
         ), handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : PERCENT_EMPTY // 0% is the lowest value
         );
-      }
-    }, {
-      key: "validateValues",
-      value: function validateValues(proposedValues, props) {
-        var _ref4 = props || this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "validateValues", function (proposedValues, props) {
+        var _ref4 = props || _this.props,
           max = _ref4.max,
           min = _ref4.min;
         return proposedValues.map(function (value, idx, values) {
@@ -19893,11 +19920,9 @@
           }
           return realValue;
         });
-      }
-    }, {
-      key: "canMove",
-      value: function canMove(idx, proposedPosition) {
-        var _this$state5 = this.state,
+      });
+      _defineProperty(_assertThisInitialized(_this), "canMove", function (idx, proposedPosition) {
+        var _this$state5 = _this.state,
           handlePos = _this$state5.handlePos,
           handleDimensions = _this$state5.handleDimensions;
         if (proposedPosition < PERCENT_EMPTY) return false;
@@ -19907,29 +19932,21 @@
         var prevHandlePosition = handlePos[idx - 1] !== undefined ? handlePos[idx - 1] + handleDimensions : -Infinity;
         if (proposedPosition < prevHandlePosition) return false;
         return true;
-      }
-    }, {
-      key: "fireChangeEvent",
-      value: function fireChangeEvent() {
-        var onChange = this.props.onChange;
-        if (onChange) onChange(this.getPublicState());
-      }
-    }, {
-      key: "slideTo",
-      value: function slideTo(idx, proposedPosition, onAfterSet) {
-        var _this5 = this;
-        var nextState = this.getNextState(idx, proposedPosition);
-        this.setState(nextState, function () {
-          var onValuesUpdated = _this5.props.onValuesUpdated;
-          if (onValuesUpdated) onValuesUpdated(_this5.getPublicState());
+      });
+      _defineProperty(_assertThisInitialized(_this), "fireChangeEvent", function () {
+        var onChange = _this.props.onChange;
+        if (onChange) onChange(_this.getPublicState());
+      });
+      _defineProperty(_assertThisInitialized(_this), "slideTo", function (idx, proposedPosition, onAfterSet) {
+        var nextState = _this.getNextState(idx, proposedPosition);
+        _this.setState(nextState, function () {
+          var onValuesUpdated = _this.props.onValuesUpdated;
+          if (onValuesUpdated) onValuesUpdated(_this.getPublicState());
           if (onAfterSet) onAfterSet();
         });
-      }
-    }, {
-      key: "updateNewValues",
-      value: function updateNewValues(nextProps) {
-        var _this6 = this;
-        var slidingIndex = this.state.slidingIndex;
+      });
+      _defineProperty(_assertThisInitialized(_this), "updateNewValues", function (nextProps) {
+        var slidingIndex = _this.state.slidingIndex;
 
         // Don't update while the slider is sliding
         if (slidingIndex !== null) {
@@ -19938,21 +19955,18 @@
         var max = nextProps.max,
           min = nextProps.min,
           values = nextProps.values;
-        var nextValues = this.validateValues(values, nextProps);
-        this.setState({
+        var nextValues = _this.validateValues(values, nextProps);
+        _this.setState({
           handlePos: nextValues.map(function (value) {
             return getPosition(value, min, max);
           }),
           values: nextValues
         }, function () {
-          return _this6.fireChangeEvent();
+          return _this.fireChangeEvent();
         });
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this7 = this;
-        var _ref5 = this.props,
+      });
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _ref5 = _this.props,
           children = _ref5.children,
           disabled = _ref5.disabled,
           Handle = _ref5.handle,
@@ -19962,14 +19976,14 @@
           PitComponent = _ref5.pitComponent,
           pitPoints = _ref5.pitPoints,
           ProgressBar = _ref5.progressBar; // all required thanks to defaultProps
-        var _this$state6 = this.state,
+        var _this$state6 = _this.state,
           className = _this$state6.className,
           handlePos = _this$state6.handlePos,
           values = _this$state6.values;
         return h("div", {
           className: className,
-          ref: this.rheostat,
-          onClick: disabled ? undefined : this.handleClick,
+          ref: _this.rheostat,
+          onClick: disabled ? undefined : _this.handleClick,
           style: {
             position: 'relative'
           }
@@ -19982,17 +19996,17 @@
             position: 'absolute'
           };
           return h(Handle, {
-            "aria-valuemax": _this7.getMaxValue(idx),
-            "aria-valuemin": _this7.getMinValue(idx),
+            "aria-valuemax": _this.getMaxValue(idx),
+            "aria-valuemin": _this.getMinValue(idx),
             "aria-valuenow": values[idx],
             "aria-disabled": disabled,
             "data-handle-key": idx,
             className: "rheostat-handle",
             key: "handle-".concat(idx),
             onClick: killEvent,
-            onKeyDown: disabled ? undefined : _this7.handleKeydown,
-            onMouseDown: disabled ? undefined : _this7.startMouseSlide,
-            onTouchStart: disabled ? undefined : _this7.startTouchSlide,
+            onKeyDown: disabled ? undefined : _this.handleKeydown,
+            onMouseDown: disabled ? undefined : _this.startMouseSlide,
+            onTouchStart: disabled ? undefined : _this.startTouchSlide,
             role: "slider",
             style: handleStyle,
             tabIndex: 0
@@ -20004,7 +20018,7 @@
           return h(ProgressBar, {
             className: "rheostat-progress",
             key: "progress-bar-".concat(idx),
-            style: _this7.getProgressStyle(idx)
+            style: _this.getProgressStyle(idx)
           });
         }), PitComponent && pitPoints.map(function (n) {
           var pos = getPosition(n, min, max);
@@ -20020,9 +20034,10 @@
             style: pitStyle
           }, n);
         }), children);
-      }
-    }]);
-    return Rheostat;
+      });
+      return _this;
+    }
+    return _createClass(Rheostat);
   }(d);
   _defineProperty(Rheostat, "defaultProps", {
     className: '',