@atlaskit/media-ui 16.5.0 → 17.2.0

package/dist/types/customMediaPlayer/analytics/index.d.ts

@@ -0,0 +1,11 @@
+export { createCustomMediaPlayerScreenEvent } from './events/screen/customMediaPlayer';
+export { createMediaButtonClickedEvent } from './events/ui/mediaButtonClicked';
+export { createPlaybackSpeedChangedEvent } from './events/ui/playbackSpeedChanged';
+export { createPlayPauseBlanketClickedEvent } from './events/ui/playPauseBlanketClicked';
+export { createMediaShortcutPressedEvent } from './events/ui/shortcutPressed';
+export { createTimeRangeNavigatedEvent } from './events/ui/timeRangeNavigated';
+export { createFirstPlayedTrackEvent } from './events/track/playCount';
+export { createPlayedTrackEvent } from './events/track/played';
+export type { CustomMediaPlayerUIEvent, CustomMediaPlayerUIEventPayload, CustomMediaPlayerAnalyticsEventPayload, } from './utils/analytics';
+export { createAndFireMediaCustomMediaPlayerEvent, fireAnalyticsEvent, relevantFeatureFlagNames, } from './utils/analytics';
+export type { PlaybackAttributes, PlaybackState, WithPlaybackProps, WithMediaPlayerState, } from './utils/playbackAttributes';

package/dist/types/customMediaPlayer/analytics/utils/analytics.d.ts

