instantsearch.js 4.37.1 → 4.37.2

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [4.37.2](https://github.com/algolia/instantsearch.js/compare/v4.37.1...v4.37.2) (2022-01-10)
+
+
+### Bug Fixes
+
+* **searchbox:** make sure setting query to the initial doesn't cause a stale state ([#4990](https://github.com/algolia/instantsearch.js/issues/4990)) ([3faca01](https://github.com/algolia/instantsearch.js/commit/3faca014aad08145c3b4cc66a5e841da3a0f64b8))
+
+
+
 ## [4.37.1](https://github.com/algolia/instantsearch.js/compare/v4.37.0...v4.37.1) (2022-01-05)
 
 

package/cjs/components/Hits/Hits.js

@@ -58,11 +58,5 @@ var Hits = function Hits(_ref) {
   })));
 };
 
-Hits.defaultProps = {
-  results: {
-    hits: []
-  },
-  hits: []
-};
 var _default = Hits;
 exports.default = _default;

package/cjs/components/Pagination/Pagination.js

@@ -9,91 +9,110 @@ var _preact = require("preact");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _PaginationLink = _interopRequireDefault(require("./PaginationLink.js"));
-
 var _index = require("../../lib/utils/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
 
-var defaultProps = {
-  currentPage: 0,
-  nbPages: 0,
-  pages: []
-};
-
 function Pagination(props) {
-  var handleClick = function handleClick(pageNumber, event) {
-    if ((0, _index.isSpecialClick)(event)) {
-      // do not alter the default browser behavior
-      // if one special key is down
-      return;
-    }
+  function createClickHandler(pageNumber) {
+    return function (event) {
+      if ((0, _index.isSpecialClick)(event)) {
+        // do not alter the default browser behavior
+        // if one special key is down
+        return;
+      }
 
-    event.preventDefault();
-    props.setCurrentPage(pageNumber);
-  };
+      event.preventDefault();
+      props.setCurrentPage(pageNumber);
+    };
+  }
 
   return (0, _preact.h)("div", {
     className: (0, _classnames.default)(props.cssClasses.root, _defineProperty({}, props.cssClasses.noRefinementRoot, props.nbPages <= 1))
   }, (0, _preact.h)("ul", {
     className: props.cssClasses.list
-  }, props.showFirst && (0, _preact.h)(_PaginationLink.default, {
-    key: "first",
-    ariaLabel: 'First',
-    additionalClassName: props.cssClasses.firstPageItem,
+  }, props.showFirst && (0, _preact.h)(PaginationLink, {
+    ariaLabel: "First",
+    className: props.cssClasses.firstPageItem,
     isDisabled: props.isFirstPage,
     label: props.templates.first,
     pageNumber: 0,
     createURL: props.createURL,
     cssClasses: props.cssClasses,
-    handleClick: handleClick
-  }), props.showPrevious && (0, _preact.h)(_PaginationLink.default, {
-    key: "previous",
-    ariaLabel: 'Previous',
-    additionalClassName: props.cssClasses.previousPageItem,
+    createClickHandler: createClickHandler
+  }), props.showPrevious && (0, _preact.h)(PaginationLink, {
+    ariaLabel: "Previous",
+    className: props.cssClasses.previousPageItem,
     isDisabled: props.isFirstPage,
     label: props.templates.previous,
     pageNumber: props.currentPage - 1,
     createURL: props.createURL,
     cssClasses: props.cssClasses,
-    handleClick: handleClick
+    createClickHandler: createClickHandler
   }), props.pages.map(function (pageNumber) {
-    return (0, _preact.h)(_PaginationLink.default, {
+    return (0, _preact.h)(PaginationLink, {
       key: pageNumber,
       ariaLabel: "".concat(pageNumber + 1),
-      additionalClassName: props.cssClasses.pageItem,
+      className: props.cssClasses.pageItem,
       isSelected: pageNumber === props.currentPage,
       label: "".concat(pageNumber + 1),
       pageNumber: pageNumber,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
-      handleClick: handleClick
+      createClickHandler: createClickHandler
     });
-  }), props.showNext && (0, _preact.h)(_PaginationLink.default, {
-    key: "next",
-    ariaLabel: 'Next',
-    additionalClassName: props.cssClasses.nextPageItem,
+  }), props.showNext && (0, _preact.h)(PaginationLink, {
+    ariaLabel: "Next",
+    className: props.cssClasses.nextPageItem,
     isDisabled: props.isLastPage,
     label: props.templates.next,
     pageNumber: props.currentPage + 1,
     createURL: props.createURL,
     cssClasses: props.cssClasses,
-    handleClick: handleClick
-  }), props.showLast && (0, _preact.h)(_PaginationLink.default, {
-    key: "last",
-    ariaLabel: 'Last',
-    additionalClassName: props.cssClasses.lastPageItem,
+    createClickHandler: createClickHandler
+  }), props.showLast && (0, _preact.h)(PaginationLink, {
+    ariaLabel: "Last",
+    className: props.cssClasses.lastPageItem,
     isDisabled: props.isLastPage,
     label: props.templates.last,
     pageNumber: props.nbPages - 1,
     createURL: props.createURL,
     cssClasses: props.cssClasses,
-    handleClick: handleClick
+    createClickHandler: createClickHandler
   })));
 }
 
-Pagination.defaultProps = defaultProps;
+function PaginationLink(_ref) {
+  var label = _ref.label,
+      ariaLabel = _ref.ariaLabel,
+      pageNumber = _ref.pageNumber,
+      className = _ref.className,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      cssClasses = _ref.cssClasses,
+      createURL = _ref.createURL,
+      createClickHandler = _ref.createClickHandler;
+  return (0, _preact.h)("li", {
+    className: (0, _classnames.default)(cssClasses.item, className, isDisabled && cssClasses.disabledItem, isSelected && cssClasses.selectedItem)
+  }, isDisabled ? (0, _preact.h)("span", {
+    className: cssClasses.link,
+    dangerouslySetInnerHTML: {
+      __html: label
+    }
+  }) : (0, _preact.h)("a", {
+    className: cssClasses.link,
+    "aria-label": ariaLabel,
+    href: createURL(pageNumber),
+    onClick: createClickHandler(pageNumber),
+    dangerouslySetInnerHTML: {
+      __html: label
+    }
+  }));
+}
+
 var _default = Pagination;
 exports.default = _default;

package/cjs/connectors/search-box/connectSearchBox.js

@@ -18,32 +18,28 @@ var withUsage = (0, _index.createDocumentationMessageGenerator)({
   connector: true
 });
 
+var defaultQueryHook = function defaultQueryHook(query, hook) {
+  return hook(query);
+};
 /**
  * **SearchBox** connector provides the logic to build a widget that will let the user search for a query.
  *
  * The connector provides to the rendering: `refine()` to set the query. The behaviour of this function
  * may be impacted by the `queryHook` widget parameter.
  */
+
+
 var connectSearchBox = function connectSearchBox(renderFn) {
   var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _index.noop;
   (0, _index.checkRendering)(renderFn, withUsage());
   return function (widgetParams) {
     var _ref = widgetParams || {},
-        queryHook = _ref.queryHook;
-
-    function clear(helper) {
-      return function () {
-        helper.setQuery('').search();
-      };
-    }
+        _ref$queryHook = _ref.queryHook,
+        queryHook = _ref$queryHook === void 0 ? defaultQueryHook : _ref$queryHook;
 
     var _refine;
 
-    var _clear = function _clear() {};
-
-    function _cachedClear() {
-      _clear();
-    }
+    var _clear;
 
     return {
       $$type: 'ais.searchBox',
@@ -75,27 +71,21 @@ var connectSearchBox = function connectSearchBox(renderFn) {
             state = _ref3.state;
 
         if (!_refine) {
-          var setQueryAndSearch = function setQueryAndSearch(query) {
-            if (query !== state.query) {
-              helper.setQuery(query).search();
-            }
-          };
-
           _refine = function _refine(query) {
-            if (queryHook) {
-              queryHook(query, setQueryAndSearch);
-              return;
-            }
+            queryHook(query, function (q) {
+              return helper.setQuery(q).search();
+            });
+          };
 
-            setQueryAndSearch(query);
+          _clear = function _clear() {
+            helper.setQuery('').search();
           };
         }
 
-        _clear = clear(helper);
         return {
           query: state.query || '',
           refine: _refine,
-          clear: _cachedClear,
+          clear: _clear,
           widgetParams: widgetParams,
           isSearchStalled: searchMetadata.isSearchStalled
         };

package/cjs/lib/version.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = '4.37.1';
+var _default = '4.37.2';
 exports.default = _default;

package/dist/instantsearch.development.d.ts

@@ -4915,7 +4915,9 @@ declare const toggleRefinement: ToggleRefinementWidget;
 declare type ToggleRefinementConnector = Connector<ToggleRefinementWidgetDescription, ToggleRefinementConnectorParams>;
 
 declare type ToggleRefinementConnectorParams = {
-    /** Name of the attribute for faceting (eg. "free_shipping"). */
+    /**
+     * Name of the attribute for faceting (e.g., "free_shipping").
+     */
     attribute: string;
     /**
      * Value to filter on when toggled.
@@ -4950,19 +4952,42 @@ declare type ToggleRefinementCSSClasses = Partial<{
 declare type ToggleRefinementRenderState = {
     /** The current toggle value */
     value: {
+        /**
+         * The attribute name of this toggle.
+         */
         name: string;
+        /**
+         * Whether the current option is "on" (true) or "off" (false)
+         */
         isRefined: boolean;
+        /**
+         * Number of results if this option is toggled.
+         */
         count: number | null;
+        /**
+         * Information about the "on" toggle.
+         */
         onFacetValue: ToggleRefinementValue;
+        /**
+         * Information about the "off" toggle.
+         */
         offFacetValue: ToggleRefinementValue;
     };
-    /** Creates an URL for the next state. */
+    /**
+     * Creates an URL for the next state.
+     */
     createURL: CreateURL<string>;
-    /** send a "facet clicked" insights event */
+    /**
+     * Send a "Facet Clicked" Insights event.
+     */
     sendEvent: SendEventForToggle;
-    /** Indicates if search state can be refined. */
+    /**
+     * Indicates if search state can be refined.
+     */
     canRefine: boolean;
-    /** Updates to the next state by applying the toggle refinement. */
+    /**
+     * Updates to the next state by applying the toggle refinement.
+     */
     refine: (value?: {
         isRefined: boolean;
     }) => void;
@@ -4976,9 +5001,13 @@ declare type ToggleRefinementTemplates = Partial<{
 }>;
 
 declare type ToggleRefinementValue = {
-    /** whether this option is enabled */
+    /**
+     * Whether this option is enabled.
+     */
     isRefined: boolean;
-    /** number of result if this option is enabled */
+    /**
+     * Number of result if this option is toggled.
+     */
     count: number | null;
 };
 

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.37.1 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch.js */
+/*! InstantSearch.js 4.37.2 | © 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) :
@@ -8483,7 +8483,7 @@
     instantSearchInstance.renderState = _objectSpread2(_objectSpread2({}, instantSearchInstance.renderState), {}, _defineProperty({}, parentIndexName, _objectSpread2(_objectSpread2({}, instantSearchInstance.renderState[parentIndexName]), renderState)));
   }
 
-  var version$1 = '4.37.1';
+  var version$1 = '4.37.2';
 
   var NAMESPACE = 'ais';
   var component = function component(componentName) {
@@ -13019,32 +13019,28 @@
     connector: true
   });
 
+  var defaultQueryHook = function defaultQueryHook(query, hook) {
+    return hook(query);
+  };
   /**
    * **SearchBox** connector provides the logic to build a widget that will let the user search for a query.
    *
    * The connector provides to the rendering: `refine()` to set the query. The behaviour of this function
    * may be impacted by the `queryHook` widget parameter.
    */
+
+
   var connectSearchBox = function connectSearchBox(renderFn) {
     var unmountFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
     checkRendering(renderFn, withUsage$d());
     return function (widgetParams) {
       var _ref = widgetParams || {},
-          queryHook = _ref.queryHook;
-
-      function clear(helper) {
-        return function () {
-          helper.setQuery('').search();
-        };
-      }
+          _ref$queryHook = _ref.queryHook,
+          queryHook = _ref$queryHook === void 0 ? defaultQueryHook : _ref$queryHook;
 
       var _refine;
 
-      var _clear = function _clear() {};
-
-      function _cachedClear() {
-        _clear();
-      }
+      var _clear;
 
       return {
         $$type: 'ais.searchBox',
@@ -13076,27 +13072,21 @@
               state = _ref3.state;
 
           if (!_refine) {
-            var setQueryAndSearch = function setQueryAndSearch(query) {
-              if (query !== state.query) {
-                helper.setQuery(query).search();
-              }
-            };
-
             _refine = function _refine(query) {
-              if (queryHook) {
-                queryHook(query, setQueryAndSearch);
-                return;
-              }
+              queryHook(query, function (q) {
+                return helper.setQuery(q).search();
+              });
+            };
 
-              setQueryAndSearch(query);
+            _clear = function _clear() {
+              helper.setQuery('').search();
             };
           }
 
-          _clear = clear(helper);
           return {
             query: state.query || '',
             refine: _refine,
-            clear: _cachedClear,
+            clear: _clear,
             widgetParams: widgetParams,
             isSearchStalled: searchMetadata.isSearchStalled
           };
@@ -17576,13 +17566,6 @@
     })));
   };
 
-  Hits.defaultProps = {
-    results: {
-      hits: []
-    },
-    hits: []
-  };
-
   var defaultTemplates$5 = {
     empty: 'No results',
     item: function item(data) {
@@ -18302,130 +18285,104 @@
     });
   };
 
-  /** @jsx h */
-
-  function PaginationLink(_ref) {
-    var label = _ref.label,
-        ariaLabel = _ref.ariaLabel,
-        pageNumber = _ref.pageNumber,
-        _ref$additionalClassN = _ref.additionalClassName,
-        additionalClassName = _ref$additionalClassN === void 0 ? null : _ref$additionalClassN,
-        _ref$isDisabled = _ref.isDisabled,
-        isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-        _ref$isSelected = _ref.isSelected,
-        isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-        cssClasses = _ref.cssClasses,
-        createURL = _ref.createURL,
-        handleClick = _ref.handleClick;
-    var classes = {
-      item: classnames(cssClasses.item, additionalClassName, isDisabled && cssClasses.disabledItem, isSelected && cssClasses.selectedItem),
-      link: cssClasses.link
-    };
-
-    if (isDisabled) {
-      return v("li", {
-        className: classes.item
-      }, v("span", {
-        className: classes.link,
-        dangerouslySetInnerHTML: {
-          __html: label
-        }
-      }));
-    }
-
-    return v("li", {
-      className: classes.item
-    }, v("a", {
-      className: classes.link,
-      "aria-label": ariaLabel,
-      href: createURL(pageNumber),
-      onClick: function onClick(event) {
-        return handleClick(pageNumber, event);
-      },
-      dangerouslySetInnerHTML: {
-        __html: label
-      }
-    }));
-  }
-
-  var defaultProps$3 = {
-    currentPage: 0,
-    nbPages: 0,
-    pages: []
-  };
-
   function Pagination(props) {
-    var handleClick = function handleClick(pageNumber, event) {
-      if (isSpecialClick(event)) {
-        // do not alter the default browser behavior
-        // if one special key is down
-        return;
-      }
+    function createClickHandler(pageNumber) {
+      return function (event) {
+        if (isSpecialClick(event)) {
+          // do not alter the default browser behavior
+          // if one special key is down
+          return;
+        }
 
-      event.preventDefault();
-      props.setCurrentPage(pageNumber);
-    };
+        event.preventDefault();
+        props.setCurrentPage(pageNumber);
+      };
+    }
 
     return v("div", {
       className: classnames(props.cssClasses.root, _defineProperty({}, props.cssClasses.noRefinementRoot, props.nbPages <= 1))
     }, v("ul", {
       className: props.cssClasses.list
     }, props.showFirst && v(PaginationLink, {
-      key: "first",
-      ariaLabel: 'First',
-      additionalClassName: props.cssClasses.firstPageItem,
+      ariaLabel: "First",
+      className: props.cssClasses.firstPageItem,
       isDisabled: props.isFirstPage,
       label: props.templates.first,
       pageNumber: 0,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
-      handleClick: handleClick
+      createClickHandler: createClickHandler
     }), props.showPrevious && v(PaginationLink, {
-      key: "previous",
-      ariaLabel: 'Previous',
-      additionalClassName: props.cssClasses.previousPageItem,
+      ariaLabel: "Previous",
+      className: props.cssClasses.previousPageItem,
       isDisabled: props.isFirstPage,
       label: props.templates.previous,
       pageNumber: props.currentPage - 1,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
-      handleClick: handleClick
+      createClickHandler: createClickHandler
     }), props.pages.map(function (pageNumber) {
       return v(PaginationLink, {
         key: pageNumber,
         ariaLabel: "".concat(pageNumber + 1),
-        additionalClassName: props.cssClasses.pageItem,
+        className: props.cssClasses.pageItem,
         isSelected: pageNumber === props.currentPage,
         label: "".concat(pageNumber + 1),
         pageNumber: pageNumber,
         createURL: props.createURL,
         cssClasses: props.cssClasses,
-        handleClick: handleClick
+        createClickHandler: createClickHandler
       });
     }), props.showNext && v(PaginationLink, {
-      key: "next",
-      ariaLabel: 'Next',
-      additionalClassName: props.cssClasses.nextPageItem,
+      ariaLabel: "Next",
+      className: props.cssClasses.nextPageItem,
       isDisabled: props.isLastPage,
       label: props.templates.next,
       pageNumber: props.currentPage + 1,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
-      handleClick: handleClick
+      createClickHandler: createClickHandler
     }), props.showLast && v(PaginationLink, {
-      key: "last",
-      ariaLabel: 'Last',
-      additionalClassName: props.cssClasses.lastPageItem,
+      ariaLabel: "Last",
+      className: props.cssClasses.lastPageItem,
       isDisabled: props.isLastPage,
       label: props.templates.last,
       pageNumber: props.nbPages - 1,
       createURL: props.createURL,
       cssClasses: props.cssClasses,
-      handleClick: handleClick
+      createClickHandler: createClickHandler
     })));
   }
 
-  Pagination.defaultProps = defaultProps$3;
+  function PaginationLink(_ref) {
+    var label = _ref.label,
+        ariaLabel = _ref.ariaLabel,
+        pageNumber = _ref.pageNumber,
+        className = _ref.className,
+        _ref$isDisabled = _ref.isDisabled,
+        isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+        _ref$isSelected = _ref.isSelected,
+        isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+        cssClasses = _ref.cssClasses,
+        createURL = _ref.createURL,
+        createClickHandler = _ref.createClickHandler;
+    return v("li", {
+      className: classnames(cssClasses.item, className, isDisabled && cssClasses.disabledItem, isSelected && cssClasses.selectedItem)
+    }, isDisabled ? v("span", {
+      className: cssClasses.link,
+      dangerouslySetInnerHTML: {
+        __html: label
+      }
+    }) : v("a", {
+      className: cssClasses.link,
+      "aria-label": ariaLabel,
+      href: createURL(pageNumber),
+      onClick: createClickHandler(pageNumber),
+      dangerouslySetInnerHTML: {
+        __html: label
+      }
+    }));
+  }
 
   var suit$h = component('Pagination');
   var withUsage$G = createDocumentationMessageGenerator({