@atlaskit/quick-search 8.0.9

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const ResultItemGroupHeader: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ResultItemGroupTitle: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, 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").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ResultItemCaption: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const ResultItemSubText: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const ResultItemIcon: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ResultItemTextAfter: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CommonResultProps } from './types';
+export declare 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/components/Results/ObjectResult.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CommonResultProps } from './types';
+export declare 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/components/Results/PersonResult.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CommonResultProps } from './types';
+export declare 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/components/Results/ResultBase.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { AnalyticsData, CommonResultProps } from './types';
+import { ResultContextType } from '../context';
+export declare 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;
+};
+declare 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/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/components/Results/types.d.ts

@@ -0,0 +1,34 @@
+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 = {
+    resultId: ResultId;
+    type: string;
+    event: CancelableEvent;
+};
+export declare 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/components/Search/Search.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare const controlKeys: string[];
+declare 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/components/Search/styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const SearchBox: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SearchFieldBaseOuter: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SearchFieldBaseInner: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const SearchInner: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const getPlaceholderStyle: (style: any) => import("styled-components").InterpolationValue[];
+export declare const getPlaceholderColor: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<import("@atlaskit/theme").AtlaskitThemeProps | import("@atlaskit/theme").CustomThemeProps | import("@atlaskit/theme").NoThemeProps | undefined, any>>[];
+export declare const SearchInput: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+export declare const SearchInputTypeAhead: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;
+export declare const SearchInputControlsContainer: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;

package/dist/types/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/components/context.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentType } from 'react';
+import { ResultData, ResultId } from './Results/types';
+import { ResultBase } from './Results/ResultBase';
+export declare 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<string | number | null>;

package/dist/types/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/components/isReactElement.d.ts

@@ -0,0 +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.
+ */
+export default _default;

package/dist/types/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/docs/0-intro.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  md,
+  Example,
+  Props,
+  code,
+  AtlassianInternalWarning,
+} from '@atlaskit/docs';
+
+export default md`
+  ${(<AtlassianInternalWarning />)}
+
+  This is a barebones quick-search component that can render different types of search results.
+  
+  ## Usage
+  ${code`import { QuickSearch, ObjectResult, ContainerResult, ResultItemGroup } from '@atlaskit/quick-search';
+
+  // Inside a react component with proper state and stuff.. :
+  render() {
+    return (
+      <QuickSearch
+        isLoading={this.state.isLoading}
+        onSearchInput={({ target }) => { this.search(target.value); }}
+        value={this.state.query}
+      >
+        // render search results:
+        <ResultItemGroup title="Issues">
+          <ObjectResult name="Fix this and that" objectKey="JRA-123" /> 
+          <ObjectResult name="More stuff" objectKey="JRA-124" /> 
+        </ResultItemGroup>
+        <ResultItemGroup title="Spaces">
+          <ContainerResult name="Search and Smarts" /> 
+        </ResultItemGroup>
+      </QuickSearch>
+    );
+  }
+  `}
+
+  ${(
+    <Example
+      Component={require('../examples/1-Object-Results').default}
+      title="Objects"
+      source={require('!!raw-loader!../examples/1-Object-Results')}
+    />
+  )}
+
+  ${(
+    <Props
+      props={require('!!extract-react-types-loader!../src/components/QuickSearch')}
+    />
+  )}
+
+`;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@atlaskit/quick-search",
+  "version": "8.0.9",
+  "description": "A quick-search component",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "atlaskit:src": "src/index.ts",
+  "atlassian": {
+    "team": "Search & Smarts: Search Experience",
+    "deprecatedAutoEntryPoints": true,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "Quick Search"
+    }
+  },
+  "dependencies": {
+    "@atlaskit/analytics": "^8.0.0",
+    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/item": "^12.0.0",
+    "@atlaskit/spinner": "^15.0.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@babel/runtime": "^7.0.0",
+    "keycode": "^2.1.7"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "styled-components": "^3.2.6"
+  },
+  "devDependencies": {
+    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/docs": "*",
+    "@atlaskit/drawer": "^7.0.0",
+    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/navigation": "^37.0.0",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "enzyme": "^3.10.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.8.0",
+    "sinon": "^2.2.0",
+    "typescript": "3.9.6",
+    "uuid": "^3.1.0"
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "noImplicitAny": true
+  },
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.tsx"
+  ]
+}