@atlaskit/smart-card 26.1.0 → 26.1.2

package/dist/types-ts4.0/view/FlexibleCard/components/blocks/types.d.ts

@@ -0,0 +1,367 @@
+import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize, SmartLinkStatus } from '../../../../constants';
+import { SerializedStyles } from '@emotion/react';
+import { ActionProps } from '../actions/action/types';
+import { Ref } from 'react';
+export declare type BlockProps = {
+    /**
+     * The direction that the block should arrange it's elements. Can be vertical
+     * or horizontal. Default is horizontal.
+     * @internal
+     */
+    direction?: SmartLinkDirection;
+    /**
+     * Any additional CSS properties to apply to the block.
+     */
+    overrideCss?: SerializedStyles;
+    /**
+     * The size of the block and the size that the underlying elements should
+     * default to.
+     */
+    size?: SmartLinkSize;
+    /**
+     * The status of the Smart Link. Used to conditionally render different blocks
+     * when Smart Link is in different states.
+     * @internal
+     */
+    status?: SmartLinkStatus;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Ref to block wrapper div.
+     */
+    blockRef?: Ref<HTMLDivElement>;
+    /**
+     * Function to be called on render of block.
+     * @internal
+     */
+    onRender?: () => void;
+    /**
+     * Function to be called on transition end of block.
+     * @internal
+     */
+    onTransitionEnd?: () => void;
+};
+/**
+ * Used to represent a metadata element to be rendered.
+ */
+export declare type ElementItem = {
+    /**
+     * Any additional CSS properties to apply to the element.
+     */
+    overrideCss?: SerializedStyles;
+    /**
+     * The size of the element to display.
+     */
+    size?: SmartLinkSize;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+} & ElementItemProps;
+/**
+ * Used to represent an Action when passing props into Flexible UI.
+ */
+export declare type BaseActionItem = {
+    /**
+     * Determines whether the action should hide the text content of the button.
+     */
+    hideContent?: boolean;
+    /**
+     * Determines whether the action should hide the icon inside the button.
+     */
+    hideIcon?: boolean;
+    /**
+     * Determines the text and icon representation of the action, with exception
+     * to CustomAction.
+     */
+    name: ActionName;
+    /**
+     * Determines the onClick behaviour of the action.
+     */
+    onClick: () => any;
+    /**
+     * Additional CSS properties on the Action.
+     */
+    overrideCss?: SerializedStyles;
+    /**
+     * Determines the size of the Action. Corresponds to an Action appearance.
+     */
+    size?: SmartLinkSize;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+};
+/**
+ * Used to represent an Action which self-hydrates with data when passing props into Flexible UI.
+ */
+export declare type BaseDataActionItem = {
+    /**
+     * Determines whether the action should hide the text content of the button.
+     */
+    hideContent?: boolean;
+    /**
+     * Determines whether the action should hide the icon inside the button.
+     */
+    hideIcon?: boolean;
+    /**
+     * Determines the text and icon representation of the action, with exception
+     * to CustomAction.
+     */
+    name: ActionName;
+    /**
+     * Determines the onClick behaviour of the action. This is optional because
+     * the onClick functionality will be hydrated by the action by default.
+     */
+    onClick?: () => any;
+    /**
+     * Additional CSS properties on the Action.
+     */
+    overrideCss?: SerializedStyles;
+    /**
+     * Determines the size of the Action. Corresponds to an Action appearance.
+     */
+    size?: SmartLinkSize;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+};
+/**
+ * This represents an action that will render based on the data provided from the Smart Link.
+ * Icon and Content are also provided implicitly.
+ * @example PreviewAction - by default will contain a fullscreen icon with the 'Preview'
+ * content if content and icon are not provided. This also will add a button that
+ * renders a preview modal when clicked.
+ */
+export declare type NamedDataActionItem = BaseDataActionItem & {
+    name: ActionName.PreviewAction | ActionName.DownloadAction | ActionName.ViewAction;
+};
+/**
+ * This represents an action that does not fetch data where Icon and Content are provided implicitly.
+ * @example DeleteAction - by default will contain a cross icon with the
+ * 'delete' content if content and icon are not provided.
+ */
+export declare type NamedActionItem = BaseActionItem & {
+    name: ActionName.DeleteAction | ActionName.EditAction;
+};
+/**
+ * This represents an action where either Icon or label must be provided.
+ */
+export declare type CustomActionItem = BaseActionItem & {
+    name: ActionName.CustomAction;
+} & ((Required<Pick<ActionProps, 'icon' | 'iconPosition'>> & Pick<ActionProps, 'content'>) | ((Required<Pick<ActionProps, 'content'>> & Pick<ActionProps, 'icon' | 'iconPosition'>) & Pick<ActionProps, 'tooltipMessage'>));
+export declare type ActionItem = NamedActionItem | NamedDataActionItem | CustomActionItem;
+export declare type OnActionMenuOpenChangeOptions = {
+    isOpen: boolean;
+};
+/**
+ * A type that contains all the possible combinations of elements with their corresponding props.
+ */
+export declare type ElementItemProps = AttachmentCount | AuthorGroup | ChecklistProgress | CollaboratorGroup | CommentCount | CreatedBy | CreatedOn | DueOn | LatestCommit | LinkIcon | Location | ModifiedBy | ModifiedOn | OwnedBy | Preview | Priority | ProgrammingLanguage | Provider | ReactCount | Snippet | SourceBranch | State | SubscriberCount | TargetBranch | Title | ViewCount | VoteCount;
+/**
+ * Represents the props available for an AttachmentCount element.
+ * @see AttachmentCount
+ */
+export declare type AttachmentCount = {
+    name: ElementName.AttachmentCount;
+};
+/**
+ * Represents the props available for an AuthorGroup element.
+ * @see AuthorGroup
+ */
+export declare type AuthorGroup = {
+    name: ElementName.AuthorGroup;
+};
+/**
+ * Represents the props available for an ChecklistProgress element.
+ * @see ChecklistProgress
+ */
+export declare type ChecklistProgress = {
+    name: ElementName.ChecklistProgress;
+};
+/**
+ * Represents the props available for an CollaboratorGroup element.
+ * @see CollaboratorGroup
+ */
+export declare type CollaboratorGroup = {
+    name: ElementName.CollaboratorGroup;
+};
+/**
+ * Represents the props available for an CommentCount element.
+ * @see CommentCount
+ */
+export declare type CommentCount = {
+    name: ElementName.CommentCount;
+};
+/**
+ * Represents the props available for an CreatedBy element.
+ * @see CreatedBy
+ */
+export declare type CreatedBy = {
+    name: ElementName.CreatedBy;
+};
+/**
+ * Represents the props available for an OwnedBy element.
+ * @see OwnedBy
+ */
+export declare type OwnedBy = {
+    name: ElementName.OwnedBy;
+};
+/**
+ * Represents the props available for an CreatedOn element.
+ * @see CreatedOn
+ */
+export declare type CreatedOn = {
+    name: ElementName.CreatedOn;
+    /**
+     * A string which will be displayed before the specified element.
+     */
+    text?: string;
+};
+/**
+ * Represents the props available for an DueOn element.
+ * @see CreatedOn
+ */
+export declare type DueOn = {
+    name: ElementName.DueOn;
+};
+/**
+ * Represents the props available for an LastCommit element.
+ * @see BadgeProps
+ */
+export declare type LatestCommit = {
+    name: ElementName.LatestCommit;
+};
+/**
+ * Represents the props available for an LinkIcon element.
+ * @see LinkIcon
+ */
+export declare type LinkIcon = {
+    name: ElementName.LinkIcon;
+};
+/**
+ * Represents the props for the Location element.
+ */
+export declare type Location = {
+    name: ElementName.Location;
+};
+/**
+ * Represents the props available for an ModifiedBy element.
+ * @see ModifiedBy
+ */
+export declare type ModifiedBy = {
+    name: ElementName.ModifiedBy;
+};
+/**
+ * Represents the props available for an ModifiedOn element.
+ * @see ModifiedOn
+ */
+export declare type ModifiedOn = {
+    name: ElementName.ModifiedOn;
+    /**
+     * A string which will be displayed before the specified element.
+     */
+    text?: string;
+};
+/**
+ * Represents the props available for an Preview element.
+ * @see Preview
+ */
+export declare type Preview = {
+    name: ElementName.Preview;
+};
+/**
+ * Represents the props available for an Priority element.
+ * @see Priority
+ */
+export declare type Priority = {
+    name: ElementName.Priority;
+};
+/**
+ * Represents the props available for an ProgrammingLanguage element.
+ * @see ProgrammingLanguage
+ */
+export declare type ProgrammingLanguage = {
+    name: ElementName.ProgrammingLanguage;
+};
+/**
+ * Represents the props available for an Provider element.
+ * @see Provider
+ */
+export declare type Provider = {
+    name: ElementName.Provider;
+};
+/**
+ * Represents the props available for an ReactCount element.
+ * @see ReactCount
+ */
+export declare type ReactCount = {
+    name: ElementName.ReactCount;
+};
+/**
+ * Represents the props available for an Snippet element.
+ * @see Snippet
+ */
+export declare type Snippet = {
+    name: ElementName.Snippet;
+};
+/**
+ * Represents the props available for an SourceBranch element.
+ * @see SourceBranch
+ */
+export declare type SourceBranch = {
+    name: ElementName.SourceBranch;
+};
+/**
+ * Represents the props available for an State element.
+ * @see State
+ */
+export declare type State = {
+    name: ElementName.State;
+};
+/**
+ * Represents the props available for an SubscriberCount element.
+ * @see SubscriberCount
+ */
+export declare type SubscriberCount = {
+    name: ElementName.SubscriberCount;
+};
+/**
+ * Represents the props available for an TargetBranch element.
+ * @see TargetBranch
+ */
+export declare type TargetBranch = {
+    name: ElementName.TargetBranch;
+};
+/**
+ * Represents the props available for an Title element.
+ * @see Title
+ */
+export declare type Title = {
+    name: ElementName.Title;
+};
+/**
+ * Represents the props available for an ViewCount element.
+ * @see ViewCount
+ */
+export declare type ViewCount = {
+    name: ElementName.ViewCount;
+};
+/**
+ * Represents the props available for an VoteCount element.
+ * @see VoteCount
+ */
+export declare type VoteCount = {
+    name: ElementName.VoteCount;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/blocks/utils.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SerializedStyles } from '@emotion/react';
+import { ElementItem } from './types';
+import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
+export declare type ElementDisplaySchemaType = 'inline' | 'block';
+export declare const ElementDisplaySchema: Record<ElementName, ElementDisplaySchemaType[]>;
+export declare const getGapSize: (size: SmartLinkSize) => number;
+export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
+export declare const highlightRemoveStyles: SerializedStyles;
+export declare const isJSXElementNull: (children: JSX.Element) => boolean;
+export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
+export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;

