@atlaskit/profilecard 17.2.0 → 17.2.1

package/dist/types-ts4.0/mocks/team-data.d.ts

@@ -0,0 +1,7 @@
+import { Team } from '../types';
+export default function teamData({ headerImage, displayName, members: memberCount, description, }: {
+    headerImage?: 'None' | 'Picture';
+    displayName?: 'Short' | 'Medium' | 'Long' | 'Overlong';
+    members?: number;
+    description?: 'None' | 'Short' | 'Medium' | 'Long' | 'Overlong';
+}): Team;

package/dist/types-ts4.0/mocks/util.d.ts

@@ -0,0 +1,6 @@
+export declare const random: (int: number) => number;
+export declare const getWeekday: () => {
+    index: number;
+    string: string;
+};
+export declare const getTimeString: () => string;

package/dist/types-ts4.0/styled/Card.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+interface FullNameLabelProps {
+    noMeta?: boolean;
+    isDisabledAccount?: boolean;
+}
+export declare const CardContainerEmpty: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const CardWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const ProfileImage: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ActionsFlexSpacer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const KudosBlobAnimation: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const AnimatedKudosButton: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ActionButtonGroup: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const OverflowActionButtonsWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const CardContent: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const DetailsGroup: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const DisabledInfo: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const FullNameLabel: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & FullNameLabelProps, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & FullNameLabelProps>;
+export declare const LozengeWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const CustomLozengeContainer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const JobTitleLabel: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const AppTitleLabel: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const SpinnerContainer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+interface CardContainerProps {
+    isDisabledUser?: boolean;
+    withoutElevation?: boolean;
+}
+export declare const CardContainer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & CardContainerProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & CardContainerProps>;
+export declare const DetailsLabel: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const DetailsLabelIcon: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const DetailsLabelText: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export {};

package/dist/types-ts4.0/styled/Error.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ErrorWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const ErrorTitle: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const ErrorText: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const TeamErrorTitle: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const TeamErrorText: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>, any, import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>>;

package/dist/types-ts4.0/styled/ReportingLines.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ReportingLinesSection: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ReportingLinesHeading: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const ManagerSection: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const ManagerName: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const OffsetWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;

package/dist/types-ts4.0/styled/TeamCard.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const CardTriggerWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const CardWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const CardHeader: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    image?: string | undefined;
+    isLoading?: boolean | undefined;
+}, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    image?: string | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export declare const CardContent: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const TeamName: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const MemberCount: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const AvatarSection: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const DescriptionWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const Description: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, any, import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+export declare const ActionButtons: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const WrappedButton: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const MoreButton: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const LoadingWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,14 @@
+export declare const bgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-surface-overlay)">;
+export declare const headerBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-brand-bold)">;
+export declare const teamHeaderBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
+export declare const headerBgColorDisabledUser: import("@atlaskit/theme").ThemedValue<"var(--ds-background-disabled)">;
+export declare const headerTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-inverse)">;
+export declare const headerTextColorInactive: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const appLabelBgColor: import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)">;
+export declare const appLabelTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const labelTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const labelIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
+export declare const errorIconColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-disabled)">;
+export declare const errorTitleColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text)">;
+export declare const errorTextColor: import("@atlaskit/theme").ThemedValue<"var(--ds-text-subtlest)">;
+export declare const boxShadow: import("@atlaskit/theme").ThemedValue<"var(--ds-shadow-overlay)">;

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

