instantsearch.js 4.64.2 → 4.65.0

package/cjs/widgets/sort-by/sort-by.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _uiComponentsShared = require("@algolia/ui-components-shared");
+var _instantsearchUiComponents = require("instantsearch-ui-components");
 var _preact = require("preact");
 var _Selector = _interopRequireDefault(require("../../components/Selector/Selector"));
 var _connectSortBy = _interopRequireDefault(require("../../connectors/sort-by/connectSortBy"));
@@ -59,11 +59,11 @@ var sortBy = function sortBy(widgetParams) {
   }
   var containerNode = (0, _utils.getContainerNode)(container);
   var cssClasses = {
-    root: (0, _uiComponentsShared.cx)(suit(), userCssClasses.root),
-    select: (0, _uiComponentsShared.cx)(suit({
+    root: (0, _instantsearchUiComponents.cx)(suit(), userCssClasses.root),
+    select: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'select'
     }), userCssClasses.select),
-    option: (0, _uiComponentsShared.cx)(suit({
+    option: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'option'
     }), userCssClasses.option)
   };

package/cjs/widgets/stats/stats.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultTemplates = exports.default = void 0;
-var _uiComponentsShared = require("@algolia/ui-components-shared");
+var _instantsearchUiComponents = require("instantsearch-ui-components");
 var _preact = require("preact");
 var _Stats = _interopRequireDefault(require("../../components/Stats/Stats"));
 var _connectStats = _interopRequireDefault(require("../../connectors/stats/connectStats"));
@@ -119,8 +119,8 @@ var stats = function stats(widgetParams) {
   }
   var containerNode = (0, _utils.getContainerNode)(container);
   var cssClasses = {
-    root: (0, _uiComponentsShared.cx)(suit(), userCssClasses.root),
-    text: (0, _uiComponentsShared.cx)(suit({
+    root: (0, _instantsearchUiComponents.cx)(suit(), userCssClasses.root),
+    text: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'text'
     }), userCssClasses.text)
   };

package/cjs/widgets/toggle-refinement/toggle-refinement.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _uiComponentsShared = require("@algolia/ui-components-shared");
+var _instantsearchUiComponents = require("instantsearch-ui-components");
 var _preact = require("preact");
 var _ToggleRefinement = _interopRequireDefault(require("../../components/ToggleRefinement/ToggleRefinement"));
 var _connectToggleRefinement = _interopRequireDefault(require("../../connectors/toggle-refinement/connectToggleRefinement"));
@@ -76,14 +76,14 @@ var toggleRefinement = function toggleRefinement(widgetParams) {
   }
   var containerNode = (0, _utils.getContainerNode)(container);
   var cssClasses = {
-    root: (0, _uiComponentsShared.cx)(suit(), userCssClasses.root),
-    label: (0, _uiComponentsShared.cx)(suit({
+    root: (0, _instantsearchUiComponents.cx)(suit(), userCssClasses.root),
+    label: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'label'
     }), userCssClasses.label),
-    checkbox: (0, _uiComponentsShared.cx)(suit({
+    checkbox: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'checkbox'
     }), userCssClasses.checkbox),
-    labelText: (0, _uiComponentsShared.cx)(suit({
+    labelText: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'labelText'
     }), userCssClasses.labelText)
   };

package/cjs/widgets/voice-search/voice-search.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _uiComponentsShared = require("@algolia/ui-components-shared");
+var _instantsearchUiComponents = require("instantsearch-ui-components");
 var _preact = require("preact");
 var _VoiceSearch = _interopRequireDefault(require("../../components/VoiceSearch/VoiceSearch"));
 var _connectVoiceSearch = _interopRequireDefault(require("../../connectors/voice-search/connectVoiceSearch"));