package/dist/types-ts4.0/view/FlexibleCard/components/common/atlaskit-icon/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AtlaskitIconProps } from './types';
+declare const AtlaskitIcon: React.FC<AtlaskitIconProps>;
+export default AtlaskitIcon;

package/dist/types-ts4.0/view/FlexibleCard/components/common/atlaskit-icon/types.d.ts

@@ -0,0 +1,6 @@
+import { IconType } from '../../../../../constants';
+export declare type AtlaskitIconProps = {
+    icon: IconType;
+    label?: string;
+    testId?: string;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/common/image-icon/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { ImageIconProps } from './types';
+declare const ImageIcon: React.FC<ImageIconProps>;
+export default ImageIcon;

package/dist/types-ts4.0/view/FlexibleCard/components/common/image-icon/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type ImageIconProps = {
+    defaultIcon?: React.ReactNode;
+    testId?: string;
+    url: string;
+    onError?: () => void;
+    onLoad?: () => void;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/common/loading-skeleton/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { LoadingSkeletonProps } from './types';
+declare const LoadingSkeleton: React.FC<LoadingSkeletonProps>;
+export default LoadingSkeleton;

package/dist/types-ts4.0/view/FlexibleCard/components/common/loading-skeleton/types.d.ts

@@ -0,0 +1,16 @@
+export declare type LoadingSkeletonProps = {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered
+     * code, serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Width of the loading skeleton, defaults to width of the parent element
+     */
+    width?: number;
+    /**
+     * Height of loading skeleton, defaults to height of the parent element
+     */
+    height?: number;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/error-boundary/index.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType, FC } from 'react';
+import type { LozengeActionProps } from '../types';
+declare const withErrorBoundary: (Component: ComponentType<LozengeActionProps>) => FC<LozengeActionProps>;
+export default withErrorBoundary;

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { LozengeActionProps } from './types';
+declare const _default: FC<LozengeActionProps>;
+export default _default;

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { LozengeActionErrorProps } from './types';
+declare const LozengeActionError: FC<LozengeActionErrorProps>;
+export default LozengeActionError;

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const dropdownItemGroupStyles: import("@emotion/react").SerializedStyles;
+export declare const contentStyles: import("@emotion/react").SerializedStyles;
+export declare const linkStyles: import("@emotion/react").SerializedStyles;
+export declare const textStyles: (maxLines: number) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.d.ts

@@ -0,0 +1,35 @@
+import { MessageProps } from '../../../types';
+import { PreviewActionData } from '../../../../../../state/flexible-ui-context/types';
+export declare type LozengeActionErrorProps = {
+    /**
+     * Error message to be displayed inside the dropdown
+     */
+    errorMessage: string | MessageProps;
+    /**
+     * Data test id used for testing purposes
+     */
+    testId?: string;
+    /**
+     * Maximum number of lines displayed inside of the dropdown
+     */
+    maxLineNumber?: number;
+    /**
+     * The url of the link. Used in reload functionality
+     */
+    url?: string;
+    /**
+     * Preview Modal information. If present, will be used to render an embed modal on an error link click
+     */
+    previewData?: PreviewActionData | null;
+};
+export declare const LozengeActionErrorMessages: {
+    noData: {
+        descriptor: import("react-intl-next").MessageDescriptor;
+    };
+    unknown: {
+        descriptor: import("react-intl-next").MessageDescriptor;
+    };
+    updateFailed: {
+        descriptor: import("react-intl-next").MessageDescriptor;
+    };
+};

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { LozengeActionItemProps } from './types';
+declare const LozengeActionItem: FC<LozengeActionItemProps>;
+export default LozengeActionItem;

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/lozenge-action-item/types.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeAppearance } from '@atlaskit/lozenge';
+import type { LozengeItem } from '../types';
+export declare type LozengeActionItemProps = LozengeItem & {
+    onClick?: (id: string, text: string, appearance?: ThemeAppearance) => void;
+    testId?: string;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { LozengeActionTriggerProps } from './type';
+declare const LozengeActionTrigger: FC<LozengeActionTriggerProps>;
+export default LozengeActionTrigger;

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/type.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ThemeAppearance } from '@atlaskit/lozenge';
+import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
+export declare type LozengeActionTriggerProps = {
+    appearance?: ThemeAppearance;
+    testId?: string;
+    text: string | React.ReactNode;
+} & CustomTriggerProps<HTMLButtonElement>;

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/styled.d.ts

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

package/dist/types-ts4.0/view/FlexibleCard/components/common/lozenge-action/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ThemeAppearance } from '@atlaskit/lozenge';
+import type { InvokeActions } from '../../../../../state/hooks/use-invoke/types';
+export declare type LozengeItem = {
+    appearance?: ThemeAppearance;
+    id: string;
+    text: string;
+};
+export declare type LozengeActionProps = {
+    action: InvokeActions;
+    appearance?: ThemeAppearance;
+    testId?: string;
+    text: string | React.ReactNode;
+    zIndex?: number;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/container/index.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import React from 'react';
+import { SerializedStyles } from '@emotion/react';
+import { SmartLinkSize } from '../../../../constants';
+import { ChildrenOptions, ContainerProps } from './types';
+export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean, clickableContainer: boolean, childrenOptions: ChildrenOptions) => SerializedStyles;
+/**
+ * A container is a hidden component that build the Flexible Smart Link.
+ * All of the Flexible UI components are wrapped inside the container.
+ * It inherits the ui props from Card component and applies the custom styling
+ * accordingly.
+ * @internal
+ * @see Block
+ */
+declare const Container: React.FC<ContainerProps>;
+export default Container;

