@atlaskit/link-picker 1.10.2 → 1.10.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.10.3
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 1.10.2
 
 ### Patch Changes

package/dist/cjs/ui/link-picker/index.js

@@ -201,9 +201,9 @@ function LinkPicker(_ref) {
     });
   }, []);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
-    var keyCode = event.keyCode;
-    var KEY_CODE_ARROW_DOWN = 40;
-    var KEY_CODE_ARROW_UP = 38;
+    var key = event.key;
+    var KEY_ARROW_DOWN = 'ArrowDown';
+    var KEY_ARROW_UP = 'ArrowUp';
 
     if (!items || !items.length) {
       return;
@@ -211,14 +211,14 @@ function LinkPicker(_ref) {
 
     var updatedIndex = activeIndex;
 
-    switch (keyCode) {
-      case KEY_CODE_ARROW_DOWN:
+    switch (key) {
+      case KEY_ARROW_DOWN:
         // down
         event.preventDefault();
         updatedIndex = (activeIndex + 1) % items.length;
         break;
 
-      case KEY_CODE_ARROW_UP:
+      case KEY_ARROW_UP:
         // up
         event.preventDefault();
         updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
@@ -227,7 +227,7 @@ function LinkPicker(_ref) {
 
     var item = items[updatedIndex];
 
-    if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && item) {
+    if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
       /**
        * Manually track that the url has been updated using searchResult method
        */

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.2",
+	"version": "1.10.3",
 	"sideEffects": false
 }

package/dist/es2019/ui/link-picker/index.js

@@ -152,10 +152,10 @@ function LinkPicker({
   }, []);
   const handleKeyDown = useCallback(event => {
     const {
-      keyCode
+      key
     } = event;
-    const KEY_CODE_ARROW_DOWN = 40;
-    const KEY_CODE_ARROW_UP = 38;
+    const KEY_ARROW_DOWN = 'ArrowDown';
+    const KEY_ARROW_UP = 'ArrowUp';
 
     if (!items || !items.length) {
       return;
@@ -163,14 +163,14 @@ function LinkPicker({
 
     let updatedIndex = activeIndex;
 
-    switch (keyCode) {
-      case KEY_CODE_ARROW_DOWN:
+    switch (key) {
+      case KEY_ARROW_DOWN:
         // down
         event.preventDefault();
         updatedIndex = (activeIndex + 1) % items.length;
         break;
 
-      case KEY_CODE_ARROW_UP:
+      case KEY_ARROW_UP:
         // up
         event.preventDefault();
         updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
@@ -179,7 +179,7 @@ function LinkPicker({
 
     const item = items[updatedIndex];
 
-    if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && item) {
+    if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
       /**
        * Manually track that the url has been updated using searchResult method
        */

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.2",
+	"version": "1.10.3",
 	"sideEffects": false
 }

package/dist/esm/ui/link-picker/index.js

@@ -158,9 +158,9 @@ function LinkPicker(_ref) {
     });
   }, []);
   var handleKeyDown = useCallback(function (event) {
-    var keyCode = event.keyCode;
-    var KEY_CODE_ARROW_DOWN = 40;
-    var KEY_CODE_ARROW_UP = 38;
+    var key = event.key;
+    var KEY_ARROW_DOWN = 'ArrowDown';
+    var KEY_ARROW_UP = 'ArrowUp';
 
     if (!items || !items.length) {
       return;
@@ -168,14 +168,14 @@ function LinkPicker(_ref) {
 
     var updatedIndex = activeIndex;
 
-    switch (keyCode) {
-      case KEY_CODE_ARROW_DOWN:
+    switch (key) {
+      case KEY_ARROW_DOWN:
         // down
         event.preventDefault();
         updatedIndex = (activeIndex + 1) % items.length;
         break;
 
-      case KEY_CODE_ARROW_UP:
+      case KEY_ARROW_UP:
         // up
         event.preventDefault();
         updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
@@ -184,7 +184,7 @@ function LinkPicker(_ref) {
 
     var item = items[updatedIndex];
 
-    if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && item) {
+    if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
       /**
        * Manually track that the url has been updated using searchResult method
        */

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.10.2",
+	"version": "1.10.3",
 	"sideEffects": false
 }

package/dist/types-ts4.0/analytics.codegen.d.ts

@@ -0,0 +1,52 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Generates analytics utilities from the package analytics spec yaml
+ *
+ * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
+ */
+export declare type PackageMetaDataType = {
+    packageName: '@atlaskit/link-picker';
+    packageVersion: string;
+    source: 'linkPicker';
+    componentName: 'linkPicker';
+};
+export declare type LinkPickerAnalyticsContextType = {
+    linkState: 'editLink' | 'newLink';
+    linkFieldContent: 'url' | 'text_string' | null;
+    linkFieldContentInputMethod: 'manual' | 'paste' | 'searchResult' | null;
+    linkFieldContentInputSource: string | null;
+    displayTextFieldContent: 'text_string' | null;
+    displayTextFieldContentInputMethod: 'manual' | 'paste' | null;
+};
+export declare type FormSubmittedLinkPickerAttributesType = {};
+export declare type InlineDialogViewedLinkPickerAttributesType = {};
+export declare type InlineDialogClosedLinkPickerAttributesType = {};
+export declare type TextFieldUpdatedLinkFieldAttributesType = {};
+export declare type TextFieldUpdatedDisplayTextFieldAttributesType = {};
+export declare type LinkPickerUnhandledErrorCaughtAttributesType = {
+    browserInfo: string;
+    error: string;
+    componentStack: string | null;
+};
+export declare type ResultsResolveFailedAttributesType = {
+    error: string;
+};
+declare type AnalyticsEventAttributes = {
+    'ui.form.submitted.linkPicker': FormSubmittedLinkPickerAttributesType;
+    'ui.inlineDialog.viewed.linkPicker': InlineDialogViewedLinkPickerAttributesType;
+    'ui.inlineDialog.closed.linkPicker': InlineDialogClosedLinkPickerAttributesType;
+    'ui.textField.updated.linkField': TextFieldUpdatedLinkFieldAttributesType;
+    'ui.textField.updated.displayTextField': TextFieldUpdatedDisplayTextFieldAttributesType;
+    'ui.linkPicker.unhandledErrorCaught': LinkPickerUnhandledErrorCaughtAttributesType;
+    'operational.resultsResolve.failed': ResultsResolveFailedAttributesType;
+};
+declare function createEventPayload<K extends keyof AnalyticsEventAttributes>(eventKey: K, attributes: AnalyticsEventAttributes[K]): {
+    eventType: string;
+    actionSubject: string;
+    action: string;
+    actionSubjectId: string;
+    attributes: AnalyticsEventAttributes[K];
+};
+export default createEventPayload;

package/dist/types-ts4.0/common/analytics/context.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LinkPickerAnalyticsContextType } from '../../analytics.codegen';
+export declare type TrackAttribute = <K extends keyof LinkPickerAnalyticsContextType>(attribute: K, value: LinkPickerAnalyticsContextType[K]) => void;
+interface AnalyticsContextType {
+    /**
+     * Update a single attribute in the analytics context
+     */
+    trackAttribute: TrackAttribute;
+    /**
+     * Update a set of attributes in the analytics context
+     */
+    trackAttributes: (attributes: Partial<LinkPickerAnalyticsContextType>) => void;
+    /**
+     * Retrieve the current set of attributes
+     * Can be used by components to derive/compute new attributes for specific events
+     */
+    getAttributes: () => LinkPickerAnalyticsContextType;
+}
+/**
+ * Hook that exposes the context-level attribute getters and setters.
+ */
+export declare const useLinkPickerAnalytics: () => AnalyticsContextType;
+/**
+ * Wraps a component with the analytics context + listener to update events with contextual-level attributes.
+ * Should be implemented once at the root of the link picker.
+ */
+export declare function withLinkPickerAnalyticsContext<P>(WrappedComponent: React.ComponentType<P>): React.ComponentType<P>;
+export {};

package/dist/types-ts4.0/common/analytics/index.d.ts

@@ -0,0 +1,2 @@
+export { useLinkPickerAnalytics, withLinkPickerAnalyticsContext, } from './context';
+export { withInputFieldTracking } from './input-field-tracking';

package/dist/types-ts4.0/common/analytics/input-field-tracking.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LinkPickerAnalyticsContextType } from '../../analytics.codegen';
+declare type InputFields = 'link' | 'displayText';
+/**
+ * Wraps an input field and connects it to the link picker analytics context to provide a baseline of analytics tracking
+ * @param WrappedComponent The input field to be tracked
+ * @param field The name of the field (ie matching actionSubjectId)
+ * @param filterOnChangeEventAttrs Function to hook into and filter/customise the default attribute tracking logic
+ * @returns HOC Input field with tracking
+ */
+export declare const withInputFieldTracking: <P extends {
+    onBlur?: ((e: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+    onChange?: ((e: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onClear?: Function | undefined;
+    onFocus?: ((e: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+}, Field extends InputFields>(WrappedComponent: React.ComponentType<P>, field: Field, filterOnChangeEventAttrs?: <OnChangeAttributes extends Partial<LinkPickerAnalyticsContextType>>(event: React.ChangeEvent<HTMLInputElement>, attributes: OnChangeAttributes) => OnChangeAttributes) => React.ComponentType<P>;
+export {};

package/dist/types-ts4.0/common/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ANALYTICS_CHANNEL = "media";
+export declare const COMPONENT_NAME = "linkPicker";

package/dist/types-ts4.0/common/generic-error-svg/index.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const GenericErrorSVG: (props: React.SVGProps<SVGSVGElement>) => jsx.JSX.Element;
+export default GenericErrorSVG;

package/dist/types-ts4.0/common/generic-error-svg/styled.d.ts

@@ -0,0 +1 @@
+export declare const genericErrorStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/common/utils/url.d.ts

@@ -0,0 +1,5 @@
+export declare const isSafeUrl: (url: string) => boolean;
+/**
+ * Adds protocol to url if needed.
+ */
+export declare function normalizeUrl(url?: string | null): string | null;

package/dist/types-ts4.0/controllers/use-fix-height/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const useFixHeight: (shouldFixHeight: boolean) => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    style: {
+        minHeight: string | number;
+    } | undefined;
+};
+export default useFixHeight;

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

@@ -0,0 +1,3 @@
+export { ComposedLinkPicker as LinkPicker } from './ui';
+export type { LinkPickerProps } from './ui/link-picker';
+export type { LinkInputType, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, } from './ui/types';

package/dist/types-ts4.0/services/use-plugins/index.d.ts

@@ -0,0 +1,14 @@
+import { LinkPickerPlugin, LinkPickerPluginErrorFallback, LinkPickerState, LinkSearchListItemData } from '../../ui/types';
+export interface LinkPickerPluginsService {
+    items: LinkSearchListItemData[] | null;
+    isLoading: boolean;
+    isActivePlugin: boolean;
+    activePlugin?: LinkPickerPlugin;
+    tabs: {
+        tabTitle: string;
+    }[];
+    error: unknown | null;
+    retry: () => void;
+    errorFallback?: LinkPickerPluginErrorFallback;
+}
+export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[]): LinkPickerPluginsService;

package/dist/types-ts4.0/services/use-plugins/reducer.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { LinkSearchListItemData } from '../../ui/types';
+export interface PluginState {
+    items: LinkSearchListItemData[] | null;
+    error: unknown | null;
+    isLoading: boolean;
+}
+export declare const ACTION_CLEAR = "CLEAR";
+export declare const ACTION_LOADING = "LOADING";
+export declare const ACTION_SUCCESS = "SUCCESS";
+export declare const ACTION_ERRORED = "ERROR";
+interface ClearAction {
+    type: typeof ACTION_CLEAR;
+}
+interface ResolveLoadingAction {
+    type: typeof ACTION_LOADING;
+}
+interface ResolveSuccessAction {
+    type: typeof ACTION_SUCCESS;
+    payload: Pick<PluginState, 'items' | 'isLoading'>;
+}
+interface ResolveErrorAction {
+    type: typeof ACTION_ERRORED;
+    payload: PluginState['error'];
+}
+export declare type ReducerAction = ClearAction | ResolveLoadingAction | ResolveSuccessAction | ResolveErrorAction;
+export declare const INITIAL_STATE: PluginState;
+export declare function reducer(state: PluginState, action: ReducerAction): PluginState;
+export declare const usePluginReducer: () => [
+    PluginState,
+    import("react").Dispatch<ReducerAction>
+];
+export {};

package/dist/types-ts4.0/services/use-plugins/utils.d.ts

@@ -0,0 +1,18 @@
+import { LinkPickerPlugin, LinkPickerState, ResolveResult } from '../../ui/types';
+export declare class CancellationError extends Error {
+}
+export declare const cancellable: <T extends unknown>(promise: Promise<T>) => {
+    promise: Promise<T>;
+    cancel: () => void;
+};
+/**
+ * Wraps the resolve with a cancellation wrapper and makes promise + generator plugin resolves more compatible
+ * Calling cancel for generator plugin prevents it from yielding any further updates
+ */
+export declare const resolvePluginUpdates: (plugin: LinkPickerPlugin, state: LinkPickerState) => {
+    cancel: () => void;
+    next: () => Promise<{
+        done?: boolean;
+        value: ResolveResult;
+    }>;
+};

package/dist/types-ts4.0/services/use-search-query/index.d.ts

@@ -0,0 +1,3 @@
+import { LinkPickerState } from '../../ui/types';
+import { PickerState } from '../../ui/link-picker';
+export declare function useSearchQuery(state: PickerState): LinkPickerState | null;

package/dist/types-ts4.0/ui/error-boundary/index.d.ts

@@ -0,0 +1,27 @@
+import React, { Component, ReactNode } from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+declare type ErrorBoundaryErrorInfo = {
+    componentStack: string;
+};
+export interface ErrorBoundaryProps extends WithAnalyticsEventsProps {
+    children: ReactNode;
+    channel: string;
+    ErrorComponent?: React.ComponentType;
+    onError?: (error: Error, info?: ErrorBoundaryErrorInfo) => void;
+}
+declare type ErrorBoundaryPayload = {
+    error: Error | string;
+    info?: ErrorBoundaryErrorInfo;
+    [key: string]: any;
+};
+declare type ErrorBoundaryState = {
+    hasError: boolean;
+};
+export declare class BaseErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    fireAnalytics: (analyticsErrorPayload: ErrorBoundaryPayload) => void;
+    componentDidCatch(error: Error, info?: ErrorBoundaryErrorInfo): void;
+    render(): React.ReactNode;
+}
+declare const ErrorBoundary: React.ForwardRefExoticComponent<Omit<ErrorBoundaryProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export default ErrorBoundary;

package/dist/types-ts4.0/ui/error-boundary-fallback/index.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const ErrorBoundaryFallback: () => jsx.JSX.Element;

package/dist/types-ts4.0/ui/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PackageMetaDataType } from '../analytics.codegen';
+import { LinkPickerProps } from './link-picker';
+export declare const PACKAGE_DATA: PackageMetaDataType;
+export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => JSX.Element>;

package/dist/types-ts4.0/ui/link-picker/announcer.d.ts

@@ -0,0 +1,22 @@
+import React, { AriaAttributes, Ref } from 'react';
+declare type AnnouncerProps = {
+    ref?: Ref<HTMLDivElement>;
+    /** Set 'false' for announcing only changed text
+     * (not announce duplicate part of string after second render),
+     * and 'true' for announcing all the string after each render */
+    ariaAtomic?: AriaAttributes['aria-atomic'];
+    /** Set politeness settings */
+    ariaLive?: AriaAttributes['aria-live'];
+    /** Used to describe what types of changes have occurred to an aria-live region */
+    ariaRelevant?: AriaAttributes['aria-relevant'];
+    /** Role used to set attribute role. See more details https://dequeuniversity.com/library/aria/liveregion-playground#configOptions */
+    role?: 'status' | 'log' | 'alert' | 'timer' | 'marquee';
+    /** Text message that will be announced */
+    text: string;
+    /** Debounce delay.
+     *  Set delay (ms) to prevent announce the same string multiple times.
+     *  It can be useful for cases when the parent component re-renders with the same announcer's text. */
+    delay?: number;
+};
+declare const _default: React.NamedExoticComponent<AnnouncerProps>;
+export default _default;

package/dist/types-ts4.0/ui/link-picker/browser.d.ts

@@ -0,0 +1,15 @@
+declare const result: {
+    mac: boolean;
+    ie: boolean;
+    ie_version: number;
+    gecko: boolean;
+    chrome: boolean;
+    chrome_version: number;
+    android: boolean;
+    ios: boolean;
+    webkit: boolean;
+    safari: boolean;
+    supportsIntersectionObserver: boolean;
+    supportsResizeObserver: boolean;
+};
+export { result as browser };

package/dist/types-ts4.0/ui/link-picker/form-footer/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const testIds: {
+    readonly insertButton: "link-picker-insert-button";
+    readonly cancelButton: "link-picker-cancel-button";
+};
+interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
+    isEditing?: boolean;
+    onCancel?: () => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ isEditing, onCancel, ...restProps }: FormFooterProps) => jsx.JSX.Element>;
+export default _default;

package/dist/types-ts4.0/ui/link-picker/form-footer/styled.d.ts

@@ -0,0 +1 @@
+export declare const formFooterStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/link-picker/index.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { LinkInputType, LinkPickerPlugin } from '../types';
+export declare const RECENT_SEARCH_LIST_SIZE = 5;
+export declare const testIds: {
+    readonly clearUrlButton: "clear-text";
+    readonly urlError: "link-error";
+    readonly tabList: "link-picker-tabs";
+    readonly tabItem: "link-picker-tab";
+    readonly resultListTitle: string;
+    readonly searchResultItem: string;
+    readonly searchResultList: string;
+    readonly searchResultLoadingIndicator: string;
+    readonly emptyResultPage: string;
+    readonly searchError: string;
+    readonly insertButton: "link-picker-insert-button";
+    readonly cancelButton: "link-picker-cancel-button";
+    readonly linkPicker: "link-picker";
+    readonly urlInputField: "link-url";
+    readonly textInputField: "link-text";
+    readonly searchIcon: "link-picker-search-icon";
+};
+interface Meta {
+    /** Indicates how the link was picked. */
+    inputMethod: LinkInputType;
+}
+interface OnSubmitParameter {
+    /** The `url` of the linked resource. */
+    url: string;
+    /** The desired text to be displayed alternatively to the title of the linked resource. */
+    displayText: string | null;
+    /** The resolved `title` of the resource at the time of link picking (if applicable, null if not known). */
+    title: string | null;
+    /** Meta data about the link picking submission. */
+    meta: Meta;
+    /**
+     * The input value of the `url` field at time of submission if inserted "manually".
+     * This can useful if the `url` was manually inserted with a value that is different from the normalised value returned as `url`.
+     * @example
+     * { url: 'https://google.com', rawUrl: 'google.com' }
+     */
+    rawUrl?: string;
+}
+export interface LinkPickerProps {
+    /**
+     * Callback to fire on form submission.
+     */
+    onSubmit: (arg: OnSubmitParameter, analytic?: UIAnalyticsEvent | null) => void;
+    /** Callback to fire when the cancel button is clicked. */
+    onCancel: () => void;
+    /** Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs */
+    onContentResize?: () => void;
+    /** The url of the linked resource for editing. */
+    url?: string;
+    /** The desired text to be displayed alternatively to the title of the linked resource for editing. */
+    displayText?: string | null;
+    /** Plugins that provide link suggestions / search capabilities. */
+    plugins?: LinkPickerPlugin[];
+}
+export interface PickerState {
+    selectedIndex: number;
+    activeIndex: number;
+    url: string;
+    displayText: string;
+    invalidUrl: boolean;
+    activeTab: number;
+}
+declare const _default: import("react").ComponentType<LinkPickerProps>;
+export default _default;

package/dist/types-ts4.0/ui/link-picker/link-search-error/index.d.ts

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const CONTACT_SUPPORT_LINK = "https://support.atlassian.com/contact/";
+export declare const messages: {
+    searchErrorHeader: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchErrorDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const testIds: {
+    searchError: string;
+};
+declare const LinkSearchError: () => jsx.JSX.Element;
+export default LinkSearchError;

package/dist/types-ts4.0/ui/link-picker/link-search-list/index.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { LinkSearchListItemData } from '../../types';
+export declare const messages: {
+    titleRecentlyViewed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchLinkResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const testIds: {
+    resultListTitle: string;
+    searchResultItem: string;
+    searchResultList: string;
+    searchResultLoadingIndicator: string;
+    emptyResultPage: string;
+};
+export interface LinkSearchListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onMouseEnter' | 'onMouseLeave'> {
+    items?: LinkSearchListItemData[] | null;
+    isLoading: boolean;
+    selectedIndex: number;
+    activeIndex: number;
+    onSelect: (objectId: string) => void;
+    onMouseEnter: (objectId: string) => void;
+    onMouseLeave: (objectId: string) => void;
+    ariaControls?: string;
+    ariaLabelledBy?: string;
+    role?: string;
+    id?: string;
+    error?: unknown;
+    hasSearchTerm?: boolean;
+}
+declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;
+export default LinkSearchList;

package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/index.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const messages: {
+    noResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noResultsDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const testIds: {
+    emptyResultPage: string;
+};
+declare const NoResults: () => jsx.JSX.Element;
+export default NoResults;

package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/no-results-svg/index.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+declare const NoResultsSVG: () => jsx.JSX.Element;
+export default NoResultsSVG;

package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/no-results-svg/styled.d.ts

@@ -0,0 +1 @@
+export declare const noResultsSVGStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/link-picker/link-search-list/link-search-no-results/styled.d.ts

@@ -0,0 +1 @@
+export declare const emptyStateWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/link-picker/link-search-list/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const listContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const spinnerContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const listStyles: import("@emotion/react").SerializedStyles;
+export declare const listTitleStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/link-picker/list-item/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { WrappedComponentProps } from 'react-intl-next';
+import { LinkSearchListItemData } from '../../types';
+export interface Props {
+    item: LinkSearchListItemData;
+    selected: boolean;
+    active: boolean;
+    onSelect: (objectId: string) => void;
+    onMouseEnter: (objectId: string) => void;
+    onMouseLeave: (objectId: string) => void;
+    id?: string;
+    role?: string;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & Props>> & {
+    WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & Props>;
+};
+export default _default;

package/dist/types-ts4.0/ui/link-picker/list-item/styled.d.ts

@@ -0,0 +1,9 @@
+export declare const relativeFontSizeToBase16: (px: number | string) => string;
+export declare const composeListItemStyles: (active?: boolean, selected?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const itemNameStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemNameStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemContextStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemContainerInnerStyles: import("@emotion/react").SerializedStyles;
+export declare const itemIconStyles: import("@emotion/react").SerializedStyles;
+export declare const imgStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/link-picker/messages.d.ts

@@ -0,0 +1,85 @@
+export declare const searchMessages: {
+    linkLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const linkMessages: {
+    linkLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const formMessages: {
+    linkInvalid: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    clearLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const linkTextMessages: {
+    linkTextLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkTextAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkTextPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    clearLinkText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const messages: {
+    timeUpdated: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    timeViewed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    timeAgo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.0/ui/link-picker/styled.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
+ */
+export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const rootContainerStylesForLoader: import("@emotion/react").SerializedStyles;
+export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
+export declare const tabsWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const flexColumnStyles: import("@emotion/react").SerializedStyles;
+export declare const formFooterMargin: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/link-picker/text-input/index.d.ts

@@ -0,0 +1,14 @@
+import { jsx } from '@emotion/react';
+import { TextFieldProps } from '@atlaskit/textfield';
+export declare type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & {
+    name: string;
+    value: string;
+    label?: string;
+    onUndo?: Function;
+    onRedo?: Function;
+    onClear?: (name: string) => void;
+    clearLabel?: string;
+    error?: string | null;
+};
+declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
+export default TextInput;

package/dist/types-ts4.0/ui/link-picker/text-input/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const clearTextButtonStyles: import("@emotion/react").SerializedStyles;
+export declare const fieldStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/ui/link-picker/transformTimeStamp.d.ts

@@ -0,0 +1,3 @@
+import { IntlShape } from 'react-intl-next';
+import { ListItemTimeStamp } from '../types';
+export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date | undefined, lastUpdatedDate?: Date | undefined) => ListItemTimeStamp | undefined;

package/dist/types-ts4.0/ui/link-picker/utils.d.ts

@@ -0,0 +1,10 @@
+import { KeyboardEvent } from 'react';
+import { IntlShape } from 'react-intl-next';
+import { LinkPickerPlugin, LinkSearchListItemData } from '../types';
+export declare const isUndoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;
+export declare const isRedoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;
+/**
+ * Retrieve the data source for a link given the item and the plugin that resolved it
+ */
+export declare const getDataSource: (item: LinkSearchListItemData, plugin?: LinkPickerPlugin | undefined) => string;
+export declare function getScreenReaderText(items: LinkSearchListItemData[], selectedIndex: number, intl: IntlShape): string | undefined;

package/dist/types-ts4.0/ui/loader-fallback/index.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const LoaderFallback: jsx.JSX.Element;

package/dist/types-ts4.0/ui/types.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
+export declare type LinkInputType = 'manual' | 'typeAhead';
+export interface LinkSearchListItemData {
+    /** Unique identifiable attribute for the item */
+    objectId: string;
+    /** Name / title / display text of the link */
+    name: string;
+    /** URL of the resource being linked to */
+    url: string;
+    /** Icon to display in link result */
+    icon: string | React.ComponentType<{
+        alt: string;
+    }>;
+    /** Alt text describing the icon */
+    iconAlt: string | MessageDescriptor;
+    /** Context to display in link result */
+    container?: string;
+    /** Optional last view date to display in link result */
+    lastViewedDate?: Date;
+    /** Optional last updated date to display in link result */
+    lastUpdatedDate?: Date;
+    /** Whether the result is pre-fetched from activity provider */
+    prefetch?: boolean;
+    /** Metadata about the result */
+    meta?: {
+        /** The data source that provided the result */
+        source?: string;
+    };
+}
+export declare type ListItemTimeStamp = {
+    pageAction: string;
+    dateString: string;
+    timeSince?: string | undefined;
+};
+export interface LinkPickerState {
+    /** Current query string / URL input field value */
+    query: string;
+}
+export interface ResolveResult {
+    data: LinkSearchListItemData[];
+}
+export interface LinkPickerPlugin {
+    resolve: (state: LinkPickerState) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
+    /** Uniquely identify the tab */
+    tabKey?: string;
+    /** Human-readable label for the plugin */
+    tabTitle?: string;
+    /** Render function to customise the UI that is displayed when an error occurs resolving results */
+    errorFallback?: LinkPickerPluginErrorFallback;
+    /** Metadata about the plugin */
+    meta?: {
+        /** The data source that provides all results provided by the plugin */
+        source?: string;
+    };
+}
+export declare type LinkPickerPluginErrorFallback = (error: unknown, retry: () => void) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -20,6 +20,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "af:exports": {
@@ -72,8 +79,8 @@
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^1.1.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
     "@types/js-yaml": "^3.12.5",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
@@ -83,7 +90,7 @@
     "prettier": "^2.1.1",
     "react-dom": "^16.8.0",
     "sinon": "^2.2.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "techstack": {
     "@repo/internal": {

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/link-picker".
+## API Report File for "@atlaskit/link-picker"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -12,115 +16,91 @@ import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-export declare type LinkInputType = 'manual' | 'typeAhead';
+// @public (undocumented)
+export type LinkInputType = 'manual' | 'typeAhead';
 
-export declare const LinkPicker: React_2.MemoExoticComponent<(
+// @public (undocumented)
+export const LinkPicker: React_2.MemoExoticComponent<(
   props: LinkPickerProps,
 ) => JSX.Element>;
 
-export declare interface LinkPickerPlugin {
+// @public (undocumented)
+export interface LinkPickerPlugin {
+  errorFallback?: LinkPickerPluginErrorFallback;
+  meta?: {
+    source?: string;
+  };
+  // (undocumented)
   resolve: (
     state: LinkPickerState,
   ) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
-  /** Uniquely identify the tab */
   tabKey?: string;
-  /** Human-readable label for the plugin */
   tabTitle?: string;
-  /** Render function to customise the UI that is displayed when an error occurs resolving results */
-  errorFallback?: LinkPickerPluginErrorFallback;
-  /** Metadata about the plugin */
-  meta?: {
-    /** The data source that provides all results provided by the plugin */
-    source?: string;
-  };
 }
 
-export declare type LinkPickerPluginErrorFallback = (
+// @public (undocumented)
+export type LinkPickerPluginErrorFallback = (
   error: unknown,
   retry: () => void,
 ) => ReactNode;
 
-export declare interface LinkPickerProps {
-  /**
-   * Callback to fire on form submission.
-   */
+// @public (undocumented)
+export interface LinkPickerProps {
+  displayText?: string | null;
+  onCancel: () => void;
+  onContentResize?: () => void;
   onSubmit: (
     arg: OnSubmitParameter,
     analytic?: UIAnalyticsEvent | null,
   ) => void;
-  /** Callback to fire when the cancel button is clicked. */
-  onCancel: () => void;
-  /** Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs */
-  onContentResize?: () => void;
-  /** The url of the linked resource for editing. */
-  url?: string;
-  /** The desired text to be displayed alternatively to the title of the linked resource for editing. */
-  displayText?: string | null;
-  /** Plugins that provide link suggestions / search capabilities. */
   plugins?: LinkPickerPlugin[];
+  url?: string;
 }
 
-export declare interface LinkPickerState {
-  /** Current query string / URL input field value */
+// @public (undocumented)
+export interface LinkPickerState {
   query: string;
 }
 
-export declare interface LinkSearchListItemData {
-  /** Unique identifiable attribute for the item */
-  objectId: string;
-  /** Name / title / display text of the link */
-  name: string;
-  /** URL of the resource being linked to */
-  url: string;
-  /** Icon to display in link result */
+// @public (undocumented)
+export interface LinkSearchListItemData {
+  container?: string;
   icon:
     | string
     | React.ComponentType<{
         alt: string;
       }>;
-  /** Alt text describing the icon */
   iconAlt: string | MessageDescriptor;
-  /** Context to display in link result */
-  container?: string;
-  /** Optional last view date to display in link result */
-  lastViewedDate?: Date;
-  /** Optional last updated date to display in link result */
   lastUpdatedDate?: Date;
-  /** Whether the result is pre-fetched from activity provider */
-  prefetch?: boolean;
-  /** Metadata about the result */
+  lastViewedDate?: Date;
   meta?: {
-    /** The data source that provided the result */
     source?: string;
   };
+  name: string;
+  objectId: string;
+  prefetch?: boolean;
+  url: string;
 }
 
-declare interface Meta {
-  /** Indicates how the link was picked. */
+// @public (undocumented)
+interface Meta {
   inputMethod: LinkInputType;
 }
 
-declare interface OnSubmitParameter {
-  /** The `url` of the linked resource. */
-  url: string;
-  /** The desired text to be displayed alternatively to the title of the linked resource. */
+// @public (undocumented)
+interface OnSubmitParameter {
   displayText: string | null;
-  /** The resolved `title` of the resource at the time of link picking (if applicable, null if not known). */
-  title: string | null;
-  /** Meta data about the link picking submission. */
   meta: Meta;
-  /**
-   * The input value of the `url` field at time of submission if inserted "manually".
-   * This can useful if the `url` was manually inserted with a value that is different from the normalised value returned as `url`.
-   * @example
-   * { url: 'https://google.com', rawUrl: 'google.com' }
-   */
   rawUrl?: string;
+  title: string | null;
+  url: string;
 }
 
-declare interface ResolveResult {
+// @public (undocumented)
+interface ResolveResult {
+  // (undocumented)
   data: LinkSearchListItemData[];
 }
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```