instantsearch-ui-components 0.7.0 → 0.9.0

package/dist/cjs/components/Carousel.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCarouselComponent = createCarouselComponent;
+exports.generateCarouselId = generateCarouselId;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _lib = require("../lib");
+var _recommendShared = require("./recommend-shared");
+var _excluded = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "items", "translations"];
+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) { (0, _defineProperty2.default)(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; }
+var lastCarouselId = 0;
+function generateCarouselId() {
+  return "ais-Carousel-".concat(lastCarouselId++);
+}
+function PreviousIconDefaultComponent(_ref) {
+  var createElement = _ref.createElement;
+  return createElement("svg", {
+    width: "8",
+    height: "16",
+    viewBox: "0 0 8 16",
+    fill: "none"
+  }, createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
+  }));
+}
+function NextIconDefaultComponent(_ref2) {
+  var createElement = _ref2.createElement;
+  return createElement("svg", {
+    width: "8",
+    height: "16",
+    viewBox: "0 0 8 16",
+    fill: "none"
+  }, createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
+  }));
+}
+function createCarouselComponent(_ref3) {
+  var createElement = _ref3.createElement,
+    Fragment = _ref3.Fragment;
+  return function Carousel(userProps) {
+    var listRef = userProps.listRef,
+      nextButtonRef = userProps.nextButtonRef,
+      previousButtonRef = userProps.previousButtonRef,
+      carouselIdRef = userProps.carouselIdRef,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      _userProps$itemCompon = userProps.itemComponent,
+      ItemComponent = _userProps$itemCompon === void 0 ? (0, _recommendShared.createDefaultItemComponent)({
+        createElement: createElement,
+        Fragment: Fragment
+      }) : _userProps$itemCompon,
+      _userProps$previousIc = userProps.previousIconComponent,
+      PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
+      _userProps$nextIconCo = userProps.nextIconComponent,
+      NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+      items = userProps.items,
+      userTranslations = userProps.translations,
+      props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
+    var translations = _objectSpread({
+      listLabel: 'Items',
+      nextButtonLabel: 'Next',
+      nextButtonTitle: 'Next',
+      previousButtonLabel: 'Previous',
+      previousButtonTitle: 'Previous'
+    }, userTranslations);
+    var cssClasses = {
+      root: (0, _lib.cx)('ais-Carousel', classNames.root),
+      list: (0, _lib.cx)('ais-Carousel-list', classNames.list),
+      item: (0, _lib.cx)('ais-Carousel-item', classNames.item),
+      navigation: (0, _lib.cx)('ais-Carousel-navigation', classNames.navigation),
+      navigationNext: (0, _lib.cx)('ais-Carousel-navigation--next', classNames.navigationNext),
+      navigationPrevious: (0, _lib.cx)('ais-Carousel-navigation--previous', classNames.navigationPrevious)
+    };
+    function scrollLeft() {
+      if (listRef.current) {
+        listRef.current.scrollLeft -= listRef.current.offsetWidth * 0.75;
+      }
+    }
+    function scrollRight() {
+      if (listRef.current) {
+        listRef.current.scrollLeft += listRef.current.offsetWidth * 0.75;
+      }
+    }
+    function updateNavigationButtonsProps() {
+      if (!listRef.current || !previousButtonRef.current || !nextButtonRef.current) {
+        return;
+      }
+      previousButtonRef.current.hidden = listRef.current.scrollLeft <= 0;
+      nextButtonRef.current.hidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
+    }
+    if (items.length === 0) {
+      return null;
+    }
+    return createElement("div", (0, _extends2.default)({}, props, {
+      className: (0, _lib.cx)(cssClasses.root)
+    }), createElement("button", {
+      ref: previousButtonRef,
+      title: translations.previousButtonTitle,
+      "aria-label": translations.previousButtonLabel,
+      hidden: true,
+      "aria-controls": carouselIdRef.current,
+      className: (0, _lib.cx)(cssClasses.navigation, cssClasses.navigationPrevious),
+      onClick: function onClick(event) {
+        event.preventDefault();
+        scrollLeft();
+      }
+    }, createElement(PreviousIconComponent, {
+      createElement: createElement
+    })), createElement("ol", {
+      className: (0, _lib.cx)(cssClasses.list),
+      ref: listRef,
+      tabIndex: 0,
+      id: carouselIdRef.current,
+      "aria-roledescription": "carousel",
+      "aria-label": translations.listLabel,
+      "aria-live": "polite",
+      onScroll: updateNavigationButtonsProps,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollLeft();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollRight();
+        }
+      }
+    }, items.map(function (item, index) {
+      return createElement("li", {
+        key: item.objectID,
+        className: (0, _lib.cx)(cssClasses.item),
+        "aria-roledescription": "slide",
+        "aria-label": "".concat(index + 1, " of ").concat(items.length)
+      }, createElement(ItemComponent, {
+        item: item
+      }));
+    })), createElement("button", {
+      ref: nextButtonRef,
+      title: translations.nextButtonTitle,
+      "aria-label": translations.nextButtonLabel,
+      "aria-controls": carouselIdRef.current,
+      className: (0, _lib.cx)(cssClasses.navigation, cssClasses.navigationNext),
+      onClick: function onClick(event) {
+        event.preventDefault();
+        scrollRight();
+      }
+    }, createElement(NextIconComponent, {
+      createElement: createElement
+    })));
+  };
+}

