@atlaskit/media-table 13.0.2 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/media-table
 
+## 14.1.0
+
+### Minor Changes
+
+- [`2c1a0c45a0b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c1a0c45a0b) - [ux] Instrumented `@atlaskit/media-table` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`7fc3932cc78`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7fc3932cc78) - [ux] Removed hover and focus state styling as the base component applies those already.
+- Updated dependencies
+
+## 14.0.0
+
+### Major Changes
+
+- [`64a9be7d742`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64a9be7d742) - [ux] Add a preconfiguration for columns with the key 'preview' to display a media preview button
+
+### Minor Changes
+
+- [`692477d9854`](https://bitbucket.org/atlassian/atlassian-frontend/commits/692477d9854) - [ux] Adds row selection & row highlighting to media table component
+
+### Patch Changes
+
+- [`153829bfcb3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/153829bfcb3) - Upgrade caching algorithm library lru-fast to lru_map.
+- Updated dependencies
+
 ## 13.0.2
 
 ### Patch Changes

package/dist/cjs/component/downloadButton.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -54,7 +56,7 @@ var MediaDownloadButton = function MediaDownloadButton(props) {
         buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
           minWidth: 'max-content',
           '&:hover': {
-            background: _colors.N40
+            background: (0, _tokens.token)('color.background.neutral.hovered', _colors.N40)
           }
         }),
         spinnerStyles: current(themeProps).spinnerStyles

package/dist/cjs/component/mediaTable.js

@@ -45,6 +45,8 @@ var _styles = require("./styles");
 
 var _downloadButton = _interopRequireDefault(require("./downloadButton"));
 
