@atlaskit/media-picker 66.4.0 → 66.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-picker
 
+## 66.4.2
+
+### Patch Changes
+
+- [#92007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92007) [`85525725cb0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85525725cb0d) - Migrated to the new button component
+
+## 66.4.1
+
+### Patch Changes
+
+- [#88717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88717) [`d92770eae702`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d92770eae702) - Adding internal eslint opt outs for a new rule `@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop`.
+
 ## 66.4.0
 
 ### Minor Changes

package/dist/cjs/components/dropzone/dropzone.js

@@ -42,9 +42,12 @@ var DropzoneBase = exports.DropzoneBase = /*#__PURE__*/function (_LocalUploadCom
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uiActive", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();
+      // TODO: migrate this file to Pragmatic drag and drop
+      /* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
       container.addEventListener('dragover', _this.onDragOver, false);
       container.addEventListener('dragleave', _this.onDragLeave, false);
       container.addEventListener('drop', _this.onFileDropped);
+      /* eslint-enable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "removeContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();

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.4.0";
+var packageVersion = "66.4.2";
 function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/cjs/util/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaClient = require("@atlaskit/media-client");
 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.4.0";
+var packageVersion = "66.4.2";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/dist/es2019/components/dropzone/dropzone.js

@@ -22,9 +22,12 @@ export class DropzoneBase extends LocalUploadComponentReact {
     super(props, COMPONENT_NAME);
     _defineProperty(this, "uiActive", false);
     _defineProperty(this, "addContainerListeners", (container = this.getContainer()) => {
+      // TODO: migrate this file to Pragmatic drag and drop
+      /* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
       container.addEventListener('dragover', this.onDragOver, false);
       container.addEventListener('dragleave', this.onDragLeave, false);
       container.addEventListener('drop', this.onFileDropped);
+      /* eslint-enable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
     });
     _defineProperty(this, "removeContainerListeners", (container = this.getContainer()) => {
       container.removeEventListener('dragover', this.onDragOver, false);

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.4.0";
+const packageVersion = "66.4.2";
 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.4.0";
+const packageVersion = "66.4.2";
 let ufoExperience;
 const initExperience = (id, componentName) => {
   if (!ufoExperience) {

package/dist/esm/components/dropzone/dropzone.js

@@ -35,9 +35,12 @@ export var DropzoneBase = /*#__PURE__*/function (_LocalUploadComponent) {
     _defineProperty(_assertThisInitialized(_this), "uiActive", false);
     _defineProperty(_assertThisInitialized(_this), "addContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();
+      // TODO: migrate this file to Pragmatic drag and drop
+      /* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
       container.addEventListener('dragover', _this.onDragOver, false);
       container.addEventListener('dragleave', _this.onDragLeave, false);
       container.addEventListener('drop', _this.onFileDropped);
+      /* eslint-enable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
     });
     _defineProperty(_assertThisInitialized(_this), "removeContainerListeners", function () {
       var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.getContainer();

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.4.0";
+var packageVersion = "66.4.2";
 export function getPackageAttributes(componentName) {
   return {
     packageName: packageName,

package/dist/esm/util/ufoExperiences.js

@@ -5,7 +5,7 @@ import { ConcurrentExperience, ExperiencePerformanceTypes, ExperienceTypes } fro
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-picker";
-var packageVersion = "66.4.0";
+var packageVersion = "66.4.2";
 var ufoExperience;
 var initExperience = function initExperience(id, componentName) {
   if (!ufoExperience) {

package/example-helpers/styles.ts

@@ -6,85 +6,87 @@ interface DropzoneContainerProps {
   isActive: boolean;
 }
 
-export const popupContainerStyles = css`
-  display: flex;
-  flex-direction: column;
-  overflow: scroll;
-`;
+export const popupContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'scroll',
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const popupHeaderStyles = css`
-  border-bottom: 1px solid #ccc;
-  margin-bottom: 15px;
-  display: flex;
-  align-items: center;
-  padding: 30px 0;
-
-  > * {
-    margin-right: 15px;
-  }
-`;
+export const popupHeaderStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage -- needs to be converted to tokens
+  borderBottom: '1px solid #ccc',
+  marginBottom: '15px',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '30px 0',
+  '> *': {
+    marginRight: '15px',
+  },
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const previewImageWrapperStyles = css`
-  position: relative;
-  margin-right: 15px;
-`;
+export const previewImageWrapperStyles = css({
+  position: 'relative',
+  marginRight: '15px',
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const infoWrapperStyles = css`
-  position: absolute;
-  width: 160px;
-  color: black;
-  font-size: 12px;
-  top: 120px;
-  left: 0;
-  text-align: center;
-`;
-
-export const dropzoneContainerStyles = ({
-  isActive,
-}: DropzoneContainerProps) => css`
-  width: 600px;
-  min-height: 500px;
-  border: 1px dashed transparent;
-  ${isActive ? `border-color: gray;` : ''}
-`;
-
-export const dropzoneRootStyles = css`
-  display: flex;
-`;
-
-export const dropzoneContentWrapperStyles = css`
-  display: flex;
-  min-height: 200px;
-`;
-
-export const previewsWrapperStyles = css`
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-  margin-left: ${token('space.250', '20px')};
-  margin-bottom: ${token('space.250', '20px')};
-`;
-
-export const previewsTitleStyles = css`
-  width: 100%;
-`;
-
-export const uploadPreviewsFlexRowStyles = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-`;
-
-export const dropzoneItemsInfoStyles = css`
-  flex: 1;
-  min-width: 600px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-`;
+export const infoWrapperStyles = css({
+  position: 'absolute',
+  width: '160px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage -- needs to be converted to tokens
+  color: 'black',
+  fontSize: '12px',
+  top: '120px',
+  left: 0,
+  textAlign: 'center',
+});
+
+export const dropzoneContainerStyles = ({ isActive }: DropzoneContainerProps) =>
+  css(
+    {
+      width: '600px',
+      minHeight: '500px',
+      border: '1px dashed transparent',
+    },
+    isActive ? `border-color: gray;` : '',
+  );
+
+export const dropzoneRootStyles = css({
+  display: 'flex',
+});
+
+export const dropzoneContentWrapperStyles = css({
+  display: 'flex',
+  minHeight: '200px',
+});
+
+export const previewsWrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'visible',
+  marginLeft: token('space.250', '20px'),
+  marginBottom: token('space.250', '20px'),
+});
+
+export const previewsTitleStyles = css({
+  width: '100%',
+});
+
+export const uploadPreviewsFlexRowStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+});
+
+export const dropzoneItemsInfoStyles = css({
+  flex: 1,
+  minWidth: '600px',
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+});
 
 interface ClipboardContainerProps {
   isWindowFocused: boolean;
@@ -93,39 +95,42 @@ interface ClipboardContainerProps {
 export const clipboardContainerStyles = ({
   isWindowFocused,
 }: // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-ClipboardContainerProps) => css`
-  padding: 10px;
-  min-height: 400px;
-
-  border: ${isWindowFocused ? `1px dashed gray` : `1px dashed transparent`};
-`;
+ClipboardContainerProps) =>
+  css({
+    padding: '10px',
+    minHeight: '400px',
+    border: isWindowFocused ? `1px dashed gray` : `1px dashed transparent`,
+  });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const infoContainerStyles = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 0;
-  border: 5px dashed #81ebff;
-  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
-
-  .info {
-    position: absolute;
-    left: 0;
-    bottom: -30px;
-    background-color: black;
-    opacity: 0.5;
-    color: white;
-    white-space: nowrap;
-  }
-
-  .close_button {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-`;
-
+export const infoContainerStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  margin: 0,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage -- needs to be converted to tokens
+  border: '5px dashed #81ebff',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage -- needs to be converted to tokens
+  boxShadow: '10px 10px 15px rgba(0, 0, 0, 0.3)',
+  '.info': {
+    position: 'absolute',
+    left: 0,
+    bottom: '-30px',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage -- needs to be converted to tokens
+    backgroundColor: 'black',
+    opacity: 0.5,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage -- needs to be converted to tokens
+    color: 'white',
+    whiteSpace: 'nowrap',
+  },
+  '.close_button': {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const pastedImageStyles = (style: PastedImageStyleType) => css`
   width: ${style.width ? `${style.width}px` : '100%'};
   ${style.height ? `height: ${style.height}px` : ''};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-picker",
-  "version": "66.4.0",
+  "version": "66.4.2",
   "description": "Library for handling file uploads",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,15 +34,15 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/flag": "^15.1.0",
+    "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/flag": "^15.4.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/media-client": "^26.2.0",
+    "@atlaskit/media-client": "^26.3.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
-    "@atlaskit/media-ui": "^25.4.0",
+    "@atlaskit/media-ui": "^25.9.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
     "eventemitter2": "^4.1.0",
@@ -61,7 +61,7 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.14.0",
     "@atlaskit/media-core": "^34.2.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/ssr": "*",