instantsearch-ui-components 0.11.2 → 0.13.0

package/dist/cjs/lib/utils/startsWith.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.startsWith = startsWith;
+function startsWith(str, prefix) {
+  return str.slice(0, prefix.length) === prefix;
+}

package/dist/cjs/version.js

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

package/dist/cjs/warn.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warn = warn;
+exports.warnCache = void 0;
+/* eslint-disable no-console, no-empty */
+
+var warnCache = exports.warnCache = {
+  current: {}
+};
+
+/**
+ * Logs a warning if the condition is not met.
+ * This is used to log issues in development environment only.
+ */
+function warn(condition, message) {
+  if (!(process.env.NODE_ENV === 'development')) {
+    return;
+  }
+  if (condition) {
+    return;
+  }
+  var sanitizedMessage = message.trim();
+  var hasAlreadyPrinted = warnCache.current[sanitizedMessage];
+  if (!hasAlreadyPrinted) {
+    warnCache.current[sanitizedMessage] = true;
+    var warning = "[instantsearch-ui-components] ".concat(sanitizedMessage);
+    console.warn(warning);
+    try {
+      // Welcome to debugging InstantSearch.
+      //
+      // This error was thrown as a convenience so that you can find the source
+      // of the warning that appears in the console by enabling "Pause on exceptions"
+      // in your debugger.
+      throw new Error(warning);
+    } catch (error) {}
+  }
+}

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

@@ -0,0 +1,38 @@
+import type { ComponentChildren, ComponentProps, Renderer } from '../types';
+export type ButtonVariant = 'primary' | 'ghost' | 'outline';
+export type ButtonSize = 'sm' | 'md';
+export type ButtonProps = Omit<ComponentProps<'button'>, 'children'> & {
+    /**
+     * The button variant
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The button size
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button contains only an icon (applies square padding)
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The button class name
+     */
+    className?: string;
+    /**
+     * The button content
+     */
+    children?: ComponentChildren;
+    /**
+     * Click event handler
+     */
+    onClick?: (event: any) => void;
+};
+export declare function createButtonComponent({ createElement, }: Pick<Renderer, 'createElement'>): (userProps: ButtonProps) => JSX.Element;

package/dist/es/components/Button.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant", "size", "iconOnly", "className", "children"];
+import { cx } from "../lib/cx.js";
+export function createButtonComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function Button(userProps) {
+    var _userProps$variant = userProps.variant,
+      variant = _userProps$variant === void 0 ? 'primary' : _userProps$variant,
+      _userProps$size = userProps.size,
+      size = _userProps$size === void 0 ? 'md' : _userProps$size,
+      _userProps$iconOnly = userProps.iconOnly,
+      iconOnly = _userProps$iconOnly === void 0 ? false : _userProps$iconOnly,
+      className = userProps.className,
+      children = userProps.children,
+      props = _objectWithoutProperties(userProps, _excluded);
+    return createElement("button", _extends({
+      type: "button",
+      className: cx('ais-Button', "ais-Button--".concat(variant), "ais-Button--".concat(size), iconOnly && 'ais-Button--icon-only', className)
+    }, props), children);
+  };
+}

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

@@ -4,10 +4,21 @@ export type CarouselProps<TObject, TComponentProps extends Record<string, unknow
     nextButtonRef: MutableRef<HTMLButtonElement | null>;
     previousButtonRef: MutableRef<HTMLButtonElement | null>;
     carouselIdRef: MutableRef<string>;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    setCanScrollLeft: (canScrollLeft: boolean) => void;
+    setCanScrollRight: (canScrollRight: boolean) => void;
     items: Array<RecordWithObjectID<TObject>>;
     itemComponent?: (props: RecommendItemComponentProps<RecordWithObjectID<TObject>> & TComponentProps) => JSX.Element;
     previousIconComponent?: () => JSX.Element;
     nextIconComponent?: () => JSX.Element;
+    headerComponent?: (props: {
+        canScrollLeft: boolean;
+        canScrollRight: boolean;
+        scrollLeft: () => void;
+        scrollRight: () => void;
+    }) => JSX.Element;
+    showNavigation?: boolean;
     classNames?: Partial<CarouselClassNames>;
     translations?: Partial<CarouselTranslations>;
     sendEvent: SendEventForHits;

package/dist/es/components/Carousel.js

@@ -1,7 +1,7 @@
 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", "sendEvent"];
