@atlaskit/media-file-preview 0.4.2 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-file-preview
 
+## 0.5.1
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
+## 0.5.0
+
+### Minor Changes
+
+- [#73279](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73279) [`cdad00f21119`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cdad00f21119) - Create useMediaImage hook
+
 ## 0.4.2
 
 ### Patch Changes

package/dist/cjs/errors.js

@@ -19,7 +19,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
 var _mediaClientReact = require("@atlaskit/media-client-react");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * Primary reason is logged through Data Portal.
  * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event

package/dist/cjs/getPreview/objectURLCache.js

@@ -14,7 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _eventemitter = require("eventemitter2");
 var _lru_map = require("lru_map");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var PREVIEW_CACHE_LRU_SIZE = exports.PREVIEW_CACHE_LRU_SIZE = 50;
 var ExtendedLRUCache = /*#__PURE__*/function (_LRUMap) {
   (0, _inherits2.default)(ExtendedLRUCache, _LRUMap);

package/dist/cjs/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "useFilePreview", {
     return _useFilePreview.useFilePreview;
   }
 });
-var _useFilePreview = require("./useFilePreview");
+Object.defineProperty(exports, "useMediaImage", {
+  enumerable: true,
+  get: function get() {
+    return _useMediaImage.useMediaImage;
+  }
+});
+var _useFilePreview = require("./useFilePreview");
+var _useMediaImage = require("./useMediaImage");