@@ -58,11 +58,11 @@ var voiceSearch = function voiceSearch(widgetParams) {
   }
   var containerNode = (0, _utils.getContainerNode)(container);
   var cssClasses = {
-    root: (0, _uiComponentsShared.cx)(suit(), userCssClasses.root),
-    button: (0, _uiComponentsShared.cx)(suit({
+    root: (0, _instantsearchUiComponents.cx)(suit(), userCssClasses.root),
+    button: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'button'
     }), userCssClasses.button),
-    status: (0, _uiComponentsShared.cx)(suit({
+    status: (0, _instantsearchUiComponents.cx)(suit({
       descendantName: 'status'
     }), userCssClasses.status)
   };

package/dist/instantsearch.development.d.ts

@@ -5,8 +5,8 @@ import type { AlgoliaSearchHelper } from 'algoliasearch-helper';
 import EventEmitter from '@algolia/events';
 import { FindAnswersOptions } from 'algoliasearch-helper/types/algoliasearch.js';
 import { h } from 'preact';
-import type { HighlightClassNames as HighlightClassNames_2 } from '@algolia/ui-components-highlight-vdom';
-import type { HighlightProps as HighlightProps_3 } from '@algolia/ui-components-highlight-vdom';
+import type { HighlightClassNames as HighlightClassNames_2 } from 'instantsearch-ui-components';
+import type { HighlightProps as HighlightProps_3 } from 'instantsearch-ui-components';
 import type { HoganOptions } from 'hogan.js';
 import type { html } from 'htm/preact';
 import type { InsightsClient as InsightsClient_2 } from 'search-insights';
@@ -267,6 +267,10 @@ declare type AutocompleteRenderState = {
          * The name of the index
          */
         indexName: string;
+        /**
+         * The id of the index
+         */
+        indexId: string;
         /**
          * The resolved hits from the index matching the query.
          */

package/dist/instantsearch.development.js

@@ -1,4 +1,4 @@
-/*! InstantSearch.js 4.64.2 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
+/*! InstantSearch.js 4.65.0 | © Algolia, Inc. and contributors; MIT License | https://github.com/algolia/instantsearch */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -801,7 +801,7 @@
     return chunks;
   }
   function _buildEventPayloadsForHits(_ref) {
-    var index = _ref.index,
+    var getIndex = _ref.getIndex,
       widgetType = _ref.widgetType,
       methodName = _ref.methodName,
       args = _ref.args,
@@ -854,7 +854,7 @@
           eventType: eventType,
           payload: _objectSpread2({
             eventName: eventName || 'Hits Viewed',
-            index: index,
+            index: getIndex(),
             objectIDs: objectIDsByChunk[i]
           }, additionalData),
           hits: batch,
@@ -869,7 +869,7 @@
           eventType: eventType,
           payload: _objectSpread2({
             eventName: eventName || 'Hit Clicked',
-            index: index,
+            index: getIndex(),
             queryID: queryID,
             objectIDs: objectIDsByChunk[i],
             positions: positionsByChunk[i]
@@ -886,7 +886,7 @@
           eventType: eventType,
           payload: _objectSpread2({
             eventName: eventName || 'Hit Converted',
-            index: index,
+            index: getIndex(),
             queryID: queryID,
             objectIDs: objectIDsByChunk[i]
           }, additionalData),
@@ -900,7 +900,7 @@
   }
   function createSendEventForHits(_ref2) {
     var instantSearchInstance = _ref2.instantSearchInstance,
-      index = _ref2.index,
+      getIndex = _ref2.getIndex,
       widgetType = _ref2.widgetType;
     var sentEvents = {};
     var timer = undefined;
@@ -910,7 +910,7 @@
       }
       var payloads = _buildEventPayloadsForHits({
         widgetType: widgetType,
-        index: index,
+        getIndex: getIndex,
         methodName: 'sendEvent',
         args: args,
         instantSearchInstance: instantSearchInstance
@@ -930,7 +930,7 @@
     return sendEventForHits;
   }
   function createBindEventForHits(_ref3) {
-    var index = _ref3.index,
+    var getIndex = _ref3.getIndex,
       widgetType = _ref3.widgetType,
       instantSearchInstance = _ref3.instantSearchInstance;
     var bindEventForHits = function bindEventForHits() {
@@ -939,7 +939,7 @@
       }
       var payloads = _buildEventPayloadsForHits({
         widgetType: widgetType,
-        index: index,
+        getIndex: getIndex,
         methodName: 'bindEvent',
         args: args,
         instantSearchInstance: instantSearchInstance
@@ -2669,13 +2669,17 @@
           if (!sendEvent) {
             sendEvent = createSendEventForHits({
               instantSearchInstance: instantSearchInstance,
-              index: helper.getIndex(),
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
               widgetType: this.$$type
             });
           }
           if (!bindEvent) {
             bindEvent = createBindEventForHits({
-              index: helper.getIndex(),
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
               widgetType: this.$$type,
               instantSearchInstance: instantSearchInstance
             });
@@ -3212,11 +3216,15 @@
             showMore = getShowMore(helper);
             sendEvent = createSendEventForHits({
               instantSearchInstance: instantSearchInstance,
-              index: helper.getIndex(),
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
               widgetType: this.$$type
             });
             bindEvent = createBindEventForHits({
-              index: helper.getIndex(),
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
               widgetType: this.$$type,
               instantSearchInstance: instantSearchInstance
             });
@@ -5651,7 +5659,9 @@
           if (!sendEvent) {
             sendEvent = createSendEventForHits({
               instantSearchInstance: instantSearchInstance,
-              index: helper.getIndex(),
+              getIndex: function getIndex() {
+                return helper.getIndex();
+              },
               widgetType: $$type$4
             });
           }
@@ -11976,7 +11986,9 @@
             scopedResult.results.hits = escapeHTML ? escapeHits(scopedResult.results.hits) : scopedResult.results.hits;
             var sendEvent = createSendEventForHits({
               instantSearchInstance: instantSearchInstance,
-              index: scopedResult.results.index,
+              getIndex: function getIndex() {
+                return scopedResult.results.index;
+              },
               widgetType: _this.$$type
             });
             return {
@@ -14890,7 +14902,7 @@
     };
   }
 
-  var version$1 = '4.64.2';
+  var version$1 = '4.65.0';
 
   var withUsage$r = createDocumentationMessageGenerator({
     name: 'instantsearch'
@@ -15526,20 +15538,142 @@
     createMetadataMiddleware: createMetadataMiddleware
   });
 
-  function cx() {
-    for (var _len = arguments.length, cssClasses = new Array(_len), _key = 0; _key < _len; _key++) {
-      cssClasses[_key] = arguments[_key];
+  function unwrapExports (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var _extends_1 = createCommonjsModule(function (module) {
+  function _extends() {
+    module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+    return _extends.apply(this, arguments);
+  }
+  module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  var _extends$1 = unwrapExports(_extends_1);
+
+  var objectWithoutPropertiesLoose = createCommonjsModule(function (module) {
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
     }
+    return target;
+  }
+  module.exports = _objectWithoutPropertiesLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  unwrapExports(objectWithoutPropertiesLoose);
 
-    return cssClasses.reduce(function (acc, className) {
+  var objectWithoutProperties = createCommonjsModule(function (module) {
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  module.exports = _objectWithoutProperties, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  });
+
+  var _objectWithoutProperties$1 = unwrapExports(objectWithoutProperties);
+
+  function cx() {
+    for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+      classNames[_key] = arguments[_key];
+    }
+    return classNames.reduce(function (acc, className) {
       if (Array.isArray(className)) {
         return acc.concat(className);
       }
-
       return acc.concat([className]);
     }, []).filter(Boolean).join(' ');
   }
 
+  var _excluded$9 = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
+  function createHighlightPartComponent(_ref) {
+    var createElement = _ref.createElement;
+    return function HighlightPart(_ref2) {
+      var classNames = _ref2.classNames,
+        children = _ref2.children,
+        highlightedTagName = _ref2.highlightedTagName,
+        isHighlighted = _ref2.isHighlighted,
+        nonHighlightedTagName = _ref2.nonHighlightedTagName;
+      var TagName = isHighlighted ? highlightedTagName : nonHighlightedTagName;
+      return createElement(TagName, {
+        className: isHighlighted ? classNames.highlighted : classNames.nonHighlighted
+      }, children);
+    };
+  }
+  function createHighlightComponent(_ref3) {
+    var createElement = _ref3.createElement,
+      Fragment = _ref3.Fragment;
+    var HighlightPart = createHighlightPartComponent({
+      createElement: createElement,
+      Fragment: Fragment
+    });
+    return function Highlight(userProps) {
+      // Not destructured in function signature, to make sure it's not exposed in
+      // the type definition.
+      var parts = userProps.parts,
+        _userProps$highlighte = userProps.highlightedTagName,
+        highlightedTagName = _userProps$highlighte === void 0 ? 'mark' : _userProps$highlighte,
+        _userProps$nonHighlig = userProps.nonHighlightedTagName,
+        nonHighlightedTagName = _userProps$nonHighlig === void 0 ? 'span' : _userProps$nonHighlig,
+        _userProps$separator = userProps.separator,
+        separator = _userProps$separator === void 0 ? ', ' : _userProps$separator,
+        className = userProps.className,
+        _userProps$classNames = userProps.classNames,
+        classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+        props = _objectWithoutProperties$1(userProps, _excluded$9);
+      return createElement("span", _extends$1({}, props, {
+        className: cx(classNames.root, className)
+      }), parts.map(function (part, partIndex) {
+        var isLastPart = partIndex === parts.length - 1;
+        return createElement(Fragment, {
+          key: partIndex
+        }, part.map(function (subPart, subPartIndex) {
+          return createElement(HighlightPart, {
+            key: subPartIndex,
+            classNames: classNames,
+            highlightedTagName: highlightedTagName,
+            nonHighlightedTagName: nonHighlightedTagName,
+            isHighlighted: subPart.isHighlighted
+          }, subPart.value);
+        }), !isLastPart && createElement("span", {
+          className: classNames.separator
+        }, separator));
+      }));
+    };
+  }
+
   function prepareTemplates(
   // can not use = {} here, since the template could have different constraints
   defaultTemplates) {
@@ -15573,14 +15707,6 @@
     }, preparedTemplates);
   }
 
-  function unwrapExports (x) {
-  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-  }
-
-  function createCommonjsModule(fn, module) {
-  	return module = { exports: {} }, fn(module, module.exports), module.exports;
-  }
-
   var compiler = createCommonjsModule(function (module, exports) {
   /*
    *  Copyright 2011 Twitter, Inc.
@@ -16359,125 +16485,6 @@
 
   var m$1=e$1.bind(h);
 
-  var _extends_1 = createCommonjsModule(function (module) {
-  function _extends() {
-    module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-    return _extends.apply(this, arguments);
-  }
-  module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  });
-
-  var _extends$1 = unwrapExports(_extends_1);
-
-  var objectWithoutPropertiesLoose = createCommonjsModule(function (module) {
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-    return target;
-  }
-  module.exports = _objectWithoutPropertiesLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  });
-
-  unwrapExports(objectWithoutPropertiesLoose);
-
-  var objectWithoutProperties = createCommonjsModule(function (module) {
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-    var target = objectWithoutPropertiesLoose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-      }
-    }
-    return target;
-  }
-  module.exports = _objectWithoutProperties, module.exports.__esModule = true, module.exports["default"] = module.exports;
-  });
-
-  var _objectWithoutProperties$1 = unwrapExports(objectWithoutProperties);
-
-  var _excluded$9 = ["parts", "highlightedTagName", "nonHighlightedTagName", "separator", "className", "classNames"];
-
-  function createHighlightPartComponent(_ref) {
-    var createElement = _ref.createElement;
-    return function HighlightPart(_ref2) {
-      var classNames = _ref2.classNames,
-          children = _ref2.children,
-          highlightedTagName = _ref2.highlightedTagName,
-          isHighlighted = _ref2.isHighlighted,
-          nonHighlightedTagName = _ref2.nonHighlightedTagName;
-      var TagName = isHighlighted ? highlightedTagName : nonHighlightedTagName;
-      return createElement(TagName, {
-        className: isHighlighted ? classNames.highlighted : classNames.nonHighlighted
-      }, children);
-    };
-  }
-
-  function createHighlightComponent(_ref3) {
-    var createElement = _ref3.createElement,
-        Fragment = _ref3.Fragment;
-    var HighlightPart = createHighlightPartComponent({
-      createElement: createElement,
-      Fragment: Fragment
-    });
-    return function Highlight(userProps) {
-      // Not destructured in function signature, to make sure it's not exposed in
-      // the type definition.
-      var parts = userProps.parts,
-          _userProps$highlighte = userProps.highlightedTagName,
-          highlightedTagName = _userProps$highlighte === void 0 ? 'mark' : _userProps$highlighte,
-          _userProps$nonHighlig = userProps.nonHighlightedTagName,
-          nonHighlightedTagName = _userProps$nonHighlig === void 0 ? 'span' : _userProps$nonHighlig,
-          _userProps$separator = userProps.separator,
-          separator = _userProps$separator === void 0 ? ', ' : _userProps$separator,
-          className = userProps.className,
-          _userProps$classNames = userProps.classNames,
-          classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
-          props = _objectWithoutProperties$1(userProps, _excluded$9);
-
-      return createElement("span", _extends$1({}, props, {
-        className: cx(classNames.root, className)
-      }), parts.map(function (part, partIndex) {
-        var isLastPart = partIndex === parts.length - 1;
-        return createElement(Fragment, {
-          key: partIndex
-        }, part.map(function (subPart, subPartIndex) {
-          return createElement(HighlightPart, {
-            key: subPartIndex,
-            classNames: classNames,
-            highlightedTagName: highlightedTagName,
-            nonHighlightedTagName: nonHighlightedTagName,
-            isHighlighted: subPart.isHighlighted
-          }, subPart.value);
-        }), !isLastPart && createElement("span", {
-          className: classNames.separator
-        }, separator));
-      }));
-    };
-  }
-
   var InternalHighlight = createHighlightComponent({
     createElement: h,
     Fragment: p
@@ -16689,6 +16696,49 @@
     }).trim();
   }
 
+  var RawHtml = /*#__PURE__*/function (_Component) {
+    _inherits(RawHtml, _Component);
+    var _super = _createSuper(RawHtml);
+    function RawHtml() {
+      var _this;
+      _classCallCheck(this, RawHtml);
+      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), "ref", y());
+      _defineProperty(_assertThisInitialized(_this), "nodes", []);
+      return _this;
+    }
+    _createClass(RawHtml, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        var fragment = new DocumentFragment();
+        var root = document.createElement('div');
+        root.innerHTML = this.props.content;
+        this.nodes = _toConsumableArray(root.children);
+        this.nodes.forEach(function (node) {
+          return fragment.appendChild(node);
+        });
+        this.ref.current.replaceWith(fragment);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.nodes.forEach(function (node) {
+          return node.outerHTML = '';
+        });
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        return h("div", {
+          ref: this.ref
+        });
+      }
+    }]);
+    return RawHtml;
+  }(d);
   var defaultProps = {
     data: {},
     rootTagName: 'div',
@@ -16697,12 +16747,12 @@
     templatesConfig: {}
   };
   // @TODO: Template should be a generic and receive TData to pass to Templates (to avoid TTemplateData to be set as `any`)
-  var Template = /*#__PURE__*/function (_Component) {
-    _inherits(Template, _Component);
-    var _super = _createSuper(Template);
+  var Template = /*#__PURE__*/function (_Component2) {
+    _inherits(Template, _Component2);
+    var _super2 = _createSuper(Template);
     function Template() {
       _classCallCheck(this, Template);
-      return _super.apply(this, arguments);
+      return _super2.apply(this, arguments);
     }
     _createClass(Template, [{
       key: "shouldComponentUpdate",
@@ -16712,14 +16762,14 @@
     }, {
       key: "render",
       value: function render() {
-        var _this = this;
+        var _this2 = this;
         {
           var nonFunctionTemplates = Object.keys(this.props.templates).filter(function (key) {
-            return typeof _this.props.templates[key] !== 'function';
+            return typeof _this2.props.templates[key] !== 'function';
           });
            _warning(nonFunctionTemplates.length === 0, "Hogan.js and string-based templates are deprecated and will not be supported in InstantSearch.js 5.x.\n\nYou can replace them with function-form templates and use either the provided `html` function or JSX templates.\n\nString-based templates: ".concat(nonFunctionTemplates.join(', '), ".\n\nSee: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#upgrade-templates")) ;
         }
-        var RootTagName = this.props.rootTagName;
+        var RootTagName = this.props.rootTagName === 'fragment' ? p : this.props.rootTagName;
         var useCustomCompileOptions = this.props.useCustomCompileOptions[this.props.templateKey];
         var compileOptions = useCustomCompileOptions ? this.props.templatesConfig.compileOptions : {};
         var content = renderTemplate({
@@ -16739,6 +16789,14 @@
         if (_typeof(content) === 'object') {
           return h(RootTagName, this.props.rootProps, content);
         }
+
+        // This is to handle Hogan templates with Fragment as rootTagName
+        if (RootTagName === p) {
+          return h(RawHtml, {
+            content: content,
+            key: content
+          });
+        }
         return h(RootTagName, _extends({}, this.props.rootProps, {
           dangerouslySetInnerHTML: {
             __html: content