@@ -0,0 +1,355 @@
+import React from 'react';
+import { IntlShape } from 'react-intl-next';
+import { AnalyticsEventPayload, CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import TeamCentralCardClient from './client/TeamCentralCardClient';
+import TeamProfileCardClient from './client/TeamProfileCardClient';
+import UserProfileCardClient from './client/UserProfileCardClient';
+export interface ApiClientResponse {
+    User: {
+        id: string;
+        isBot: boolean;
+        isCurrentUser: boolean;
+        avatarUrl: string | null;
+        email: string | null;
+        fullName: string | null;
+        location: string | null;
+        meta: string | null;
+        nickname: string | null;
+        companyName: string | null;
+        remoteTimeString: string | null;
+        remoteWeekdayIndex: string | null;
+        remoteWeekdayString: string | null;
+        status: StatusType;
+        statusModifiedDate: number | null;
+    };
+}
+export interface Team {
+    largeAvatarImageUrl?: string;
+    smallAvatarImageUrl?: string;
+    largeHeaderImageUrl?: string;
+    smallHeaderImageUrl?: string;
+    id: string;
+    displayName: string;
+    description: string;
+    organizationId?: string;
+    members?: {
+        id: string;
+        fullName: string;
+        avatarUrl: string;
+    }[];
+}
+export interface ProfileCardClientData {
+    isBot: boolean;
+    isCurrentUser: boolean;
+    avatarUrl?: string;
+    email?: string;
+    fullName?: string;
+    location?: string;
+    meta?: string;
+    nickname?: string;
+    companyName?: string;
+    timestring?: string;
+    status: StatusType;
+    statusModifiedDate?: number | null;
+    customLozenges?: LozengeProps[];
+}
+export interface ReportingLinesUserPII {
+    name: string;
+    picture?: string;
+}
+export interface ReportingLinesUser {
+    accountIdentifier: string;
+    identifierType: 'ATLASSIAN_ID' | 'BASE64_HASH' | 'UNKNOWN';
+    pii?: ReportingLinesUserPII;
+}
+export interface TeamCentralReportingLinesData {
+    managers?: ReportingLinesUser[];
+    reports?: ReportingLinesUser[];
+}
+export interface ProfileCardResourcedProps {
+    userId: string;
+    cloudId: string;
+    resourceClient: ProfileClient;
+    actions?: ProfileCardAction[];
+    reportingLinesProfileUrl?: string;
+    onReportingLinesClick?: (user: ReportingLinesUser) => void;
+    position?: ProfilecardTriggerPosition;
+    trigger?: TriggerType;
+    children?: React.ReactNode;
+    addFlag?: (flag: any) => void;
+}
+export interface ProfileCardResourcedState {
+    visible?: boolean;
+    isLoading?: boolean;
+    hasError: boolean;
+    error?: ProfileCardErrorType;
+    data: ProfileCardClientData | null;
+    reportingLinesData?: TeamCentralReportingLinesData;
+    isKudosEnabled?: boolean;
+    kudosDrawerOpen: boolean;
+}
+export interface ProfileCardTriggerProps {
+    userId: string;
+    /**
+      A cloudId can be provided, and we'll verify that the target userId is an
+      actual user in the specified site.
+  
+      Instead you can omit the cloudId and we won't do such a check.
+  
+      If you have a cloudId and only want to show users who are in that site
+      then please provide it. If you're a site-less product or don't care about
+      verifying that the shown user is in a particular site, don't provide a
+      cloudId.
+     */
+    cloudId?: string;
+    resourceClient: ProfileClient;
+    actions?: ProfileCardAction[];
+    reportingLinesProfileUrl?: string;
+    onReportingLinesClick?: (user: ReportingLinesUser) => void;
+    position?: ProfilecardTriggerPosition;
+    trigger?: TriggerType;
+    children?: React.ReactNode;
+    testId?: string;
+    addFlag?: (flag: any) => void;
+}
+export interface ProfileCardTriggerState {
+    visible?: boolean;
+    isLoading?: boolean;
+    hasError: boolean;
+    error?: ProfileCardErrorType;
+    data: ProfileCardClientData | null;
+    reportingLinesData?: TeamCentralReportingLinesData;
+    shouldShowGiveKudos?: boolean;
+    teamCentralBaseUrl?: string;
+    kudosDrawerOpen: boolean;
+}
+export interface TeamProfileCardTriggerState {
+    visible?: boolean;
+    isLoading?: boolean;
+    hasError: boolean;
+    error?: any;
+    data: Team | null;
+    renderError?: boolean;
+    shouldShowGiveKudos?: boolean;
+    teamCentralBaseUrl?: string;
+    kudosDrawerOpen: boolean;
+}
+export interface TeamProfilecardCoreProps {
+    /**
+      The id of the user viewing the profile card.
+  
+      This is used to determine whether to say that the member count is
+      "including you" or not.
+     */
+    viewingUserId?: string;
+    /**
+      A list of extra buttons to be displayed at the bottom of the card.
+      View Profile is always included by default.
+     */
+    actions?: ProfileCardAction[];
+    /**
+      A function allowing products to provide an href for the user avatars in the
+      profilecard, e.g. so they can link to user's profile pages.
+     */
+    generateUserLink?: (userId: string) => string;
+    /**
+      A function allowing products to provide an onClick handler for when the
+      user clicks on a user's avatar or avatar group item.
+     */
+    onUserClick?: (userId: string, event: React.MouseEvent<Element>) => void;
+    /**
+      This should be a link to the team's profile page. This will be used for:
+  
+      - Wrapping the trigger in a link to the team profile page (unless
+        triggerLinkType is `none`).
+  
+      - Providing the link for the View Profile action button on the card.
+     */
+    viewProfileLink: string;
+    /**
+      An onClick action that navigates to the team's profile page. Something you
+      may want, e.g. for an SPA site or tracking analytics of navigation. This
+      is optional, just the viewProfileLink will suffice. Will be used for:
+  
+      - Adding an onClick to the trigger if the triggerLinkType is
+        `clickable-link`.
+  
+      - Providing an onClick for the View Profile action button on the card.
+     */
+    viewProfileOnClick?: (event?: React.MouseEvent<Element>) => void;
+}
+export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
+    /** The id of the team. */
+    teamId: string;
+    /**
+      The id of the organization that the team belongs to.
+      Currently this is unused, but will become necessary in the future.
+     */
+    orgId: string;
+    /** An instance of ProfileClient. */
+    resourceClient: ProfileClient;
+    /**
+      The position relative to the trigger that the card should be displayed in.
+     */
+    position?: ProfilecardTriggerPosition;
+    /**
+      The interaction method used to trigger the team profile card to appear.
+  
+      - Click is generally recommended, but your needs may vary.
+  
+      - Hover works for mouse users, but does not support those who use a
+        keyboard or screen reader, avoid using this if it's possible or makes
+        sense.
+  
+      - Hover-click is usable for scenarios like inline-edits, where mouse users
+        cannot click on the trigger without causing side effects, but keyboard
+        users are still able to navigate into and trigger the profile card.
+  
+      Look at the "Team Profilecard Trigger" or "Trigger Link Types" examples to
+      see how they behave, or ask in #team-twp-people-teams on Slack for our
+      recommendations.
+     */
+    trigger?: 'hover' | 'click' | 'hover-click';
+    /**
+      We generally prefer to wrap the trigger in a link to the team profile
+      page. This prop determines how that link behaves.
+  
+      - Link is generally the recommended prop (especially in combination with
+        click or hover-click for the trigger prop above). It wraps the trigger in
+        an anchor tag with the team profile link (that users can interact with
+        via middle-click, etc.), but left clicking on the link is suppressed.
+  
+      - None does not wrap the trigger in a link at all. This makes it difficult
+        for keyboard or screen reader users to know how to trigger the profile
+        card. Generally avoid this.
+  
+      - Clickable-link wraps the trigger in a link with no special behaviour.
+        This is suitable for places where you want the trigger to serve primarily
+        as a link, and optionally allow hovering to preview the team first.
+  
+      Look at the example on "Trigger Link Types" for more in-depth analysis, or
+      ask in #team-twp-people-teams on Slack for our recommendations.
+     */
+    triggerLinkType?: 'none' | 'link' | 'clickable-link';
+    /**
+      This is the component that will cause a team profile card to appear when
+      interacted with according to the method specified by the trigger prop.
+     */
+    children?: React.ReactNode;
+    /**
+     * Used by the card to show Flags.
+     */
+    addFlag?: (flag: any) => void;
+    /**
+     * Optional cloudId. Pass this if rendering card within a sited context.
+     */
+    cloudId?: string;
+}
+export declare type StatusType = 'active' | 'inactive' | 'closed';
+export declare type TriggerType = 'hover' | 'click';
+export declare type StatusModifiedDateType = 'noDate' | 'thisWeek' | 'thisMonth' | 'lastMonth' | 'aFewMonths' | 'severalMonths' | 'moreThanAYear';
+export interface ProfileCardAction {
+    callback?: (...args: any[]) => any;
+    shouldRender?: (data: any) => boolean;
+    id?: string;
+    label: React.ReactNode;
+    link?: string;
+}
+export declare type LozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'new' | 'moved';
+export interface LozengeProps {
+    text: React.ReactNode;
+    appearance?: LozengeColor;
+    isBold?: boolean;
+}
+export interface ProfilecardProps {
+    isLoading?: boolean;
+    hasError?: boolean;
+    errorType?: ProfileCardErrorType;
+    status?: StatusType;
+    isBot?: boolean;
+    avatarUrl?: string;
+    fullName?: string;
+    meta?: string;
+    userId?: string;
+    isCurrentUser?: boolean;
+    nickname?: string;
+    email?: string;
+    location?: string;
+    companyName?: string;
+    timestring?: string;
+    actions?: ProfileCardAction[];
+    clientFetchProfile?: () => void;
+    statusModifiedDate?: number | null;
+    withoutElevation?: boolean;
+    /** Show manager and direct reports section on profile hover card, if available */
+    reportingLines?: TeamCentralReportingLinesData;
+    /** Base URL to populate href value for manager's and direct reports' user avatar  */
+    reportingLinesProfileUrl?: string;
+    /** Click handler when user clicks on manager's and direct reports' user avatar, un-clickable otherwise */
+    onReportingLinesClick?: (user: ReportingLinesUser) => void;
+    isKudosEnabled?: boolean;
+    teamCentralBaseUrl?: string;
+    addFlag?: (flag: any) => void;
+    cloudId?: string;
+    disabledAccountMessage?: React.ReactNode;
+    hasDisabledAccountLozenge?: boolean;
+    customLozenges?: LozengeProps[];
+    openKudosDrawer?: () => void;
+}
+export declare type AnalyticsFromDuration = (duration: number) => AnalyticsEventPayload;
+export declare type AnalyticsFunction = (generator: AnalyticsFromDuration) => void;
+export interface AnalyticsProps {
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+}
+export interface AnalyticsWithDurationProps {
+    fireAnalyticsWithDuration: AnalyticsFunction;
+}
+export interface TeamProfilecardProps extends TeamProfilecardCoreProps {
+    /** Indicates whether the team's details are still loading. */
+    isLoading?: boolean;
+    /** Indicates whether an error occurred whilst fetching team details. */
+    hasError?: boolean;
+    /** Describes the type of error that occurred, if any. */
+    errorType?: ProfileCardErrorType;
+    /** The details of the team to be shown. */
+    team?: Team;
+    /** A callback that will try to re-fetch data in case an error occurred. */
+    clientFetchProfile?: () => void;
+    /** Details relevant to passing around analytics. */
+    analytics: AnalyticsFunction;
+}
+export interface MessageIntlProviderProps {
+    children: React.ReactNode;
+    intl: IntlShape;
+}
+export declare type RelativeDateKeyType = 'ThisWeek' | 'ThisMonth' | 'LastMonth' | 'AFewMonths' | 'SeveralMonths' | 'MoreThanAYear' | null;
+export interface ProfileClient {
+    flushCache: () => void;
+    getProfile: (cloudId: string, userId: string, analytics?: (event: AnalyticsEventPayload) => void) => Promise<ProfileCardClientData>;
+    getTeamProfile: (teamId: string, orgId?: string, fireAnalytics?: (event: AnalyticsEventPayload) => void) => Promise<Team>;
+    getReportingLines: (userId: string) => Promise<TeamCentralReportingLinesData>;
+    shouldShowGiveKudos: () => Promise<boolean>;
+    getTeamCentralBaseUrl: () => string | undefined;
+}
+export declare type ProfilecardTriggerPosition = 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'top-end' | 'top' | 'top-start' | 'right-end' | 'right' | 'right-start';
+export declare type ProfileCardErrorType = {
+    reason: 'default' | 'NotFound';
+} | null;
+export interface ProfileClientOptions {
+    url: string;
+    gatewayGraphqlUrl?: string;
+    cacheSize?: number;
+    cacheMaxAge?: number;
+    /** Enables Team Central functionality if enabled e.g. /gateway/api/watermelon/graphql*/
+    teamCentralUrl?: string;
+    /** URL to the Team Central app e.g. team.atlassian.com */
+    teamCentralBaseUrl?: string;
+    /** Name of integrating product e.g. jira, atlas, confluence **/
+    productIdentifier?: string;
+    cloudId?: string;
+}
+export interface ClientOverrides {
+    userClient?: UserProfileCardClient;
+    teamClient?: TeamProfileCardClient;
+    teamCentralClient?: TeamCentralCardClient;
+}

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