package/dist/cjs/types.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/dist/cjs/useMediaImage.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMediaImage = void 0;
+var _react = require("react");
+var _useFilePreview2 = require("./useFilePreview");
+var useMediaImage = exports.useMediaImage = function useMediaImage(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    dimensions = _ref.dimensions,
+    ssr = _ref.ssr,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    traceContext = _ref.traceContext,
+    skipRemote = _ref.skipRemote,
+    allowAnimated = _ref.allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge,
+    onLoadCallback = _ref.onLoad,
+    onErrorCallback = _ref.onError;
+  var _useFilePreview = (0, _useFilePreview2.useFilePreview)({
+      identifier: identifier,
+      resizeMode: resizeMode,
+      dimensions: dimensions,
+      ssr: ssr,
+      mediaBlobUrlAttrs: mediaBlobUrlAttrs,
+      traceContext: traceContext,
+      skipRemote: skipRemote,
+      allowAnimated: allowAnimated,
+      upscale: upscale,
+      maxAge: maxAge
+    }),
+    preview = _useFilePreview.preview,
+    status = _useFilePreview.status,
+    error = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    onImageLoad = _useFilePreview.onImageLoad,
+    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
+  var onLoad = (0, _react.useCallback)(function () {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  var onError = (0, _react.useCallback)(function () {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  var getImgProps = (0, _react.useCallback)(function () {
+    return {
+      src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      onLoad: onLoad,
+      onError: onError,
+      'data-test-file-id': identifier.id,
+      'data-test-collection': identifier.collectionName,
+      'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+    };
+  }, [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status: status,
+    error: error,
+    getImgProps: getImgProps,
+    getSsrScriptProps: getSsrScriptProps
+  };
+};

package/dist/es2019/getPreview/cache.js

@@ -3,6 +3,7 @@ import { createObjectURLCache } from './objectURLCache';
 
 // Dimensions are used to create a key.
 // Cache is invalidated when different dimensions are provided.
+
 export const getCacheKey = (id, mode) => {
   const resizeMode = mode || 'crop';
   return [id, resizeMode].join('-');

package/dist/es2019/globalScope/globalScope.js

@@ -4,6 +4,7 @@ import { printFunctionCall, printScript } from './printScript';
 // Any changes to this file must be tested directly in product before merging.
 // The scripts printed here might differ from what we observe in our internal tests
 // due to minimification, for example.
+
 export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
 export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
 export function getMediaGlobalScope(globalScope = window) {

package/dist/es2019/index.js

@@ -1 +1,2 @@
-export { useFilePreview } from './useFilePreview';
+export { useFilePreview } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';

package/dist/es2019/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/useMediaImage.js

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useFilePreview } from './useFilePreview';
+export const useMediaImage = ({
+  identifier,
+  resizeMode,
+  dimensions,
+  ssr,
+  mediaBlobUrlAttrs,
+  traceContext,
+  skipRemote,
+  allowAnimated,
+  upscale,
+  maxAge,
+  onLoad: onLoadCallback,
+  onError: onErrorCallback
+}) => {
+  const {
+    preview,
+    status,
+    error,
+    onImageError,
+    onImageLoad,
+    getSsrScriptProps
+  } = useFilePreview({
+    identifier,
+    resizeMode,
+    dimensions,
+    ssr,
+    mediaBlobUrlAttrs,
+    traceContext,
+    skipRemote,
+    allowAnimated,
+    upscale,
+    maxAge
+  });
+  const onLoad = useCallback(() => {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  const onError = useCallback(() => {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  const getImgProps = useCallback(() => ({
+    src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+    onLoad,
+    onError,
+    'data-test-file-id': identifier.id,
+    'data-test-collection': identifier.collectionName,
+    'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+  }), [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status,
+    error,
+    getImgProps,
+    getSsrScriptProps
+  };
+};

package/dist/esm/errors.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { MediaFileStateError } from '@atlaskit/media-client-react';
 
 /**

package/dist/esm/getPreview/cache.js

@@ -5,6 +5,7 @@ import { createObjectURLCache } from './objectURLCache';
 
 // Dimensions are used to create a key.
 // Cache is invalidated when different dimensions are provided.
+
 export var getCacheKey = function getCacheKey(id, mode) {
   var resizeMode = mode || 'crop';
   return [id, resizeMode].join('-');

package/dist/esm/getPreview/objectURLCache.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { EventEmitter2 } from 'eventemitter2';
 import { LRUMap } from 'lru_map';
 export var PREVIEW_CACHE_LRU_SIZE = 50;

package/dist/esm/globalScope/globalScope.js

@@ -4,6 +4,7 @@ import { printFunctionCall, printScript } from './printScript';
 // Any changes to this file must be tested directly in product before merging.
 // The scripts printed here might differ from what we observe in our internal tests
 // due to minimification, for example.
+
 export var GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
 export var GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
 export function getMediaGlobalScope() {

package/dist/esm/index.js

@@ -1 +1,2 @@
-export { useFilePreview } from './useFilePreview';
+export { useFilePreview } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';

package/dist/esm/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/useMediaImage.js

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useFilePreview } from './useFilePreview';
+export var useMediaImage = function useMediaImage(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    dimensions = _ref.dimensions,
+    ssr = _ref.ssr,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    traceContext = _ref.traceContext,
+    skipRemote = _ref.skipRemote,
+    allowAnimated = _ref.allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge,
+    onLoadCallback = _ref.onLoad,
+    onErrorCallback = _ref.onError;
+  var _useFilePreview = useFilePreview({
+      identifier: identifier,
+      resizeMode: resizeMode,
+      dimensions: dimensions,
+      ssr: ssr,
+      mediaBlobUrlAttrs: mediaBlobUrlAttrs,
+      traceContext: traceContext,
+      skipRemote: skipRemote,
+      allowAnimated: allowAnimated,
+      upscale: upscale,
+      maxAge: maxAge
+    }),
+    preview = _useFilePreview.preview,
+    status = _useFilePreview.status,
+    error = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    onImageLoad = _useFilePreview.onImageLoad,
+    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
+  var onLoad = useCallback(function () {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  var onError = useCallback(function () {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  var getImgProps = useCallback(function () {
+    return {
+      src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      onLoad: onLoad,
+      onError: onError,
+      'data-test-file-id': identifier.id,
+      'data-test-collection': identifier.collectionName,
+      'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+    };
+  }, [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status: status,
+    error: error,
+    getImgProps: getImgProps,
+    getSsrScriptProps: getSsrScriptProps
+  };
+};

package/dist/types/index.d.ts

@@ -1,2 +1,5 @@
 export { useFilePreview } from './useFilePreview';
+export type { UseFilePreviewParams } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';
+export type { UseMediaImageParams } from './useMediaImage';
 export type { MediaFilePreview } from './types';

package/dist/types/useMediaImage.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { MediaFilePreviewDimensions } from './types';
+export interface UseMediaImageParams {
+    /** Instance of file identifier. */
+    readonly identifier: FileIdentifier;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' */
+    readonly resizeMode?: MediaStoreGetFileImageParams['mode'];
+    /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
+    readonly dimensions?: MediaFilePreviewDimensions;
+    /** Server-Side-Rendering modes are "server" and "client" */
+    readonly ssr?: SSR;
+    /** Attributes to attach to the created Blob Url */
+    readonly mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
+    /** Trace context to be passed to the backend requests */
+    readonly traceContext?: MediaTraceContext;
+    /** Do not fetch a remote preview. Helpful for lazy loading */
+    readonly skipRemote?: boolean;
+    /** Define whether an animated image is acceptable to return */
+    readonly allowAnimated?: boolean;
+    /** Define the upscale strategy for this image. */
+    readonly upscale?: boolean;
+    /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
+     */
+    readonly maxAge?: number;
+    /** On image load and on error callback from the parent. We are keeping the name same to streamline the customer experience when using these properties back to their image components */
+    readonly onLoad?: () => void;
+    readonly onError?: () => void;
+}
+export declare const useMediaImage: ({ identifier, resizeMode, dimensions, ssr, mediaBlobUrlAttrs, traceContext, skipRemote, allowAnimated, upscale, maxAge, onLoad: onLoadCallback, onError: onErrorCallback, }: UseMediaImageParams) => {
+    status: import("./types").MediaFilePreviewStatus;
+    error: import("./errors").MediaFilePreviewError | undefined;
+    getImgProps: () => {
+        src: string | undefined;
+        onLoad: () => void;
+        onError: () => void;
+        'data-test-file-id': string;
+        'data-test-collection': string | undefined;
+        'data-test-preview-source': import("./types").MediaFilePreviewSource | undefined;
+    };
+    getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
+};

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

@@ -1,2 +1,5 @@
 export { useFilePreview } from './useFilePreview';
+export type { UseFilePreviewParams } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';
+export type { UseMediaImageParams } from './useMediaImage';
 export type { MediaFilePreview } from './types';

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { MediaFilePreviewDimensions } from './types';
+export interface UseMediaImageParams {
+    /** Instance of file identifier. */
+    readonly identifier: FileIdentifier;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' */
+    readonly resizeMode?: MediaStoreGetFileImageParams['mode'];
+    /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
+    readonly dimensions?: MediaFilePreviewDimensions;
+    /** Server-Side-Rendering modes are "server" and "client" */
+    readonly ssr?: SSR;
+    /** Attributes to attach to the created Blob Url */
+    readonly mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
+    /** Trace context to be passed to the backend requests */
+    readonly traceContext?: MediaTraceContext;
+    /** Do not fetch a remote preview. Helpful for lazy loading */
+    readonly skipRemote?: boolean;
+    /** Define whether an animated image is acceptable to return */
+    readonly allowAnimated?: boolean;
+    /** Define the upscale strategy for this image. */
+    readonly upscale?: boolean;
+    /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
+     */
+    readonly maxAge?: number;
+    /** On image load and on error callback from the parent. We are keeping the name same to streamline the customer experience when using these properties back to their image components */
+    readonly onLoad?: () => void;
+    readonly onError?: () => void;
+}
+export declare const useMediaImage: ({ identifier, resizeMode, dimensions, ssr, mediaBlobUrlAttrs, traceContext, skipRemote, allowAnimated, upscale, maxAge, onLoad: onLoadCallback, onError: onErrorCallback, }: UseMediaImageParams) => {
+    status: import("./types").MediaFilePreviewStatus;
+    error: import("./errors").MediaFilePreviewError | undefined;
+    getImgProps: () => {
+        src: string | undefined;
+        onLoad: () => void;
+        onError: () => void;
+        'data-test-file-id': string;
+        'data-test-collection': string | undefined;
+        'data-test-preview-source': import("./types").MediaFilePreviewSource | undefined;
+    };
+    getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
+};

package/example-helpers/TerminalTextDisplay.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { ReactNode } from 'react';
+
+type TerminalTextDisplayProps = {
+  children: ReactNode;
+};
+
+export const TerminalTextDisplay: React.FC<TerminalTextDisplayProps> = ({
+  children,
+}): React.ReactElement | null => (
+  <div
+    style={{
+      backgroundColor: '#000000',
+      color: '#33FF00',
+      borderRadius: 5,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      padding: 20,
+      fontFamily: 'Courier New, monospace',
+      lineHeight: '1.4',
+      maxWidth: 600,
+      width: '100%',
+      fontSize: '1.1em',
+      whiteSpace: 'pre-wrap',
+      overflow: 'auto',
+    }}
+  >
+    {children}
+  </div>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-file-preview",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "A React Hook to fetch and render file previews. It's overloaded with fancy features like SSR, lazy loading, memory cache and local preview.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,10 +35,10 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/media-client": "^26.1.0",
+    "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.1",
-    "@atlaskit/media-common": "^11.0.0",
-    "@atlaskit/media-ui": "^25.1.0",
+    "@atlaskit/media-common": "^11.1.0",
+    "@atlaskit/media-ui": "^25.4.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
     "lru_map": "^0.4.1"
@@ -58,7 +58,7 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -97,4 +97,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}