@@ -0,0 +1,19 @@
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { MediaFeatureFlags, UIAttributes, UIEventPayload } from '@atlaskit/media-common';
+import { CustomMediaPlayerScreenEventPayload } from '../events/screen/customMediaPlayer';
+import { MediaButtonClickEventPayload } from '../events/ui/mediaButtonClicked';
+import { PlaybackSpeedChangeEventPayload } from '../events/ui/playbackSpeedChanged';
+import { PlayPauseBlanketClickEventPayload } from '../events/ui/playPauseBlanketClicked';
+import { ShortcutPressEventPayload } from '../events/ui/shortcutPressed';
+import { TimeRangeNavigateEventPayload } from '../events/ui/timeRangeNavigated';
+import { FirstPlayedTrackEventPayload } from '../events/track/playCount';
+import { PlayedTrackEventPayload } from '../events/track/played';
+import { CustomMediaPlayerType } from '../../types';
+export declare type CustomMediaPlayerUIEventPayload = UIEventPayload<UIAttributes & {
+    type: CustomMediaPlayerType;
+}, 'default', 'customMediaPlayer'>;
+export declare type CustomMediaPlayerUIEvent = 'mediaButtonClick' | 'shortcutPress' | 'playPauseBlanketClick' | 'timeRangeNavigate' | 'volumeRangeNavigate' | 'playbackSpeedChange';
+export declare type CustomMediaPlayerAnalyticsEventPayload = CustomMediaPlayerScreenEventPayload | MediaButtonClickEventPayload | PlaybackSpeedChangeEventPayload | PlayPauseBlanketClickEventPayload | ShortcutPressEventPayload | TimeRangeNavigateEventPayload | CustomMediaPlayerUIEventPayload | FirstPlayedTrackEventPayload | PlayedTrackEventPayload;
+export declare const relevantFeatureFlagNames: Array<keyof MediaFeatureFlags>;
+export declare function fireAnalyticsEvent(payload: CustomMediaPlayerAnalyticsEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
+export declare const createAndFireMediaCustomMediaPlayerEvent: (payload: CustomMediaPlayerAnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

package/dist/types/customMediaPlayer/analytics/utils/playbackAttributes.d.ts

@@ -0,0 +1,24 @@
+import { VideoState, VideoStatus } from 'react-video-renderer';
+export declare type WithPlaybackProps = {
+    readonly isAutoPlay: boolean;
+    readonly isHDAvailable?: boolean;
+    readonly isHDActive?: boolean;
+};
+export declare type WithMediaPlayerState = {
+    isLargePlayer: boolean;
+    isFullScreenEnabled: boolean;
+    playbackSpeed: number;
+};
+export declare type PlaybackState = WithPlaybackProps & WithMediaPlayerState & Partial<VideoState>;
+export declare type PlaybackAttributes = WithPlaybackProps & WithMediaPlayerState & {
+    durationInSec?: number;
+    absoluteTimeInSec?: number;
+    relativeTime?: number;
+    status?: VideoStatus;
+    volume?: number;
+    isMuted?: boolean;
+};
+export declare type WithPlaybackAttributes = {
+    playbackAttributes: Partial<PlaybackAttributes>;
+};
+export declare function createPlaybackAttributes(playbackState: PlaybackState): Partial<PlaybackAttributes>;

package/dist/types/customMediaPlayer/icons.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphProps } from '@atlaskit/icon/types';
+export declare function SkipTenBackwardIcon(props: GlyphProps): JSX.Element;
+export declare function SkipTenForwardIcon(props: GlyphProps): JSX.Element;

package/dist/types/customMediaPlayer/index.d.ts

@@ -1,17 +1,18 @@
 import React from 'react';
 import { Component } from 'react';
-import { SetVolumeFunction, NavigateFunction, VideoState, VideoActions } from 'react-video-renderer';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { NumericalCardDimensions } from '@atlaskit/media-common';
+import { CustomMediaPlayerType } from './types';
+import { WithPlaybackProps, WithMediaPlayerState } from './analytics';
 import { InjectedIntlProps } from 'react-intl';
 import { WithShowControlMethodProp } from '../types';
 import { TimeSaverConfig } from './timeSaver';
-export interface CustomMediaPlayerProps extends WithShowControlMethodProp {
-    readonly type: 'audio' | 'video';
+export interface CustomMediaPlayerProps extends WithPlaybackProps, WithShowControlMethodProp {
+    readonly type: CustomMediaPlayerType;
     readonly src: string;
-    readonly isHDActive?: boolean;
+    readonly fileId?: string;
     readonly onHDToggleClick?: () => void;
-    readonly isHDAvailable?: boolean;
-    readonly isAutoPlay: boolean;
     readonly isShortcutEnabled?: boolean;
     readonly lastWatchTimeConfig?: TimeSaverConfig;
     readonly onCanPlay?: () => void;
@@ -19,43 +20,56 @@ export interface CustomMediaPlayerProps extends WithShowControlMethodProp {
     readonly onDownloadClick?: () => void;
     readonly onFirstPlay?: () => void;
     readonly originalDimensions?: NumericalCardDimensions;
+    readonly featureFlags?: MediaFeatureFlags;
 }
-export interface CustomMediaPlayerState {
-    isLargePlayer: boolean;
-    isFullScreenEnabled: boolean;
-    playbackSpeed: number;
+export interface CustomMediaPlayerState extends WithMediaPlayerState {
 }
-export declare type ToggleButtonAction = () => void;
-export declare class CustomMediaPlayer extends Component<CustomMediaPlayerProps & InjectedIntlProps, CustomMediaPlayerState> {
+export declare type Action = () => void;
+export declare class CustomMediaPlayerBase extends Component<CustomMediaPlayerProps & InjectedIntlProps & WithAnalyticsEventsProps, CustomMediaPlayerState> {
     videoWrapperRef?: HTMLElement;
     private actions?;
+    private videoState;
     private wasPlayedOnce;
+    private lastCurrentTime;
     private readonly timeSaver;
+    private clickToTogglePlayTimoutId;
     state: CustomMediaPlayerState;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    onFullScreenChange: (e: Event) => void;
-    onTimeChange: (navigate: NavigateFunction) => (value: number) => void;
-    onVolumeChange: (setVolume: SetVolumeFunction) => (value: number) => void;
-    onCurrentTimeChange: (currentTime: number, duration: number) => void;
-    shortcutHandler: (toggleButtonAction: ToggleButtonAction) => () => void;
-    renderCurrentTime: ({ currentTime, duration }: VideoState) => JSX.Element;
-    renderHDButton: () => JSX.Element | undefined;
+    private onFullScreenChange;
+    private onTimeChanged;
+    private onVolumeChanged;
+    private onCurrentTimeChange;
+    private renderCurrentTime;
+    private renderHDButton;
     private onPlaybackSpeedChange;
     private renderSpeedControls;
-    renderVolume: ({ isMuted, volume }: VideoState, actions: VideoActions, showSlider: boolean) => JSX.Element;
-    onFullScreenClick: () => void;
-    onResize: (width: number) => void;
-    saveVideoWrapperRef: (el?: HTMLElement | undefined) => HTMLElement | undefined;
-    renderFullScreenButton: () => JSX.Element | undefined;
-    renderDownloadButton: () => JSX.Element | undefined;
-    renderSpinner: () => JSX.Element;
+    private renderVolume;
+    private toggleFullscreen;
+    private onFullScreenButtonClick;
+    private onResize;
+    private saveVideoWrapperRef;
+    private renderFullScreenButton;
+    private renderDownloadButton;
+    private renderShortcuts;
+    private renderPlayPauseButton;
+    private renderSkipBackwardButton;
+    private renderSkipForwardButton;
+    private renderSpinner;
     private setActions;
     pause: () => void;
     private play;
+    private getMediaButtonClickHandler;
+    private getKeyboardShortcutHandler;
+    private createAndFireUIEvent;
+    private onViewed;
+    private resetPendingPlayPauseToggleTimer;
+    private doubleClickToFullscreen;
+    private togglePlayByBlanketClick;
+    private startPlayByBlanketClick;
+    private pausePlayByBlanketClick;
+    private startPlayByButtonClick;
+    private pausePlayByButtonClick;
     render(): JSX.Element;
 }
-declare const _default: React.ComponentClass<CustomMediaPlayerProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<CustomMediaPlayerProps & InjectedIntlProps>;
-};
-export default _default;
+export declare const CustomMediaPlayer: React.ForwardRefExoticComponent<Pick<Pick<CustomMediaPlayerProps & WithAnalyticsEventsProps, "src" | "type" | "onError" | "onCanPlay" | "isAutoPlay" | "isHDAvailable" | "isHDActive" | "originalDimensions" | "fileId" | "onHDToggleClick" | "isShortcutEnabled" | "lastWatchTimeConfig" | "onDownloadClick" | "onFirstPlay" | "featureFlags" | "showControls"> & React.RefAttributes<any>, "src" | "type" | "onError" | "onCanPlay" | "key" | "isAutoPlay" | "isHDAvailable" | "isHDActive" | "originalDimensions" | "fileId" | "onHDToggleClick" | "isShortcutEnabled" | "lastWatchTimeConfig" | "onDownloadClick" | "onFirstPlay" | "featureFlags" | "showControls"> & React.RefAttributes<any>>;

package/dist/types/customMediaPlayer/playbackSpeedControls.d.ts

@@ -6,6 +6,7 @@ export interface PlaybackSpeedControlsProps {
     playbackSpeed: number;
     onPlaybackSpeedChange: (playbackSpeed: number) => void;
     originalDimensions?: NumericalCardDimensions;
+    onClick?: () => void;
 }
 export interface PlaybackSpeedControlsState {
     popupHeight: number;

package/dist/types/customMediaPlayer/timeRange.d.ts

@@ -7,6 +7,7 @@ export interface TimeRangeProps {
     onChange: (newTime: number) => void;
     disableThumbTooltip: boolean;
     isAlwaysActive: boolean;
+    onChanged?: () => void;
 }
 export interface TimeRangeState {
     isDragging: boolean;

package/dist/types/customMediaPlayer/types.d.ts

@@ -0,0 +1,4 @@
+export declare type CustomMediaPlayerType = 'audio' | 'video';
+export declare type WithCustomMediaPlayerType = {
+    type: CustomMediaPlayerType;
+};

package/dist/types/index.d.ts

@@ -8,6 +8,8 @@ export { AuthorizeAction, BlockCardErroredView, BlockCardNotFoundView, BlockCard
 export type { BlockCardResolvedViewProps } from './BlockCard';
 export { InlineCardErroredView, InlineCardForbiddenView, InlineCardResolvedView, InlineCardResolvingView, InlineCardUnauthorizedView, } from './InlineCard';
 export type { InlineCardErroredViewProps, InlineCardForbiddenViewProps, InlineCardResolvedViewProps, InlineCardResolvingViewProps, InlineCardUnauthorizedViewProps, } from './InlineCard';
+export { MediaInlineCardErroredView, MediaInlineCardLoadedView, MediaInlineCardLoadingView, } from './MediaInlineCard';
+export type { MediaInlineCardErroredViewProps, MediaInlineCardLoadedViewProps, MediaInlineCardLoadingViewProps, } from './MediaInlineCard';
 export { CardLinkView } from './LinkView';
 export { Ellipsify } from './ellipsify';
 export type { EllipsifyProps } from './ellipsify';
@@ -25,7 +27,7 @@ export { ExifOrientation, getCssFromImageOrientation, getImageInfo, getMetaTagNu
 export type { FileInfo, ImageInfo, ImageMetaData, ImageMetaDataTags, } from './imageMetaData';
 export { dataURItoFile, fileToArrayBuffer, fileToDataURI, getFileInfo, getFileInfoFromSrc, loadImage, findParentByClassname, getMimeIcon, } from './util';
 export { MimeTypeIcon } from './mime-type-icon';
-export { default as CustomMediaPlayer } from './customMediaPlayer/index';
+export { CustomMediaPlayer } from './customMediaPlayer/index';
 export { TimeRange } from './customMediaPlayer/timeRange';
 export type { TimeRangeProps, TimeRangeState, } from './customMediaPlayer/timeRange';
 export { hideControlsClassName } from './classNames';

package/dist/types/locales.d.ts

@@ -0,0 +1,4 @@
+declare const locales: {
+    [key: string]: any;
+};
+export { locales };

package/dist/types/mediaImage/index.d.ts

@@ -9,6 +9,8 @@ export interface MediaImageProps {
     crossOrigin?: '' | 'anonymous' | 'use-credentials';
     onImageLoad?: (loadedImage: HTMLImageElement) => void;
     onImageError?: () => void;
+    loading?: 'auto' | 'lazy' | 'eager';
+    forceSyncDisplay?: boolean;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

package/dist/types/mediaImage/styled.d.ts

@@ -1,2 +1,5 @@
-/// <reference types="react" />
-export declare const ImageComponent: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, any, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
+import React from 'react';
+export declare const ImageComponent: React.FC<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
+    loading?: 'auto' | 'lazy' | 'eager';
+    imageRef?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null;
+}>;

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 export declare type RequestAccessMessageKey = 'request_access_description' | 'click_to_join_description' | 'request_access_pending_description' | 'click_to_join' | 'request_access' | 'request_access_pending' | 'forbidden_description' | 'request_denied_description';
-export declare type MessageKey = 'retry' | 'failed_to_load' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'upload_an_avatar' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'playbackSpeed' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'preview_rateLimited' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | RequestAccessMessageKey;
+export declare type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'upload_an_avatar' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | RequestAccessMessageKey;
 declare type Messages = {
     [K in MessageKey]: FormattedMessage.MessageDescriptor;
 };

package/dist/types/shortcut.d.ts

@@ -1,12 +1,22 @@
 import { Component } from 'react';
 export declare const keyCodes: {
-    space: number;
-    m: number;
+    space: string;
+    m: string;
+    rightArrow: string;
+    leftArrow: string;
 };
-export interface ShortcutProps {
+declare type WithKeyCode = {
+    /** @deprecated use code: string instead */
     keyCode: number;
+    code?: never;
+};
+declare type WithCode = {
+    code: string;
+    keyCode?: never;
+};
+export declare type ShortcutProps = {
     handler: () => void;
-}
+} & (WithKeyCode | WithCode);
 export declare class Shortcut extends Component<ShortcutProps, {}> {
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -15,3 +25,4 @@ export declare class Shortcut extends Component<ShortcutProps, {}> {
     private init;
     private release;
 }
+export {};

package/locales/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/media-ui/locales",
+  "main": "../dist/cjs/locales.js",
+  "module": "../dist/esm/locales.js",
+  "module:es2019": "../dist/es2019/locales.js",
+  "types": "../dist/types/locales.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "16.5.0",
+  "version": "17.2.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,6 +28,7 @@
     "./errorIcon": "./src/errorIcon.tsx",
     "./types": "./src/types.ts",
     "./formatDate": "./src/formatDate.ts",
+    "./locales": "./src/locales.ts",
     ".": "./src/index.ts"
   },
   "atlassian": {
@@ -39,25 +40,23 @@
     }
   },
   "dependencies": {
-    "@atlaskit/avatar": "^20.4.0",
-    "@atlaskit/avatar-group": "^8.4.0",
+    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar-group": "^8.5.0",
     "@atlaskit/button": "^16.1.0",
-    "@atlaskit/code": "^14.1.0",
+    "@atlaskit/code": "^14.3.0",
     "@atlaskit/droplist": "^11.0.0",
-    "@atlaskit/field-base": "^15.0.0",
-    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/locale": "^2.3.0",
     "@atlaskit/lozenge": "^11.1.0",
-    "@atlaskit/media-common": "^2.8.0",
-    "@atlaskit/modal-dialog": "^11.7.0",
-    "@atlaskit/page": "^12.0.0",
-    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/media-common": "^2.10.0",
+    "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/select": "^15.2.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^11.4.0",
-    "@atlaskit/tooltip": "^17.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/width-detector": "^3.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -77,13 +76,17 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
+    "@atlaskit/analytics-listeners": "^8.1.2",
     "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/field-base": "^15.0.5",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^28.7.0",
+    "@atlaskit/media-test-helpers": "^28.9.0",
+    "@atlaskit/page": "^12.0.6",
     "@atlaskit/ssr": "*",
+    "@atlaskit/textfield": "^5.0.5",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/jest-dom": "^4.1.0",