+var _excluded = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "canScrollLeft", "canScrollRight", "setCanScrollLeft", "setCanScrollRight", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "headerComponent", "showNavigation", "items", "translations", "sendEvent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { cx } from "../lib/index.js";
@@ -46,6 +46,10 @@ export function createCarouselComponent(_ref3) {
       nextButtonRef = userProps.nextButtonRef,
       previousButtonRef = userProps.previousButtonRef,
       carouselIdRef = userProps.carouselIdRef,
+      canScrollLeft = userProps.canScrollLeft,
+      canScrollRight = userProps.canScrollRight,
+      setCanScrollLeft = userProps.setCanScrollLeft,
+      setCanScrollRight = userProps.setCanScrollRight,
       _userProps$classNames = userProps.classNames,
       classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
       _userProps$itemCompon = userProps.itemComponent,
@@ -57,6 +61,9 @@ export function createCarouselComponent(_ref3) {
       PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
       _userProps$nextIconCo = userProps.nextIconComponent,
       NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
+      HeaderComponent = userProps.headerComponent,
+      _userProps$showNaviga = userProps.showNavigation,
+      showNavigation = _userProps$showNaviga === void 0 ? true : _userProps$showNaviga,
       items = userProps.items,
       userTranslations = userProps.translations,
       sendEvent = userProps.sendEvent,
@@ -87,18 +94,31 @@ export function createCarouselComponent(_ref3) {
       }
     }
     function updateNavigationButtonsProps() {
-      if (!listRef.current || !previousButtonRef.current || !nextButtonRef.current) {
+      if (!listRef.current) {
         return;
       }
-      previousButtonRef.current.hidden = listRef.current.scrollLeft <= 0;
-      nextButtonRef.current.hidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
+      var isLeftHidden = listRef.current.scrollLeft <= 0;
+      var isRightHidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
+      setCanScrollLeft(!isLeftHidden);
+      setCanScrollRight(!isRightHidden);
+      if (previousButtonRef.current) {
+        previousButtonRef.current.hidden = isLeftHidden;
+      }
+      if (nextButtonRef.current) {
+        nextButtonRef.current.hidden = isRightHidden;
+      }
     }
     if (items.length === 0) {
       return null;
     }
     return createElement("div", _extends({}, props, {
       className: cx(cssClasses.root)
-    }), createElement("button", {
+    }), HeaderComponent && createElement(HeaderComponent, {
+      canScrollLeft: canScrollLeft,
+      canScrollRight: canScrollRight,
+      scrollLeft: scrollLeft,
+      scrollRight: scrollRight
+    }), showNavigation && createElement("button", {
       ref: previousButtonRef,
       title: translations.previousButtonTitle,
       "aria-label": translations.previousButtonLabel,
@@ -145,7 +165,7 @@ export function createCarouselComponent(_ref3) {
         item: item,
         sendEvent: sendEvent
       }));
-    })), createElement("button", {
+    })), showNavigation && createElement("button", {
       ref: nextButtonRef,
       title: translations.nextButtonTitle,
       "aria-label": translations.nextButtonLabel,

package/dist/es/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,13 @@
+/** @jsx createElement */
+import type { ComponentChildren, ComponentProps, Renderer } from '../../types';
+export type AutocompleteProps = Omit<ComponentProps<'div'>, 'children'> & {
+    children?: ComponentChildren;
+    classNames?: Partial<AutocompleteClassNames>;
+};
+export type AutocompleteClassNames = {
+    /**
+     * Class names to apply to the root element
+     */
+    root: string | string[];
+};
+export declare function createAutocompleteComponent({ createElement }: Renderer): (userProps: AutocompleteProps) => JSX.Element;

package/dist/es/components/autocomplete/Autocomplete.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "classNames"];
+import { cx } from "../../lib/cx.js";
+export function createAutocompleteComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function Autocomplete(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      props = _objectWithoutProperties(userProps, _excluded);
+    return createElement("div", _extends({
+      className: cx('ais-Autocomplete', classNames.root)
+    }, props), children);
+  };
+}

package/dist/es/components/autocomplete/AutocompleteIndex.d.ts

@@ -0,0 +1,38 @@
+/** @jsx createElement */
+import type { ComponentProps, Renderer } from '../../types';
+export type AutocompleteIndexProps<T = {
+    objectID: string;
+    __indexName: string;
+} & Record<string, unknown>> = {
+    items: T[];
+    HeaderComponent?: (props: {
+        items: T[];
+    }) => JSX.Element;
+    ItemComponent: (props: {
+        item: T;
+        onSelect: () => void;
+    }) => JSX.Element;
+    getItemProps: (item: T, index: number) => Omit<ComponentProps<'li'>, 'onSelect'> & {
+        onSelect: () => void;
+    };
+    classNames?: Partial<AutocompleteIndexClassNames>;
+};
+export type AutocompleteIndexClassNames = {
+    /**
+     * 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 the header element
+     */
+    header: string | string[];
+    /**
+     * Class names to apply to each item element
+     */
+    item: string | string[];
+};
+export declare function createAutocompleteIndexComponent({ createElement }: Renderer): (userProps: AutocompleteIndexProps) => JSX.Element;

