@atlaskit/link-picker 0.0.2 → 0.8.1

package/dist/types/index.d.ts

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

package/dist/types/messages.d.ts

@@ -0,0 +1,92 @@
+export declare const messages: {
+    placeholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkTextPlaceholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkInvalid: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkTextLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    clearText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    clearLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchLinkAriaDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchLinkResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    linkAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    timeUpdated: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    timeViewed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    timeAgo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleRecentlyViewed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    cancelButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insertButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/styles.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const recentListStyles: import("@emotion/utils").SerializedStyles;
+export declare const Container: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ClearText: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const FieldWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const SearchIconWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const ListTitleStyles: import("@emotion/utils").SerializedStyles;
+interface ListItemProps {
+    active: boolean;
+    selected: boolean;
+}
+export declare const ListItemWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & ListItemProps, any, import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & ListItemProps>;
+export declare const ItemNameWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const ListItemName: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ListItemContext: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ItemIconWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const ImgStyles: import("@emotion/utils").SerializedStyles;
+export {};

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

@@ -0,0 +1,37 @@
+/// <reference types="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;
+    /** Context to display in link result */
+    container: string;
+    /** Icon to display in link result */
+    icon: string | React.ComponentType<{
+        alt: string;
+    }>;
+    /** Alt text describing the icon */
+    iconAlt: string | MessageDescriptor;
+    /** 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;
+}
+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 LinkPickerPlugin {
+    resolve: (state: LinkPickerState) => AsyncGenerator<LinkSearchListItemData[], LinkSearchListItemData[]>;
+}

package/dist/types/ui/LinkSearchList.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PureComponent } from 'react';
+import { LinkSearchListItemData } from '../types';
+export declare const List: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>, any, React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>>;
+export interface Props {
+    items?: LinkSearchListItemData[];
+    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;
+}
+export default class LinkSearchList extends PureComponent<Props, {}> {
+    render(): JSX.Element;
+}

package/dist/types/ui/LinkSearchListItem.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/ui/PanelTextInput.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@atlaskit/textfield';
+export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'autoFocus' | 'onSubmit'> {
+    name: string;
+    label?: string;
+    autoFocus?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onUndo?: Function;
+    onRedo?: Function;
+    onClear?: () => void;
+    clearLabel?: string;
+    error?: string | null;
+}
+declare const PanelTextInput: (props: Props) => JSX.Element;
+export default PanelTextInput;

package/dist/types/ui/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/ui/link-picker.d.ts

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+import { LinkSearchListItemData, LinkInputType, LinkPickerPlugin } from '../types';
+export declare const RECENT_SEARCH_LIST_SIZE = 5;
+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) => void;
+    /** Callback to fire when the cancel button is clicked. */
+    onCancel: () => 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 State {
+    items: LinkSearchListItemData[];
+    selectedIndex: number;
+    activeIndex: number;
+    url: string;
+    isLoading: boolean;
+    displayText: string;
+    invalidUrl: string | null;
+}
+export declare const LinkPickerWithIntl: React.FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
+    WrappedComponent: React.ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
+};
+export {};

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

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+export declare const relativeFontSizeToBase16: (px: number | string) => string;
+export declare const isUndoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;
+export declare const isRedoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;

package/example-helpers/flight-deck/_manifest.json

@@ -0,0 +1,9 @@
+{
+  "name": "recent-work-service",
+  "publishMetadata": {
+    "metricTags": {}
+  },
+  "dimensions": {},
+  "tagScheme": "v001-n_$name$",
+  "frontend": true
+}

package/example-helpers/flight-deck/mockFDResponse.json