package/dist/types-ts4.0/view/FlexibleCard/components/container/layered-link/index.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import React from 'react';
+import { LayeredLinkProps } from './types';
+/**
+ * An anchor component to cover the entire container creating a clickable area.
+ * @internal
+ * @see `clickableContainer`
+ */
+declare const LayeredLink: React.FC<LayeredLinkProps>;
+export default LayeredLink;

package/dist/types-ts4.0/view/FlexibleCard/components/container/layered-link/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type LayeredLinkProps = {
+    /**
+     * Determines the onClick behaviour of the Link. By default used for analytics.
+     * @internal
+     */
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
+    target?: '_blank' | '_self' | '_top' | '_parent';
+    testId?: string;
+    text?: string;
+    url: string;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/container/types.d.ts

@@ -0,0 +1,23 @@
+import { SmartLinkStatus } from '../../../../constants';
+import { FlexibleCardProps, FlexibleUiOptions, RetryOptions } from '../../types';
+export declare type ContainerProps = Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'showServerActions'> & FlexibleUiOptions & {
+    /**
+     * The options that determine the retry behaviour when a Smart Link errors.
+     */
+    retry?: RetryOptions;
+    /**
+     * The status of the Smart Link. Used to conditionally render different blocks
+     * when Smart Link is in different states.
+     */
+    status?: SmartLinkStatus;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+};
+export declare type ChildrenOptions = {
+    previewOnLeft?: boolean;
+    previewOnRight?: boolean;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/elements/avatar-group/index.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import React from 'react';
+import { AvatarGroupProps } from './types';
+/**
+ * A base element that displays a group of avatars.
+ * @internal
+ * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @see AuthorGroup
+ * @see CollaboratorGroup
+ */
+declare const AvatarGroup: React.FC<AvatarGroupProps>;
+export default AvatarGroup;

package/dist/types-ts4.0/view/FlexibleCard/components/elements/avatar-group/types.d.ts

@@ -0,0 +1,21 @@
+import { ElementProps } from '../types';
+export declare type AvatarItemProps = {
+    /**
+     * The image to be used in an `@atlaskit/avatar - this should be a url to the image src
+     */
+    src?: string;
+    /**
+     * The name of the person in the avatar.
+     */
+    name: string;
+};
+export declare type AvatarGroupProps = ElementProps & {
+    /**
+     * An array of Avatars to show
+     */
+    items?: AvatarItemProps[];
+    /**
+     * The maximum number of Avatars to show in the AvatarGroup
+     */
+    maxCount?: number;
+};

package/dist/types-ts4.0/view/FlexibleCard/components/elements/badge/index.d.ts

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import React from 'react';
+import { BadgeProps } from './types';
+/**
+ * A base element that displays some text with an associated icon.
+ * @internal
+ * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @see CommentCount
+ * @see ViewCount
+ * @see ReactCount
+ * @see VoteCount
+ * @see SubscriberCount
+ * @see Priority
+ * @see ProgrammingLanguage
+ * @see Provider
+ */
+declare const Badge: React.FC<BadgeProps>;
+export default Badge;