instantsearch.js 4.58.0 → 4.59.0

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/">
-    <img alt="InstantSearch.js" src=".github/banner.png">
+    <img alt="InstantSearch.js" src="https://github.com/algolia/instantsearch/blob/master/.github/banner.png?raw=true">
   </a>
 
   <p align="center">

package/cjs/components/Pagination/Pagination.js

@@ -26,7 +26,7 @@ function Pagination(props) {
   }, (0, _preact.h)("ul", {
     className: props.cssClasses.list
   }, props.showFirst && (0, _preact.h)(PaginationLink, {
-    ariaLabel: "First",
+    ariaLabel: "First Page",
     className: props.cssClasses.firstPageItem,
     isDisabled: props.isFirstPage,
     templates: props.templates,
@@ -36,7 +36,7 @@ function Pagination(props) {
     cssClasses: props.cssClasses,
     createClickHandler: createClickHandler
   }), props.showPrevious && (0, _preact.h)(PaginationLink, {
-    ariaLabel: "Previous",
+    ariaLabel: "Previous Page",
     className: props.cssClasses.previousPageItem,
     isDisabled: props.isFirstPage,
     templates: props.templates,
@@ -59,7 +59,7 @@ function Pagination(props) {
       createClickHandler: createClickHandler
     });
   }), props.showNext && (0, _preact.h)(PaginationLink, {
-    ariaLabel: "Next",
+    ariaLabel: "Next Page",
     className: props.cssClasses.nextPageItem,
     isDisabled: props.isLastPage,
     templates: props.templates,
@@ -69,7 +69,7 @@ function Pagination(props) {
     cssClasses: props.cssClasses,
     createClickHandler: createClickHandler
   }), props.showLast && (0, _preact.h)(PaginationLink, {
-    ariaLabel: "Last",
+    ariaLabel: "Last Page, Page ".concat(props.nbPages),
     className: props.cssClasses.lastPageItem,
     isDisabled: props.isLastPage,
     templates: props.templates,

package/cjs/components/RefinementList/RefinementList.js

@@ -209,7 +209,8 @@ var RefinementList = /*#__PURE__*/function (_Component) {
         // This sets the search box to a controlled state because
         // we don't rely on the `refine` prop but on `onChange`.
         ,
-        searchAsYouType: false
+        searchAsYouType: false,
+        ariaLabel: "Search for filters"
       }));
       var facetValues = this.props.facetValues && this.props.facetValues.length > 0 && (0, _preact.h)("ul", {
         className: this.props.cssClasses.list

package/cjs/components/SearchBox/SearchBox.js

@@ -31,6 +31,7 @@ var defaultProps = {
   searchAsYouType: true,
   isSearchStalled: false,
   disabled: false,
+  ariaLabel: 'Search',
   onChange: _utils.noop,
   onSubmit: _utils.noop,
   onReset: _utils.noop,
@@ -147,7 +148,8 @@ var SearchBox = /*#__PURE__*/function (_Component) {
         showReset = _this$props4.showReset,
         showLoadingIndicator = _this$props4.showLoadingIndicator,
         templates = _this$props4.templates,
-        isSearchStalled = _this$props4.isSearchStalled;
+        isSearchStalled = _this$props4.isSearchStalled,
+        ariaLabel = _this$props4.ariaLabel;
       return (0, _preact.h)("div", {
         className: cssClasses.root
       }, (0, _preact.h)("form", {
@@ -174,7 +176,8 @@ var SearchBox = /*#__PURE__*/function (_Component) {
         maxLength: 512,
         onInput: this.onInput,
         onBlur: this.onBlur,
-        onFocus: this.onFocus
+        onFocus: this.onFocus,
+        "aria-label": ariaLabel
       }), (0, _preact.h)(_Template.default, {
         templateKey: "submit",
         rootTagName: "button",

package/cjs/components/Selector/Selector.js

@@ -10,13 +10,15 @@ function Selector(_ref) {
   var currentValue = _ref.currentValue,
     options = _ref.options,
     cssClasses = _ref.cssClasses,
-    setValue = _ref.setValue;
+    setValue = _ref.setValue,
+    ariaLabel = _ref.ariaLabel;
   return (0, _preact.h)("select", {
     className: (0, _uiComponentsShared.cx)(cssClasses.select),
     onChange: function onChange(event) {
       return setValue(event.target.value);
     },
-    value: "".concat(currentValue)
+    value: "".concat(currentValue),
+    "aria-label": ariaLabel
   }, options.map(function (option) {
     return (0, _preact.h)("option", {
       className: (0, _uiComponentsShared.cx)(cssClasses.option),

package/cjs/components/Slider/Slider.js

@@ -56,8 +56,10 @@ var Slider = /*#__PURE__*/function (_Component) {
         parseFloat(props['aria-valuenow']) * 100) / 100;
         var value = _typeof(tooltips) === 'object' && tooltips.format ? tooltips.format(roundedValue) : roundedValue;
         var className = (0, _uiComponentsShared.cx)(props.className, props['data-handle-key'] === 0 && 'rheostat-handle-lower', props['data-handle-key'] === 1 && 'rheostat-handle-upper');
+        var ariaLabel = props['data-handle-key'] === 0 ? 'Minimum Filter Handle' : 'Maximum Filter Handle';
         return (0, _preact.h)("div", _extends({}, props, {
-          className: className
+          className: className,
+          "aria-label": ariaLabel
         }), tooltips && (0, _preact.h)("div", {
           className: "rheostat-tooltip"
         }, value));

package/cjs/lib/InstantSearch.js

@@ -81,6 +81,7 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
     _defineProperty(_assertThisInitialized(_this), "_createURL", void 0);
     _defineProperty(_assertThisInitialized(_this), "_searchFunction", void 0);
     _defineProperty(_assertThisInitialized(_this), "_mainHelperSearch", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_insights", void 0);
     _defineProperty(_assertThisInitialized(_this), "middleware", []);
     _defineProperty(_assertThisInitialized(_this), "sendEventToInsights", void 0);
     /**
@@ -131,7 +132,7 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
       _options$routing = options.routing,
       routing = _options$routing === void 0 ? null : _options$routing,
       _options$insights = options.insights,
-      insights = _options$insights === void 0 ? false : _options$insights,
+      insights = _options$insights === void 0 ? undefined : _options$insights,
       searchFunction = options.searchFunction,
       _options$stalledSearc = options.stalledSearchDelay,
       stalledSearchDelay = _options$stalledSearc === void 0 ? 200 : _options$stalledSearc,
@@ -187,6 +188,7 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
     _this._createURL = defaultCreateURL;
     _this._initialUiState = initialUiState;
     _this._initialResults = null;
+    _this._insights = insights;
     if (searchFunction) {
       process.env.NODE_ENV === 'development' ? (0, _utils.warning)(false, "The `searchFunction` option is deprecated. Use `onStateChange` instead.") : void 0;
       _this._searchFunction = searchFunction;
@@ -198,8 +200,9 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
       _this.use((0, _createRouterMiddleware.createRouterMiddleware)(routerOptions));
     }
 
-    // This is the default middleware,
-    // any user-provided middleware will be added later and override this one.
+    // This is the default Insights middleware,
+    // added when `insights` is set to true by the user.
+    // Any user-provided middleware will be added later and override this one.
     if (insights) {
       var insightsOptions = typeof insights === 'boolean' ? {} : insights;
       insightsOptions.$$internal = true;
@@ -491,6 +494,24 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
         var instance = _ref6.instance;
         instance.started();
       });
+
+      // This is the automatic Insights middleware,
+      // added when `insights` is unset and the initial results possess `queryID`.
+      // Any user-provided middleware will be added later and override this one.
+      if (typeof this._insights === 'undefined') {
+        mainHelper.derivedHelpers[0].once('result', function () {
+          var hasAutomaticInsights = _this3.mainIndex.getScopedResults().some(function (_ref7) {
+            var results = _ref7.results;
+            return results === null || results === void 0 ? void 0 : results._automaticInsights;
+          });
+          if (hasAutomaticInsights) {
+            _this3.use((0, _createInsightsMiddleware.createInsightsMiddleware)({
+              $$internal: true,
+              $$automatic: true
+            }));
+          }
+        });
+      }
     }
 
     /**
@@ -520,8 +541,8 @@ var InstantSearch = /*#__PURE__*/function (_EventEmitter) {
       (_this$mainHelper2 = this.mainHelper) === null || _this$mainHelper2 === void 0 ? void 0 : _this$mainHelper2.removeAllListeners();
       this.mainHelper = null;
       this.helper = null;
-      this.middleware.forEach(function (_ref7) {
-        var instance = _ref7.instance;
+      this.middleware.forEach(function (_ref8) {
+        var instance = _ref8.instance;
         instance.unsubscribe();
       });
     }

package/cjs/lib/utils/createSendEventForFacet.js

@@ -5,6 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createSendEventForFacet = createSendEventForFacet;
 var _isFacetRefined = require("./isFacetRefined");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -23,7 +28,9 @@ function createSendEventForFacet(_ref) {
     }
     var facetValue = args[1],
       _args$ = args[2],
-      eventName = _args$ === void 0 ? 'Filter Applied' : _args$;
+      eventName = _args$ === void 0 ? 'Filter Applied' : _args$,
+      _args$2 = args[3],
+      additionalData = _args$2 === void 0 ? {} : _args$2;
     var _args$0$split = args[0].split(':'),
       _args$0$split2 = _slicedToArray(_args$0$split, 2),
       eventType = _args$0$split2[0],
@@ -31,7 +38,7 @@ function createSendEventForFacet(_ref) {
     var attribute = typeof attr === 'string' ? attr : attr(facetValue);
     if (args.length === 1 && _typeof(args[0]) === 'object') {
       instantSearchInstance.sendEventToInsights(args[0]);
-    } else if (eventType === 'click' && (args.length === 2 || args.length === 3)) {
+    } else if (eventType === 'click' && args.length >= 2 && args.length <= 4) {
       if (!(0, _isFacetRefined.isFacetRefined)(helper, attribute, facetValue)) {
         // send event only when the facet is being checked "ON"
         instantSearchInstance.sendEventToInsights({
@@ -39,16 +46,16 @@ function createSendEventForFacet(_ref) {
           widgetType: widgetType,
           eventType: eventType,
           eventModifier: eventModifier,
-          payload: {
+          payload: _objectSpread({
             eventName: eventName,
             index: helper.getIndex(),
             filters: ["".concat(attribute, ":").concat(facetValue)]
-          },
+          }, additionalData),
           attribute: attribute
         });
       }
     } else if (process.env.NODE_ENV === 'development') {
-      throw new Error("You need to pass two arguments like:\n  sendEvent('click', facetValue);\n\nIf you want to send a custom payload, you can pass one object: sendEvent(customPayload);\n");
+      throw new Error("You need to pass between two and four arguments like:\n  sendEvent('click', facetValue, eventName?, additionalData?);\n\nIf you want to send a custom payload, you can pass one object: sendEvent(customPayload);\n");
     }
   };
   return sendEventForFacet;

package/cjs/lib/utils/createSendEventForHits.js

@@ -7,6 +7,11 @@ exports._buildEventPayloadsForHits = _buildEventPayloadsForHits;
 exports.createBindEventForHits = createBindEventForHits;
 exports.createSendEventForHits = createSendEventForHits;
 var _serializer = require("./serializer");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -38,6 +43,7 @@ function _buildEventPayloadsForHits(_ref) {
     eventModifier = _args$0$split2[1];
   var hits = args[1];
   var eventName = args[2];
+  var additionalData = args[3] || {};
   if (!hits) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error("You need to pass hit or hits as the second argument like:\n  ".concat(methodName, "(eventType, hit);\n  "));
@@ -77,11 +83,11 @@ function _buildEventPayloadsForHits(_ref) {
         insightsMethod: 'viewedObjectIDs',
         widgetType: widgetType,
         eventType: eventType,
-        payload: {
+        payload: _objectSpread({
           eventName: eventName || 'Hits Viewed',
           index: index,
           objectIDs: objectIDsByChunk[i]
-        },
+        }, additionalData),
         hits: batch,
         eventModifier: eventModifier
       };
@@ -92,13 +98,13 @@ function _buildEventPayloadsForHits(_ref) {
         insightsMethod: 'clickedObjectIDsAfterSearch',
         widgetType: widgetType,
         eventType: eventType,
-        payload: {
+        payload: _objectSpread({
           eventName: eventName || 'Hit Clicked',
           index: index,
           queryID: queryID,
           objectIDs: objectIDsByChunk[i],
           positions: positionsByChunk[i]
-        },
+        }, additionalData),
         hits: batch,
         eventModifier: eventModifier
       };
@@ -109,12 +115,12 @@ function _buildEventPayloadsForHits(_ref) {
         insightsMethod: 'convertedObjectIDsAfterSearch',
         widgetType: widgetType,
         eventType: eventType,
-        payload: {
+        payload: _objectSpread({
           eventName: eventName || 'Hit Converted',
           index: index,
           queryID: queryID,
           objectIDs: objectIDsByChunk[i]
-        },
+        }, additionalData),
         hits: batch,
         eventModifier: eventModifier
       };

package/cjs/lib/version.js

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

package/cjs/middlewares/createInsightsMiddleware.js

@@ -30,7 +30,9 @@ function createInsightsMiddleware() {
     insightsInitParams = props.insightsInitParams,
     onEvent = props.onEvent,
     _props$$$internal = props.$$internal,
-    $$internal = _props$$$internal === void 0 ? false : _props$$$internal;
+    $$internal = _props$$$internal === void 0 ? false : _props$$$internal,
+    _props$$$automatic = props.$$automatic,
+    $$automatic = _props$$$automatic === void 0 ? false : _props$$$automatic;
   var potentialInsightsClient = _insightsClient;
   if (!_insightsClient && _insightsClient !== null) {
     (0, _utils.safelyRunOnBrowser)(function (_ref) {
@@ -121,6 +123,7 @@ function createInsightsMiddleware() {
     return {
       $$type: 'ais.insights',
       $$internal: $$internal,
+      $$automatic: $$automatic,
       onStateChange: function onStateChange() {},
       subscribe: function subscribe() {
         if (!insightsClient.shouldAddScript) return;
@@ -146,9 +149,14 @@ function createInsightsMiddleware() {
           userToken: helper.state.userToken,
           clickAnalytics: helper.state.clickAnalytics
         };
-        helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread(_objectSpread({}, helper.state), {}, {
-          clickAnalytics: true
-        }));
+
+        // We don't want to force clickAnalytics when the insights is enabled from the search response.
+        // This means we don't enable insights for indices that don't opt in
+        if (!$$automatic) {
+          helper.overrideStateWithoutTriggeringChangeEvent(_objectSpread(_objectSpread({}, helper.state), {}, {
+            clickAnalytics: true
+          }));
+        }
         if (!$$internal) {
           instantSearchInstance.scheduleSearch();
         }
@@ -215,6 +223,9 @@ function createInsightsMiddleware() {
           } else if (event.insightsMethod) {
             // Source is used to differentiate events sent by instantsearch from those sent manually.
             event.payload.algoliaSource = ['instantsearch'];
+            if ($$automatic) {
+              event.payload.algoliaSource.push('instantsearch-automatic');
+            }
             if (event.eventModifier === 'internal') {
               event.payload.algoliaSource.push('instantsearch-internal');
             }

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

@@ -37,7 +37,8 @@ var renderer = function renderer(_ref) {
       cssClasses: cssClasses,
       currentValue: currentRefinement,
       options: options,
-      setValue: refine
+      setValue: refine,
+      ariaLabel: "Sort results by"
     })), containerNode);
   };
 };

package/dist/instantsearch.development.d.ts

@@ -531,11 +531,11 @@ declare type BrowserHistoryArgs<TRouteState> = {
     push?: (url: string) => void;
 };
 
-declare type BuiltInBindEventForHits = (eventType: string, hits: Hit | Hit[], eventName?: string) => string;
+declare type BuiltInBindEventForHits = (eventType: string, hits: Hit | Hit[], eventName?: string, additionalData?: Record<string, any>) => string;
 
-declare type BuiltInSendEventForFacet = (eventType: string, facetValue: string, eventName?: string) => void;
+declare type BuiltInSendEventForFacet = (eventType: string, facetValue: string, eventName?: string, additionalData?: Record<string, any>) => void;
 
-declare type BuiltInSendEventForHits = (eventType: string, hits: Hit | Hit[], eventName?: string) => void;
+declare type BuiltInSendEventForHits = (eventType: string, hits: Hit | Hit[], eventName?: string, additionalData?: Record<string, any>) => void;
 
 declare type BuiltInSendEventForToggle = (eventType: string, isRefined: boolean, eventName?: string) => void;
 
@@ -2377,6 +2377,7 @@ declare class InstantSearch<TUiState extends UiState = UiState, TRouteState = TU
     _createURL: CreateURL<TUiState>;
     _searchFunction?: InstantSearchOptions['searchFunction'];
     _mainHelperSearch?: AlgoliaSearchHelper['search'];
+    _insights: InstantSearchOptions['insights'];
     middleware: Array<{
         creator: Middleware<TUiState>;
         instance: MiddlewareDefinition<TUiState>;