@nanoporetech-digital/components 6.0.1 → 6.2.0

package/dist/types/components.d.ts

@@ -5,15 +5,13 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountData, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
+import { AlgoliaNetworkError, AloliaSearchResultDetail, AnimationEasing, AnimationName, CheckboxChangeEventDetail, Color, ControlValidity, ControlValidityEventDetail, DateDisabledPredicate, DateInputChangeEventDetail, DragEvent, DropdownInterface, DuetLocalizedText, FileInputChangeEventDetail, FileWithUrl, FilterChangeEventDetail, Flickity, FlickityOptions, IndexResult, InputChangeEventDetail, LocalDateOpts, MyAccountData, MyAccountUser, NanoFormEles, NavItemEventDetail, OptionInterface, PageChangeEventDetail, PickerChangeEvent, PlainFormEles, RangeChangeEventDetail, RangeValue, ResizeStateChangeEventDetail, SearchIndex, SelectChangeEventDetail, SlideAnimation, StyleEventDetail, TableTypes, TextFieldTypes, ValidationState, ValidatorValueStore } from "./interface";
 import { StorageMethods } from "./utils/store/component-store";
 import { DaysOfWeek } from "./utils/date-utils";
 import { PopoverPlacement } from "./utils/popover";
 import { Element, EventEmitter } from "./stencil-public-runtime";
 import { ObservableMap } from "@stencil/store";
 import { MyAccountUser as MyAccountUser1 } from "./components/global-nav/global-nav-interface";