@@ -0,0 +1,58 @@
+import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
+declare type GenericAttributes = Record<string, string | number | boolean | undefined>;
+interface AnalyticsEvent {
+    action?: string;
+    actionSubject?: string;
+    actionSubjectId?: string;
+    attributes?: GenericAttributes;
+    name?: string;
+    source?: string;
+}
+export declare const fireEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent | undefined, body: AnalyticsEvent) => void;
+export declare const cardTriggered: (type: 'user' | 'team', method: 'hover' | 'click') => AnalyticsEventPayload;
+export declare const teamRequestAnalytics: (action: 'triggered' | 'succeeded' | 'failed', attributes?: ({
+    duration: number;
+} & GenericAttributes) | undefined) => AnalyticsEventPayload;
+export declare const userRequestAnalytics: (action: 'triggered' | 'succeeded' | 'failed', attributes?: ({
+    duration: number;
+} & GenericAttributes) | undefined) => AnalyticsEventPayload;
+export declare const profileCardRendered: (type: 'user' | 'team', actionSubjectId: 'spinner' | 'content' | 'error' | 'errorBoundary', attributes?: {
+    duration?: number | undefined;
+    errorType?: "default" | "NotFound" | undefined;
+    hasRetry?: boolean | undefined;
+    numActions?: number | undefined;
+    memberCount?: number | undefined;
+    includingYou?: boolean | undefined;
+    descriptionLength?: number | undefined;
+    titleLength?: number | undefined;
+} | undefined) => AnalyticsEventPayload;
+export declare const actionClicked: (type: 'user' | 'team', attributes: {
+    duration: number;
+    hasHref: boolean;
+    hasOnClick: boolean;
+    index: number;
+    actionId: string;
+}) => AnalyticsEventPayload;
+export declare const reportingLinesClicked: (attributes: {
+    userType: 'manager' | 'direct-report';
+    duration: number;
+}) => AnalyticsEventPayload;
+export declare const moreActionsClicked: (type: 'user' | 'team', attributes: {
+    duration: number;
+    numActions: number;
+}) => AnalyticsEventPayload;
+export declare const teamAvatarClicked: (attributes: {
+    duration: number;
+    hasHref: boolean;
+    hasOnClick: boolean;
+    index: number;
+}) => AnalyticsEventPayload;
+export declare const moreMembersClicked: (attributes: {
+    duration: number;
+    memberCount: number;
+}) => AnalyticsEventPayload;
+export declare const errorRetryClicked: (attributes: {
+    duration: number;
+}) => AnalyticsEventPayload;
+export {};

