@atlaskit/quick-search 8.1.0 → 8.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/quick-search
 
+## 8.1.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
+## 8.1.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 8.1.0
 
 ### Minor Changes

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/quick-search",
-	"version": "8.1.0"
+	"version": "8.1.2"
 }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/quick-search",
-	"version": "8.1.0"
+	"version": "8.1.2"
 }

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/quick-search",
-	"version": "8.1.0"
+	"version": "8.1.2"
 }

package/dist/types/components/QuickSearch.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ResultData, SelectedResultId } from './Results/types';
 import { ResultContextType } from './context';
 import { ResultBase } from './Results/ResultBase';
-export declare type Props = {
+export type Props = {
     /** Search results in the form of ResultItemGroups containing Result components */
     children: React.ReactNode;
     /** Set search loading state */
@@ -31,7 +31,7 @@ export declare type Props = {
     /** One string that is used to autocomplete the current search query */
     autocompleteText?: string;
 };
-export declare type State = {
+export type State = {
     selectedResultId: SelectedResultId;
     context: ResultContextType;
     value?: string;
@@ -107,16 +107,16 @@ export declare class QuickSearch extends React.Component<Props, State> {
      * Tab / ArrowRight - Accept autocomplete
      */
     handleSearchKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    acceptAutocomplete: (event: React.KeyboardEvent<HTMLInputElement>, text?: string | undefined) => void;
+    acceptAutocomplete: (event: React.KeyboardEvent<HTMLInputElement>, text?: string) => void;
     setSearchInputRef: (refs: any) => void;
     focusSearchInput: () => void;
     render(): JSX.Element;
 }
-declare const _default: React.ComponentClass<Props, any>;
 /**
  * HOCs:
  * `decorateWithAnalyticsData` - Wrapper that decorates analytics events with additional data.
  * `withAnalytics` - Injects analytics firing methods that are picked up by
  * @atlaskit/analytics/AnalyticsListener.
  */
+declare const _default: React.ComponentClass<Props, any>;
 export default _default;

package/dist/types/components/ResultItem/ResultItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type Props = {
+type Props = {
     /** Text to appear to the right of the text. It has a lower font-weight. */
     caption?: string;
     /** Location to link out to on click. This is passed down to the custom link component if one is provided. */

package/dist/types/components/ResultItem/ResultItemGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type Props = {
+type Props = {
     /** Text to appear as heading above group. Will be auto-capitalised. */
     title: React.ReactNode;
     /** React Elements to be displayed within the group. This should generally be a collection of ResultItems. */

package/dist/types/components/Results/ContainerResult.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonResultProps } from './types';
-export declare type Props = CommonResultProps & {
+export type Props = CommonResultProps & {
     /** Name of the container. Provides the main text to be displayed as the item. */
     name: React.ReactNode;
     /** Text to appear to the right of the text. It has a lower font-weight. */

package/dist/types/components/Results/ObjectResult.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonResultProps } from './types';
-export declare type Props = CommonResultProps & {
+export type Props = CommonResultProps & {
     /** Name of the container. Provides the main text to be displayed as the item. */
     name: React.ReactNode;
     /** Text to appear to the right of the text. It has a lower font-weight. */

package/dist/types/components/Results/PersonResult.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonResultProps } from './types';
-export declare type Props = CommonResultProps & {
+export type Props = CommonResultProps & {
     /** Name of the container. Provides the main text to be displayed as the item. */
     name: React.ReactNode;
     /** A user's custom handle. Appears to the right of their `name`. It has a lower font-weight. */

package/dist/types/components/Results/ResultBase.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AnalyticsData, CommonResultProps } from './types';
 import { ResultContextType } from '../context';
-export declare type Props = CommonResultProps & {
+export type Props = CommonResultProps & {
     /** Type of the result. This is passed as a parameter to certain callbacks. */
     type: string;
     /** Main text to be displayed as the item. */
@@ -15,7 +15,7 @@ export declare type Props = CommonResultProps & {
     /** The context provided by QuickSearch. */
     context?: ResultContextType;
 };
-declare type DefaultProps = {
+type DefaultProps = {
     context: ResultContextType;
 };
 export declare class ResultBase extends React.PureComponent<DefaultProps & Props> {

package/dist/types/components/Results/types.d.ts

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
-export declare type AnalyticsData = Object;
-export declare type ResultId = string | number;
-export declare type SelectedResultId = ResultId | null;
-export declare type CancelableEvent = KeyboardEvent | MouseEvent | React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>;
-export declare type ResultData = {
+export type AnalyticsData = Object;
+export type ResultId = string | number;
+export type SelectedResultId = ResultId | null;
+export type CancelableEvent = KeyboardEvent | MouseEvent | React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>;
+export type ResultData = {
     resultId: ResultId;
     type: string;
     event: CancelableEvent;
 };
-export declare type CommonResultProps = {
+export type CommonResultProps = {
     /** Unique ID of the result. This is passed as a parameter to certain callbacks */
     resultId: string | number;
     /** Type of the result. This is passed as a parameter to certain callbacks. */

package/dist/types/components/Search/Search.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const controlKeys: string[];
-declare type Props = {
+type Props = {
     /** The elements to render as options to search from. */
     children?: React.ReactNode;
     /** The elements to render to the right of the search input. */

package/dist/types/components/context.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentType } from 'react';
 import { ResultData, ResultId, SelectedResultId } from './Results/types';
 import { ResultBase } from './Results/ResultBase';
-export declare type ResultContextType = {
+export type ResultContextType = {
     /** Register result as keyboard navigation target */
     registerResult: (result: ResultBase) => void;
     /** Unregister result as keyboard navigation target */

package/dist/types/components/isReactElement.d.ts

@@ -1,6 +1,6 @@
-declare const _default: (element: any) => boolean;
 /**
  * Heuristically check whether an element is a react element or not.
  * React elements have constructors for their type property but native elements use strings.
  */
+declare const _default: (element: any) => boolean;
 export default _default;

package/dist/types-ts4.5/components/QuickSearch.d.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+import { ResultData, SelectedResultId } from './Results/types';
+import { ResultContextType } from './context';
+import { ResultBase } from './Results/ResultBase';
+export type Props = {
+    /** Search results in the form of ResultItemGroups containing Result components */
+    children: React.ReactNode;
+    /** Set search loading state */
+    isLoading?: boolean;
+    /** onBlur callback for search input */
+    onSearchBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** onInput callback for search input */
+    onSearchInput?: (event: React.FormEvent<HTMLInputElement>, isAutocompleted?: boolean) => void;
+    /** onKeyDown callback for search input */
+    onSearchKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Called when the user submits the search form without selecting a result */
+    onSearchSubmit?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder text for search input field */
+    placeholder?: string;
+    /** Value of the search input field */
+    value?: string;
+    /** Corresponds to the `resultId` of the selected result */
+    selectedResultId?: SelectedResultId;
+    /** Optional way of being notified when the selected result changes due to keyboard nav */
+    onSelectedResultIdChanged?: (id: SelectedResultId) => void;
+    firePrivateAnalyticsEvent?: (eventName: string, eventData: Object) => void;
+    /** React component to be used for rendering links */
+    linkComponent?: React.ComponentType<any>;
+    /** The elements to render to the right of the search input. */
+    inputControls?: React.ReactNode;
+    /** One string that is used to autocomplete the current search query */
+    autocompleteText?: string;
+};
+export type State = {
+    selectedResultId: SelectedResultId;
+    context: ResultContextType;
+    value?: string;
+};
+export declare class QuickSearch extends React.Component<Props, State> {
+    static defaultProps: {
+        children: never[];
+        firePrivateAnalyticsEvent: (_: any) => void;
+        isLoading: boolean;
+        onSearchBlur: (_: any) => void;
+        onSearchKeyDown: (_: any) => void;
+        onSearchSubmit: (_: any) => void;
+        placeholder: string;
+        value: string;
+    };
+    inputSearchRef?: React.Ref<any>;
+    flatResults: Array<ResultBase>;
+    hasSearchQueryEventFired: boolean;
+    hasKeyDownEventFired: boolean;
+    lastKeyPressed: string;
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    fireKeyboardControlEvent(selectedResultId: SelectedResultId): void;
+    /**
+     * Uses the virtual list, this.flatResults, to move the selection across grouped results as if
+     * results were in a single, circular list.
+     *
+     * Process:
+     * 1. Finds the index of the selected result in the flatResults array,
+     * 2. Increments or decrements this index by the supplied adjustment amount,
+     * 3. Sets the new selectedResultId based on the modifed index
+     */
+    adjustSelectedResultIndex: (adjustment: number) => void;
+    /** Select next result */
+    selectNext: () => void;
+    /** Select previous result */
+    selectPrevious: () => void;
+    /**
+     * Callback for register results in flatResults
+     */
+    handleRegisterResult: (result: ResultBase) => void;
+    /**
+     * Callback for unregister results in flatResults
+     * It will reconcile a list of results for keyboard navigation after every update.
+     * 1. Component starts with an empty list of results
+     * 2. componentDidMount / componentDidUpdate lifecycle methods in ResultBase will be invoked
+     * 3. All ResultBase components call registerResult() in order to register itself in quick search
+     * 4. All ResultBase components call unregisterResult() in order to unregister itself in quick search
+     */
+    handleUnregisterResult: (result: ResultBase) => void;
+    /**
+     * Callback for mouseEnter events on individual results
+     * Move selection to hovered result
+     */
+    handleResultMouseEnter: (resultData: ResultData) => void;
+    /**
+     * Callback for mouseLeave events on individual results
+     * Clear result selection
+     */
+    handleResultMouseLeave: () => void;
+    /**
+     * Clear result selection when search input is blurred
+     */
+    handleSearchBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInput: (event: React.FormEvent<HTMLInputElement>) => void;
+    /**
+     * Keyboard controls
+     * Up - Select previous result
+     * Down - Select next result
+     * Enter - Submit selected result
+     * Tab / ArrowRight - Accept autocomplete
+     */
+    handleSearchKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    acceptAutocomplete: (event: React.KeyboardEvent<HTMLInputElement>, text?: string) => void;
+    setSearchInputRef: (refs: any) => void;
+    focusSearchInput: () => void;
+    render(): JSX.Element;
+}
+/**
+ * HOCs:
+ * `decorateWithAnalyticsData` - Wrapper that decorates analytics events with additional data.
+ * `withAnalytics` - Injects analytics firing methods that are picked up by
+ * @atlaskit/analytics/AnalyticsListener.
+ */
+declare const _default: React.ComponentClass<Props, any>;
+export default _default;

package/dist/types-ts4.5/components/ResultItem/ResultItem.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+type Props = {
+    /** Text to appear to the right of the text. It has a lower font-weight. */
+    caption?: string;
+    /** Location to link out to on click. This is passed down to the custom link component if one is provided. */
+    href?: string;
+    /** Target frame for item `href` link to be aimed at. */
+    target?: string;
+    /** React element to appear to the left of the text. This should be an @atlaskit/icon component. */
+    icon?: React.ReactNode;
+    /** Makes the navigation item appear with reduced padding and font size. */
+    isCompact?: boolean;
+    /** Set whether the item should be highlighted as selected. Selected items have a different background color. */
+    isSelected?: boolean;
+    /** Set whether the item has been highlighted using mouse navigation. Mouse selected items will not display the selectedIcon. */
+    isMouseSelected?: boolean;
+    /** Function to be called on click. This is passed down to a custom link component, if one is provided.  */
+    onClick?(e: MouseEvent): void;
+    /** Standard onmouseenter event */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /** Standard onmouseleave event */
+    onMouseLeave?: (e: MouseEvent) => void;
+    /** Text to be shown alongside the main `text`. */
+    subText?: React.ReactNode;
+    /** Main text to be displayed as the item. Accepts a react component but in most cases this should just be a string. */
+    text?: React.ReactNode;
+    /** React component to be placed to the right of the main text. */
+    textAfter?: React.ReactNode;
+    /** React component to be placed to the right of the main text when the item is selected with keyboard navigation. */
+    selectedIcon?: React.ReactNode;
+    /** React component to be used for rendering links */
+    linkComponent?: React.ComponentType;
+};
+declare class ResultItem extends React.PureComponent<Props> {
+    static defaultProps: Partial<Props>;
+    render(): JSX.Element;
+}
+export default ResultItem;

package/dist/types-ts4.5/components/ResultItem/ResultItemGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    /** Text to appear as heading above group. Will be auto-capitalised. */
+    title: React.ReactNode;
+    /** React Elements to be displayed within the group. This should generally be a collection of ResultItems. */
+    children?: React.ReactNode;
+};
+export default class ResultItemGroup extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export {};

package/dist/types-ts4.5/components/ResultItem/styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const ResultItemGroupHeader: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ResultItemGroupTitle: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ResultItemAfter: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    shouldTakeSpace: boolean;
+}, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    shouldTakeSpace: boolean;
+}>;
+export declare const ResultItemAfterWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ResultItemCaption: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const ResultItemSubText: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const ResultItemIcon: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ResultItemTextAfter: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/components/Results/ContainerResult.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CommonResultProps } from './types';
+export type Props = CommonResultProps & {
+    /** Name of the container. Provides the main text to be displayed as the item. */
+    name: React.ReactNode;
+    /** Text to appear to the right of the text. It has a lower font-weight. */
+    caption?: string;
+    /** Set whether to display a lock on the result's icon */
+    isPrivate?: boolean;
+    /** Text to be shown alongside the main `text`. */
+    subText?: React.ReactNode;
+};
+/**
+ * Generic result type for Atlassian containers.
+ */
+export default class ContainerResult extends React.PureComponent<Props> {
+    getAvatar: () => {};
+    render(): JSX.Element;
+}

package/dist/types-ts4.5/components/Results/ObjectResult.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CommonResultProps } from './types';
+export type Props = CommonResultProps & {
+    /** Name of the container. Provides the main text to be displayed as the item. */
+    name: React.ReactNode;
+    /** Text to appear to the right of the text. It has a lower font-weight. */
+    caption?: string;
+    /** Name of the container to which the object belongs. Displayed alongside the name */
+    containerName?: React.ReactNode;
+    /** Set whether to display a lock on the result's icon */
+    isPrivate?: boolean;
+    /** A key or identifier of the object. Ajoined to the `containerName` when provided. */
+    objectKey?: React.ReactNode;
+};
+/**
+ * Generic result type for Atlassian objects.
+ */
+export default class ObjectResult extends React.PureComponent<Props> {
+    getAvatar: () => {};
+    getSubtext(): {} | null | undefined;
+    render(): JSX.Element;
+}

package/dist/types-ts4.5/components/Results/PersonResult.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CommonResultProps } from './types';
+export type Props = CommonResultProps & {
+    /** Name of the container. Provides the main text to be displayed as the item. */
+    name: React.ReactNode;
+    /** A user's custom handle. Appears to the right of their `name`. It has a lower font-weight. */
+    mentionName?: string;
+    /** A character with which to prefix the `mentionName`. Defaults to '@' */
+    mentionPrefix?: string;
+    /** Text to be shown alongside the main `text`. */
+    presenceMessage?: React.ReactNode;
+    /** Sets the appearance of the presence indicator */
+    presenceState?: 'online' | 'busy' | 'offline' | null;
+};
+export default class PersonResult extends React.PureComponent<Props> {
+    static defaultProps: Partial<Props>;
+    getMention: () => string | undefined;
+    getAvatar: () => {};
+    render(): JSX.Element;
+}

package/dist/types-ts4.5/components/Results/ResultBase.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { AnalyticsData, CommonResultProps } from './types';
+import { ResultContextType } from '../context';
+export type Props = CommonResultProps & {
+    /** Type of the result. This is passed as a parameter to certain callbacks. */
+    type: string;
+    /** Main text to be displayed as the item. */
+    text: React.ReactNode;
+    /** Text to be shown alongside the main `text`. */
+    subText?: React.ReactNode;
+    /** Text to appear to the right of the text. It has a lower font-weight. */
+    caption?: string;
+    /** React element to appear to the left of the text. */
+    icon?: React.ReactNode;
+    /** The context provided by QuickSearch. */
+    context?: ResultContextType;
+};
+type DefaultProps = {
+    context: ResultContextType;
+};
+export declare class ResultBase extends React.PureComponent<DefaultProps & Props> {
+    static defaultProps: Partial<Props>;
+    state: {
+        isMouseSelected: boolean;
+    };
+    registerResult(): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    getAnalyticsData(): AnalyticsData;
+    handleClick: (e: MouseEvent) => void;
+    handleMouseEnter: (event: MouseEvent) => void;
+    handleMouseLeave: () => void;
+    render(): JSX.Element;
+}
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/dist/types-ts4.5/components/Results/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ContainerResult } from './ContainerResult';
+export { default as ObjectResult } from './ObjectResult';
+export { default as PersonResult } from './PersonResult';
+export { default as ResultBase } from './ResultBase';

package/dist/types-ts4.5/components/Results/types.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+export type AnalyticsData = Object;
+export type ResultId = string | number;
+export type SelectedResultId = ResultId | null;
+export type CancelableEvent = KeyboardEvent | MouseEvent | React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>;
+export type ResultData = {
+    resultId: ResultId;
+    type: string;
+    event: CancelableEvent;
+};
+export type CommonResultProps = {
+    /** Unique ID of the result. This is passed as a parameter to certain callbacks */
+    resultId: string | number;
+    /** Type of the result. This is passed as a parameter to certain callbacks. */
+    type?: string;
+    /** Src URL of the image to be used as the result's icon, overriden by avatar prop */
+    avatarUrl?: string;
+    /** React Component of the image to be used as the result's icon, takes precedence over avatarUrl */
+    avatar?: ReactNode;
+    /** Content to be shown after the main content. Shown to the right of content (or to the left in RTL mode). */
+    elemAfter?: ReactNode;
+    /** Icon to be shown after the main content when the result is selected */
+    selectedIcon?: ReactNode;
+    /** Location to link out to on click. */
+    href?: string;
+    /** Target to open the link in. */
+    target?: string;
+    /** Reduces padding and font size. */
+    isCompact?: boolean;
+    /** Triggered by mouseClick event. */
+    onClick?: (resultData: ResultData) => void;
+    /** key/value pairs of attributes to be send in analytics events. */
+    analyticsData?: AnalyticsData | (() => AnalyticsData);
+};

package/dist/types-ts4.5/components/Search/Search.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare const controlKeys: string[];
+type Props = {
+    /** The elements to render as options to search from. */
+    children?: React.ReactNode;
+    /** The elements to render to the right of the search input. */
+    inputControls?: React.ReactNode;
+    /** Set whether the loading state should be shown. */
+    isLoading?: boolean;
+    /** Function to be called when the search input loses focus. */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Function to be called when a input action occurs (native `oninput` event). */
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => void;
+    /** Function to be called when the user hits the escape key.  */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder text for search field. */
+    placeholder?: string;
+    /** Current value of search field. */
+    value?: string;
+    /** Autocomplete information */
+    autocompleteText?: string;
+};
+export default class Search extends React.PureComponent<Props> {
+    static defaultProps: Partial<Props>;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    setInputRef: (ref: React.Ref<any>) => void;
+    renderInputControls: () => JSX.Element | null;
+    inputRef?: React.Ref<any>;
+    render(): JSX.Element;
+}
+export {};

package/dist/types-ts4.5/components/Search/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const SearchBox: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const SearchFieldBaseOuter: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const SearchFieldBaseInner: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const SearchInner: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const getPlaceholderStyle: (style: any) => import("styled-components").InterpolationValue[];
+export declare const getPlaceholderColor: import("styled-components").InterpolationValue[];
+export declare const SearchInput: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, any, import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>>;
+export declare const SearchInputTypeAhead: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, any, import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>>;
+export declare const SearchInputControlsContainer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;

package/dist/types-ts4.5/components/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ATLASKIT_QUICKSEARCH_NS = "atlaskit.navigation.quick-search";
+export declare const QS_ANALYTICS_EV_CLOSE: string;
+export declare const QS_ANALYTICS_EV_KB_CTRLS_USED: string;
+export declare const QS_ANALYTICS_EV_OPEN: string;
+export declare const QS_ANALYTICS_EV_QUERY_ENTERED: string;
+export declare const QS_ANALYTICS_EV_SUBMIT: string;

package/dist/types-ts4.5/components/context.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentType } from 'react';
+import { ResultData, ResultId, SelectedResultId } from './Results/types';
+import { ResultBase } from './Results/ResultBase';
+export type ResultContextType = {
+    /** Register result as keyboard navigation target */
+    registerResult: (result: ResultBase) => void;
+    /** Unregister result as keyboard navigation target */
+    unregisterResult: (result: ResultBase) => void;
+    /** Triggered by mouseEnter event. */
+    onMouseEnter: (resultData: ResultData) => void;
+    /** Standard onMouseLeave event. */
+    onMouseLeave: () => void;
+    /** Fires an analytics event */
+    sendAnalytics?: (eventName: string, eventData: Object) => void;
+    /** get the index of the search result in the list of result */
+    getIndex: (resultId: ResultId) => number | null;
+    /** React component to be used for rendering links */
+    linkComponent?: ComponentType;
+};
+export declare const ResultContext: React.Context<ResultContextType>;
+export declare const SelectedResultIdContext: React.Context<SelectedResultId>;

package/dist/types-ts4.5/components/decorateWithAnalyticsData.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Props } from './QuickSearch';
+export default function decorateWithAnalyticsData(WrappedQuickSearch: React.ComponentClass<Props>): React.ComponentClass<Props>;

package/dist/types-ts4.5/components/isReactElement.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Heuristically check whether an element is a react element or not.
+ * React elements have constructors for their type property but native elements use strings.
+ */
+declare const _default: (element: any) => boolean;
+export default _default;

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,17 @@
+import * as resultTypes from './components/Results';
+export { default as AkNavigationItemGroup } from './components/ResultItem/ResultItemGroup';
+export { default as AkNavigationItem } from './components/ResultItem/ResultItem';
+export { default as AkQuickSearch } from './components/QuickSearch';
+export { default as AkSearch } from './components/Search/Search';
+export { resultTypes as quickSearchResultTypes };
+export { default as QuickSearch } from './components/QuickSearch';
+export { default as ResultItemGroup } from './components/ResultItem/ResultItemGroup';
+export { default as ObjectResult } from './components/Results/ObjectResult';
+export type { Props as ObjectResultProps } from './components/Results/ObjectResult';
+export { default as PersonResult } from './components/Results/PersonResult';
+export type { Props as PersonResultProps } from './components/Results/PersonResult';
+export { default as ContainerResult } from './components/Results/ContainerResult';
+export type { Props as ContainerResultProps } from './components/Results/ContainerResult';
+export { default as ResultBase } from './components/Results/ResultBase';
+export type { Props as ResultBaseProps } from './components/Results/ResultBase';
+export type { CancelableEvent, ResultData } from './components/Results/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/quick-search",
-  "version": "8.1.0",
+  "version": "8.1.2",
   "description": "A quick-search component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Search Platform: Search Experience",
@@ -27,7 +35,7 @@
     "@atlaskit/item": "^12.1.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "keycode": "^2.1.7"
   },
@@ -46,7 +54,7 @@
     "prop-types": "^15.5.10",
     "react": "^16.8.0",
     "sinon": "^2.2.0",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "uuid": "^3.1.0"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/report.api.md

@@ -84,7 +84,7 @@ export type ContainerResultProps = CommonResultProps & {
   subText?: React_2.ReactNode;
 };
 
-// @public (undocumented)
+// @public
 const _default: React_2.ComponentClass<Props_3, any>;
 export { _default as AkQuickSearch };
 export { _default as QuickSearch };

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,263 @@
+## API Report File for "@atlaskit/quick-search"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentType } from 'react';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+
+// @public (undocumented)
+export class AkNavigationItem extends React_2.PureComponent<Props_2> {
+    // (undocumented)
+    static defaultProps: Partial<Props_2>;
+    // (undocumented)
+    render(): JSX.Element;
+}
+
+// @public (undocumented)
+export class AkSearch extends React_2.PureComponent<Props_4> {
+    // (undocumented)
+    static defaultProps: Partial<Props_4>;
+    // (undocumented)
+    inputRef?: React_2.Ref<any>;
+    // (undocumented)
+    onInputKeyDown: (event: React_2.KeyboardEvent<HTMLInputElement>) => void;
+    // (undocumented)
+    render(): JSX.Element;
+    // (undocumented)
+    renderInputControls: () => JSX.Element | null;
+    // (undocumented)
+    setInputRef: (ref: React_2.Ref<any>) => void;
+}
+
+// @public (undocumented)
+type AnalyticsData = Object;
+
+// @public (undocumented)
+export type CancelableEvent = KeyboardEvent | MouseEvent | React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLElement>;
+
+// @public (undocumented)
+type CommonResultProps = {
+    resultId: number | string;
+    type?: string;
+    avatarUrl?: string;
+    avatar?: ReactNode;
+    elemAfter?: ReactNode;
+    selectedIcon?: ReactNode;
+    href?: string;
+    target?: string;
+    isCompact?: boolean;
+    onClick?: (resultData: ResultData) => void;
+    analyticsData?: (() => AnalyticsData) | AnalyticsData;
+};
+
+// @public
+export class ContainerResult extends React_2.PureComponent<ContainerResultProps> {
+    // (undocumented)
+    getAvatar: () => {};
+    // (undocumented)
+    render(): JSX.Element;
+}
+
+// @public (undocumented)
+export type ContainerResultProps = CommonResultProps & {
+    name: React_2.ReactNode;
+    caption?: string;
+    isPrivate?: boolean;
+    subText?: React_2.ReactNode;
+};
+
+// @public
+const _default: React_2.ComponentClass<Props_3, any>;
+export { _default as AkQuickSearch }
+export { _default as QuickSearch }
+
+// @public (undocumented)
+type DefaultProps = {
+    context: ResultContextType;
+};
+
+// @public
+export class ObjectResult extends React_2.PureComponent<ObjectResultProps> {
+    // (undocumented)
+    getAvatar: () => {};
+    // (undocumented)
+    getSubtext(): null | undefined | {};
+    // (undocumented)
+    render(): JSX.Element;
+}
+
+// @public (undocumented)
+export type ObjectResultProps = CommonResultProps & {
+    name: React_2.ReactNode;
+    caption?: string;
+    containerName?: React_2.ReactNode;
+    isPrivate?: boolean;
+    objectKey?: React_2.ReactNode;
+};
+
+// @public (undocumented)
+export class PersonResult extends React_2.PureComponent<PersonResultProps> {
+    // (undocumented)
+    static defaultProps: Partial<PersonResultProps>;
+    // (undocumented)
+    getAvatar: () => {};
+    // (undocumented)
+    getMention: () => string | undefined;
+    // (undocumented)
+    render(): JSX.Element;
+}
+
+// @public (undocumented)
+export type PersonResultProps = CommonResultProps & {
+    name: React_2.ReactNode;
+    mentionName?: string;
+    mentionPrefix?: string;
+    presenceMessage?: React_2.ReactNode;
+    presenceState?: 'busy' | 'offline' | 'online' | null;
+};
+
+// @public (undocumented)
+type Props = {
+    title: React_2.ReactNode;
+    children?: React_2.ReactNode;
+};
+
+// @public (undocumented)
+type Props_2 = {
+    caption?: string;
+    href?: string;
+    target?: string;
+    icon?: React_2.ReactNode;
+    isCompact?: boolean;
+    isSelected?: boolean;
+    isMouseSelected?: boolean;
+    onClick?(e: MouseEvent): void;
+    onMouseEnter?: (e: MouseEvent) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
+    subText?: React_2.ReactNode;
+    text?: React_2.ReactNode;
+    textAfter?: React_2.ReactNode;
+    selectedIcon?: React_2.ReactNode;
+    linkComponent?: React_2.ComponentType;
+};
+
+// @public (undocumented)
+type Props_3 = {
+    children: React_2.ReactNode;
+    isLoading?: boolean;
+    onSearchBlur?: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    onSearchInput?: (event: React_2.FormEvent<HTMLInputElement>, isAutocompleted?: boolean) => void;
+    onSearchKeyDown?: (event: React_2.KeyboardEvent<HTMLInputElement>) => void;
+    onSearchSubmit?: (event: React_2.KeyboardEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    value?: string;
+    selectedResultId?: SelectedResultId;
+    onSelectedResultIdChanged?: (id: SelectedResultId) => void;
+    firePrivateAnalyticsEvent?: (eventName: string, eventData: Object) => void;
+    linkComponent?: React_2.ComponentType<any>;
+    inputControls?: React_2.ReactNode;
+    autocompleteText?: string;
+};
+
+// @public (undocumented)
+type Props_4 = {
+    children?: React_2.ReactNode;
+    inputControls?: React_2.ReactNode;
+    isLoading?: boolean;
+    onBlur?: (event: React_2.FocusEvent<HTMLInputElement>) => void;
+    onInput?: (event: React_2.FormEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: React_2.KeyboardEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    value?: string;
+    autocompleteText?: string;
+};
+
+declare namespace quickSearchResultTypes {
+    export {
+        ContainerResult,
+        ObjectResult,
+        PersonResult,
+        ResultBase
+    }
+}
+export { quickSearchResultTypes }
+
+// @public (undocumented)
+export const ResultBase: (props: ResultBaseProps) => JSX.Element;
+
+// @public (undocumented)
+class ResultBase_2 extends React_2.PureComponent<DefaultProps & ResultBaseProps> {
+    // (undocumented)
+    componentDidMount(): void;
+    // (undocumented)
+    componentDidUpdate(): void;
+    // (undocumented)
+    componentWillUnmount(): void;
+    // (undocumented)
+    static defaultProps: Partial<ResultBaseProps>;
+    // (undocumented)
+    getAnalyticsData(): AnalyticsData;
+    // (undocumented)
+    handleClick: (e: MouseEvent) => void;
+    // (undocumented)
+    handleMouseEnter: (event: MouseEvent) => void;
+    // (undocumented)
+    handleMouseLeave: () => void;
+    // (undocumented)
+    registerResult(): void;
+    // (undocumented)
+    render(): JSX.Element;
+    // (undocumented)
+    state: {
+        isMouseSelected: boolean;
+    };
+}
+
+// @public (undocumented)
+export type ResultBaseProps = CommonResultProps & {
+    type: string;
+    text: React_2.ReactNode;
+    subText?: React_2.ReactNode;
+    caption?: string;
+    icon?: React_2.ReactNode;
+    context?: ResultContextType;
+};
+
+// @public (undocumented)
+type ResultContextType = {
+    registerResult: (result: ResultBase_2) => void;
+    unregisterResult: (result: ResultBase_2) => void;
+    onMouseEnter: (resultData: ResultData) => void;
+    onMouseLeave: () => void;
+    sendAnalytics?: (eventName: string, eventData: Object) => void;
+    getIndex: (resultId: ResultId) => null | number;
+    linkComponent?: ComponentType;
+};
+
+// @public (undocumented)
+export type ResultData = {
+    resultId: ResultId;
+    type: string;
+    event: CancelableEvent;
+};
+
+// @public (undocumented)
+type ResultId = number | string;
+
+// @public (undocumented)
+class ResultItemGroup extends React_2.Component<Props> {
+    // (undocumented)
+    render(): JSX.Element;
+}
+export { ResultItemGroup as AkNavigationItemGroup }
+export { ResultItemGroup }
+
+// @public (undocumented)
+type SelectedResultId = ResultId | null;
+
+// (No @packageDocumentation comment for this package)
+
+```