+var _previewButton = _interopRequireDefault(require("./previewButton"));
+
 var _util = require("../util");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -94,6 +96,8 @@ var MediaTable = /*#__PURE__*/function (_Component) {
       columns.cells.forEach(function (cell) {
         var content = cell.key === _util.CELL_KEY_DOWNLOAD ? (0, _react.jsx)(_downloadButton.default, {
           onClick: _this.onDownloadClick(identifier)
+        }) : cell.key === _util.CELL_KEY_PREVIEW ? (0, _react.jsx)(_previewButton.default, {
+          onClick: _this.onPreviewClick(identifier)
         }) : cell.key && data[cell.key] || '';
         cellValues.push({
           key: cell.key,
@@ -113,6 +117,13 @@ var MediaTable = /*#__PURE__*/function (_Component) {
         mediaClient.file.downloadBinary(id, nameInfo ? nameInfo.fileName : '', collectionName);
       };
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPreviewClick", function (identifier) {
+      return function (event) {
+        event.stopPropagation();
+
+        _this.openPreview(identifier);
+      };
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSort", function (data) {
       var onSort = _this.props.onSort;
       var key = data.key,
@@ -124,7 +135,7 @@ var MediaTable = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           items = _this$props.items,
           columns = _this$props.columns;
-      var rowValues = items.map(function (item) {
+      var rowValues = items.map(function (item, index) {
         var data = item.data,
             identifier = item.identifier,
             rowProps = item.rowProps;
@@ -132,10 +143,10 @@ var MediaTable = /*#__PURE__*/function (_Component) {
           cells: _this.generateCellValues(data, identifier),
           key: identifier.id,
           tabIndex: 0,
-          onClick: _this.onRowClick(identifier),
+          onClick: _this.onRowClick(identifier, data, index),
           onKeyPress: function onKeyPress(event) {
             if (event.key === 'Enter') {
-              _this.onRowEnterKeyPressed(identifier);
+              _this.onRowEnterKeyPressed(identifier, data, index);
             }
           }
         }, rowProps);
@@ -158,7 +169,8 @@ var MediaTable = /*#__PURE__*/function (_Component) {
           totalItems = _this$props2.totalItems,
           items = _this$props2.items,
           sortKey = _this$props2.sortKey,
-          sortOrder = _this$props2.sortOrder;
+          sortOrder = _this$props2.sortOrder,
+          highlightedRowIndex = _this$props2.highlightedRowIndex;
 
       var _getValidTableProps = (0, _util.getValidTableProps)(items.length, itemsPerPage, pageNumber, totalItems),
           validItemsPerPage = _getValidTableProps.validItemsPerPage,
@@ -178,7 +190,8 @@ var MediaTable = /*#__PURE__*/function (_Component) {
         sortOrder: sortOrder,
         onSort: _this.onSort,
         onSetPage: onSetPage,
-        isFixedSize: true
+        isFixedSize: true,
+        highlightedRowIndex: highlightedRowIndex
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openPreview", function (identifier) {
@@ -190,8 +203,10 @@ var MediaTable = /*#__PURE__*/function (_Component) {
 
       onPreviewOpen && onPreviewOpen();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRowEnterKeyPressed", function (identifier) {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRowEnterKeyPressed", function (identifier, data, index) {
+      var _this$props3 = _this.props,
+          createAnalyticsEvent = _this$props3.createAnalyticsEvent,
+          onRowClick = _this$props3.onRowClick;
       var ev = createAnalyticsEvent({
         eventType: 'ui',
         action: 'keyPressed',
@@ -199,12 +214,17 @@ var MediaTable = /*#__PURE__*/function (_Component) {
         actionSubjectId: 'mediaFileRow'
       });
       ev.fire(_util.ANALYTICS_MEDIA_CHANNEL);
+      var shouldPreventDefaultRowClick = onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, index);
 
-      _this.openPreview(identifier);
+      if (!shouldPreventDefaultRowClick) {
+        _this.openPreview(identifier);
+      }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRowClick", function (identifier) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRowClick", function (identifier, data, index) {
       return function () {
-        var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+        var _this$props4 = _this.props,
+            createAnalyticsEvent = _this$props4.createAnalyticsEvent,
+            onRowClick = _this$props4.onRowClick;
         var ev = createAnalyticsEvent({
           eventType: 'ui',
           action: 'clicked',
@@ -212,8 +232,11 @@ var MediaTable = /*#__PURE__*/function (_Component) {
           actionSubjectId: 'mediaFileRow'
         });
         ev.fire(_util.ANALYTICS_MEDIA_CHANNEL);
+        var shouldPreventDefaultRowClick = onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, index);
 
-        _this.openPreview(identifier);
+        if (!shouldPreventDefaultRowClick) {
+          _this.openPreview(identifier);
+        }
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "safeSetState", function (state) {
@@ -232,9 +255,9 @@ var MediaTable = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaViewer", function () {
       var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props3 = _this.props,
-          mediaClient = _this$props3.mediaClient,
-          items = _this$props3.items;
+      var _this$props5 = _this.props,
+          mediaClient = _this$props5.mediaClient,
+          items = _this$props5.items;
 
       if (!mediaViewerSelectedItem) {
         return null;
@@ -263,9 +286,9 @@ var MediaTable = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       this.hasBeenMounted = true;
-      var _this$props4 = this.props,
-          items = _this$props4.items,
-          mediaClient = _this$props4.mediaClient;
+      var _this$props6 = this.props,
+          items = _this$props6.items,
+          mediaClient = _this$props6.mediaClient;
       items.forEach( /*#__PURE__*/function () {
         var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(item) {
           var _item$identifier, id, _item$identifier$coll, collectionName, subscription;

package/dist/cjs/component/previewButton.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _util = require("../util");
+
+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; }
+
+var MediaPreviewButton = function MediaPreviewButton(props) {
+  var _onClick = props.onClick,
+      formatMessage = props.intl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    appearance: "subtle",
+    testId: "preview-button",
+    iconAfter: /*#__PURE__*/_react.default.createElement(_filePreview.default, {
+      label: formatMessage(_mediaUi.messages.preview)
+    }),
+    onKeyPress: function onKeyPress(event) {
+      return event.stopPropagation();
+    },
+    onClick: function onClick(event, analyticsEvent) {
+      analyticsEvent.update(function (payload) {
+        return _objectSpread(_objectSpread({}, payload), {}, {
+          eventType: 'ui',
+          actionSubjectId: 'mediaTablePreview'
+        });
+      }).fire(_util.ANALYTICS_MEDIA_CHANNEL);
+
+      _onClick(event);
+    },
+    theme: function theme(current, themeProps) {
+      return {
+        buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
+          minWidth: 'max-content'
+        }),
+        spinnerStyles: current(themeProps).spinnerStyles
+      };
+    }
+  });
+};
+
+var _default = (0, _reactIntlNext.injectIntl)(MediaPreviewButton);
+
+exports.default = _default;

package/dist/cjs/component/styles.js

@@ -11,13 +11,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 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);
+var mediaTableWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  tr {\n    cursor: pointer;\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])));
 exports.mediaTableWrapperStyles = mediaTableWrapperStyles;

package/dist/cjs/util/constants.js

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

package/dist/cjs/util/generateHeadValues.js

@@ -20,7 +20,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var generateHeadValues = (0, _memoizeOne.default)(function (columns) {
   return {
     cells: columns.cells.map(function (cell) {
-      return cell.key === _constants.CELL_KEY_DOWNLOAD ? _objectSpread({
+      return cell.key === _constants.CELL_KEY_DOWNLOAD || cell.key === _constants.CELL_KEY_PREVIEW ? _objectSpread({
         style: {
           width: '48px'
         }

package/dist/cjs/util/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "CELL_KEY_DOWNLOAD", {
     return _constants.CELL_KEY_DOWNLOAD;
   }
 });
+Object.defineProperty(exports, "CELL_KEY_PREVIEW", {
+  enumerable: true,
+  get: function get() {
+    return _constants.CELL_KEY_PREVIEW;
+  }
+});
 Object.defineProperty(exports, "generateHeadValues", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

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

package/dist/es2019/component/downloadButton.js

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { injectIntl } from 'react-intl-next';
@@ -33,7 +34,7 @@ const MediaDownloadButton = props => {
       buttonStyles: { ...current(themeProps).buttonStyles,
         minWidth: 'max-content',
         '&:hover': {
-          background: N40
+          background: token('color.background.neutral.hovered', N40)
         }
       },
       spinnerStyles: current(themeProps).spinnerStyles

package/dist/es2019/component/mediaTable.js

@@ -11,7 +11,8 @@ import { isFileIdentifier, withMediaClient, isProcessedFileState } from '@atlask
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { mediaTableWrapperStyles } from './styles';
 import DownloadButton from './downloadButton';
-import { generateRowValues, getValidTableProps, generateHeadValues, CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from '../util';
+import PreviewButton from './previewButton';
+import { generateRowValues, getValidTableProps, generateHeadValues, CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW, ANALYTICS_MEDIA_CHANNEL } from '../util';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 export class MediaTable extends Component {
   constructor(...args) {
@@ -38,6 +39,8 @@ export class MediaTable extends Component {
       columns.cells.forEach(cell => {
         const content = cell.key === CELL_KEY_DOWNLOAD ? jsx(DownloadButton, {
           onClick: this.onDownloadClick(identifier)
+        }) : cell.key === CELL_KEY_PREVIEW ? jsx(PreviewButton, {
+          onClick: this.onPreviewClick(identifier)
         }) : cell.key && data[cell.key] || '';
         cellValues.push({
           key: cell.key,
@@ -63,6 +66,11 @@ export class MediaTable extends Component {
       mediaClient.file.downloadBinary(id, nameInfo ? nameInfo.fileName : '', collectionName);
     });
 
+    _defineProperty(this, "onPreviewClick", identifier => event => {
+      event.stopPropagation();
+      this.openPreview(identifier);
+    });
+
     _defineProperty(this, "onSort", data => {
       const {
         onSort
@@ -80,7 +88,7 @@ export class MediaTable extends Component {
         items,
         columns
       } = this.props;
-      const rowValues = items.map(item => {
+      const rowValues = items.map((item, index) => {
         const {
           data,
           identifier,
@@ -90,10 +98,10 @@ export class MediaTable extends Component {
           cells: this.generateCellValues(data, identifier),
           key: identifier.id,
           tabIndex: 0,
-          onClick: this.onRowClick(identifier),
+          onClick: this.onRowClick(identifier, data, index),
           onKeyPress: event => {
             if (event.key === 'Enter') {
-              this.onRowEnterKeyPressed(identifier);
+              this.onRowEnterKeyPressed(identifier, data, index);
             }
           },
           ...rowProps
@@ -118,7 +126,8 @@ export class MediaTable extends Component {
         totalItems,
         items,
         sortKey,
-        sortOrder
+        sortOrder,
+        highlightedRowIndex
       } = this.props;
       const {
         validItemsPerPage,
@@ -138,7 +147,8 @@ export class MediaTable extends Component {
         sortOrder: sortOrder,
         onSort: this.onSort,
         onSetPage: onSetPage,
-        isFixedSize: true
+        isFixedSize: true,
+        highlightedRowIndex: highlightedRowIndex
       });
     });
 
@@ -152,9 +162,10 @@ export class MediaTable extends Component {
       onPreviewOpen && onPreviewOpen();
     });
 
-    _defineProperty(this, "onRowEnterKeyPressed", identifier => {
+    _defineProperty(this, "onRowEnterKeyPressed", (identifier, data, index) => {
       const {
-        createAnalyticsEvent
+        createAnalyticsEvent,
+        onRowClick
       } = this.props;
       const ev = createAnalyticsEvent({
         eventType: 'ui',
@@ -163,12 +174,17 @@ export class MediaTable extends Component {
         actionSubjectId: 'mediaFileRow'
       });
       ev.fire(ANALYTICS_MEDIA_CHANNEL);
-      this.openPreview(identifier);
+      const shouldPreventDefaultRowClick = onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, index);
+
+      if (!shouldPreventDefaultRowClick) {
+        this.openPreview(identifier);
+      }
     });
 
-    _defineProperty(this, "onRowClick", identifier => () => {
+    _defineProperty(this, "onRowClick", (identifier, data, index) => () => {
       const {
-        createAnalyticsEvent
+        createAnalyticsEvent,
+        onRowClick
       } = this.props;
       const ev = createAnalyticsEvent({
         eventType: 'ui',
@@ -177,7 +193,11 @@ export class MediaTable extends Component {
         actionSubjectId: 'mediaFileRow'
       });
       ev.fire(ANALYTICS_MEDIA_CHANNEL);
-      this.openPreview(identifier);
+      const shouldPreventDefaultRowClick = onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, index);
+
+      if (!shouldPreventDefaultRowClick) {
+        this.openPreview(identifier);
+      }
     });
 
     _defineProperty(this, "safeSetState", state => {

package/dist/es2019/component/previewButton.js

@@ -0,0 +1,40 @@
+import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { injectIntl } from 'react-intl-next';
+import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
+import Button from '@atlaskit/button/custom-theme-button';
+import { messages } from '@atlaskit/media-ui'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { ANALYTICS_MEDIA_CHANNEL } from '../util';
+
+const MediaPreviewButton = props => {
+  const {
+    onClick,
+    intl: {
+      formatMessage
+    }
+  } = props;
+  return /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    testId: "preview-button",
+    iconAfter: /*#__PURE__*/React.createElement(EditorFilePreviewIcon, {
+      label: formatMessage(messages.preview)
+    }),
+    onKeyPress: event => event.stopPropagation(),
+    onClick: (event, analyticsEvent) => {
+      analyticsEvent.update(payload => ({ ...payload,
+        eventType: 'ui',
+        actionSubjectId: 'mediaTablePreview'
+      })).fire(ANALYTICS_MEDIA_CHANNEL);
+      onClick(event);
+    },
+    theme: (current, themeProps) => ({
+      buttonStyles: { ...current(themeProps).buttonStyles,
+        minWidth: 'max-content'
+      },
+      spinnerStyles: current(themeProps).spinnerStyles
+    })
+  });
+};
+
+export default injectIntl(MediaPreviewButton);

package/dist/es2019/component/styles.js

@@ -1,5 +1,4 @@
 import { css } from '@emotion/react';
-import { N20 } from '@atlaskit/theme/colors';
 export const nameCellWrapperStyles = css`
   display: flex;
   align-content: center;
@@ -20,10 +19,6 @@ export const mediaTableWrapperStyles = css`
   tr {
     cursor: pointer;
 
-    &:hover {
-      background: ${N20};
-    }
-
     td:empty {
       padding: 0;
     }

package/dist/es2019/util/constants.js

@@ -1,2 +1,3 @@
 export const CELL_KEY_DOWNLOAD = 'download';
+export const CELL_KEY_PREVIEW = 'preview';
 export const ANALYTICS_MEDIA_CHANNEL = 'media';

package/dist/es2019/util/generateHeadValues.js

@@ -1,7 +1,7 @@
 import memoizeOne from 'memoize-one';
-import { CELL_KEY_DOWNLOAD } from './constants';
+import { CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW } from './constants';
 const generateHeadValues = memoizeOne(columns => ({
-  cells: columns.cells.map(cell => cell.key === CELL_KEY_DOWNLOAD ? {
+  cells: columns.cells.map(cell => cell.key === CELL_KEY_DOWNLOAD || cell.key === CELL_KEY_PREVIEW ? {
     style: {
       width: '48px'
     },

package/dist/es2019/util/index.js

@@ -1,4 +1,4 @@
 export { default as generateRowValues } from './generateRowValues';
 export { default as getValidTableProps } from './getValidTableProps';
 export { default as generateHeadValues } from './generateHeadValues';
-export { CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from './constants';
+export { CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW, ANALYTICS_MEDIA_CHANNEL } from './constants';

package/dist/es2019/version.json

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

package/dist/esm/component/downloadButton.js

@@ -4,6 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+import { token } from '@atlaskit/tokens';
 import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { injectIntl } from 'react-intl-next';
@@ -41,7 +42,7 @@ var MediaDownloadButton = function MediaDownloadButton(props) {
         buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
           minWidth: 'max-content',
           '&:hover': {
-            background: N40
+            background: token('color.background.neutral.hovered', N40)
           }
         }),
         spinnerStyles: current(themeProps).spinnerStyles

package/dist/esm/component/mediaTable.js

@@ -27,7 +27,8 @@ import { isFileIdentifier, withMediaClient, isProcessedFileState } from '@atlask
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { mediaTableWrapperStyles } from './styles';
 import DownloadButton from './downloadButton';
-import { generateRowValues, getValidTableProps, generateHeadValues, CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from '../util';
+import PreviewButton from './previewButton';
+import { generateRowValues, getValidTableProps, generateHeadValues, CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW, ANALYTICS_MEDIA_CHANNEL } from '../util';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 export var MediaTable = /*#__PURE__*/function (_Component) {
   _inherits(MediaTable, _Component);
@@ -67,6 +68,8 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
       columns.cells.forEach(function (cell) {
         var content = cell.key === CELL_KEY_DOWNLOAD ? jsx(DownloadButton, {
           onClick: _this.onDownloadClick(identifier)
+        }) : cell.key === CELL_KEY_PREVIEW ? jsx(PreviewButton, {
+          onClick: _this.onPreviewClick(identifier)
         }) : cell.key && data[cell.key] || '';
         cellValues.push({
           key: cell.key,
@@ -88,6 +91,14 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onPreviewClick", function (identifier) {
+      return function (event) {
+        event.stopPropagation();
+
+        _this.openPreview(identifier);
+      };
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onSort", function (data) {
       var onSort = _this.props.onSort;
       var key = data.key,
@@ -100,7 +111,7 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
           items = _this$props.items,
           columns = _this$props.columns;
-      var rowValues = items.map(function (item) {
+      var rowValues = items.map(function (item, index) {
         var data = item.data,
             identifier = item.identifier,
             rowProps = item.rowProps;
@@ -108,10 +119,10 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
           cells: _this.generateCellValues(data, identifier),
           key: identifier.id,
           tabIndex: 0,
-          onClick: _this.onRowClick(identifier),
+          onClick: _this.onRowClick(identifier, data, index),
           onKeyPress: function onKeyPress(event) {
             if (event.key === 'Enter') {
-              _this.onRowEnterKeyPressed(identifier);
+              _this.onRowEnterKeyPressed(identifier, data, index);
             }
           }
         }, rowProps);
@@ -135,7 +146,8 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
           totalItems = _this$props2.totalItems,
           items = _this$props2.items,
           sortKey = _this$props2.sortKey,
-          sortOrder = _this$props2.sortOrder;
+          sortOrder = _this$props2.sortOrder,
+          highlightedRowIndex = _this$props2.highlightedRowIndex;
 
       var _getValidTableProps = getValidTableProps(items.length, itemsPerPage, pageNumber, totalItems),
           validItemsPerPage = _getValidTableProps.validItemsPerPage,
@@ -155,7 +167,8 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
         sortOrder: sortOrder,
         onSort: _this.onSort,
         onSetPage: onSetPage,
-        isFixedSize: true
+        isFixedSize: true,
+        highlightedRowIndex: highlightedRowIndex
       });
     });
 
@@ -169,8 +182,10 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
       onPreviewOpen && onPreviewOpen();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onRowEnterKeyPressed", function (identifier) {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+    _defineProperty(_assertThisInitialized(_this), "onRowEnterKeyPressed", function (identifier, data, index) {
+      var _this$props3 = _this.props,
+          createAnalyticsEvent = _this$props3.createAnalyticsEvent,
+          onRowClick = _this$props3.onRowClick;
       var ev = createAnalyticsEvent({
         eventType: 'ui',
         action: 'keyPressed',
@@ -178,13 +193,18 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
         actionSubjectId: 'mediaFileRow'
       });
       ev.fire(ANALYTICS_MEDIA_CHANNEL);
+      var shouldPreventDefaultRowClick = onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, index);
 
-      _this.openPreview(identifier);
+      if (!shouldPreventDefaultRowClick) {
+        _this.openPreview(identifier);
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onRowClick", function (identifier) {
+    _defineProperty(_assertThisInitialized(_this), "onRowClick", function (identifier, data, index) {
       return function () {
-        var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+        var _this$props4 = _this.props,
+            createAnalyticsEvent = _this$props4.createAnalyticsEvent,
+            onRowClick = _this$props4.onRowClick;
         var ev = createAnalyticsEvent({
           eventType: 'ui',
           action: 'clicked',
@@ -192,8 +212,11 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
           actionSubjectId: 'mediaFileRow'
         });
         ev.fire(ANALYTICS_MEDIA_CHANNEL);
+        var shouldPreventDefaultRowClick = onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data, index);
 
-        _this.openPreview(identifier);
+        if (!shouldPreventDefaultRowClick) {
+          _this.openPreview(identifier);
+        }
       };
     });
 
@@ -215,9 +238,9 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderMediaViewer", function () {
       var mediaViewerSelectedItem = _this.state.mediaViewerSelectedItem;
-      var _this$props3 = _this.props,
-          mediaClient = _this$props3.mediaClient,
-          items = _this$props3.items;
+      var _this$props5 = _this.props,
+          mediaClient = _this$props5.mediaClient,
+          items = _this$props5.items;
 
       if (!mediaViewerSelectedItem) {
         return null;
@@ -247,9 +270,9 @@ export var MediaTable = /*#__PURE__*/function (_Component) {
       var _this2 = this;
 
       this.hasBeenMounted = true;
-      var _this$props4 = this.props,
-          items = _this$props4.items,
-          mediaClient = _this$props4.mediaClient;
+      var _this$props6 = this.props,
+          items = _this$props6.items,
+          mediaClient = _this$props6.mediaClient;
       items.forEach( /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
           var _item$identifier, id, _item$identifier$coll, collectionName, subscription;

package/dist/esm/component/previewButton.js

@@ -0,0 +1,49 @@
+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; }
+
+import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { injectIntl } from 'react-intl-next';
+import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
+import Button from '@atlaskit/button/custom-theme-button';
+import { messages } from '@atlaskit/media-ui'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { ANALYTICS_MEDIA_CHANNEL } from '../util';
+
+var MediaPreviewButton = function MediaPreviewButton(props) {
+  var _onClick = props.onClick,
+      formatMessage = props.intl.formatMessage;
+  return /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    testId: "preview-button",
+    iconAfter: /*#__PURE__*/React.createElement(EditorFilePreviewIcon, {
+      label: formatMessage(messages.preview)
+    }),
+    onKeyPress: function onKeyPress(event) {
+      return event.stopPropagation();
+    },
+    onClick: function onClick(event, analyticsEvent) {
+      analyticsEvent.update(function (payload) {
+        return _objectSpread(_objectSpread({}, payload), {}, {
+          eventType: 'ui',
+          actionSubjectId: 'mediaTablePreview'
+        });
+      }).fire(ANALYTICS_MEDIA_CHANNEL);
+
+      _onClick(event);
+    },
+    theme: function theme(current, themeProps) {
+      return {
+        buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
+          minWidth: 'max-content'
+        }),
+        spinnerStyles: current(themeProps).spinnerStyles
+      };
+    }
+  });
+};
+
+export default injectIntl(MediaPreviewButton);

package/dist/esm/component/styles.js

@@ -3,7 +3,6 @@ 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);
+export var mediaTableWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  tr {\n    cursor: pointer;\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])));

package/dist/esm/util/constants.js

@@ -1,2 +1,3 @@
 export var CELL_KEY_DOWNLOAD = 'download';
+export var CELL_KEY_PREVIEW = 'preview';
 export var ANALYTICS_MEDIA_CHANNEL = 'media';

package/dist/esm/util/generateHeadValues.js

@@ -5,11 +5,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 import memoizeOne from 'memoize-one';
-import { CELL_KEY_DOWNLOAD } from './constants';
+import { CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW } from './constants';
 var generateHeadValues = memoizeOne(function (columns) {
   return {
     cells: columns.cells.map(function (cell) {
-      return cell.key === CELL_KEY_DOWNLOAD ? _objectSpread({
+      return cell.key === CELL_KEY_DOWNLOAD || cell.key === CELL_KEY_PREVIEW ? _objectSpread({
         style: {
           width: '48px'
         }

package/dist/esm/util/index.js

@@ -1,4 +1,4 @@
 export { default as generateRowValues } from './generateRowValues';
 export { default as getValidTableProps } from './getValidTableProps';
 export { default as generateHeadValues } from './generateHeadValues';
-export { CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from './constants';
+export { CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW, ANALYTICS_MEDIA_CHANNEL } from './constants';

package/dist/esm/version.json

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

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

@@ -12,6 +12,7 @@ export declare class MediaTable extends Component<MediaTableProps & WrappedCompo
     componentWillUnmount(): void;
     private generateCellValues;
     private onDownloadClick;
+    private onPreviewClick;
     private onSort;
     private renderRowValues;
     private renderTable;

package/dist/types/types.d.ts

@@ -57,6 +57,10 @@ export interface MediaTableProps {
     onPreviewOpen?: () => void;
     /** Called when the preview is closed */
     onPreviewClose?: () => void;
+    /** Row index that will be highlighted **/
+    highlightedRowIndex?: number[];
+    /** callback triggered when row click is passed, if returned true it will prevent default behaviour. **/
+    onRowClick?: (rowData: RowData, index: number) => boolean;
 }
 export interface MediaTableState {
     mediaViewerSelectedItem?: Identifier;

package/dist/types/util/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const CELL_KEY_DOWNLOAD = "download";
+export declare const CELL_KEY_PREVIEW = "preview";
 export declare const ANALYTICS_MEDIA_CHANNEL = "media";

package/dist/types/util/index.d.ts

@@ -1,4 +1,4 @@
 export { default as generateRowValues } from './generateRowValues';
 export { default as getValidTableProps } from './getValidTableProps';
 export { default as generateHeadValues } from './generateHeadValues';
-export { CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from './constants';
+export { CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW, ANALYTICS_MEDIA_CHANNEL, } from './constants';

package/example-helpers/styles.tsx

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -12,20 +13,26 @@ export const exampleWrapperStyles = css`
   align-items: center;
 
   .${ROW_HIGHLIGHT_CLASSNAME} {
-    background-color: ${colors.Y50};
+    background-color: ${token('color.background.warning', colors.Y50)};
 
     &:hover {
-      background-color: ${colors.Y75};
+      background-color: ${token(
+        'color.background.warning.hovered',
+        colors.Y75,
+      )};
     }
   }
 `;
 
 export const greenOnHoverStyles = css`
-  background-color: red;
+  background-color: ${token('color.background.danger.bold', 'red')};
   height: 8px;
   width: 8px;
 
   .${ROW_CLASSNAME}:hover & {
-    background-color: green;
+    background-color: ${token(
+      'color.background.success.bold.hovered',
+      'green',
+    )};
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-table",
-  "version": "13.0.2",
+  "version": "14.1.0",
   "description": "Table UI component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,13 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "af:exports": {
@@ -34,19 +27,20 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/dynamic-table": "^14.8.0",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-client": "^17.1.0",
-    "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^47.1.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/media-client": "^19.0.0",
+    "@atlaskit/media-ui": "^22.2.0",
+    "@atlaskit/media-viewer": "^47.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tokens": "^0.11.1",
+    "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^33.0.3",
+    "@atlaskit/media-core": "^34.0.0",
     "@emotion/react": "^11.7.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
@@ -55,10 +49,10 @@
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/icon-file-type": "^6.3.0",
-    "@atlaskit/media-common": "^2.16.0",
-    "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/media-common": "^2.17.0",
+    "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
-    "@atlaskit/range": "^6.0.0",
+    "@atlaskit/range": "^7.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",
@@ -68,8 +62,11 @@
     "react-dom": "^16.8.0",
     "typescript": "4.5.5"
   },
-  "resolutions": {
-    "lru-fast": "0.2.2"
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
   },
+  "resolutions": {},
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -1,6 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/media-table"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -19,67 +30,74 @@ 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 {
+// @public (undocumented)
+export const MediaTable: React_2.ComponentType<
+  WithMediaClientConfigProps<
+    Omit<
+      React_2.PropsWithChildren<
+        WithIntlProps<MediaTableProps & WrappedComponentProps<'intl'>>
+      >,
+      keyof WithAnalyticsEventsProps
+    > &
+      React_2.RefAttributes<any>
+  >
+>;
+
+// @public (undocumented)
+export interface MediaTableItem {
+  // (undocumented)
   data: RowData;
+  // (undocumented)
   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 */
+// @public (undocumented)
+export interface MediaTableProps {
   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 */
+  // (undocumented)
+  createAnalyticsEvent: CreateUIAnalyticsEvent;
+  highlightedRowIndex?: number[];
+  isLoading?: boolean;
+  items: MediaTableItem[];
   itemsPerPage?: number;
-  /** The current page number */
+  // (undocumented)
+  mediaClient: MediaClient;
+  onPreviewClose?: () => void;
+  onPreviewOpen?: () => void;
+  onRowClick?: (rowData: RowData, index: number) => boolean;
+  onSetPage?: (pageNumber: number) => void;
+  onSort?: (key: string, sortOrder: SortOrderType) => void;
   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;
+  totalItems: number;
 }
 
-export declare const NameCell: FC<NameCellProps>;
+// @public (undocumented)
+export const NameCell: FC<NameCellProps>;
 
-export declare interface NameCellProps extends TruncateProps {
+// @public (undocumented)
+export interface NameCellProps extends TruncateProps {
+  // (undocumented)
   mediaType?: MediaType;
 }
 
-declare interface RowData {
-  [key: string]: string | React.ReactNode;
+// @public (undocumented)
+interface RowData {
+  // (undocumented)
+  [key: string]: React.ReactNode | string;
 }
 
-declare interface RowProps {
+// @public (undocumented)
+interface RowProps {
+  // (undocumented)
   className?: string;
 }
 
 export { SortOrderType };
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/types-ts4.0/component/mediaTable.d.ts

@@ -1,27 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import React, { Component } from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { MediaTableProps, MediaTableState } from '../types';
-export declare class MediaTable extends Component<MediaTableProps & WrappedComponentProps, MediaTableState> {
-    state: MediaTableState;
-    private subscriptions;
-    private hasBeenMounted;
-    componentDidMount(): void;
-    private unsubscribe;
-    componentWillUnmount(): void;
-    private generateCellValues;
-    private onDownloadClick;
-    private onSort;
-    private renderRowValues;
-    private renderTable;
-    private openPreview;
-    private onRowEnterKeyPressed;
-    private onRowClick;
-    private safeSetState;
-    private onMediaViewerClose;
-    private renderMediaViewer;
-    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-ts4.0/component/nameCell.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { MediaType } from '@atlaskit/media-client';
-import { TruncateProps } from '@atlaskit/media-ui/truncateText';
-export interface NameCellProps extends TruncateProps {
-    mediaType?: MediaType;
-}
-export declare const NameCell: FC<NameCellProps>;

package/dist/types-ts4.0/component/styles.d.ts

@@ -1,3 +0,0 @@
-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/dist/types-ts4.0/index.d.ts

@@ -1,4 +0,0 @@
-export { default as MediaTable } from './component/mediaTable';
-export type { MediaTableProps, MediaTableItem, SortOrderType } from './types';
-export { NameCell } from './component/nameCell';
-export type { NameCellProps } from './component/nameCell';

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

@@ -1,69 +0,0 @@
-/// <reference types="react" />
-import { Identifier, FileIdentifier, MediaClient } from '@atlaskit/media-client';
-import { HeadType } from '@atlaskit/dynamic-table/types';
-import { SortOrderType } from '@atlaskit/dynamic-table/types';
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-export type { SortOrderType };
-export interface FileInfo {
-    fileName: string;
-    id: string;
-}
-export interface RowData {
-    [key: string]: string | React.ReactNode;
-}
-export interface RowProps {
-    className?: string;
-}
-export interface MediaTableItem {
-    data: RowData;
-    identifier: FileIdentifier;
-    /** An object containing props that will be applied to the row component */
-    rowProps?: RowProps;
-}
-export interface OnSortData {
-    key: string;
-    sortOrder: SortOrderType;
-    item: {
-        content: React.ReactNode | string;
-        isSortable: boolean;
-        key: string;
-        width: number;
-    };
-}
-export 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 interface MediaTableState {
-    mediaViewerSelectedItem?: Identifier;
-    fileInfoState: Map<string, FileInfo>;
-}
-export interface ValidatedProps {
-    validPageNumber: number;
-    validTotalItems: number;
-    validItemsPerPage: number;
-}

package/dist/types-ts4.0/util/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const CELL_KEY_DOWNLOAD = "download";
-export declare const ANALYTICS_MEDIA_CHANNEL = "media";

package/dist/types-ts4.0/util/generateHeadValues.d.ts

@@ -1,3 +0,0 @@
-import { HeadType } from '@atlaskit/dynamic-table/types';
-declare const _default: import("memoize-one").MemoizedFn<import("memoize-one").MemoizedFn<(columns: HeadType) => HeadType>>;
-export default _default;

package/dist/types-ts4.0/util/generateRowValues.d.ts

@@ -1,11 +0,0 @@
-import { RowType, HeadCellType, RowCellType } from '@atlaskit/dynamic-table/types';
-export declare const generateEmptyRow: import("memoize-one").MemoizedFn<(headerCells: HeadCellType[]) => RowCellType[]>;
-export declare const prependRows: import("memoize-one").MemoizedFn<(emptyCells: RowCellType[], itemsPerPage?: number | undefined, pageNumber?: number | undefined) => RowType[]>;
-export declare const appendRows: import("memoize-one").MemoizedFn<(emptyCells: RowCellType[], rowsLength: number, itemsPerPage?: number | undefined, pageNumber?: number | undefined, totalItems?: number | undefined) => RowType[]>;
-export default function generateRowValues({ itemsPerPage, pageNumber, totalItems, rowValues, headerCells, }: {
-    itemsPerPage?: number;
-    pageNumber?: number;
-    totalItems?: number;
-    rowValues: RowType[];
-    headerCells: HeadCellType[];
-}): RowType[];

package/dist/types-ts4.0/util/getValidTableProps.d.ts

@@ -1,3 +0,0 @@
-import { ValidatedProps } from '../types';
-declare const _default: import("memoize-one").MemoizedFn<(itemsCount: number, itemsPerPage?: number | undefined, pageNumber?: number | undefined, totalItems?: number | undefined) => ValidatedProps>;
-export default _default;

package/dist/types-ts4.0/util/index.d.ts

@@ -1,4 +0,0 @@
-export { default as generateRowValues } from './generateRowValues';
-export { default as getValidTableProps } from './getValidTableProps';
-export { default as generateHeadValues } from './generateHeadValues';
-export { CELL_KEY_DOWNLOAD, ANALYTICS_MEDIA_CHANNEL } from './constants';