@atlaskit/media-table 9.0.3 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @atlaskit/media-table
 
+## 10.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.3
 
 ### Patch Changes

package/dist/cjs/component/downloadButton.js

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -63,6 +63,6 @@ var MediaDownloadButton = function MediaDownloadButton(props) {
   });
 };
 
-var _default = (0, _reactIntl.injectIntl)(MediaDownloadButton);
+var _default = (0, _reactIntlNext.injectIntl)(MediaDownloadButton);
 
 exports.default = _default;

package/dist/cjs/component/mediaTable.js

@@ -31,7 +31,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _dynamicTable = require("@atlaskit/dynamic-table");
 
@@ -320,7 +320,7 @@ var MediaTable = /*#__PURE__*/function (_Component) {
     value: function render() {
       var content = /*#__PURE__*/_react.default.createElement(_styled.MediaTableWrapper, null, this.renderTable(), this.renderMediaViewer());
 
-      return this.context.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+      return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, content);
     }
@@ -329,10 +329,9 @@ var MediaTable = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 exports.MediaTable = MediaTable;
-(0, _defineProperty2.default)(MediaTable, "contextTypes", {
-  intl: _reactIntl.intlShape
-});
 
-var _default = (0, _mediaClient.withMediaClient)((0, _analyticsNext.withAnalyticsEvents)()(MediaTable));
+var _default = (0, _mediaClient.withMediaClient)((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(MediaTable, {
+  enforceContext: false
+})));
 
 exports.default = _default;

package/dist/cjs/component/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaTableWrapper = exports.TruncateWrapper = exports.NameCellWrapper = void 0;
+exports.TruncateWrapper = exports.NameCellWrapper = exports.MediaTableWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 

package/dist/cjs/util/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ANALYTICS_MEDIA_CHANNEL = exports.CELL_KEY_DOWNLOAD = void 0;
+exports.CELL_KEY_DOWNLOAD = exports.ANALYTICS_MEDIA_CHANNEL = void 0;
 var CELL_KEY_DOWNLOAD = 'download';
 exports.CELL_KEY_DOWNLOAD = CELL_KEY_DOWNLOAD;
 var ANALYTICS_MEDIA_CHANNEL = 'media';

package/dist/cjs/util/generateRowValues.js

@@ -5,8 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.appendRows = void 0;
 exports.default = generateRowValues;
-exports.appendRows = exports.prependRows = exports.generateEmptyRow = void 0;
+exports.prependRows = exports.generateEmptyRow = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 

