@atlaskit/media-table 11.0.1 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/media-table
 
+## 13.0.0
+
+### Major Changes
+
+- [`af775dcb785`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af775dcb785) - [MEX-1034] Migrated from styled-components library to @emotion/react in @atlaskit/media-table
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.1
 
 ### Patch Changes

package/dist/cjs/component/mediaTable.js

@@ -27,7 +27,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
@@ -39,7 +41,7 @@ var _mediaClient = require("@atlaskit/media-client");
 
 var _mediaViewer = require("@atlaskit/media-viewer");
 
-var _styled = require("./styled");
+var _styles = require("./styles");
 
 var _downloadButton = _interopRequireDefault(require("./downloadButton"));
 
@@ -90,7 +92,7 @@ var MediaTable = /*#__PURE__*/function (_Component) {
       var cellValues = [];
       var columns = _this.props.columns;
       columns.cells.forEach(function (cell) {
-        var content = cell.key === _util.CELL_KEY_DOWNLOAD ? /*#__PURE__*/_react.default.createElement(_downloadButton.default, {
+        var content = cell.key === _util.CELL_KEY_DOWNLOAD ? (0, _react.jsx)(_downloadButton.default, {
           onClick: _this.onDownloadClick(identifier)
         }) : cell.key && data[cell.key] || '';
         cellValues.push({
@@ -164,7 +166,7 @@ var MediaTable = /*#__PURE__*/function (_Component) {
           validTotalItems = _getValidTableProps.validTotalItems;
 
       var rowsPerPage = validTotalItems <= validItemsPerPage ? undefined : validItemsPerPage;
-      return /*#__PURE__*/_react.default.createElement(_dynamicTable.DynamicTableStateless, {
+      return (0, _react.jsx)(_dynamicTable.DynamicTableStateless, {
         caption: '',
         head: (0, _util.generateHeadValues)(columns),
         rows: _this.renderRowValues(validItemsPerPage, validPageNumber, validTotalItems),
@@ -244,7 +246,7 @@ var MediaTable = /*#__PURE__*/function (_Component) {
         })
       };
       var collectionName = (0, _mediaClient.isFileIdentifier)(mediaViewerSelectedItem) && mediaViewerSelectedItem.collectionName || '';
-      return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+      return /*#__PURE__*/_reactDom.default.createPortal((0, _react.jsx)(_mediaViewer.MediaViewer, {
         mediaClientConfig: mediaClient.config,
         dataSource: dataSource,
         selectedItem: mediaViewerSelectedItem,
@@ -318,15 +320,16 @@ var MediaTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var content = /*#__PURE__*/_react.default.createElement(_styled.MediaTableWrapper, null, this.renderTable(), this.renderMediaViewer());
-
-      return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      var content = (0, _react.jsx)("div", {
+        css: _styles.mediaTableWrapperStyles
+      }, this.renderTable(), this.renderMediaViewer());
+      return this.props.intl ? content : (0, _react.jsx)(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, content);
     }
   }]);
   return MediaTable;
-}(_react.Component);
+}(_react2.Component);
 
 exports.MediaTable = MediaTable;
 

package/dist/cjs/component/nameCell.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -19,7 +19,7 @@ var _truncateText = require("@atlaskit/media-ui/truncateText");
 
 var _mediaTypeIcon = require("@atlaskit/media-ui/media-type-icon");
 
-var _styled = require("./styled");
+var _styles = require("./styles");
 
 var _excluded = ["mediaType", "text"];
 
@@ -27,11 +27,15 @@ var NameCell = function NameCell(props) {
   var mediaType = props.mediaType,
       text = props.text,
       rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_styled.NameCellWrapper, null, mediaType && /*#__PURE__*/_react.default.createElement(_mediaTypeIcon.MediaTypeIcon, {
+  return (0, _react.jsx)("div", {
+    css: _styles.nameCellWrapperStyles
+  }, mediaType && (0, _react.jsx)(_mediaTypeIcon.MediaTypeIcon, {
     type: mediaType
-  }), /*#__PURE__*/_react.default.createElement(_styled.TruncateWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  }), (0, _react.jsx)("div", {
+    css: _styles.truncateWrapperStyles
+  }, (0, _react.jsx)(_tooltip.default, {
     content: text
-  }, /*#__PURE__*/_react.default.createElement(_truncateText.Truncate, (0, _extends2.default)({
+  }, (0, _react.jsx)(_truncateText.Truncate, (0, _extends2.default)({
     text: text
   }, rest)))));
 };

package/dist/cjs/component/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.truncateWrapperStyles = exports.nameCellWrapperStyles = exports.mediaTableWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var nameCellWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n"])));
+exports.nameCellWrapperStyles = nameCellWrapperStyles;
+var truncateWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 0;\n  width: 100%;\n  margin-left: 4px;\n\n  span:first-of-type {\n    &::first-letter {\n      text-transform: capitalize;\n    }\n  }\n"])));
+exports.truncateWrapperStyles = truncateWrapperStyles;
+var mediaTableWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  tr {\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])), _colors.N20);
+exports.mediaTableWrapperStyles = mediaTableWrapperStyles;

package/dist/cjs/version.json

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

package/dist/es2019/component/mediaTable.js

@@ -1,4 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom'; // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -6,7 +9,7 @@ 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';
-import { MediaTableWrapper } from './styled';
+import { mediaTableWrapperStyles } from './styles';
 import DownloadButton from './downloadButton';
 import { generateRowValues, getValidTableProps, generateHeadValues, CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from '../util';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -33,7 +36,7 @@ export class MediaTable extends Component {
         columns
       } = this.props;
       columns.cells.forEach(cell => {
-        const content = cell.key === CELL_KEY_DOWNLOAD ? /*#__PURE__*/React.createElement(DownloadButton, {
+        const content = cell.key === CELL_KEY_DOWNLOAD ? jsx(DownloadButton, {
           onClick: this.onDownloadClick(identifier)
         }) : cell.key && data[cell.key] || '';
         cellValues.push({
@@ -123,7 +126,7 @@ export class MediaTable extends Component {
         validTotalItems
       } = getValidTableProps(items.length, itemsPerPage, pageNumber, totalItems);
       const rowsPerPage = validTotalItems <= validItemsPerPage ? undefined : validItemsPerPage;
-      return /*#__PURE__*/React.createElement(DynamicTableStateless, {
+      return jsx(DynamicTableStateless, {
         caption: '',
         head: generateHeadValues(columns),
         rows: this.renderRowValues(validItemsPerPage, validPageNumber, validTotalItems),
@@ -210,7 +213,7 @@ export class MediaTable extends Component {
         list: items.map(item => item.identifier)
       };
       const collectionName = isFileIdentifier(mediaViewerSelectedItem) && mediaViewerSelectedItem.collectionName || '';
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+      return /*#__PURE__*/ReactDOM.createPortal(jsx(MediaViewer, {
         mediaClientConfig: mediaClient.config,
         dataSource: dataSource,
         selectedItem: mediaViewerSelectedItem,
@@ -265,8 +268,10 @@ export class MediaTable extends Component {
   }
 
   render() {
-    const content = /*#__PURE__*/React.createElement(MediaTableWrapper, null, this.renderTable(), this.renderMediaViewer());
-    return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+    const content = jsx("div", {
+      css: mediaTableWrapperStyles
+    }, this.renderTable(), this.renderMediaViewer());
+    return this.props.intl ? content : jsx(IntlProvider, {
       locale: "en"
     }, content);
   }

package/dist/es2019/component/nameCell.js

@@ -1,20 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
-import { NameCellWrapper, TruncateWrapper } from './styled';
+import { nameCellWrapperStyles, truncateWrapperStyles } from './styles';
 export const NameCell = props => {
   const {
     mediaType,
     text,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(NameCellWrapper, null, mediaType && /*#__PURE__*/React.createElement(MediaTypeIcon, {
+  return jsx("div", {
+    css: nameCellWrapperStyles
+  }, mediaType && jsx(MediaTypeIcon, {
     type: mediaType
-  }), /*#__PURE__*/React.createElement(TruncateWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+  }), jsx("div", {
+    css: truncateWrapperStyles
+  }, jsx(Tooltip, {
     content: text
-  }, /*#__PURE__*/React.createElement(Truncate, _extends({
+  }, jsx(Truncate, _extends({
     text: text
   }, rest)))));
 };

package/dist/es2019/component/{styled.js → styles.js}

@@ -1,11 +1,11 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N20 } from '@atlaskit/theme/colors';
-export const NameCellWrapper = styled.div`
+export const nameCellWrapperStyles = css`
   display: flex;
   align-content: center;
   align-items: center;
 `;
-export const TruncateWrapper = styled.div`
+export const truncateWrapperStyles = css`
   min-width: 0;
   width: 100%;
   margin-left: 4px;
@@ -16,7 +16,7 @@ export const TruncateWrapper = styled.div`
     }
   }
 `;
-export const MediaTableWrapper = styled.div`
+export const mediaTableWrapperStyles = css`
   tr {
     cursor: pointer;
 

package/dist/es2019/version.json

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

package/dist/esm/component/mediaTable.js

@@ -1,4 +1,3 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -7,6 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 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; }
 
@@ -16,6 +16,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom'; // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -23,7 +25,7 @@ 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';
-import { MediaTableWrapper } from './styled';
+import { mediaTableWrapperStyles } from './styles';
 import DownloadButton from './downloadButton';
 import { generateRowValues, getValidTableProps, generateHeadValues, CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from '../util';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -63,7 +65,7 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
       var cellValues = [];
       var columns = _this.props.columns;
       columns.cells.forEach(function (cell) {
-        var content = cell.key === CELL_KEY_DOWNLOAD ? /*#__PURE__*/React.createElement(DownloadButton, {
+        var content = cell.key === CELL_KEY_DOWNLOAD ? jsx(DownloadButton, {
           onClick: _this.onDownloadClick(identifier)
         }) : cell.key && data[cell.key] || '';
         cellValues.push({
@@ -141,7 +143,7 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
           validTotalItems = _getValidTableProps.validTotalItems;
 
       var rowsPerPage = validTotalItems <= validItemsPerPage ? undefined : validItemsPerPage;
-      return /*#__PURE__*/React.createElement(DynamicTableStateless, {
+      return jsx(DynamicTableStateless, {
         caption: '',
         head: generateHeadValues(columns),
         rows: _this.renderRowValues(validItemsPerPage, validPageNumber, validTotalItems),
@@ -227,7 +229,7 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
         })
       };
       var collectionName = isFileIdentifier(mediaViewerSelectedItem) && mediaViewerSelectedItem.collectionName || '';
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+      return /*#__PURE__*/ReactDOM.createPortal(jsx(MediaViewer, {
         mediaClientConfig: mediaClient.config,
         dataSource: dataSource,
         selectedItem: mediaViewerSelectedItem,
@@ -302,8 +304,10 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var content = /*#__PURE__*/React.createElement(MediaTableWrapper, null, this.renderTable(), this.renderMediaViewer());
-      return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+      var content = jsx("div", {
+        css: mediaTableWrapperStyles
+      }, this.renderTable(), this.renderMediaViewer());
+      return this.props.intl ? content : jsx(IntlProvider, {
         locale: "en"
       }, content);
     }

package/dist/esm/component/nameCell.js

@@ -1,21 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mediaType", "text"];
-import React from 'react';
+
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { Truncate } from '@atlaskit/media-ui/truncateText';
 import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
-import { NameCellWrapper, TruncateWrapper } from './styled';
+import { nameCellWrapperStyles, truncateWrapperStyles } from './styles';
 export var NameCell = function NameCell(props) {
   var mediaType = props.mediaType,
       text = props.text,
       rest = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(NameCellWrapper, null, mediaType && /*#__PURE__*/React.createElement(MediaTypeIcon, {
+  return jsx("div", {
+    css: nameCellWrapperStyles
+  }, mediaType && jsx(MediaTypeIcon, {
     type: mediaType
-  }), /*#__PURE__*/React.createElement(TruncateWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+  }), jsx("div", {
+    css: truncateWrapperStyles
+  }, jsx(Tooltip, {
     content: text
-  }, /*#__PURE__*/React.createElement(Truncate, _extends({
+  }, jsx(Truncate, _extends({
     text: text
   }, rest)))));
 };

package/dist/esm/component/styles.js

@@ -0,0 +1,9 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+import { N20 } from '@atlaskit/theme/colors';
+export var nameCellWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n"])));
+export var truncateWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 0;\n  width: 100%;\n  margin-left: 4px;\n\n  span:first-of-type {\n    &::first-letter {\n      text-transform: capitalize;\n    }\n  }\n"])));
+export var mediaTableWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  tr {\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])), N20);

package/dist/esm/version.json

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

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

@@ -1,3 +1,5 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { MediaTableProps, MediaTableState } from '../types';
@@ -19,7 +21,7 @@ export declare class MediaTable extends Component<MediaTableProps & WrappedCompo
     private safeSetState;
     private onMediaViewerClose;
     private renderMediaViewer;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
 declare const _default: React.ComponentType<import("@atlaskit/media-client").WithMediaClientConfigProps<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<MediaTableProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>>;
 export default _default;

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

@@ -0,0 +1,3 @@
+export declare const nameCellWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const truncateWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const mediaTableWrapperStyles: import("@emotion/react").SerializedStyles;

package/example-helpers/helpers.tsx

@@ -1,7 +1,9 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import dateFnsFormat from 'date-fns/format';
 import { MediaType } from '@atlaskit/media-client';
-import { ExampleWrapper, ROW_HIGHLIGHT_CLASSNAME } from './styled';
+import { exampleWrapperStyles, ROW_HIGHLIGHT_CLASSNAME } from './styles';
 import Range from '@atlaskit/range';
 import { toHumanReadableMediaSize } from '@atlaskit/media-ui';
 import {
@@ -15,8 +17,6 @@ import {
 import { MediaTableItem, NameCell } from '../src';
 import { IntlProvider } from 'react-intl-next';
 
-export { ROW_HIGHLIGHT_CLASSNAME } from './styled';
-
 export const createMockFileData = (name: string, mediaType: MediaType) => {
   return <NameCell text={name} mediaType={mediaType} endFixedChars={4} />;
 };
@@ -31,7 +31,7 @@ export const RenderMediaTableWithFieldRange = (
   const [width, setWidth] = useState(1000);
 
   return (
-    <ExampleWrapper>
+    <div css={exampleWrapperStyles}>
       <IntlProvider locale="en">
         <div>
           Parent width: {width}px
@@ -45,7 +45,7 @@ export const RenderMediaTableWithFieldRange = (
         </div>
         <div style={{ width: `${width}px` }}>{MediaTableNode}</div>
       </IntlProvider>
-    </ExampleWrapper>
+    </div>
   );
 };
 

package/example-helpers/{styled.tsx → styles.tsx}

@@ -1,10 +1,12 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
 
 export const ROW_HIGHLIGHT_CLASSNAME = 'media-table-row-highlighted';
-export const ExampleWrapper = styled.div`
+export const ROW_CLASSNAME = 'media-table-row';
+
+export const exampleWrapperStyles = css`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -17,3 +19,13 @@ export const ExampleWrapper = styled.div`
     }
   }
 `;
+
+export const greenOnHoverStyles = css`
+  background-color: red;
+  height: 8px;
+  width: 8px;
+
+  .${ROW_CLASSNAME}:hover & {
+    background-color: green;
+  }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-table",
-  "version": "11.0.1",
+  "version": "13.0.0",
   "description": "Table UI component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,37 +28,37 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/dynamic-table": "^14.5.0",
+    "@atlaskit/dynamic-table": "^14.6.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-client": "^15.1.0",
-    "@atlaskit/media-ui": "^21.1.0",
-    "@atlaskit/media-viewer": "^46.2.0",
+    "@atlaskit/media-client": "^17.1.0",
+    "@atlaskit/media-ui": "^22.1.0",
+    "@atlaskit/media-viewer": "^47.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^32.3.1",
+    "@atlaskit/media-core": "^33.0.1",
+    "@emotion/react": "^11.7.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-common": "^2.12.0",
-    "@atlaskit/media-core": "^32.3.0",
-    "@atlaskit/media-test-helpers": "^29.4.0",
+    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
     "enzyme": "^3.10.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "styled-components": "^3.2.6",
     "typescript": "4.2.4"
   },
   "resolutions": {

package/report.api.md

@@ -0,0 +1,85 @@
+## API Report File for "@atlaskit/media-table"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { FC } from 'react';
+import { FileIdentifier } from '@atlaskit/media-client';
+import { HeadType } from '@atlaskit/dynamic-table/types';
+import { MediaClient } from '@atlaskit/media-client';
+import { MediaType } from '@atlaskit/media-client';
+import { default as React_2 } from 'react';
+import { SortOrderType } from '@atlaskit/dynamic-table/types';
+import { TruncateProps } from '@atlaskit/media-ui/truncateText';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithIntlProps } from 'react-intl-next';
+import { WithMediaClientConfigProps } from '@atlaskit/media-client';
+import { WrappedComponentProps } from 'react-intl-next';
+
+export declare const MediaTable: React_2.ComponentType<WithMediaClientConfigProps<
+  Omit<
+    React_2.PropsWithChildren<
+      WithIntlProps<MediaTableProps & WrappedComponentProps<'intl'>>
+    >,
+    keyof WithAnalyticsEventsProps
+  > &
+    React_2.RefAttributes<any>
+>>;
+
+export declare interface MediaTableItem {
+  data: RowData;
+  identifier: FileIdentifier;
+  /** An object containing props that will be applied to the row component */
+  rowProps?: RowProps;
+}
+
+export declare interface MediaTableProps {
+  /** The table rows to display in the current page */
+  items: MediaTableItem[];
+  mediaClient: MediaClient;
+  /** Object describing the column headings */
+  columns: HeadType;
+  /** The total number of table rows. This is used to calculate pagination */
+  totalItems: number;
+  /** The maximum number of rows per page. No maximum by default */
+  itemsPerPage?: number;
+  /** The current page number */
+  pageNumber?: number;
+  /** The property that the table items are sorted by. This must match a key in columns.cells */
+  sortKey?: string;
+  /** The direction that the table items are sorted in - ascending or descending */
+  sortOrder?: SortOrderType;
+  /** Whether to show the loading state or not */
+  isLoading?: boolean;
+  /** Called when a pagination control is clicked. Provides the new page number to paginate by */
+  onSetPage?: (pageNumber: number) => void;
+  /** Called when a column header is clicked. Provides the key of the column and the new sortOrder to sort by */
+  onSort?: (key: string, sortOrder: SortOrderType) => void;
+  createAnalyticsEvent: CreateUIAnalyticsEvent;
+  /** Called when the preview is opened by the user clicking on an item in the table */
+  onPreviewOpen?: () => void;
+  /** Called when the preview is closed */
+  onPreviewClose?: () => void;
+}
+
+export declare const NameCell: FC<NameCellProps>;
+
+export declare interface NameCellProps extends TruncateProps {
+  mediaType?: MediaType;
+}
+
+declare interface RowData {
+  [key: string]: string | React.ReactNode;
+}
+
+declare interface RowProps {
+  className?: string;
+}
+
+export { SortOrderType };
+
+export {};
+```

package/dist/cjs/component/styled.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TruncateWrapper = exports.NameCellWrapper = exports.MediaTableWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject, _templateObject2, _templateObject3;
-
-var NameCellWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n"])));
-
-exports.NameCellWrapper = NameCellWrapper;
-
-var TruncateWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 0;\n  width: 100%;\n  margin-left: 4px;\n\n  span:first-of-type {\n    &::first-letter {\n      text-transform: capitalize;\n    }\n  }\n"])));
-
-exports.TruncateWrapper = TruncateWrapper;
-
-var MediaTableWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  tr {\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])), _colors.N20);
-
-exports.MediaTableWrapper = MediaTableWrapper;

package/dist/esm/component/styled.js

@@ -1,9 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
-
-import styled from 'styled-components';
-import { N20 } from '@atlaskit/theme/colors';
-export var NameCellWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n"])));
-export var TruncateWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 0;\n  width: 100%;\n  margin-left: 4px;\n\n  span:first-of-type {\n    &::first-letter {\n      text-transform: capitalize;\n    }\n  }\n"])));
-export var MediaTableWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  tr {\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])), N20);

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const NameCellWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TruncateWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const MediaTableWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;