package/dist/cjs/components/FrequentlyBoughtTogether.js

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _lib = require("../lib");
 var _recommendShared = require("./recommend-shared");
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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) { (0, _defineProperty2.default)(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 createFrequentlyBoughtTogetherComponent(_ref) {
@@ -34,11 +34,11 @@ function createFrequentlyBoughtTogetherComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? (0, _recommendShared.createListViewComponent)({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? (0, _recommendShared.createListComponent)({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -67,9 +67,8 @@ function createFrequentlyBoughtTogetherComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/cjs/components/LookingSimilar.js

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _lib = require("../lib");
 var _recommendShared = require("./recommend-shared");
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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) { (0, _defineProperty2.default)(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 createLookingSimilarComponent(_ref) {
@@ -34,11 +34,11 @@ function createLookingSimilarComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? (0, _recommendShared.createListViewComponent)({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? (0, _recommendShared.createListComponent)({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -67,9 +67,8 @@ function createLookingSimilarComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/cjs/components/RelatedProducts.js

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _lib = require("../lib");
 var _recommendShared = require("./recommend-shared");
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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) { (0, _defineProperty2.default)(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 createRelatedProductsComponent(_ref) {
@@ -34,11 +34,11 @@ function createRelatedProductsComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? (0, _recommendShared.createListViewComponent)({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? (0, _recommendShared.createListComponent)({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -67,9 +67,8 @@ function createRelatedProductsComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/cjs/components/TrendingItems.js

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _lib = require("../lib");
 var _recommendShared = require("./recommend-shared");
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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) { (0, _defineProperty2.default)(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 createTrendingItemsComponent(_ref) {
@@ -34,11 +34,11 @@ function createTrendingItemsComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? (0, _recommendShared.createListViewComponent)({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? (0, _recommendShared.createListComponent)({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -67,9 +67,8 @@ function createTrendingItemsComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/cjs/components/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _Carousel = require("./Carousel");
+Object.keys(_Carousel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Carousel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Carousel[key];
+    }
+  });
+});
 var _FrequentlyBoughtTogether = require("./FrequentlyBoughtTogether");
 Object.keys(_FrequentlyBoughtTogether).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -36,6 +47,17 @@ Object.keys(_Hits).forEach(function (key) {
     }
   });
 });
+var _LookingSimilar = require("./LookingSimilar");
+Object.keys(_LookingSimilar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LookingSimilar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LookingSimilar[key];
+    }
+  });
+});
 var _RelatedProducts = require("./RelatedProducts");
 Object.keys(_RelatedProducts).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -57,15 +79,4 @@ Object.keys(_TrendingItems).forEach(function (key) {
       return _TrendingItems[key];
     }
   });
-});
-var _LookingSimilar = require("./LookingSimilar");
-Object.keys(_LookingSimilar).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _LookingSimilar[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _LookingSimilar[key];
-    }
-  });
 });

package/dist/cjs/components/recommend-shared/DefaultEmpty.js

@@ -7,8 +7,7 @@ exports.createDefaultEmptyComponent = createDefaultEmptyComponent;
 function createDefaultEmptyComponent(_ref) {
   var createElement = _ref.createElement,
     Fragment = _ref.Fragment;
-  var _ref2 = createElement(Fragment, null, "No results");
   return function DefaultEmpty() {
-    return _ref2;
+    return createElement(Fragment, null, "No results");
   };
 }

package/dist/cjs/components/recommend-shared/{ListView.js → List.js}

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createListViewComponent = createListViewComponent;
-function createListViewComponent(_ref) {
+exports.createListComponent = createListComponent;
+function createListComponent(_ref) {
   var createElement = _ref.createElement;
-  return function ListView(userProps) {
+  return function List(userProps) {
     var _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
       ItemComponent = userProps.itemComponent,

package/dist/cjs/components/recommend-shared/index.js

@@ -36,14 +36,14 @@ Object.keys(_DefaultItem).forEach(function (key) {
     }
   });
 });
-var _ListView = require("./ListView");
-Object.keys(_ListView).forEach(function (key) {
+var _List = require("./List");
+Object.keys(_List).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ListView[key]) return;
+  if (key in exports && exports[key] === _List[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _ListView[key];
+      return _List[key];
     }
   });
 });

package/dist/cjs/version.js

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

package/dist/es/components/Carousel.d.ts

@@ -0,0 +1,63 @@
+import type { ComponentProps, MutableRef, RecommendItemComponentProps, RecordWithObjectID, Renderer } from '../types';
+export type CarouselProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & {
+    listRef: MutableRef<HTMLOListElement | null>;
+    nextButtonRef: MutableRef<HTMLButtonElement | null>;
+    previousButtonRef: MutableRef<HTMLButtonElement | null>;
+    carouselIdRef: MutableRef<string>;
+    items: Array<RecordWithObjectID<TObject>>;
+    itemComponent?: (props: RecommendItemComponentProps<RecordWithObjectID<TObject>> & TComponentProps) => JSX.Element;
+    previousIconComponent?: () => JSX.Element;
+    nextIconComponent?: () => JSX.Element;
+    classNames?: Partial<CarouselClassNames>;
+    translations?: Partial<CarouselTranslations>;
+};
+export type CarouselClassNames = {
+    /**
+     * Class names to apply to the root element
+     */
+    root: string | string[];
+    /**
+     * Class names to apply to the list element
+     */
+    list: string | string[];
+    /**
+     * Class names to apply to each item element
+     */
+    item: string | string[];
+    /**
+     * Class names to apply to both navigation elements
+     */
+    navigation: string | string[];
+    /**
+     * Class names to apply to the next navigation element
+     */
+    navigationNext: string | string[];
+    /**
+     * Class names to apply to the previous navigation element
+     */
+    navigationPrevious: string | string[];
+};
+export type CarouselTranslations = {
+    /**
+     * The label of the next navigation element
+     */
+    nextButtonLabel: string;
+    /**
+     * The title of the next navigation element
+     */
+    nextButtonTitle: string;
+    /**
+     * The label of the previous navigation element
+     */
+    previousButtonLabel: string;
+    /**
+     * The title of the previous navigation element
+     */
+    previousButtonTitle: string;
+    /**
+     * The label of the carousel
+     */
+    listLabel: string;
+};
+export declare function generateCarouselId(): string;
+export declare function createCarouselComponent({ createElement, Fragment }: Renderer): <TObject extends Record<string, unknown>>(userProps: CarouselProps<TObject>) => JSX.Element | null;

package/dist/es/components/Carousel.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "items", "translations"];
+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; }
+import { cx } from "../lib/index.js";
+import { createDefaultItemComponent } from "./recommend-shared/index.js";
+var lastCarouselId = 0;
+export function generateCarouselId() {
+  return "ais-Carousel-".concat(lastCarouselId++);
+}
+function PreviousIconDefaultComponent(_ref) {
+  var createElement = _ref.createElement;
+  return createElement("svg", {
+    width: "8",
+    height: "16",
+    viewBox: "0 0 8 16",
+    fill: "none"
+  }, createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
+  }));
+}
+function NextIconDefaultComponent(_ref2) {
+  var createElement = _ref2.createElement;
+  return createElement("svg", {
+    width: "8",
+    height: "16",
+    viewBox: "0 0 8 16",
+    fill: "none"
+  }, createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: "currentColor",
+    d: "M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
+  }));
+}
+export function createCarouselComponent(_ref3) {
+  var createElement = _ref3.createElement,
+    Fragment = _ref3.Fragment;
+  return function Carousel(userProps) {
+    var listRef = userProps.listRef,
+      nextButtonRef = userProps.nextButtonRef,
+      previousButtonRef = userProps.previousButtonRef,
+      carouselIdRef = userProps.carouselIdRef,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      _userProps$itemCompon = userProps.itemComponent,
+      ItemComponent = _userProps$itemCompon === void 0 ? createDefaultItemComponent({
+        createElement: createElement,
+        Fragment: Fragment
+      }) : _userProps$itemCompon,
+      _userProps$previousIc = userProps.previousIconComponent,
+      PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
+      _userProps$nextIconCo = userProps.nextIconComponent,
+      NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+      items = userProps.items,
+      userTranslations = userProps.translations,
+      props = _objectWithoutProperties(userProps, _excluded);
+    var translations = _objectSpread({
+      listLabel: 'Items',
+      nextButtonLabel: 'Next',
+      nextButtonTitle: 'Next',
+      previousButtonLabel: 'Previous',
+      previousButtonTitle: 'Previous'
+    }, userTranslations);
+    var cssClasses = {
+      root: cx('ais-Carousel', classNames.root),
+      list: cx('ais-Carousel-list', classNames.list),
+      item: cx('ais-Carousel-item', classNames.item),
+      navigation: cx('ais-Carousel-navigation', classNames.navigation),
+      navigationNext: cx('ais-Carousel-navigation--next', classNames.navigationNext),
+      navigationPrevious: cx('ais-Carousel-navigation--previous', classNames.navigationPrevious)
+    };
+    function scrollLeft() {
+      if (listRef.current) {
+        listRef.current.scrollLeft -= listRef.current.offsetWidth * 0.75;
+      }
+    }
+    function scrollRight() {
+      if (listRef.current) {
+        listRef.current.scrollLeft += listRef.current.offsetWidth * 0.75;
+      }
+    }
+    function updateNavigationButtonsProps() {
+      if (!listRef.current || !previousButtonRef.current || !nextButtonRef.current) {
+        return;
+      }
+      previousButtonRef.current.hidden = listRef.current.scrollLeft <= 0;
+      nextButtonRef.current.hidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
+    }
+    if (items.length === 0) {
+      return null;
+    }
+    return createElement("div", _extends({}, props, {
+      className: cx(cssClasses.root)
+    }), createElement("button", {
+      ref: previousButtonRef,
+      title: translations.previousButtonTitle,
+      "aria-label": translations.previousButtonLabel,
+      hidden: true,
+      "aria-controls": carouselIdRef.current,
+      className: cx(cssClasses.navigation, cssClasses.navigationPrevious),
+      onClick: function onClick(event) {
+        event.preventDefault();
+        scrollLeft();
+      }
+    }, createElement(PreviousIconComponent, {
+      createElement: createElement
+    })), createElement("ol", {
+      className: cx(cssClasses.list),
+      ref: listRef,
+      tabIndex: 0,
+      id: carouselIdRef.current,
+      "aria-roledescription": "carousel",
+      "aria-label": translations.listLabel,
+      "aria-live": "polite",
+      onScroll: updateNavigationButtonsProps,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollLeft();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollRight();
+        }
+      }
+    }, items.map(function (item, index) {
+      return createElement("li", {
+        key: item.objectID,
+        className: cx(cssClasses.item),
+        "aria-roledescription": "slide",
+        "aria-label": "".concat(index + 1, " of ").concat(items.length)
+      }, createElement(ItemComponent, {
+        item: item
+      }));
+    })), createElement("button", {
+      ref: nextButtonRef,
+      title: translations.nextButtonTitle,
+      "aria-label": translations.nextButtonLabel,
+      "aria-controls": carouselIdRef.current,
+      className: cx(cssClasses.navigation, cssClasses.navigationNext),
+      onClick: function onClick(event) {
+        event.preventDefault();
+        scrollRight();
+      }
+    }, createElement(NextIconComponent, {
+      createElement: createElement
+    })));
+  };
+}