package/dist/cjs/util/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "generateRowValues", {
+Object.defineProperty(exports, "ANALYTICS_MEDIA_CHANNEL", {
   enumerable: true,
   get: function get() {
-    return _generateRowValues.default;
+    return _constants.ANALYTICS_MEDIA_CHANNEL;
   }
 });
-Object.defineProperty(exports, "getValidTableProps", {
+Object.defineProperty(exports, "CELL_KEY_DOWNLOAD", {
   enumerable: true,
   get: function get() {
-    return _getValidTableProps.default;
+    return _constants.CELL_KEY_DOWNLOAD;
   }
 });
 Object.defineProperty(exports, "generateHeadValues", {
@@ -23,16 +23,16 @@ Object.defineProperty(exports, "generateHeadValues", {
     return _generateHeadValues.default;
   }
 });
-Object.defineProperty(exports, "CELL_KEY_DOWNLOAD", {
+Object.defineProperty(exports, "generateRowValues", {
   enumerable: true,
   get: function get() {
-    return _constants.CELL_KEY_DOWNLOAD;
+    return _generateRowValues.default;
   }
 });
-Object.defineProperty(exports, "ANALYTICS_MEDIA_CHANNEL", {
+Object.defineProperty(exports, "getValidTableProps", {
   enumerable: true,
   get: function get() {
-    return _constants.ANALYTICS_MEDIA_CHANNEL;
+    return _getValidTableProps.default;
   }
 });
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-table",
-	"version": "9.0.3",
+	"version": "10.0.0",
 	"sideEffects": false
 }

package/dist/es2019/component/downloadButton.js

@@ -1,6 +1,6 @@
 import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { N40 } from '@atlaskit/theme/colors';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/es2019/component/mediaTable.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom'; // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { IntlProvider, intlShape } from 'react-intl';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 import { DynamicTableStateless } from '@atlaskit/dynamic-table';
 import { isFileIdentifier, withMediaClient, isProcessedFileState } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
@@ -266,15 +266,12 @@ export class MediaTable extends Component {
 
   render() {
     const content = /*#__PURE__*/React.createElement(MediaTableWrapper, null, this.renderTable(), this.renderMediaViewer());
-    return this.context.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+    return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, content);
   }
 
 }
-
-_defineProperty(MediaTable, "contextTypes", {
-  intl: intlShape
-});
-
-export default withMediaClient(withAnalyticsEvents()(MediaTable));
+export default withMediaClient(withAnalyticsEvents()(injectIntl(MediaTable, {
+  enforceContext: false
+})));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-table",
-	"version": "9.0.3",
+	"version": "10.0.0",
 	"sideEffects": false
 }

package/dist/esm/component/downloadButton.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { N40 } from '@atlaskit/theme/colors';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import Button from '@atlaskit/button/custom-theme-button';

package/dist/esm/component/mediaTable.js

@@ -19,7 +19,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom'; // eslint-disable-next-line import/no-extraneous-dependencies
 
-import { IntlProvider, intlShape } from 'react-intl';
+import { IntlProvider, injectIntl } from 'react-intl-next';
 import { DynamicTableStateless } from '@atlaskit/dynamic-table';
 import { isFileIdentifier, withMediaClient, isProcessedFileState } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
@@ -303,7 +303,7 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var content = /*#__PURE__*/React.createElement(MediaTableWrapper, null, this.renderTable(), this.renderMediaViewer());
-      return this.context.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+      return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, content);
     }
@@ -311,9 +311,6 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
 
   return MediaTable;
 }(Component);
-
-_defineProperty(MediaTable, "contextTypes", {
-  intl: intlShape
-});
-
-export default withMediaClient(withAnalyticsEvents()(MediaTable));
+export default withMediaClient(withAnalyticsEvents()(injectIntl(MediaTable, {
+  enforceContext: false
+})));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-table",
-	"version": "9.0.3",
+	"version": "10.0.0",
 	"sideEffects": false
 }

package/dist/types/component/downloadButton.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 interface Props {
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
-declare const _default: React.ComponentClass<Props, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<Props & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/component/mediaTable.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react-intl" />
 import React, { Component } from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
 import { MediaTableProps, MediaTableState } from '../types';
-export declare class MediaTable extends Component<MediaTableProps, MediaTableState> {
+export declare class MediaTable extends Component<MediaTableProps & WrappedComponentProps, MediaTableState> {
     state: MediaTableState;
     private subscriptions;
     private hasBeenMounted;
@@ -19,10 +19,7 @@ export declare class MediaTable extends Component<MediaTableProps, MediaTableSta
     private safeSetState;
     private onMediaViewerClose;
     private renderMediaViewer;
-    static contextTypes: {
-        intl: ReactIntl.IntlShape;
-    };
     render(): JSX.Element;
 }
-declare const _default: React.ComponentType<import("@atlaskit/media-client").WithMediaClientConfigProps<Pick<MediaTableProps, "itemsPerPage" | "pageNumber" | "totalItems" | "isLoading" | "columns" | "items" | "mediaClient" | "sortKey" | "sortOrder" | "onSetPage" | "onSort" | "onPreviewOpen" | "onPreviewClose"> & React.RefAttributes<any>>>;
+declare const _default: React.ComponentType<import("@atlaskit/media-client").WithMediaClientConfigProps<Pick<React.PropsWithChildren<import("react-intl-next").WithIntlProps<MediaTableProps & WrappedComponentProps<"intl">>>, "children" | "itemsPerPage" | "pageNumber" | "totalItems" | "isLoading" | "columns" | "items" | "mediaClient" | "sortKey" | "sortOrder" | "onSetPage" | "onSort" | "onPreviewOpen" | "onPreviewClose" | "forwardedRef"> & React.RefAttributes<any>>>;
 export default _default;

package/example-helpers/helpers.tsx

@@ -13,6 +13,7 @@ import {
   videoProcessingFailedId,
 } from '@atlaskit/media-test-helpers';
 import { MediaTableItem, NameCell } from '../src';
+import { IntlProvider } from 'react-intl-next';
 
 export { ROW_HIGHLIGHT_CLASSNAME } from './styled';
 
@@ -27,11 +28,19 @@ export const RenderMediaTableWithFieldRange = (
 
   return (
     <ExampleWrapper>
-      <div>
-        Parent width: {width}px
-        <Range value={width} min={0} max={1500} step={5} onChange={setWidth} />
-      </div>
-      <div style={{ width: `${width}px` }}>{MediaTableNode}</div>
+      <IntlProvider locale="en">
+        <div>
+          Parent width: {width}px
+          <Range
+            value={width}
+            min={0}
+            max={1500}
+            step={5}
+            onChange={setWidth}
+          />
+        </div>
+        <div style={{ width: `${width}px` }}>{MediaTableNode}</div>
+      </IntlProvider>
     </ExampleWrapper>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-table",
-  "version": "9.0.3",
+  "version": "10.0.0",
   "description": "Table UI component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,11 +28,11 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/dynamic-table": "^14.1.0",
+    "@atlaskit/dynamic-table": "^14.4.0",
     "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/media-client": "^14.2.0",
-    "@atlaskit/media-ui": "^17.0.0",
-    "@atlaskit/media-viewer": "^45.7.0",
+    "@atlaskit/media-client": "^14.3.0",
+    "@atlaskit/media-ui": "^18.0.0",
+    "@atlaskit/media-viewer": "^46.0.0",
     "@atlaskit/theme": "^12.0.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
@@ -42,17 +42,18 @@
     "@atlaskit/media-core": "^32.2.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-common": "^2.9.0",
+    "@atlaskit/media-common": "^2.10.0",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^28.8.0",
-    "@atlaskit/range": "^5.0.11",
-    "@atlaskit/ssr": "^0.2.0",
+    "@atlaskit/media-test-helpers": "^29.0.0",
+    "@atlaskit/range": "^5.1.0",
+    "@atlaskit/ssr": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@types/dateformat": "^3.0.1",
     "dateformat": "^4.5.1",