@atlaskit/link-picker 1.20.1 → 1.20.2

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

@@ -0,0 +1,80 @@
+/// <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 tabList: "link-picker-tabs";
+    readonly tabItem: "link-picker-tab";
+    readonly urlError: string;
+    readonly clearUrlButton: string;
+    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 actionButton: "link-picker-action-button";
+    readonly linkPickerRoot: "link-picker-root";
+    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[];
+    /** Customise the link picker root component */
+    component?: React.ComponentType<Partial<LinkPickerProps> & {
+        children: React.ReactElement;
+    }>;
+    /** Hides the link picker display text field if set to true. */
+    hideDisplayText?: boolean;
+    featureFlags?: Record<string, unknown>;
+}
+export interface PickerState {
+    selectedIndex: number;
+    activeIndex: number;
+    url: string;
+    displayText: string;
+    invalidUrl: boolean;
+    activeTab: number;
+    /** When true, even if the selected index is -1, don't hide the recents. */
+    preventHidingRecents: boolean;
+}
+declare const _default: import("react").ComponentType<LinkPickerProps>;
+export default _default;

package/dist/types-ts4.5/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.5/ui/link-picker/link-search-list/index.d.ts

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { KeyboardEvent } from '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;
+};
+type LinkSearchListElement = HTMLElement;
+export interface LinkSearchListProps extends Omit<React.HTMLAttributes<LinkSearchListElement>, 'onSelect' | 'onChange'> {
+    items?: LinkSearchListItemData[] | null;
+    isLoading: boolean;
+    selectedIndex: number;
+    activeIndex: number;
+    onChange: (objectId: string) => void;
+    onSelect: (objectId: string) => void;
+    onKeyDown?: (e: KeyboardEvent<LinkSearchListElement>) => void;
+    ariaControls?: string;
+    ariaLabelledBy?: string;
+    role?: string;
+    id?: string;
+    hasSearchTerm?: boolean;
+}
+declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;
+export default LinkSearchList;

package/dist/types-ts4.5/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.5/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.5/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.5/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.5/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.5/ui/link-picker/link-search-list/use-track-results-shown/index.d.ts

@@ -0,0 +1,2 @@
+import { LinkSearchListItemData } from '../../../types';
+export declare const useTrackResultsShown: (isLoading: boolean, items?: LinkSearchListItemData[] | null | undefined, hasSearchTerm?: boolean) => void;

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { KeyboardEvent } from 'react';
+import { LinkSearchListItemData } from '../../types';
+export interface Props {
+    item: LinkSearchListItemData;
+    selected: boolean;
+    active: boolean;
+    tabIndex?: number;
+    onSelect: (objectId: string) => void;
+    onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+    onFocus: () => void;
+    id?: string;
+    role?: string;
+}
+declare const LinkSearchListItem: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export default LinkSearchListItem;

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

@@ -0,0 +1,9 @@
+export declare const relativeFontSizeToBase16: (px: number | string) => string;
+export declare const composeListItemStyles: (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.5/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.5/ui/link-picker/styled.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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;
+/** Link Picker loader / skeleton will be taller in height when displayText field is shown */
+export declare const rootContainerStylesForLoaderWithDisplaytext: import("@emotion/react").SerializedStyles;
+/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
+export declare const rootContainerStylesForLoaderWithoutDisplaytext: 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.5/ui/link-picker/text-input/index.d.ts

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react';
+import { TextFieldProps } from '@atlaskit/textfield';
+export 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;
+};
+export declare const testIds: {
+    urlError: string;
+    clearUrlButton: string;
+};
+declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
+export default TextInput;

package/dist/types-ts4.5/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.5/ui/link-picker/track-mount/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+declare function TrackMount(): null;
+export default TrackMount;

package/dist/types-ts4.5/ui/link-picker/track-tab-viewed/index.d.ts

@@ -0,0 +1,4 @@
+declare function TrackTabViewed({ activeTab }: {
+    activeTab: number | null;
+}): null;
+export default TrackTabViewed;

package/dist/types-ts4.5/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, lastUpdatedDate?: Date) => ListItemTimeStamp | undefined;

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

@@ -0,0 +1,11 @@
+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) => string;
+export declare function getScreenReaderText(items: LinkSearchListItemData[], selectedIndex: number, intl: IntlShape): string | undefined;
+export declare const handleNavKeyDown: (event: KeyboardEvent<HTMLElement>, itemsLength: number, activeIndex: number) => number;

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

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+/**
+ * Loader / skeleton for the Link Picker. Takes displayText prop - when no displayText is given the height of the skeleton
+ * is shorter to prevent jump when loading in Link Picker.
+ */
+export declare const LoaderFallback: ({ hideDisplayText, }: {
+    hideDisplayText?: boolean | undefined;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/scrolling-tabs/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+interface ScrollingTabListProps {
+    children: JSX.Element;
+}
+export declare const ScrollingTabList: (props: ScrollingTabListProps) => jsx.JSX.Element;
+export default ScrollingTabList;

package/dist/types-ts4.5/ui/scrolling-tabs/scrolling-tabs.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+export interface ConditionalButtons {
+    back: boolean;
+    forward: boolean;
+}
+export declare const scrollBack: (ref: RefObject<HTMLDivElement>) => void;
+export declare const scrollForward: (ref: RefObject<HTMLDivElement>) => void;
+export declare const calculateConditionalButtons: (container: HTMLElement | null | undefined, hideButtons: boolean) => ConditionalButtons;
+export declare const createGhost: () => HTMLDivElement;
+export declare const getTabList: (ref: RefObject<HTMLDivElement>) => Element | null | undefined;
+export declare const getContainer: (ref: RefObject<HTMLDivElement>) => HTMLElement | null | undefined;

package/dist/types-ts4.5/ui/scrolling-tabs/styles.d.ts

@@ -0,0 +1,6 @@
+import { SerializedStyles } from '@emotion/react';
+export declare const scrollingContainerStyles: SerializedStyles;
+export declare const containerStyles: SerializedStyles;
+export declare const buttonContainerStyles: SerializedStyles;
+export declare const backButtonStyles: SerializedStyles;
+export declare const nextButtonStyles: SerializedStyles;

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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { MessageDescriptor } from 'react-intl-next';
+export 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 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;
+    };
+    /** Callback for plugin activation */
+    UNSAFE_onActivation?: () => void;
+    /** Register Plugin Actions */
+    action?: LinkPickerPluginAction;
+}
+export interface LinkPickerPluginAction {
+    label: MessageDescriptor | string;
+    callback: () => void;
+}
+export type LinkPickerPluginErrorFallback = (error: unknown, retry: () => void) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.20.1",
+  "version": "1.20.2",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -44,7 +44,7 @@
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/frontend-utilities": "^2.6.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/linking-common": "^2.9.0",
+    "@atlaskit/linking-common": "^2.10.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/textfield": "^5.4.0",
@@ -79,8 +79,8 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/link-picker-atlassian-plugin": "^30.0.0",
-    "@atlassian/link-picker-plugins": "^20.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^30.1.0",
+    "@atlassian/link-picker-plugins": "^20.1.0",
     "@atlassian/recent-work-client": "^1.8.0",
     "@atlassian/search-provider": "^2.4.0",
     "@testing-library/dom": "^8.17.1",