package/dist/es/components/autocomplete/AutocompleteIndex.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "onSelect"];
+import { cx } from "../../lib/cx.js";
+export function createAutocompleteIndexComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteIndex(userProps) {
+    var items = userProps.items,
+      HeaderComponent = userProps.HeaderComponent,
+      ItemComponent = userProps.ItemComponent,
+      getItemProps = userProps.getItemProps,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
+    return createElement("div", {
+      className: cx('ais-AutocompleteIndex', classNames.root)
+    }, HeaderComponent && createElement("div", {
+      className: cx('ais-AutocompleteIndexHeader', classNames.header)
+    }, createElement(HeaderComponent, {
+      items: items
+    })), createElement("ol", {
+      className: cx('ais-AutocompleteIndexList', classNames.list)
+    }, items.map(function (item, index) {
+      var _getItemProps = getItemProps(item, index),
+        className = _getItemProps.className,
+        onSelect = _getItemProps.onSelect,
+        itemProps = _objectWithoutProperties(_getItemProps, _excluded);
+      return createElement("li", _extends({
+        key: item.objectID
+      }, itemProps, {
+        className: cx('ais-AutocompleteIndexItem', classNames.item, className)
+      }), createElement(ItemComponent, {
+        item: item,
+        onSelect: onSelect
+      }));
+    })));
+  };
+}

package/dist/es/components/autocomplete/AutocompletePanel.d.ts

@@ -0,0 +1,17 @@
+/** @jsx createElement */
+import type { ComponentChildren, ComponentProps, Renderer } from '../../types';
+export type AutocompletePanelProps = Omit<ComponentProps<'div'>, 'children'> & {
+    children?: ComponentChildren;
+    classNames?: Partial<AutocompletePanelClassNames>;
+};
+export type AutocompletePanelClassNames = {
+    /**
+     * Class names to apply to the root element
+     */
+    root: string | string[];
+    /**
+     * Class names to apply to the layout element
+     */
+    layout: string | string[];
+};
+export declare function createAutocompletePanelComponent({ createElement }: Renderer): (userProps: AutocompletePanelProps) => JSX.Element;

package/dist/es/components/autocomplete/AutocompletePanel.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "classNames"];
+import { cx } from "../../lib/cx.js";
+export function createAutocompletePanelComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompletePanel(userProps) {
+    var children = userProps.children,
+      _userProps$classNames = userProps.classNames,
+      classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
+      props = _objectWithoutProperties(userProps, _excluded);
+    return createElement("div", _extends({}, props, {
+      className: cx('ais-AutocompletePanel', classNames.root, props.className)
+    }), createElement("div", {
+      className: cx('ais-AutocompletePanelLayout', classNames.layout)
+    }, children));
+  };
+}

package/dist/es/components/autocomplete/AutocompleteSearch.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps, Renderer } from '../..';
+export type AutocompleteSearchProps = {
+    inputProps: Partial<ComponentProps<'input'>>;
+    onClear: () => void;
+    query: string;
+    isSearchStalled: boolean;
+};
+export declare function createAutocompleteSearchComponent({ createElement }: Renderer): ({ inputProps, onClear, query, isSearchStalled, }: AutocompleteSearchProps) => JSX.Element;

package/dist/es/components/autocomplete/AutocompleteSearch.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { AutocompleteClearIcon, AutocompleteLoadingIcon, AutocompleteSubmitIcon } from "./icons.js";
+export function createAutocompleteSearchComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteSearch(_ref2) {
+    var inputProps = _ref2.inputProps,
+      onClear = _ref2.onClear,
+      query = _ref2.query,
+      isSearchStalled = _ref2.isSearchStalled;
+    return createElement("form", {
+      className: "ais-AutocompleteForm",
+      action: "",
+      noValidate: true,
+      role: "search",
+      onSubmit: function onSubmit(e) {
+        return e.preventDefault();
+      }
+    }, createElement("div", {
+      className: "ais-AutocompleteInputWrapperPrefix"
+    }, createElement("label", {
+      className: "ais-AutocompleteLabel",
+      "aria-label": "Submit",
+      htmlFor: inputProps.id,
+      id: "".concat(inputProps.id, "-label")
+    }, createElement("button", {
+      className: "ais-AutocompleteSubmitButton",
+      type: "submit",
+      title: "Submit"
+    }, createElement(AutocompleteSubmitIcon, {
+      createElement: createElement
+    }))), createElement("div", {
+      className: "ais-AutocompleteLoadingIndicator",
+      hidden: !isSearchStalled
+    }, createElement(AutocompleteLoadingIcon, {
+      createElement: createElement
+    }))), createElement("div", {
+      className: "ais-AutocompleteInputWrapper"
+    }, createElement("input", _extends({
+      className: "ais-AutocompleteInput",
+      "aria-autocomplete": "both",
+      "aria-labelledby": "".concat(inputProps.id, "-label"),
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      enterKeyHint: "search",
+      spellCheck: "false",
+      placeholder: "",
+      maxLength: 512,
+      type: "search",
+      value: query
+    }, inputProps))), createElement("div", {
+      className: "ais-AutocompleteInputWrapperSuffix"
+    }, createElement("button", {
+      className: "ais-AutocompleteClearButton",
+      type: "reset",
+      title: "Clear",
+      hidden: query.length === 0 || isSearchStalled,
+      onClick: onClear
+    }, createElement(AutocompleteClearIcon, {
+      createElement: createElement
+    }))));
+  };
+}