package/dist/types-ts4.0/util/click.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type Event = React.MouseEvent | React.KeyboardEvent;
+export declare const isBasicClick: (event: Event) => boolean;
+export {};

package/dist/types-ts4.0/util/config.d.ts

@@ -0,0 +1,2 @@
+export declare const DELAY_MS_SHOW = 800;
+export declare const DELAY_MS_HIDE = 200;

package/dist/types-ts4.0/util/performance.d.ts

@@ -0,0 +1 @@
+export declare const getPageTime: () => number;

package/dist/types-ts4.0/util/withOuterListeners.d.ts

@@ -0,0 +1,6 @@
+import React, { ComponentType } from 'react';
+export interface WithOuterListenersProps {
+    handleClickOutside?: () => void;
+    handleEscapeKeydown?: () => void;
+}
+export default function withOuterListeners<P>(Component: ComponentType<P>): React.ComponentClass<P & WithOuterListenersProps>;

package/messages/package.json

@@ -3,5 +3,12 @@
   "main": "../dist/cjs/messages.js",
   "module": "../dist/esm/messages.js",
   "module:es2019": "../dist/es2019/messages.js",
-  "types": "../dist/types/messages.d.ts"
+  "types": "../dist/types/messages.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/messages.d.ts"
+      ]
+    }
+  }
 }

package/mocks/package.json

@@ -3,5 +3,12 @@
   "main": "../dist/cjs/mocks/index.js",
   "module": "../dist/esm/mocks/index.js",
   "module:es2019": "../dist/es2019/mocks/index.js",
-  "types": "../dist/types/mocks/index.d.ts"
+  "types": "../dist/types/mocks/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/mocks/index.d.ts"
+      ]
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "17.2.0",
+  "version": "17.2.1",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,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/*"
+      ]
+    }
+  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "People and Teams Collective",
@@ -77,7 +84,7 @@
     "loader-utils": "^1.1.0",
     "react-router-dom": "^4.2.2",
     "sinon": "^2.2.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "uid": "^0.0.2"
   },
   "keywords": [

package/team/package.json

@@ -3,5 +3,12 @@
   "main": "../dist/cjs/components/Team/index.js",
   "module": "../dist/esm/components/Team/index.js",
   "module:es2019": "../dist/es2019/components/Team/index.js",
-  "types": "../dist/types/components/Team/index.d.ts"
+  "types": "../dist/types/components/Team/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/components/Team/index.d.ts"
+      ]
+    }
+  }
 }

package/types/package.json

@@ -3,5 +3,12 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }