instantsearch.js 4.37.1 → 4.38.1

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.38.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) :
@@ -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.38.1';
 
   var NAMESPACE = 'ais';
   var component = function component(componentName) {
@@ -8506,8 +8506,11 @@
         hit = _ref.hit,
         _ref$cssClasses = _ref.cssClasses,
         cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+    var highlightAttributeResult = getPropertyByPath(hit._highlightResult, attribute); // @MAJOR fallback to attribute value if highlight is not found
 
-    var _ref2 = getPropertyByPath(hit._highlightResult, attribute) || {},
+     _warning(highlightAttributeResult, "Could not enable highlight for \"".concat(attribute, "\", will display an empty string.\nPlease check whether this attribute exists and is either searchable or specified in `attributesToHighlight`.\n\nSee: https://alg.li/highlighting\n")) ;
+
+    var _ref2 = highlightAttributeResult || {},
         _ref2$value = _ref2.value,
         attributeValue = _ref2$value === void 0 ? '' : _ref2$value; // cx is not used, since it would be bundled as a dependency for Vue & Angular
 
@@ -8526,8 +8529,11 @@
         hit = _ref.hit,
         _ref$cssClasses = _ref.cssClasses,
         cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+    var highlightAttributeResult = getPropertyByPath(hit._highlightResult, attribute); // @MAJOR fallback to attribute value if highlight is not found
+
+     _warning(highlightAttributeResult, "Could not enable reverse highlight for \"".concat(attribute, "\", will display an empty string.\nPlease check whether this attribute exists and is either searchable or specified in `attributesToHighlight`.\n\nSee: https://alg.li/highlighting\n")) ;
 
-    var _ref2 = getPropertyByPath(hit._highlightResult, attribute) || {},
+    var _ref2 = highlightAttributeResult || {},
         _ref2$value = _ref2.value,
         attributeValue = _ref2$value === void 0 ? '' : _ref2$value; // cx is not used, since it would be bundled as a dependency for Vue & Angular
 
@@ -8547,8 +8553,11 @@
         hit = _ref.hit,
         _ref$cssClasses = _ref.cssClasses,
         cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+    var snippetAttributeResult = getPropertyByPath(hit._snippetResult, attribute); // @MAJOR fallback to attribute value if snippet is not found
+
+     _warning(snippetAttributeResult, "Could not enable snippet for \"".concat(attribute, "\", will display an empty string.\nPlease check whether this attribute exists and is specified in `attributesToSnippet`.\n\nSee: https://alg.li/highlighting\n")) ;
 
-    var _ref2 = getPropertyByPath(hit._snippetResult, attribute) || {},
+    var _ref2 = snippetAttributeResult || {},
         _ref2$value = _ref2.value,
         attributeValue = _ref2$value === void 0 ? '' : _ref2$value; // cx is not used, since it would be bundled as a dependency for Vue & Angular
 
@@ -8567,8 +8576,11 @@
         hit = _ref.hit,
         _ref$cssClasses = _ref.cssClasses,
         cssClasses = _ref$cssClasses === void 0 ? {} : _ref$cssClasses;
+    var snippetAttributeResult = getPropertyByPath(hit._snippetResult, attribute); // @MAJOR fallback to attribute value if snippet is not found
 
-    var _ref2 = getPropertyByPath(hit._snippetResult, attribute) || {},
+     _warning(snippetAttributeResult, "Could not enable reverse snippet for \"".concat(attribute, "\", will display an empty string.\nPlease check whether this attribute exists and is specified in `attributesToSnippet`.\n\nSee: https://alg.li/highlighting\n")) ;
+
+    var _ref2 = snippetAttributeResult || {},
         _ref2$value = _ref2.value,
         attributeValue = _ref2$value === void 0 ? '' : _ref2$value; // cx is not used, since it would be bundled as a dependency for Vue & Angular
 
@@ -9588,16 +9600,23 @@
 
       _defineProperty(this, "shouldPushState", true);
 
+      _defineProperty(this, "isDisposed", false);
+
+      _defineProperty(this, "latestAcknowledgedHistory", 0);
+
       this.windowTitle = windowTitle;
       this.writeTimer = undefined;
       this.writeDelay = writeDelay;
       this._createURL = createURL;
       this.parseURL = parseURL;
       this.getLocation = getLocation;
-      safelyRunOnBrowser(function () {
+      safelyRunOnBrowser(function (_ref2) {
+        var window = _ref2.window;
+
         var title = _this.windowTitle && _this.windowTitle(_this.read());
 
         setWindowTitle(title);
+        _this.latestAcknowledgedHistory = window.history.length;
       });
     }
     /**
@@ -9622,8 +9641,8 @@
       value: function write(routeState) {
         var _this2 = this;
 
-        safelyRunOnBrowser(function (_ref2) {
-          var window = _ref2.window;
+        safelyRunOnBrowser(function (_ref3) {
+          var window = _ref3.window;
 
           var url = _this2.createURL(routeState);
 
@@ -9634,10 +9653,17 @@
           }
 
           _this2.writeTimer = setTimeout(function () {
-            setWindowTitle(title);
+            setWindowTitle(title); // We do want to `pushState` if:
+            // - the router is not disposed, IS.js needs to update the URL
+            // OR
+            // - the last write was from InstantSearch.js
+            // (unlike a SPA, where it would have last written)
 
-            if (_this2.shouldPushState) {
+            var lastPushWasByISAfterDispose = !_this2.isDisposed || _this2.latestAcknowledgedHistory === window.history.length;
+
+            if (_this2.shouldPushState && lastPushWasByISAfterDispose) {
               window.history.pushState(routeState, title || '', url);
+              _this2.latestAcknowledgedHistory = window.history.length;
             }
 
             _this2.shouldPushState = true;
@@ -9673,8 +9699,8 @@
           }
         };
 
-        safelyRunOnBrowser(function (_ref3) {
-          var window = _ref3.window;
+        safelyRunOnBrowser(function (_ref4) {
+          var window = _ref4.window;
           window.addEventListener('popstate', _this3._onPopState);
         });
       }
@@ -9704,8 +9730,9 @@
       value: function dispose() {
         var _this4 = this;
 
-        safelyRunOnBrowser(function (_ref4) {
-          var window = _ref4.window;
+        this.isDisposed = true;
+        safelyRunOnBrowser(function (_ref5) {
+          var window = _ref5.window;
 
           if (_this4._onPopState) {
             window.removeEventListener('popstate', _this4._onPopState);
@@ -9724,12 +9751,12 @@
   }();
 
   function historyRouter() {
-    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref5$createURL = _ref5.createURL,
-        createURL = _ref5$createURL === void 0 ? function (_ref6) {
-      var qsModule = _ref6.qsModule,
-          routeState = _ref6.routeState,
-          location = _ref6.location;
+    var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref6$createURL = _ref6.createURL,
+        createURL = _ref6$createURL === void 0 ? function (_ref7) {
+      var qsModule = _ref7.qsModule,
+          routeState = _ref7.routeState,
+          location = _ref7.location;
       var protocol = location.protocol,
           hostname = location.hostname,
           _location$port = location.port,
@@ -9745,11 +9772,11 @@
       }
 
       return "".concat(protocol, "//").concat(hostname).concat(portWithPrefix).concat(pathname, "?").concat(queryString).concat(hash);
-    } : _ref5$createURL,
-        _ref5$parseURL = _ref5.parseURL,
-        parseURL = _ref5$parseURL === void 0 ? function (_ref7) {
-      var qsModule = _ref7.qsModule,
-          location = _ref7.location;
+    } : _ref6$createURL,
+        _ref6$parseURL = _ref6.parseURL,
+        parseURL = _ref6$parseURL === void 0 ? function (_ref8) {
+      var qsModule = _ref8.qsModule,
+          location = _ref8.location;
       // `qs` by default converts arrays with more than 20 items to an object.
       // We want to avoid this because the data structure manipulated can therefore vary.
       // Setting the limit to `100` seems a good number because the engine's default is 100
@@ -9763,21 +9790,21 @@
       return qsModule.parse(location.search.slice(1), {
         arrayLimit: 99
       });
-    } : _ref5$parseURL,
-        _ref5$writeDelay = _ref5.writeDelay,
-        writeDelay = _ref5$writeDelay === void 0 ? 400 : _ref5$writeDelay,
-        windowTitle = _ref5.windowTitle,
-        _ref5$getLocation = _ref5.getLocation,
-        getLocation = _ref5$getLocation === void 0 ? function () {
-      return safelyRunOnBrowser(function (_ref8) {
-        var window = _ref8.window;
+    } : _ref6$parseURL,
+        _ref6$writeDelay = _ref6.writeDelay,
+        writeDelay = _ref6$writeDelay === void 0 ? 400 : _ref6$writeDelay,
+        windowTitle = _ref6.windowTitle,
+        _ref6$getLocation = _ref6.getLocation,
+        getLocation = _ref6$getLocation === void 0 ? function () {
+      return safelyRunOnBrowser(function (_ref9) {
+        var window = _ref9.window;
         return window.location;
       }, {
         fallback: function fallback() {
           throw new Error('You need to provide `getLocation` to the `history` router in environments where `window` does not exist.');
         }
       });
-    } : _ref5$getLocation;
+    } : _ref6$getLocation;
 
     return new BrowserHistory({
       createURL: createURL,
@@ -9879,8 +9906,10 @@
 
   function isMetadataEnabled() {
     return safelyRunOnBrowser(function (_ref) {
+      var _window$navigator, _window$navigator$use;
+
       var window = _ref.window;
-      return window.navigator.userAgent.indexOf('Algolia Crawler') > -1;
+      return ((_window$navigator = window.navigator) === null || _window$navigator === void 0 ? void 0 : (_window$navigator$use = _window$navigator.userAgent) === null || _window$navigator$use === void 0 ? void 0 : _window$navigator$use.indexOf('Algolia Crawler')) > -1;
     }, {
       fallback: function fallback() {
         return false;
@@ -10533,13 +10562,15 @@
         },
         getWidgetRenderState: function getWidgetRenderState(_ref2) {
           var createURL = _ref2.createURL,
-              scopedResults = _ref2.scopedResults;
-          connectorState.attributesToClear = scopedResults.reduce(function (results, scopedResult) {
-            return results.concat(getAttributesToClear({
+              scopedResults = _ref2.scopedResults,
+              results = _ref2.results;
+          connectorState.attributesToClear = scopedResults.reduce(function (attributesToClear, scopedResult) {
+            return attributesToClear.concat(getAttributesToClear({
               scopedResult: scopedResult,
               includedAttributes: includedAttributes,
               excludedAttributes: excludedAttributes,
-              transformItems: transformItems
+              transformItems: transformItems,
+              results: results
             }));
           }, []);
 
@@ -10584,7 +10615,8 @@
     var scopedResult = _ref5.scopedResult,
         includedAttributes = _ref5.includedAttributes,
         excludedAttributes = _ref5.excludedAttributes,
-        transformItems = _ref5.transformItems;
+        transformItems = _ref5.transformItems,
+        results = _ref5.results;
     var includesQuery = includedAttributes.indexOf('query') !== -1 || excludedAttributes.indexOf('query') === -1;
     return {
       helper: scopedResult.helper,
@@ -10600,7 +10632,9 @@
           attribute === 'query' && includesQuery || // Otherwise, ignore the excluded attributes
           excludedAttributes.indexOf(attribute) === -1
         );
-      })))
+      })), {
+        results: results
+      })
     };
   }
 
@@ -10661,7 +10695,9 @@
                 helper: helper,
                 includedAttributes: includedAttributes,
                 excludedAttributes: excludedAttributes
-              }));
+              }), {
+                results: results
+              });
             }
 
             return scopedResults.reduce(function (accResults, scopedResult) {
@@ -10670,7 +10706,9 @@
                 helper: scopedResult.helper,
                 includedAttributes: includedAttributes,
                 excludedAttributes: excludedAttributes
-              })));
+              }), {
+                results: results
+              }));
             }, []);
           }
 
@@ -10965,7 +11003,9 @@
 
             var hasExhaustiveItems = (state.maxValuesPerFacet || 0) > getLimit() ? facetItems.length <= getLimit() : facetItems.length < getLimit();
             canToggleShowMore = showMore && (isShowingMore || !hasExhaustiveItems);
-            items = transformItems(_prepareFacetValues(facetItems));
+            items = transformItems(_prepareFacetValues(facetItems), {
+              results: results
+            });
           }
 
           return {
@@ -11098,7 +11138,9 @@
 
           var hitsWithAbsolutePosition = addAbsolutePosition(results.hits, results.page, results.hitsPerPage);
           var hitsWithAbsolutePositionAndQueryID = addQueryID(hitsWithAbsolutePosition, results.queryID);
-          var transformedHits = transformItems(hitsWithAbsolutePositionAndQueryID);
+          var transformedHits = transformItems(hitsWithAbsolutePositionAndQueryID, {
+            results: results
+          });
           return {
             hits: transformedHits,
             results: results,
@@ -11431,7 +11473,9 @@
               createURL = _ref5.createURL,
               helper = _ref5.helper;
           return {
-            items: transformItems(normalizeItems(state)),
+            items: transformItems(normalizeItems(state), {
+              results: results
+            }),
             refine: connectorState.getRefine(helper),
             createURL: connectorState.createURLFactory({
               state: state,
@@ -11618,7 +11662,9 @@
 
             var hitsWithAbsolutePosition = addAbsolutePosition(results.hits, results.page, results.hitsPerPage);
             var hitsWithAbsolutePositionAndQueryID = addQueryID(hitsWithAbsolutePosition, results.queryID);
-            var transformedHits = transformItems(hitsWithAbsolutePositionAndQueryID);
+            var transformedHits = transformItems(hitsWithAbsolutePositionAndQueryID, {
+              results: results
+            });
 
             if (cachedHits[_page] === undefined) {
               cachedHits[_page] = transformedHits;
@@ -11842,7 +11888,9 @@
                 label: label,
                 value: value
               });
-            }));
+            }), {
+              results: results
+            });
           }
 
           return {
@@ -11956,8 +12004,8 @@
           _ref2$items = _ref2.items,
           items = _ref2$items === void 0 ? [] : _ref2$items,
           _ref2$transformItems = _ref2.transformItems,
-          transformItems = _ref2$transformItems === void 0 ? function (x) {
-        return x;
+          transformItems = _ref2$transformItems === void 0 ? function (item) {
+        return item;
       } : _ref2$transformItems;
 
       if (attribute === '') {
@@ -12094,7 +12142,9 @@
 
           return {
             createURL: connectorState.createURL(state),
-            items: transformItems(prepareItems(state)),
+            items: transformItems(prepareItems(state), {
+              results: results
+            }),
             hasNoResults: results ? results.nbHits === 0 : true,
             refine: connectorState.refine,
             sendEvent: connectorState.sendEvent,
@@ -12836,7 +12886,8 @@
       var createSearchForFacetValues = function createSearchForFacetValues(helper, widget) {
         return function (renderOptions) {
           return function (query) {
-            var instantSearchInstance = renderOptions.instantSearchInstance;
+            var instantSearchInstance = renderOptions.instantSearchInstance,
+                searchResults = renderOptions.results;
 
             if (query === '' && lastItemsFromMainSearch) {
               // render with previous data from the helper.
@@ -12863,7 +12914,9 @@
                     value: value,
                     label: value
                   });
-                }));
+                }), {
+                  results: searchResults
+                });
                 renderFn(_objectSpread2(_objectSpread2({}, widget.getWidgetRenderState(_objectSpread2(_objectSpread2({}, renderOptions), {}, {
                   results: lastResultsFromMainSearch
                 }))), {}, {
@@ -12927,7 +12980,9 @@
               facetOrdering: sortBy === DEFAULT_SORT$2
             });
             facetValues = values && Array.isArray(values) ? values : [];
-            items = transformItems(facetValues.slice(0, getLimit()).map(formatItems));
+            items = transformItems(facetValues.slice(0, getLimit()).map(formatItems), {
+              results: results
+            });
             var maxValuesPerFacetConfig = state.maxValuesPerFacet;
             var currentLimit = getLimit(); // If the limit is the max number of facet retrieved it is impossible to know
             // if the facets are exhaustive. The only moment we are sure it is exhaustive
@@ -13019,32 +13074,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 +13127,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
           };
@@ -13195,7 +13240,9 @@
 
           return {
             currentRefinement: state.index,
-            options: transformItems(items),
+            options: transformItems(items, {
+              results: results
+            }),
             refine: connectorState.setIndex,
             hasNoResults: results ? results.nbHits === 0 : true,
             widgetParams: widgetParams
@@ -13941,6 +13988,9 @@
               state = _ref2.state;
 
           function getItems() {
+            // The hierarchicalFacets condition is required for flavors
+            // that render immediately with empty results, without relying
+            // on init() (like React InstantSearch Hooks).
             if (!results || state.hierarchicalFacets.length === 0) {
               return [];
             }
@@ -13950,7 +14000,9 @@
 
             var facetValues = results.getFacetValues(facetName, {});
             var data = Array.isArray(facetValues.data) ? facetValues.data : [];
-            var items = transformItems(shiftItemsValues(prepareItems(data)));
+            var items = transformItems(shiftItemsValues(prepareItems(data)), {
+              results: results
+            });
             return items;
           }
 
@@ -14176,7 +14228,9 @@
           var state = helper.state;
           var items = results ? transformItems(results.hits.filter(function (hit) {
             return hit._geoloc;
-          })) : [];
+          }), {
+            results: results
+          }) : [];
 
           if (!sendEvent) {
             sendEvent = createSendEventForHits({
@@ -14722,7 +14776,9 @@
               _ref4$userData = _ref4.userData,
               userData = _ref4$userData === void 0 ? [] : _ref4$userData;
 
-          var items = transformItems(userData);
+          var items = transformItems(userData, {
+            results: results
+          });
           return {
             items: items,
             widgetParams: widgetParams
@@ -17576,13 +17632,6 @@
     })));
   };
 
-  Hits.defaultProps = {
-    results: {
-      hits: []
-    },
-    hits: []
-  };
-
   var defaultTemplates$5 = {
     empty: 'No results',
     item: function item(data) {
@@ -18302,130 +18351,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({