package/dist/es/components/autocomplete/AutocompleteSuggestion.d.ts

@@ -0,0 +1,16 @@
+/** @jsx createElement */
+import type { Renderer } from '../../types';
+export type AutocompleteSuggestionProps<T = {
+    query: string;
+} & Record<string, unknown>> = {
+    item: T;
+    onSelect: () => void;
+    classNames?: Partial<AutocompleteSuggestionClassNames>;
+};
+export type AutocompleteSuggestionClassNames = {
+    /**
+     * Class names to apply to the root element
+     **/
+    root: string | string[];
+};
+export declare function createAutocompleteSuggestionComponent({ createElement, }: Renderer): ({ item, onSelect, classNames, }: AutocompleteSuggestionProps) => JSX.Element;

package/dist/es/components/autocomplete/AutocompleteSuggestion.js

@@ -0,0 +1,14 @@
+import { cx } from "../../lib/index.js";
+export function createAutocompleteSuggestionComponent(_ref) {
+  var createElement = _ref.createElement;
+  return function AutocompleteSuggestion(_ref2) {
+    var item = _ref2.item,
+      onSelect = _ref2.onSelect,
+      _ref2$classNames = _ref2.classNames,
+      classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
+    return createElement("div", {
+      onClick: onSelect,
+      className: cx('ais-AutocompleteSuggestion', classNames.root)
+    }, item.query);
+  };
+}

package/dist/es/components/autocomplete/createAutocompletePropGetters.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps } from '../../types';
+type BaseHit = Record<string, unknown>;
+export type AutocompleteIndexConfig<TItem extends BaseHit> = {
+    indexName: string;
+    getQuery?: (item: TItem) => string;
+    getURL?: (item: TItem) => string;
+    onSelect?: (params: {
+        item: TItem;
+        query: string;
+        setQuery: (query: string) => void;
+        url?: string;
+    }) => void;
+};
+type GetInputProps = () => Partial<ComponentProps<'input'>>;
+type GetItemProps = (item: {
+    __indexName: string;
+} & Record<string, unknown>, index: number) => Pick<ComponentProps<'li'>, 'id' | 'role' | 'aria-selected'> & {
+    onSelect: () => void;
+};
+type GetPanelProps = () => Pick<ComponentProps<'div'>, 'id' | 'hidden' | 'role' | 'aria-labelledby'>;
+type GetRootProps = () => Pick<ComponentProps<'div'>, 'ref'>;
+type CreateAutocompletePropGettersParams = {
+    useEffect: (effect: () => void, inputs?: readonly unknown[]) => void;
+    useId: () => string;
+    useMemo: <TType>(factory: () => TType, inputs: readonly unknown[]) => TType;
+    useRef: <TType>(initialValue: TType | null) => {
+        current: TType | null;
+    };
+    useState: <TType>(initialState: TType) => [TType, (newState: TType) => unknown];
+};
+type UsePropGetters<TItem extends BaseHit> = (params: {
+    indices: Array<{
+        indexName: string;
+        indexId: string;
+        hits: Array<{
+            [key: string]: unknown;
+        }>;
+    }>;
+    indicesConfig: Array<AutocompleteIndexConfig<TItem>>;
+    onRefine: (query: string) => void;
+    onSelect: NonNullable<AutocompleteIndexConfig<TItem>['onSelect']>;
+}) => {
+    getInputProps: GetInputProps;
+    getItemProps: GetItemProps;
+    getPanelProps: GetPanelProps;
+    getRootProps: GetRootProps;
+};
+export declare function createAutocompletePropGetters({ useEffect, useId, useMemo, useRef, useState, }: CreateAutocompletePropGettersParams): <TItem extends BaseHit>({ indices, indicesConfig, onRefine, onSelect: globalOnSelect, }: Parameters<UsePropGetters<TItem>>[0]) => ReturnType<UsePropGetters<TItem>>;
+export {};