@@ -0,0 +1,133 @@
+{
+    "hydrators": {
+        "TownsquareGoal": {
+            "hydratorPaths": {
+                "id": [
+                    "id"
+                ],
+                "key": [
+                    "key"
+                ],
+                "name": [
+                    "name"
+                ],
+                "url": [
+                    "url"
+                ],
+                "icon": [
+                    "iconData"
+                ]
+            }
+        },
+        "TownsquareProject": {
+            "hydratorPaths": {
+                "id": [
+                    "id"
+                ],
+                "key": [
+                    "key"
+                ],
+                "name": [
+                    "name"
+                ],
+                "url": [
+                    "url"
+                ],
+                "icon": [
+                    "iconData"
+                ]
+            }
+        },
+        "TownsquareComment": {
+            "hydratorPaths": {
+                "id": [
+                    "id"
+                ],
+                "name": [
+                    "object.name"
+                ],
+                "url": [
+                    "object.url"
+                ],
+                "icon": [
+                    "object.iconData"
+                ]
+            }
+        },
+        "ConfluencePage": {
+            "hydratorPaths": {
+                "id": [
+                    "id"
+                ],
+                "name": [
+                    "title"
+                ],
+                "localResourceId": [
+                    "pageId"
+                ],
+                "url": [
+                    "links.base",
+                    "links.webUi"
+                ],
+                "containers": [
+                    "space.name"
+                ],
+                "icon": [
+                  "metadata.titleEmojiDraft",
+                  "metadata.titleEmojiPublished"
+                ]
+            },
+            "staticFallbacks": {
+                "icon": "https://home-static.us-east-1.staging.public.atl-paas.net/confluence-page-icon.svg"
+            }
+        },
+        "ConfluenceBlogPost": {
+            "hydratorPaths": {
+                "id": [
+                    "id"
+                ],
+                "name": [
+                    "title"
+                ],
+                "localResourceId": [
+                    "blogPostId"
+                ],
+                "url": [
+                    "links.base",
+                    "links.webUi"
+                ],
+                "containers": [
+                    "space.name"
+                ],
+                "icon": [
+                  "metadata.titleEmojiDraft",
+                  "metadata.titleEmojiPublished"
+                ]
+            },
+            "staticFallbacks": {
+                "icon": "https://home-static.us-east-1.prod.public.atl-paas.net/confluence-blogpost-icon.svg"
+            }
+        },
+        "ConfluenceComment": {
+            "hydratorPaths": {
+                "id": [
+                    "id"
+                ],
+                "name": [
+                    "container.title"
+                ],
+                "url": [
+                    "links.base",
+                    "links.webUi"
+                ],
+                "containers": [
+                    "container.space.name"
+                ]
+            },
+            "staticFallbacks": {
+                "icon": "https://home-static.us-east-1.staging.public.atl-paas.net/confluence-page-icon.svg"
+            }
+        }
+    },
+    "queryFragments": "\n\n  fragment townsquareGoal on TownsquareGoal {\n    id\n    key\n    name\n    url\n    iconData\n  }\n\n\n  fragment townsquareProject on TownsquareProject {\n    id\n    key\n    name\n    url\n    iconData\n  }\n\n\n  fragment townsquareComment on TownsquareComment {\n    id\n    url\n    object {\n      name\n      iconData\n      url\n    }\n  }\n\n\n  fragment confluencePage on ConfluencePage {\n    id\n    title\n    pageId\n    links {\n      base\n      webUi\n    }\n    space {\n      name\n    }\n  }\n\n\n  fragment confluenceBlogPost on ConfluenceBlogPost {\n    id\n    title\n    blogPostId\n    links {\n      base\n      webUi\n    }\n    space {\n      name\n    }\n  }\n\n\n  fragment confluenceComment on ConfluenceComment {\n    id\n    links {\n      base\n      webUi\n    }\n    container {\n      __typename\n      ...confluenceBlogPost\n      ...confluencePage\n    }\n  }\n\nfragment activityItemEdge on ActivityItemEdge {\n  cursor\n  node {\n    id\n    object {\n      id\n      type\n      product\n      rootContainerId\n      contributors {\n        profile {\n          name\n          picture\n          accountId\n        }\n      }\n      data {\n        __typename\n\t...townsquareGoal\n\t...townsquareProject\n\t...townsquareComment\n\t...confluencePage\n\t...confluenceBlogPost\n\t...confluenceComment\n      }\n    }\n    event {\n      id\n      timestamp\n      eventType\n    }\n  }\n}\nfragment activityItemConnection on ActivityConnection {\n  edges {\n    ...activityItemEdge\n  }\n}\n\n"
+}