-import { OptionInterface as OptionInterface1 } from "./components/option/option-interface";
-import { Dropdown } from "./components/dropdown/dropdown";
 export namespace Components {
     /**
      * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.
@@ -205,20 +203,70 @@ export namespace Components {
         "infiniteScroll": boolean;
     }
     /**
-     * Displays media in the desired aspect ratio.
-     * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
-     * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
-     * The default aspect ratio is 16:9.
+     * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
+     * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
      */
-    interface NanoAspectRatio {
+    interface NanoAnimation {
         /**
-          * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in this format will be ignored.
+          * Clears all keyframe effects caused by this animation and aborts its playback.
          */
-        "aspectRatio": string;
+        "cancel": () => Promise<void>;
         /**
-          * Determines how content will be resized to fit its container.
+          * Gets and sets the current animation time.
          */
-        "fit": 'cover' | 'contain';
+        "currentTime": CSSNumberish;
+        /**
+          * The number of milliseconds to delay the start of the animation.
+         */
+        "delay": number;
+        /**
+          * Determines the direction of playback as well as the behavior when reaching the end of an iteration. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
+         */
+        "direction": PlaybackDirection;
+        /**
+          * The number of milliseconds each iteration of the animation takes to complete.
+         */
+        "duration": number;
+        /**
+          * The easing function to use for the animation. This can be a easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.
+         */
+        "easing": AnimationEasing;
+        /**
+          * The number of milliseconds to delay after the active period of an animation sequence.
+         */
+        "endDelay": number;
+        /**
+          * Sets how the animation applies styles to its target before and after its execution.
+         */
+        "fill": FillMode;
+        /**
+          * Sets the playback time to the end of the animation corresponding to the current playback direction.
+         */
+        "finish": () => Promise<void>;
+        /**
+          * The offset at which to start the animation, usually between 0 (start) and 1 (end).
+         */
+        "iterationStart": number;
+        /**
+          * The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.
+         */
+        "iterations": number;
+        /**
+          * The keyframes to use for the animation. If this is set, `name` will be ignored.
+         */
+        "keyframes"?: Keyframe[];
+        /**
+          * The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
+         */
+        "name": AnimationName | 'none';
+        /**
+          * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets canceled.
+         */
+        "play": boolean;
+        /**
+          * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.
+         */
+        "playbackRate": number;
     }
     /**
      * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
@@ -1493,6 +1541,23 @@ export namespace Components {
          */
         "value"?: string | null;
     }
+    /**
+     * A thin, declarative interface to the IntersectionObserver API.
+     */
+    interface NanoIntersectionObserve {
+        /**
+          * The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`.
+         */
+        "root": globalThis.Element | 'root' | 'auto';
+        /**
+          * Margin around the root. Can be similar to CSS margins property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to zeros.
+         */
+        "rootMargin"?: string;
+        /**
+          * Indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'. If you want the callback to run every time visibility passes another '25%', you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'. A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.
+         */
+        "threshold"?: string;
+    }
     /**
      * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
      * Manages focus state / active.
@@ -1835,7 +1900,7 @@ export namespace Components {
         /**
           * nano-dropdown config options you can pass to the nested dropdown component
          */
-        "dropDownConfig"?: Partial<Dropdown>;
+        "dropDownConfig"?: Partial<DropdownInterface>;
         /**
           * Enable floating label behaviour. Will disable placeholder if set.
          */
@@ -1887,7 +1952,7 @@ export namespace Components {
         /**
           * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties. Alternatively, you can nest `<nano-option>` elements within a `<nano-select>` Regardless - reading `options` will return the current component options - slotted or otherwise
          */
-        "options": Array<OptionInterface1 | string>;
+        "options": Array<OptionInterface | string>;
         /**
           * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.
          */
@@ -1940,7 +2005,7 @@ export namespace Components {
           * @param index - the incoming option index
           * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
          */
-        "valueTagTemplate": (option: OptionInterface1, index: number) => string;
+        "valueTagTemplate": (option: OptionInterface, index: number) => string;
     }
     /**
      * Skeletons are used to show where content will eventually be drawn.
@@ -2560,6 +2625,10 @@ export interface NanoAlgoliaResultsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoAlgoliaResultsElement;
 }
+export interface NanoAnimationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNanoAnimationElement;
+}
 export interface NanoCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoCheckboxElement;
@@ -2620,6 +2689,10 @@ export interface NanoInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoInputElement;
 }
+export interface NanoIntersectionObserveCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNanoIntersectionObserveElement;
+}
 export interface NanoMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNanoMenuElement;
@@ -2743,16 +2816,14 @@ declare global {
         new (): HTMLNanoAlgoliaResultsElement;
     };
     /**
-     * Displays media in the desired aspect ratio.
-     * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
-     * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
-     * The default aspect ratio is 16:9.
+     * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
+     * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
      */
-    interface HTMLNanoAspectRatioElement extends Components.NanoAspectRatio, HTMLStencilElement {
+    interface HTMLNanoAnimationElement extends Components.NanoAnimation, HTMLStencilElement {
     }
-    var HTMLNanoAspectRatioElement: {
-        prototype: HTMLNanoAspectRatioElement;
-        new (): HTMLNanoAspectRatioElement;
+    var HTMLNanoAnimationElement: {
+        prototype: HTMLNanoAnimationElement;
+        new (): HTMLNanoAnimationElement;
     };
     /**
      * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
@@ -2976,6 +3047,15 @@ declare global {
         prototype: HTMLNanoInputElement;
         new (): HTMLNanoInputElement;
     };
+    /**
+     * A thin, declarative interface to the IntersectionObserver API.
+     */
+    interface HTMLNanoIntersectionObserveElement extends Components.NanoIntersectionObserve, HTMLStencilElement {
+    }
+    var HTMLNanoIntersectionObserveElement: {
+        prototype: HTMLNanoIntersectionObserveElement;
+        new (): HTMLNanoIntersectionObserveElement;
+    };
     /**
      * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
      * Manages focus state / active.
@@ -3208,7 +3288,7 @@ declare global {
         "nano-algolia-filter": HTMLNanoAlgoliaFilterElement;
         "nano-algolia-pagination": HTMLNanoAlgoliaPaginationElement;
         "nano-algolia-results": HTMLNanoAlgoliaResultsElement;
-        "nano-aspect-ratio": HTMLNanoAspectRatioElement;
+        "nano-animation": HTMLNanoAnimationElement;
         "nano-checkbox": HTMLNanoCheckboxElement;
         "nano-checkbox-group": HTMLNanoCheckboxGroupElement;
         "nano-datalist": HTMLNanoDatalistElement;
@@ -3231,6 +3311,7 @@ declare global {
         "nano-icon-button": HTMLNanoIconButtonElement;
         "nano-img": HTMLNanoImgElement;
         "nano-input": HTMLNanoInputElement;
+        "nano-intersection-observe": HTMLNanoIntersectionObserveElement;
         "nano-menu": HTMLNanoMenuElement;
         "nano-menu-drawer": HTMLNanoMenuDrawerElement;
         "nano-nav-item": HTMLNanoNavItemElement;
@@ -3357,7 +3438,10 @@ declare namespace LocalJSX {
         /**
           * Emitted when results and all filters are shown and have loaded.
          */
-        "onNanoResultsShown"?: (event: NanoAlgoliaCustomEvent<IndexResult>) => void;
+        "onNanoResultsShown"?: (event: NanoAlgoliaCustomEvent<{
+    meta: IndexResult;
+    client: { apiKey: string; appId: string };
+  }>) => void;
         /**
           * The external operator joining filter values.
          */
@@ -3470,20 +3554,74 @@ declare namespace LocalJSX {
         "onNanoTplUpdated"?: (event: NanoAlgoliaResultsCustomEvent<HTMLNanoAlgoliaResultsElement>) => void;
     }
     /**
-     * Displays media in the desired aspect ratio.
-     * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
-     * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
-     * The default aspect ratio is 16:9.
+     * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
+     * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
      */
-    interface NanoAspectRatio {
+    interface NanoAnimation {
+        /**
+          * Gets and sets the current animation time.
+         */
+        "currentTime"?: CSSNumberish;
         /**
-          * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in this format will be ignored.
+          * The number of milliseconds to delay the start of the animation.
          */
-        "aspectRatio"?: string;
+        "delay"?: number;
         /**
-          * Determines how content will be resized to fit its container.
+          * Determines the direction of playback as well as the behavior when reaching the end of an iteration. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
          */
-        "fit"?: 'cover' | 'contain';
+        "direction"?: PlaybackDirection;
+        /**
+          * The number of milliseconds each iteration of the animation takes to complete.
+         */
+        "duration"?: number;
+        /**
+          * The easing function to use for the animation. This can be a easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.
+         */
+        "easing"?: AnimationEasing;
+        /**
+          * The number of milliseconds to delay after the active period of an animation sequence.
+         */
+        "endDelay"?: number;
+        /**
+          * Sets how the animation applies styles to its target before and after its execution.
+         */
+        "fill"?: FillMode;
+        /**
+          * The offset at which to start the animation, usually between 0 (start) and 1 (end).
+         */
+        "iterationStart"?: number;
+        /**
+          * The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.
+         */
+        "iterations"?: number;
+        /**
+          * The keyframes to use for the animation. If this is set, `name` will be ignored.
+         */
+        "keyframes"?: Keyframe[];
+        /**
+          * The name of the built-in animation to use. For custom animations, use the `keyframes` prop.
+         */
+        "name"?: AnimationName | 'none';
+        /**
+          * Emitted when the animation is canceled.
+         */
+        "onNanoCancel"?: (event: NanoAnimationCustomEvent<any>) => void;
+        /**
+          * Emitted when the animation finishes.
+         */
+        "onNanoFinish"?: (event: NanoAnimationCustomEvent<any>) => void;
+        /**
+          * Emitted when the animation starts.
+         */
+        "onNanoStart"?: (event: NanoAnimationCustomEvent<any>) => void;
+        /**
+          * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets canceled.
+         */
+        "play"?: boolean;
+        /**
+          * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.
+         */
+        "playbackRate"?: number;
     }
     /**
      * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
@@ -4808,6 +4946,35 @@ declare namespace LocalJSX {
          */
         "value"?: string | null;
     }
+    /**
+     * A thin, declarative interface to the IntersectionObserver API.
+     */
+    interface NanoIntersectionObserve {
+        /**
+          * A resize break point is switched on or off
+         */
+        "onNanoIntersecting"?: (event: NanoIntersectionObserveCustomEvent<IntersectionObserverEntry>) => void;
+        /**
+          * A resize break point is switched on or off
+         */
+        "onNanoIntersectionChange"?: (event: NanoIntersectionObserveCustomEvent<IntersectionObserverEntry>) => void;
+        /**
+          * A resize break point is switched on or off
+         */
+        "onNanoNotIntersecting"?: (event: NanoIntersectionObserveCustomEvent<IntersectionObserverEntry>) => void;
+        /**
+          * The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`.
+         */
+        "root"?: globalThis.Element | 'root' | 'auto';
+        /**
+          * Margin around the root. Can be similar to CSS margins property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to zeros.
+         */
+        "rootMargin"?: string;
+        /**
+          * Indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'. If you want the callback to run every time visibility passes another '25%', you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'. A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.
+         */
+        "threshold"?: string;
+    }
     /**
      * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
      * Manages focus state / active.
@@ -5201,7 +5368,7 @@ declare namespace LocalJSX {
         /**
           * nano-dropdown config options you can pass to the nested dropdown component
          */
-        "dropDownConfig"?: Partial<Dropdown>;
+        "dropDownConfig"?: Partial<DropdownInterface>;
         /**
           * Enable floating label behaviour. Will disable placeholder if set.
          */
@@ -5270,7 +5437,7 @@ declare namespace LocalJSX {
         /**
           * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties. Alternatively, you can nest `<nano-option>` elements within a `<nano-select>` Regardless - reading `options` will return the current component options - slotted or otherwise
          */
-        "options"?: Array<OptionInterface1 | string>;
+        "options"?: Array<OptionInterface | string>;
         /**
           * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.
          */
@@ -5309,7 +5476,7 @@ declare namespace LocalJSX {
           * @param index - the incoming option index
           * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
          */
-        "valueTagTemplate"?: (option: OptionInterface1, index: number) => string;
+        "valueTagTemplate"?: (option: OptionInterface, index: number) => string;
     }
     /**
      * Skeletons are used to show where content will eventually be drawn.
@@ -5940,7 +6107,7 @@ declare namespace LocalJSX {
         "nano-algolia-filter": NanoAlgoliaFilter;
         "nano-algolia-pagination": NanoAlgoliaPagination;
         "nano-algolia-results": NanoAlgoliaResults;
-        "nano-aspect-ratio": NanoAspectRatio;
+        "nano-animation": NanoAnimation;
         "nano-checkbox": NanoCheckbox;
         "nano-checkbox-group": NanoCheckboxGroup;
         "nano-datalist": NanoDatalist;
@@ -5963,6 +6130,7 @@ declare namespace LocalJSX {
         "nano-icon-button": NanoIconButton;
         "nano-img": NanoImg;
         "nano-input": NanoInput;
+        "nano-intersection-observe": NanoIntersectionObserve;
         "nano-menu": NanoMenu;
         "nano-menu-drawer": NanoMenuDrawer;
         "nano-nav-item": NanoNavItem;
@@ -6019,12 +6187,10 @@ declare module "@stencil/core" {
              */
             "nano-algolia-results": LocalJSX.NanoAlgoliaResults & JSXBase.HTMLAttributes<HTMLNanoAlgoliaResultsElement>;
             /**
-             * Displays media in the desired aspect ratio.
-             * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.
-             * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.
-             * The default aspect ratio is 16:9.
+             * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
+             * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
              */
-            "nano-aspect-ratio": LocalJSX.NanoAspectRatio & JSXBase.HTMLAttributes<HTMLNanoAspectRatioElement>;
+            "nano-animation": LocalJSX.NanoAnimation & JSXBase.HTMLAttributes<HTMLNanoAnimationElement>;
             /**
              * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.
              * They appear as checked when activated.
@@ -6137,6 +6303,10 @@ declare module "@stencil/core" {
              * The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
              */
             "nano-input": LocalJSX.NanoInput & JSXBase.HTMLAttributes<HTMLNanoInputElement>;
+            /**
+             * A thin, declarative interface to the IntersectionObserver API.
+             */
+            "nano-intersection-observe": LocalJSX.NanoIntersectionObserve & JSXBase.HTMLAttributes<HTMLNanoIntersectionObserveElement>;
             /**
              * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
              * Manages focus state / active.

package/dist/types/interface.d.ts

@@ -1,5 +1,6 @@
-import { Hit } from '@algolia/client-search';
-import { MyAccountData } from './components/global-nav/global-nav-interface';
+import type { Hit } from '@algolia/client-search';
+import type { MyAccountData } from './components/global-nav/global-nav-interface';
+import type { animations, easings } from './components/animation/animations';
 
 export * from './index';
 export * from './components.d';
@@ -20,6 +21,9 @@ export * from './components/file-upload/file-upload-interface';
 export * from './components/option/option-interface';
 export * from './components/field-validator/field-validator-interface';
 export * from './components/table/table-interface';
+export type { Dropdown as DropdownInterface } from './components/dropdown/dropdown';
+export type AnimationEasing = keyof typeof easings;
+export type AnimationName = keyof typeof animations;
 
 export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';
 export type PredefinedColors =
@@ -64,6 +68,7 @@ export interface AlgoliaResults {
   hitsPerPage: number;
   exhaustiveNbHits: boolean;
   query: string;
+  queryID: string;
   params: string;
   processingTimeMS: number;
   appliedFilters?: [

package/dist/types/utils/scroll-parent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Attempts to find the closest scrolling parental element
+ * @param element - the element from which to traverse up the DOM
+ * @returns - the closest scrolling parental element
+ */
+export declare function findScrollParent(element: HTMLElement): HTMLElement;

package/dist/types/utils/search-insights.d.ts

@@ -0,0 +1,22 @@
+import type { InsightsSearchClickEvent } from 'search-insights/dist/click';
+declare const searchInsight: {
+  /**
+   * Initialise algolia search insights.
+   * Will asynchronously import the search-insight library
+   * @param appId
+   * @param apiKey
+   */
+  init: (appId: string, apiKey: string) => Promise<void>;
+  /**
+   * Sends a `clickedObjectIDsAfterSearch` event to algolia search-insights.
+   * `init(...)` Must have been called first.
+   * @param params
+   */
+  sendClick: (params: InsightsSearchClickEvent) => void;
+  /**
+   * Associates algolia analytics with a user id
+   * @param userToken
+   */
+  setUser: (userToken: string) => void;
+};
+export default searchInsight;