@atlaskit/media-table 13.0.2 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/media-table
 
+## 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/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,68 @@
+"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 _colors = require("@atlaskit/theme/colors");
+
+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',
+          '&:hover': {
+            background: _colors.N40
+          }
+        }),
+        spinnerStyles: current(themeProps).spinnerStyles
+      };
+    }
+  });
+};
+
+var _default = (0, _reactIntlNext.injectIntl)(MediaPreviewButton);
+
+exports.default = _default;

package/dist/cjs/component/styles.js

@@ -19,5 +19,5 @@ var nameCellWrapperStyles = (0, _react.css)(_templateObject || (_templateObject
 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    &:hover,\n    &:focus {\n      background: ", ";\n    }\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])), _colors.N20);
 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.0.0",
 	"sideEffects": false
 }

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,44 @@
+import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
+
+import { injectIntl } from 'react-intl-next';
+import { N40 } from '@atlaskit/theme/colors';
+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',
+        '&:hover': {
+          background: N40
+        }
+      },
+      spinnerStyles: current(themeProps).spinnerStyles
+    })
+  });
+};
+
+export default injectIntl(MediaPreviewButton);

package/dist/es2019/component/styles.js

@@ -20,7 +20,8 @@ export const mediaTableWrapperStyles = css`
   tr {
     cursor: pointer;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background: ${N20};
     }
 

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.0.0",
 	"sideEffects": false
 }

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,53 @@
+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 { N40 } from '@atlaskit/theme/colors';
+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',
+          '&:hover': {
+            background: N40
+          }
+        }),
+        spinnerStyles: current(themeProps).spinnerStyles
+      };
+    }
+  });
+};
+
+export default injectIntl(MediaPreviewButton);

package/dist/esm/component/styles.js

@@ -6,4 +6,4 @@ 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    &:hover,\n    &:focus {\n      background: ", ";\n    }\n\n    td:empty {\n      padding: 0;\n    }\n  }\n"])), N20);

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.0.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/component/previewButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+interface Props {
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+}
+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/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/dist/types-ts4.0/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-ts4.0/component/previewButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+interface Props {
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+}
+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-ts4.0/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-ts4.0/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-ts4.0/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-table",
-  "version": "13.0.2",
+  "version": "14.0.0",
   "description": "Table UI component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,17 +36,17 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/dynamic-table": "^14.8.0",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-client": "^17.1.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/media-client": "^18.0.0",
     "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/media-viewer": "^47.1.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@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",
@@ -56,9 +56,9 @@
     "@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-core": "^34.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
-    "@atlaskit/range": "^6.0.0",
+    "@atlaskit/range": "^6.1.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 +68,6 @@
     "react-dom": "^16.8.0",
     "typescript": "4.5.5"
   },
-  "resolutions": {
-    "lru-fast": "0.2.2"
-  },
+  "resolutions": {},
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/media-table"
+## 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 by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -63,6 +65,10 @@ export declare 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 declare const NameCell: FC<NameCellProps>;