package/dist/es/components/FrequentlyBoughtTogether.d.ts

@@ -1,4 +1,4 @@
 /** @jsx createElement */
 import type { Renderer, ComponentProps, RecommendComponentProps } from '../types';
 export type FrequentlyBoughtTogetherProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
-export declare function createFrequentlyBoughtTogetherComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: FrequentlyBoughtTogetherProps<TObject, Record<string, unknown>>) => JSX.Element;
+export declare function createFrequentlyBoughtTogetherComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: FrequentlyBoughtTogetherProps<TObject>) => JSX.Element;

package/dist/es/components/FrequentlyBoughtTogether.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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; }
 import { cx } from "../lib/index.js";
-import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListViewComponent } from "./recommend-shared/index.js";
+import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListComponent } from "./recommend-shared/index.js";
 export function createFrequentlyBoughtTogetherComponent(_ref) {
   var createElement = _ref.createElement,
     Fragment = _ref.Fragment;
@@ -27,11 +27,11 @@ export function createFrequentlyBoughtTogetherComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? createListViewComponent({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? createListComponent({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -60,9 +60,8 @@ export function createFrequentlyBoughtTogetherComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/es/components/LookingSimilar.d.ts

@@ -1,4 +1,4 @@
 /** @jsx createElement */
 import type { ComponentProps, RecommendComponentProps, Renderer } from '../types';
 export type LookingSimilarProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
-export declare function createLookingSimilarComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: LookingSimilarProps<TObject, Record<string, unknown>>) => JSX.Element;
+export declare function createLookingSimilarComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: LookingSimilarProps<TObject>) => JSX.Element;

package/dist/es/components/LookingSimilar.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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; }
 import { cx } from "../lib/index.js";
-import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListViewComponent } from "./recommend-shared/index.js";
+import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListComponent } from "./recommend-shared/index.js";
 export function createLookingSimilarComponent(_ref) {
   var createElement = _ref.createElement,
     Fragment = _ref.Fragment;
@@ -27,11 +27,11 @@ export function createLookingSimilarComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? createListViewComponent({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? createListComponent({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -60,9 +60,8 @@ export function createLookingSimilarComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/es/components/RelatedProducts.d.ts

@@ -1,4 +1,4 @@
 /** @jsx createElement */
 import type { ComponentProps, RecommendComponentProps, Renderer } from '../types';
 export type RelatedProductsProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
-export declare function createRelatedProductsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: RelatedProductsProps<TObject, Record<string, unknown>>) => JSX.Element;
+export declare function createRelatedProductsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: RelatedProductsProps<TObject>) => JSX.Element;

package/dist/es/components/RelatedProducts.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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; }
 import { cx } from "../lib/index.js";
-import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListViewComponent } from "./recommend-shared/index.js";
+import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListComponent } from "./recommend-shared/index.js";
 export function createRelatedProductsComponent(_ref) {
   var createElement = _ref.createElement,
     Fragment = _ref.Fragment;
@@ -27,11 +27,11 @@ export function createRelatedProductsComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? createListViewComponent({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? createListComponent({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -60,9 +60,8 @@ export function createRelatedProductsComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/es/components/TrendingItems.d.ts

@@ -1,4 +1,4 @@
 /** @jsx createElement */
 import type { ComponentProps, RecommendComponentProps, Renderer } from '../types';
 export type TrendingItemsProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = ComponentProps<'div'> & RecommendComponentProps<TObject, TComponentProps>;
-export declare function createTrendingItemsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: TrendingItemsProps<TObject, Record<string, unknown>>) => JSX.Element;
+export declare function createTrendingItemsComponent({ createElement, Fragment, }: Renderer): <TObject>(userProps: TrendingItemsProps<TObject>) => JSX.Element;

package/dist/es/components/TrendingItems.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "view", "items", "status", "translations", "sendEvent"];
+var _excluded = ["classNames", "emptyComponent", "headerComponent", "itemComponent", "layout", "items", "status", "translations", "sendEvent"];
 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; }
 import { cx } from "../lib/index.js";
-import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListViewComponent } from "./recommend-shared/index.js";
+import { createDefaultEmptyComponent, createDefaultHeaderComponent, createDefaultItemComponent, createListComponent } from "./recommend-shared/index.js";
 export function createTrendingItemsComponent(_ref) {
   var createElement = _ref.createElement,
     Fragment = _ref.Fragment;
@@ -27,11 +27,11 @@ export function createTrendingItemsComponent(_ref) {
         createElement: createElement,
         Fragment: Fragment
       }) : _userProps$itemCompon,
-      _userProps$view = userProps.view,
-      View = _userProps$view === void 0 ? createListViewComponent({
+      _userProps$layout = userProps.layout,
+      Layout = _userProps$layout === void 0 ? createListComponent({
         createElement: createElement,
         Fragment: Fragment
-      }) : _userProps$view,
+      }) : _userProps$layout,
       items = userProps.items,
       status = userProps.status,
       userTranslations = userProps.translations,
@@ -60,9 +60,8 @@ export function createTrendingItemsComponent(_ref) {
       classNames: cssClasses,
       items: items,
       translations: translations
-    }), createElement(View, {
+    }), createElement(Layout, {
       classNames: cssClasses,
-      translations: translations,
       itemComponent: ItemComponent,
       items: items,
       sendEvent: sendEvent

package/dist/es/components/index.d.ts

@@ -1,6 +1,7 @@
+export * from './Carousel';
 export * from './FrequentlyBoughtTogether';
 export * from './Highlight';
 export * from './Hits';
+export * from './LookingSimilar';
 export * from './RelatedProducts';
 export * from './TrendingItems';
-export * from './LookingSimilar';

package/dist/es/components/index.js

@@ -1,6 +1,7 @@
+export * from "./Carousel.js";
 export * from "./FrequentlyBoughtTogether.js";
 export * from "./Highlight.js";
 export * from "./Hits.js";
+export * from "./LookingSimilar.js";
 export * from "./RelatedProducts.js";
-export * from "./TrendingItems.js";
-export * from "./LookingSimilar.js";
+export * from "./TrendingItems.js";

package/dist/es/components/recommend-shared/DefaultEmpty.js

@@ -1,8 +1,7 @@
 export function createDefaultEmptyComponent(_ref) {
   var createElement = _ref.createElement,
     Fragment = _ref.Fragment;
-  var _ref2 = createElement(Fragment, null, "No results");
   return function DefaultEmpty() {
-    return _ref2;
+    return createElement(Fragment, null, "No results");
   };
 }

package/dist/es/components/recommend-shared/List.d.ts

@@ -0,0 +1,3 @@
+/** @jsx createElement */
+import type { RecommendClassNames, RecordWithObjectID, Renderer, RecommendLayoutProps } from '../../types';
+export declare function createListComponent({ createElement }: Renderer): <TItem extends RecordWithObjectID>(userProps: RecommendLayoutProps<TItem, Partial<RecommendClassNames>>) => JSX.Element;

package/dist/es/components/recommend-shared/{ListView.js → List.js}

@@ -1,6 +1,6 @@
-export function createListViewComponent(_ref) {
+export function createListComponent(_ref) {
   var createElement = _ref.createElement;
-  return function ListView(userProps) {
+  return function List(userProps) {
     var _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
       ItemComponent = userProps.itemComponent,

package/dist/es/components/recommend-shared/index.d.ts

@@ -1,4 +1,4 @@
 export * from './DefaultEmpty';
 export * from './DefaultHeader';
 export * from './DefaultItem';
-export * from './ListView';
+export * from './List';

package/dist/es/components/recommend-shared/index.js

@@ -1,4 +1,4 @@
 export * from "./DefaultEmpty.js";
 export * from "./DefaultHeader.js";
 export * from "./DefaultItem.js";
-export * from "./ListView.js";
+export * from "./List.js";

package/dist/es/types/Recommend.d.ts

@@ -35,11 +35,10 @@ export type RecommendTranslations = {
      */
     sliderLabel: string;
 };
-export type RecommendViewProps<TItem extends RecordWithObjectID, TTranslations extends Record<string, string>, TClassNames extends Record<string, string>> = {
+export type RecommendLayoutProps<TItem extends RecordWithObjectID, TClassNames extends Record<string, string>> = {
     classNames: TClassNames;
     itemComponent: <TComponentProps extends Record<string, unknown> = Record<string, unknown>>(props: RecommendItemComponentProps<RecordWithObjectID<TItem>> & TComponentProps) => JSX.Element;
     items: TItem[];
-    translations: TTranslations;
     sendEvent: SendEventForHits;
 };
 export type RecommendComponentProps<TObject, TComponentProps extends Record<string, unknown> = Record<string, unknown>> = {
@@ -51,7 +50,7 @@ export type RecommendComponentProps<TObject, TComponentProps extends Record<stri
     status: RecommendStatus;
     translations?: Partial<RecommendTranslations>;
     sendEvent: SendEventForHits;
-    view?: (props: RecommendViewProps<RecordWithObjectID<TObject>, Required<RecommendTranslations>, Record<string, string>> & TComponentProps) => JSX.Element;
+    layout?: (props: RecommendLayoutProps<RecordWithObjectID<TObject>, Record<string, string>> & TComponentProps) => JSX.Element;
 };
 export type RecommendInnerComponentProps<TObject> = {
     classNames: Partial<RecommendClassNames>;
@@ -60,8 +59,6 @@ export type RecommendInnerComponentProps<TObject> = {
 };
 export type RecordWithObjectID<TObject = Record<string, unknown>> = TObject & {
     objectID: string;
-    __position: number;
-    __queryID?: string;
 };
 export type RecommendItemComponentProps<TObject> = {
     item: TObject;

package/dist/es/types/Renderer.d.ts

@@ -19,6 +19,9 @@ export type ElementType<TProps = any> = {
     [TKey in keyof IntrinsicElements]: TProps extends IntrinsicElements[TKey] ? TKey : never;
 }[keyof IntrinsicElements] | FunctionComponent<TProps>;
 export type ComponentProps<TComponent extends keyof IntrinsicElements> = IntrinsicElements[TComponent];
+export type MutableRef<T> = {
+    current: T;
+};
 export type VNode<TProps = any> = {
     type: any;
     props: TProps & {

package/dist/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.7.0";
+declare const _default: "0.9.0";
 export default _default;

package/dist/es/version.js

@@ -1 +1 @@
-export default '0.7.0';
+export default '0.9.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantsearch-ui-components",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Common UI components for InstantSearch.",
   "types": "dist/es/index.d.ts",
   "main": "dist/cjs/index.js",
@@ -39,9 +39,9 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn build:cjs && yarn build:es && yarn build:types",
-    "build:es:base": "BABEL_ENV=es babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*'",
+    "build:es:base": "BABEL_ENV=es,disableHoisting babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*'",
     "build:es": "yarn build:es:base --quiet",
-    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/prepare-cjs.sh",
+    "build:cjs": "BABEL_ENV=cjs,disableHoisting babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/prepare-cjs.sh",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/es",
     "version": "./scripts/version.cjs",
     "watch:es": "yarn --silent build:es:base --watch"
@@ -49,5 +49,5 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2"
   },
-  "gitHead": "0b125d8a3fb2a5905aea9b6b540e07ab91649215"
+  "gitHead": "1583f2bc8e74ccccc59a0bd0193f69f9c77bf636"
 }

package/dist/es/components/recommend-shared/ListView.d.ts

@@ -1,3 +0,0 @@
-/** @jsx createElement */
-import type { RecommendClassNames, RecommendTranslations, RecordWithObjectID, Renderer, RecommendViewProps } from '../../types';
-export declare function createListViewComponent({ createElement }: Renderer): <TItem extends RecordWithObjectID>(userProps: RecommendViewProps<TItem, RecommendTranslations, Partial<RecommendClassNames>>) => JSX.Element;