@atlaskit/media-picker 66.1.5 → 66.2.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/media-picker
 
+## 66.2.1
+
+### Patch Changes
+
+- [`ede6ee7aaab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ede6ee7aaab) - Updated tests, examples and moving towards /test-helper export in packages to prevent circular dependancies
+- Updated dependencies
+
+## 66.2.0
+
+### Minor Changes
+
+- [`b06cd74349c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b06cd74349c) - # Media Picker
+
+  Make Clipboard secured by adding `container` and `onPaste()` to `config` `prop`. These two params address customer dissatisfaction when attachments are pasted duplicated, or to unwanted Jira issues (https://product-fabric.atlassian.net/browse/MEX-2454).
+
+  Note for migration:
+  The added `container` parameter sets a boundary for copy-paste zone. This is to filter out noise from existing practice that is problematic. **To ensure the effectiveness of this fix, please avoid using global `document` as `container` in best effort; please avoid overlapped boundary in best effort**.
+
+  When `container` is not added, the behaviour falls back to legacy mechanism.
+
+  # Media Common
+
+  Add feature toggle (`securedClipboard` in `MediaFeatureFlags`) to control the rollout of Secured Clipboard (https://product-fabric.atlassian.net/browse/MEX-2454).
+
+  # Editor Core
+
+  Add support of the Secured Clipboard (https://product-fabric.atlassian.net/browse/MEX-2454).
+
+  Use feature flag `securedClipboard` to protect such change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 66.1.5
 
 ### Patch Changes

package/dist/cjs/components/clipboard/clipboard.js

@@ -39,9 +39,36 @@ var defaultConfig = {
 };
 var COMPONENT_NAME = 'clipboard';
 var ClipboardImpl = /*#__PURE__*/function () {
-  function ClipboardImpl(uploadService, createAnalyticsEvent, featureFlags) {
+  function ClipboardImpl(uploadService, container, onPaste, createAnalyticsEvent, featureFlags) {
+    var _this = this;
     (0, _classCallCheck2.default)(this, ClipboardImpl);
+    (0, _defineProperty2.default)(this, "handleEvent", function (event) {
+      var _this$onPaste;
+      var clipboardData = event.clipboardData;
+      if ((_this$onPaste = _this.onPaste) !== null && _this$onPaste !== void 0 && _this$onPaste.call(_this, event)) {
+        return;
+      }
+
+      // From https://product-fabric.atlassian.net/browse/MEX-1281 ,disable the handler if event target is input
+      if (event.target instanceof HTMLInputElement) {
+        return;
+      }
+      if (clipboardData && clipboardData.files) {
+        var fileSource = clipboardData.types.length === 1 ? _types.LocalFileSource.PastedScreenshot : _types.LocalFileSource.PastedFile;
+        var filesArray = getFilesFromClipboard(clipboardData.files).map(function (file) {
+          return {
+            file: file,
+            source: fileSource
+          };
+        });
+        if (filesArray.length > 0) {
+          _this.onFilesPasted(filesArray);
+        }
+      }
+    });
     this.uploadService = uploadService;
+    this.container = container;
+    this.onPaste = onPaste;
     this.createAnalyticsEvent = createAnalyticsEvent;
     this.featureFlags = featureFlags;
   }
@@ -49,22 +76,30 @@ var ClipboardImpl = /*#__PURE__*/function () {
     key: "activate",
     value: function activate() {
       this.deactivate();
-      document.addEventListener('paste', ClipboardImpl.handleEvent);
-      ClipboardImpl.instances.push(this);
+      if (!this.container) {
+        document.addEventListener('paste', ClipboardImpl.legacyHandleEvent);
+        ClipboardImpl.instances.push(this);
+      } else {
+        this.container.addEventListener('paste', this.handleEvent);
+      }
     }
   }, {
     key: "deactivate",
     value: function deactivate() {
-      var index = ClipboardImpl.instances.indexOf(this);
-      if (index > -1) {
-        ClipboardImpl.instances.splice(index, 1);
+      if (!this.container) {
+        var index = ClipboardImpl.instances.indexOf(this);
+        if (index > -1) {
+          ClipboardImpl.instances.splice(index, 1);
+        } else {
+          /**
+           * We want to remove the handleEvent only when there are no more instances.
+           * Since handleEvent is static, if we remove it right away, and there is still an active instance,
+           * we will loose the clipboard functionality.
+           */
+          document.removeEventListener('paste', ClipboardImpl.legacyHandleEvent);
+        }
       } else {
-        /**
-         * We want to remove the handleEvent only when there are no more instances.
-         * Since handleEvent is static, if we remove it right away, and there is still an active instance,
-         * we will loose the clipboard functionality.
-         */
-        document.removeEventListener('paste', ClipboardImpl.handleEvent);
+        this.container.removeEventListener('paste', this.handleEvent);
       }
     }
   }, {
@@ -100,6 +135,10 @@ var ClipboardImpl = /*#__PURE__*/function () {
         analyticsEvent.fire(_mediaCommon.ANALYTICS_MEDIA_CHANNEL);
       }
     }
+
+    // The existing (semi)singleton (last in `instances`) event handler is proven to be problematic
+    // Replaced with the new mechanism in https://product-fabric.atlassian.net/browse/MEX-2454
+    // Remove after product adoption / rollout
   }], [{
     key: "latestInstance",
     get: function get() {
@@ -109,7 +148,7 @@ var ClipboardImpl = /*#__PURE__*/function () {
   return ClipboardImpl;
 }();
 (0, _defineProperty2.default)(ClipboardImpl, "instances", []);
-(0, _defineProperty2.default)(ClipboardImpl, "handleEvent", function (event) {
+(0, _defineProperty2.default)(ClipboardImpl, "legacyHandleEvent", function (event) {
   // From https://product-fabric.atlassian.net/browse/MEX-1281 ,disable the handler if event target is input
   if (event.target instanceof HTMLInputElement) {
     return;
@@ -144,11 +183,11 @@ var ClipboardBase = /*#__PURE__*/function (_LocalUploadComponent) {
   (0, _inherits2.default)(ClipboardBase, _LocalUploadComponent);
   var _super = _createSuper(ClipboardBase);
   function ClipboardBase(props) {
-    var _this;
+    var _this2;
     (0, _classCallCheck2.default)(this, ClipboardBase);
-    _this = _super.call(this, props, COMPONENT_NAME);
-    _this.clipboard = new ClipboardImpl(_this.uploadService, _this.props.createAnalyticsEvent, props.featureFlags);
-    return _this;
+    _this2 = _super.call(this, props, COMPONENT_NAME);
+    _this2.clipboard = new ClipboardImpl(_this2.uploadService, _this2.props.config.container, _this2.props.config.onPaste, _this2.props.createAnalyticsEvent, props.featureFlags);
+    return _this2;
   }
   (0, _createClass2.default)(ClipboardBase, [{
     key: "componentDidMount",

package/dist/cjs/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.js

@@ -12,8 +12,8 @@ var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-ci
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("./messages");
 var _reactIntlNext = require("react-intl-next");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultOptions = {
   style: 'unit',
   unitDisplay: 'short',

package/dist/cjs/util/analytics.js

@@ -9,7 +9,7 @@ var _mediaClient = require("@atlaskit/media-client");
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.1.5";
+var packageVersion = "66.2.1";
 function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/cjs/util/ufoExperiences.js

@@ -9,10 +9,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _ufo = require("@atlaskit/ufo");
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaClient = require("@atlaskit/media-client");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.1.5";
+var packageVersion = "66.2.1";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/es2019/components/clipboard/clipboard.js

@@ -24,8 +24,34 @@ const defaultConfig = {
 };
 const COMPONENT_NAME = 'clipboard';
 class ClipboardImpl {
-  constructor(uploadService, createAnalyticsEvent, featureFlags) {
+  constructor(uploadService, container, onPaste, createAnalyticsEvent, featureFlags) {
+    _defineProperty(this, "handleEvent", event => {
+      var _this$onPaste;
+      const {
+        clipboardData
+      } = event;
+      if ((_this$onPaste = this.onPaste) !== null && _this$onPaste !== void 0 && _this$onPaste.call(this, event)) {
+        return;
+      }
+
+      // From https://product-fabric.atlassian.net/browse/MEX-1281 ,disable the handler if event target is input
+      if (event.target instanceof HTMLInputElement) {
+        return;
+      }
+      if (clipboardData && clipboardData.files) {
+        const fileSource = clipboardData.types.length === 1 ? LocalFileSource.PastedScreenshot : LocalFileSource.PastedFile;
+        const filesArray = getFilesFromClipboard(clipboardData.files).map(file => ({
+          file,
+          source: fileSource
+        }));
+        if (filesArray.length > 0) {
+          this.onFilesPasted(filesArray);
+        }
+      }
+    });
     this.uploadService = uploadService;
+    this.container = container;
+    this.onPaste = onPaste;
     this.createAnalyticsEvent = createAnalyticsEvent;
     this.featureFlags = featureFlags;
   }
@@ -34,20 +60,28 @@ class ClipboardImpl {
   }
   activate() {
     this.deactivate();
-    document.addEventListener('paste', ClipboardImpl.handleEvent);
-    ClipboardImpl.instances.push(this);
+    if (!this.container) {
+      document.addEventListener('paste', ClipboardImpl.legacyHandleEvent);
+      ClipboardImpl.instances.push(this);
+    } else {
+      this.container.addEventListener('paste', this.handleEvent);
+    }
   }
   deactivate() {
-    const index = ClipboardImpl.instances.indexOf(this);
-    if (index > -1) {
-      ClipboardImpl.instances.splice(index, 1);
+    if (!this.container) {
+      const index = ClipboardImpl.instances.indexOf(this);
+      if (index > -1) {
+        ClipboardImpl.instances.splice(index, 1);
+      } else {
+        /**
+         * We want to remove the handleEvent only when there are no more instances.
+         * Since handleEvent is static, if we remove it right away, and there is still an active instance,
+         * we will loose the clipboard functionality.
+         */
+        document.removeEventListener('paste', ClipboardImpl.legacyHandleEvent);
+      }
     } else {
-      /**
-       * We want to remove the handleEvent only when there are no more instances.
-       * Since handleEvent is static, if we remove it right away, and there is still an active instance,
-       * we will loose the clipboard functionality.
-       */
-      document.removeEventListener('paste', ClipboardImpl.handleEvent);
+      this.container.removeEventListener('paste', this.handleEvent);
     }
   }
   onFilesPasted(files) {
@@ -79,9 +113,13 @@ class ClipboardImpl {
       analyticsEvent.fire(ANALYTICS_MEDIA_CHANNEL);
     }
   }
+
+  // The existing (semi)singleton (last in `instances`) event handler is proven to be problematic
+  // Replaced with the new mechanism in https://product-fabric.atlassian.net/browse/MEX-2454
+  // Remove after product adoption / rollout
 }
 _defineProperty(ClipboardImpl, "instances", []);
-_defineProperty(ClipboardImpl, "handleEvent", event => {
+_defineProperty(ClipboardImpl, "legacyHandleEvent", event => {
   // From https://product-fabric.atlassian.net/browse/MEX-1281 ,disable the handler if event target is input
   if (event.target instanceof HTMLInputElement) {
     return;
@@ -115,7 +153,7 @@ _defineProperty(ClipboardImpl, "handleEvent", event => {
 export class ClipboardBase extends LocalUploadComponentReact {
   constructor(props) {
     super(props, COMPONENT_NAME);
-    this.clipboard = new ClipboardImpl(this.uploadService, this.props.createAnalyticsEvent, props.featureFlags);
+    this.clipboard = new ClipboardImpl(this.uploadService, this.props.config.container, this.props.config.onPaste, this.props.createAnalyticsEvent, props.featureFlags);
   }
   componentDidMount() {
     this.clipboard.activate();

package/dist/es2019/util/analytics.js

@@ -3,7 +3,7 @@ import { isRequestError } from '@atlaskit/media-client';
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "66.1.5";
+const packageVersion = "66.2.1";
 export function getPackageAttributes(componentName) {
   return {
     packageName,

package/dist/es2019/util/ufoExperiences.js

@@ -2,7 +2,7 @@ import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } fro
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-picker";
-const packageVersion = "66.1.5";
+const packageVersion = "66.2.1";
 let ufoExperience;
 const initExperience = (id, componentName) => {
   if (!ufoExperience) {

package/dist/esm/components/clipboard/clipboard.js

@@ -31,9 +31,36 @@ var defaultConfig = {
 };
 var COMPONENT_NAME = 'clipboard';
 var ClipboardImpl = /*#__PURE__*/function () {
-  function ClipboardImpl(uploadService, createAnalyticsEvent, featureFlags) {
+  function ClipboardImpl(uploadService, container, onPaste, createAnalyticsEvent, featureFlags) {
+    var _this = this;
     _classCallCheck(this, ClipboardImpl);
+    _defineProperty(this, "handleEvent", function (event) {
+      var _this$onPaste;
+      var clipboardData = event.clipboardData;
+      if ((_this$onPaste = _this.onPaste) !== null && _this$onPaste !== void 0 && _this$onPaste.call(_this, event)) {
+        return;
+      }
+
+      // From https://product-fabric.atlassian.net/browse/MEX-1281 ,disable the handler if event target is input
+      if (event.target instanceof HTMLInputElement) {
+        return;
+      }
+      if (clipboardData && clipboardData.files) {
+        var fileSource = clipboardData.types.length === 1 ? LocalFileSource.PastedScreenshot : LocalFileSource.PastedFile;
+        var filesArray = getFilesFromClipboard(clipboardData.files).map(function (file) {
+          return {
+            file: file,
+            source: fileSource
+          };
+        });
+        if (filesArray.length > 0) {
+          _this.onFilesPasted(filesArray);
+        }
+      }
+    });
     this.uploadService = uploadService;
+    this.container = container;
+    this.onPaste = onPaste;
     this.createAnalyticsEvent = createAnalyticsEvent;
     this.featureFlags = featureFlags;
   }
@@ -41,22 +68,30 @@ var ClipboardImpl = /*#__PURE__*/function () {
     key: "activate",
     value: function activate() {
       this.deactivate();
-      document.addEventListener('paste', ClipboardImpl.handleEvent);
-      ClipboardImpl.instances.push(this);
+      if (!this.container) {
+        document.addEventListener('paste', ClipboardImpl.legacyHandleEvent);
+        ClipboardImpl.instances.push(this);
+      } else {
+        this.container.addEventListener('paste', this.handleEvent);
+      }
     }
   }, {
     key: "deactivate",
     value: function deactivate() {
-      var index = ClipboardImpl.instances.indexOf(this);
-      if (index > -1) {
-        ClipboardImpl.instances.splice(index, 1);
+      if (!this.container) {
+        var index = ClipboardImpl.instances.indexOf(this);
+        if (index > -1) {
+          ClipboardImpl.instances.splice(index, 1);
+        } else {
+          /**
+           * We want to remove the handleEvent only when there are no more instances.
+           * Since handleEvent is static, if we remove it right away, and there is still an active instance,
+           * we will loose the clipboard functionality.
+           */
+          document.removeEventListener('paste', ClipboardImpl.legacyHandleEvent);
+        }
       } else {
-        /**
-         * We want to remove the handleEvent only when there are no more instances.
-         * Since handleEvent is static, if we remove it right away, and there is still an active instance,
-         * we will loose the clipboard functionality.
-         */
-        document.removeEventListener('paste', ClipboardImpl.handleEvent);
+        this.container.removeEventListener('paste', this.handleEvent);
       }
     }
   }, {
@@ -92,6 +127,10 @@ var ClipboardImpl = /*#__PURE__*/function () {
         analyticsEvent.fire(ANALYTICS_MEDIA_CHANNEL);
       }
     }
+
+    // The existing (semi)singleton (last in `instances`) event handler is proven to be problematic
+    // Replaced with the new mechanism in https://product-fabric.atlassian.net/browse/MEX-2454
+    // Remove after product adoption / rollout
   }], [{
     key: "latestInstance",
     get: function get() {
@@ -101,7 +140,7 @@ var ClipboardImpl = /*#__PURE__*/function () {
   return ClipboardImpl;
 }();
 _defineProperty(ClipboardImpl, "instances", []);
-_defineProperty(ClipboardImpl, "handleEvent", function (event) {
+_defineProperty(ClipboardImpl, "legacyHandleEvent", function (event) {
   // From https://product-fabric.atlassian.net/browse/MEX-1281 ,disable the handler if event target is input
   if (event.target instanceof HTMLInputElement) {
     return;
@@ -136,11 +175,11 @@ export var ClipboardBase = /*#__PURE__*/function (_LocalUploadComponent) {
   _inherits(ClipboardBase, _LocalUploadComponent);
   var _super = _createSuper(ClipboardBase);
   function ClipboardBase(props) {
-    var _this;
+    var _this2;
     _classCallCheck(this, ClipboardBase);
-    _this = _super.call(this, props, COMPONENT_NAME);
-    _this.clipboard = new ClipboardImpl(_this.uploadService, _this.props.createAnalyticsEvent, props.featureFlags);
-    return _this;
+    _this2 = _super.call(this, props, COMPONENT_NAME);
+    _this2.clipboard = new ClipboardImpl(_this2.uploadService, _this2.props.config.container, _this2.props.config.onPaste, _this2.props.createAnalyticsEvent, props.featureFlags);
+    return _this2;
   }
   _createClass(ClipboardBase, [{
     key: "componentDidMount",

package/dist/esm/components/uploadRejectionFlagGroup/UploadRejectionFlagGroup.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
 import FailIcon from '@atlaskit/icon/glyph/cross-circle';

package/dist/esm/util/analytics.js

@@ -3,7 +3,7 @@ import { isRequestError } from '@atlaskit/media-client';
 // Component name will be prefixed with "media-picker-" in logs. Check ufoExperiences in utils files
 
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.1.5";
+var packageVersion = "66.2.1";
 export function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/esm/util/ufoExperiences.js

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.1.5";
+var packageVersion = "66.2.1";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/types/components/clipboard/clipboard.d.ts

@@ -13,16 +13,19 @@ export type ClipboardProps = LocalUploadComponentBaseProps & {
 };
 declare class ClipboardImpl {
     private readonly uploadService;
+    private container?;
+    private onPaste?;
     private readonly createAnalyticsEvent?;
     featureFlags?: MediaFeatureFlags | undefined;
     static instances: ClipboardImpl[];
-    constructor(uploadService: UploadService, createAnalyticsEvent?: CreateUIAnalyticsEvent | undefined, featureFlags?: MediaFeatureFlags | undefined);
+    constructor(uploadService: UploadService, container?: HTMLElement | undefined, onPaste?: ((event: ClipboardEvent) => boolean | undefined) | undefined, createAnalyticsEvent?: CreateUIAnalyticsEvent | undefined, featureFlags?: MediaFeatureFlags | undefined);
     static get latestInstance(): ClipboardImpl | undefined;
     activate(): void;
     deactivate(): void;
     onFilesPasted(files: LocalFileWithSource[]): void;
     private fireAnalyticsEvent;
-    static handleEvent: (event: ClipboardEvent) => void;
+    static legacyHandleEvent: (event: ClipboardEvent) => void;
+    private handleEvent;
 }
 export declare class ClipboardBase extends LocalUploadComponentReact<ClipboardProps> {
     clipboard: ClipboardImpl;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { isImagePreview } from './domain/preview';
-export type { BrowserConfig, DropzoneConfig, UploadParams, UploadsStartEventPayload, UploadPreviewUpdateEventPayload, UploadEndEventPayload, UploadErrorEventPayload, UploadRejectionData, MediaFile, Preview, NonImagePreview, ImagePreview, MediaError, MediaErrorName, } from './types';
+export type { BrowserConfig, DropzoneConfig, ClipboardConfig, UploadParams, UploadsStartEventPayload, UploadPreviewUpdateEventPayload, UploadEndEventPayload, UploadErrorEventPayload, UploadRejectionData, MediaFile, Preview, NonImagePreview, ImagePreview, MediaError, MediaErrorName, } from './types';
 export type { LocalUploadConfig } from './components/types';
 export { DropzoneLoader as Dropzone } from './components/dropzone';
 export { ClipboardLoader as Clipboard } from './components/clipboard';

package/dist/types/types.d.ts

@@ -63,6 +63,8 @@ export interface BrowserConfig extends LocalUploadConfig {
     readonly replaceFileId?: string;
 }
 export interface ClipboardConfig extends LocalUploadConfig {
+    container?: HTMLElement;
+    onPaste?: (event: ClipboardEvent) => boolean | undefined;
 }
 export interface DropzoneConfig extends LocalUploadConfig {
     container?: HTMLElement;

package/dist/types-ts4.5/components/clipboard/clipboard.d.ts

@@ -13,16 +13,19 @@ export type ClipboardProps = LocalUploadComponentBaseProps & {
 };
 declare class ClipboardImpl {
     private readonly uploadService;
+    private container?;
+    private onPaste?;
     private readonly createAnalyticsEvent?;
     featureFlags?: MediaFeatureFlags | undefined;
     static instances: ClipboardImpl[];
-    constructor(uploadService: UploadService, createAnalyticsEvent?: CreateUIAnalyticsEvent | undefined, featureFlags?: MediaFeatureFlags | undefined);
+    constructor(uploadService: UploadService, container?: HTMLElement | undefined, onPaste?: ((event: ClipboardEvent) => boolean | undefined) | undefined, createAnalyticsEvent?: CreateUIAnalyticsEvent | undefined, featureFlags?: MediaFeatureFlags | undefined);
     static get latestInstance(): ClipboardImpl | undefined;
     activate(): void;
     deactivate(): void;
     onFilesPasted(files: LocalFileWithSource[]): void;
     private fireAnalyticsEvent;
-    static handleEvent: (event: ClipboardEvent) => void;
+    static legacyHandleEvent: (event: ClipboardEvent) => void;
+    private handleEvent;
 }
 export declare class ClipboardBase extends LocalUploadComponentReact<ClipboardProps> {
     clipboard: ClipboardImpl;

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

@@ -1,5 +1,5 @@
 export { isImagePreview } from './domain/preview';
-export type { BrowserConfig, DropzoneConfig, UploadParams, UploadsStartEventPayload, UploadPreviewUpdateEventPayload, UploadEndEventPayload, UploadErrorEventPayload, UploadRejectionData, MediaFile, Preview, NonImagePreview, ImagePreview, MediaError, MediaErrorName, } from './types';
+export type { BrowserConfig, DropzoneConfig, ClipboardConfig, UploadParams, UploadsStartEventPayload, UploadPreviewUpdateEventPayload, UploadEndEventPayload, UploadErrorEventPayload, UploadRejectionData, MediaFile, Preview, NonImagePreview, ImagePreview, MediaError, MediaErrorName, } from './types';
 export type { LocalUploadConfig } from './components/types';
 export { DropzoneLoader as Dropzone } from './components/dropzone';
 export { ClipboardLoader as Clipboard } from './components/clipboard';

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

@@ -63,6 +63,8 @@ export interface BrowserConfig extends LocalUploadConfig {
     readonly replaceFileId?: string;
 }
 export interface ClipboardConfig extends LocalUploadConfig {
+    container?: HTMLElement;
+    onPaste?: (event: ClipboardEvent) => boolean | undefined;
 }
 export interface DropzoneConfig extends LocalUploadConfig {
     container?: HTMLElement;

package/example-helpers/NativeMediaViewer.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { useEffect, useState } from 'react';
+import {
+  MediaClient,
+  MediaFileArtifacts,
+  MediaType,
+} from '@atlaskit/media-client';
+
+type NativeMediaViewerProps = {
+  id: string;
+  mediaClient: MediaClient;
+};
+
+const getMimeTypeFromArtifact = (artifact: keyof MediaFileArtifacts) => {
+  switch (artifact) {
+    case 'image.png':
+      return 'image/png';
+    case 'document.pdf':
+      return 'application/pdf';
+    case 'video_640.mp4':
+    case 'video_1280.mp4':
+      return 'video/mp4';
+    case 'audio.mp3':
+      return 'audio/mpeg';
+    default:
+      return '';
+  }
+};
+
+const getArtifactUrl = (
+  client: MediaClient,
+  artifacts: MediaFileArtifacts,
+  artifact: keyof MediaFileArtifacts,
+) =>
+  client.mediaStore
+    .getArtifactURL(artifacts, artifact)
+    .then((url) => fetch(url))
+    .then((res) => res.blob())
+    .then((blob) => blob.slice(0, blob.size, getMimeTypeFromArtifact(artifact)))
+    .then((blob) => URL.createObjectURL(blob));
+
+export const NativeMediaViewer = ({
+  id,
+  mediaClient,
+}: NativeMediaViewerProps) => {
+  const [url, setUrl] = useState('');
+  const [mediaType, setMediaType] = useState<MediaType | null>(null);
+
+  useEffect(() => {
+    const setArtifactUrl = (
+      artifacts: MediaFileArtifacts,
+      artifact: keyof MediaFileArtifacts,
+    ) => {
+      getArtifactUrl(mediaClient, artifacts, artifact).then((url) =>
+        setUrl(url),
+      );
+    };
+    if (id) {
+      const subscribable = mediaClient.file.getFileState(id);
+      const { unsubscribe } = subscribable.subscribe((state) => {
+        if (state.status === 'processed') {
+          if (state.artifacts['document.pdf']) {
+            setArtifactUrl(state.artifacts, 'document.pdf');
+            setMediaType('doc');
+          } else if (state.artifacts['video_640.mp4']) {
+            setArtifactUrl(state.artifacts, 'video_640.mp4');
+            setMediaType('video');
+          } else if (state.artifacts['audio.mp3']) {
+            setArtifactUrl(state.artifacts, 'audio.mp3');
+            setMediaType('audio');
+          } else if (state.artifacts['image.png']) {
+            setArtifactUrl(state.artifacts, 'image.png');
+            setMediaType('image');
+          } else {
+            setMediaType('unknown');
+          }
+        } else if (state.status === 'failed-processing') {
+          setMediaType('unknown');
+        }
+      });
+
+      return unsubscribe;
+    }
+    return () => {};
+  }, [id, mediaClient]);
+
+  switch (mediaType) {
+    case 'image':
+      return <img style={{ width: '100%' }} src={url} />;
+    case 'video':
+      return <video style={{ width: '100%' }} src={url} />;
+    case 'audio':
+      return <audio style={{ width: '100%' }} src={url} />;
+    case 'doc':
+      return (
+        <object type="application/pdf" style={{ width: '100%' }} data={url}>
+          <embed type="application/pdf" src={url} />
+        </object>
+      );
+    case null:
+      return <div>Loading file ...</div>;
+    case 'unknown':
+      return <div>Unable to display file</div>;
+    default:
+      return <div>Unable to display file</div>;
+  }
+};

package/example-helpers/upload-preview.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { PreviewImageWrapper, InfoWrapper } from './stylesWrapper';
+import { PreviewImageWrapper } from './stylesWrapper';
 import { PreviewData } from './types';
-import { Card } from '@atlaskit/media-card';
-import { FileIdentifier } from '@atlaskit/media-client';
+import { FileIdentifier, MediaClient } from '@atlaskit/media-client';
 import { createUploadMediaClientConfig } from '@atlaskit/media-test-helpers';
 import { Preview, ImagePreview } from '../src/types';
+import { NativeMediaViewer } from './NativeMediaViewer';
 
 const mediaClientConfig = createUploadMediaClientConfig();
+const mediaClient = new MediaClient(mediaClientConfig);
 
 export class UploadPreview extends React.Component<PreviewData> {
   getPreviewInfo(preview: Preview): string | null {
@@ -19,7 +20,7 @@ export class UploadPreview extends React.Component<PreviewData> {
   }
 
   render() {
-    const { fileId, preview } = this.props;
+    const { fileId } = this.props;
 
     const identifier: FileIdentifier = {
       id: fileId,
@@ -28,10 +29,7 @@ export class UploadPreview extends React.Component<PreviewData> {
 
     return (
       <PreviewImageWrapper>
-        <Card identifier={identifier} mediaClientConfig={mediaClientConfig} />
-        {preview ? (
-          <InfoWrapper>{this.getPreviewInfo(preview)}</InfoWrapper>
-        ) : null}
+        <NativeMediaViewer id={identifier.id} mediaClient={mediaClient} />
       </PreviewImageWrapper>
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-picker",
-  "version": "66.1.5",
+  "version": "66.2.1",
   "description": "Library for handling file uploads",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,11 +37,11 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/flag": "^15.1.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^23.1.0",
-    "@atlaskit/media-common": "^8.0.0",
+    "@atlaskit/media-client": "^23.2.0",
+    "@atlaskit/media-common": "^8.2.0",
     "@atlaskit/media-ui": "^24.0.0",
     "@atlaskit/theme": "^12.4.0",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/tokens": "^1.18.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
@@ -61,11 +61,10 @@
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/button": "^16.9.0",
-    "@atlaskit/media-card": "^76.1.0",
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tokens": "^1.15.0",
+    "@atlaskit/tokens": "^1.18.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.2.0",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",

package/report.api.md

@@ -105,7 +105,12 @@ class Clipboard_2 extends React_2.PureComponent<
 export { Clipboard_2 as Clipboard };
 
 // @public (undocumented)
-interface ClipboardConfig extends LocalUploadConfig {}
+export interface ClipboardConfig extends LocalUploadConfig {
+  // (undocumented)
+  container?: HTMLElement;
+  // (undocumented)
+  onPaste?: (event: ClipboardEvent) => boolean | undefined;
+}
 
 // @public (undocumented)
 type ClipboardProps = LocalUploadComponentBaseProps & {

package/tmp/api-report-tmp.d.ts

@@ -85,7 +85,11 @@ class Clipboard_2 extends React_2.PureComponent<ClipboardWithMediaClientConfigPr
 export { Clipboard_2 as Clipboard }
 
 // @public (undocumented)
-interface ClipboardConfig extends LocalUploadConfig {
+export interface ClipboardConfig extends LocalUploadConfig {
+    // (undocumented)
+    container?: HTMLElement;
+    // (undocumented)
+    onPaste?: (event: ClipboardEvent) => boolean | undefined;
 }
 
 // @public (undocumented)