@atlaskit/media-ui 22.3.0 → 22.3.1

package/dist/cjs/truncateText.js

@@ -1,45 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.calculateTruncation = exports.TruncateRight = exports.TruncateLeft = exports.Truncate = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _templateObject, _templateObject2;
-
 var truncateCommonStyles = "\n  display: inline-block;\n  vertical-align: bottom;\n  white-space: nowrap;\n  overflow: hidden;\n";
-
 var TruncateLeft = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  max-width: calc(100% - ", "em);\n  min-width: ", ";\n  text-overflow: ellipsis;\n"])), truncateCommonStyles, function (_ref) {
   var fontSizePX = _ref.fontSizePX,
-      endFixedChars = _ref.endFixedChars;
+    endFixedChars = _ref.endFixedChars;
   return fontFaceScaleFactor(fontSizePX) * endFixedChars + 1;
 }, function (_ref2) {
   var fontSizePX = _ref2.fontSizePX,
-      startFixedChars = _ref2.startFixedChars;
+    startFixedChars = _ref2.startFixedChars;
   return fontFaceScaleFactor(fontSizePX) * startFixedChars;
 });
-
 exports.TruncateLeft = TruncateLeft;
-
 var TruncateRight = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  max-width: calc(100% - ", ");\n  position: relative;\n"])), truncateCommonStyles, function (_ref3) {
   var fontSizePX = _ref3.fontSizePX,
-      startFixedChars = _ref3.startFixedChars;
+    startFixedChars = _ref3.startFixedChars;
   return fontFaceScaleFactor(fontSizePX) * startFixedChars;
 });
-
 exports.TruncateRight = TruncateRight;
-
 var calculateTruncation = function calculateTruncation(text, startFixedChars, endFixedChars) {
   var minAllowedLength = endFixedChars + startFixedChars;
-
   if (text.length <= minAllowedLength) {
     // if no truncation return same value for left and right
     return {
@@ -47,7 +35,6 @@ var calculateTruncation = function calculateTruncation(text, startFixedChars, en
       right: text
     };
   }
-
   var splitAt = text.length - endFixedChars;
   var left = text.substr(0, splitAt);
   var right = text.substr(splitAt);
@@ -56,32 +43,25 @@ var calculateTruncation = function calculateTruncation(text, startFixedChars, en
     right: right
   };
 };
-
 exports.calculateTruncation = calculateTruncation;
-
 var fontFaceScaleFactor = function fontFaceScaleFactor(fontSizePX) {
   return fontSizePX / 11 * 0.46;
-};
-/* factor for fontSize of 11px */
-
+}; /* factor for fontSize of 11px */
 
 var Truncate = function Truncate(_ref4) {
   var text = _ref4.text,
-      _ref4$fontSizePX = _ref4.fontSizePX,
-      fontSizePX = _ref4$fontSizePX === void 0 ? 11 : _ref4$fontSizePX,
-      _ref4$startFixedChars = _ref4.startFixedChars,
-      startFixedChars = _ref4$startFixedChars === void 0 ? 4 : _ref4$startFixedChars,
-      _ref4$endFixedChars = _ref4.endFixedChars,
-      endFixedChars = _ref4$endFixedChars === void 0 ? 7 : _ref4$endFixedChars;
-
+    _ref4$fontSizePX = _ref4.fontSizePX,
+    fontSizePX = _ref4$fontSizePX === void 0 ? 11 : _ref4$fontSizePX,
+    _ref4$startFixedChars = _ref4.startFixedChars,
+    startFixedChars = _ref4$startFixedChars === void 0 ? 4 : _ref4$startFixedChars,
+    _ref4$endFixedChars = _ref4.endFixedChars,
+    endFixedChars = _ref4$endFixedChars === void 0 ? 7 : _ref4$endFixedChars;
   var _calculateTruncation = calculateTruncation(text, startFixedChars, endFixedChars),
-      leftStr = _calculateTruncation.left,
-      rightStr = _calculateTruncation.right;
-
+    leftStr = _calculateTruncation.left,
+    rightStr = _calculateTruncation.right;
   if (leftStr === rightStr) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, text);
   }
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TruncateLeft, {
     fontSizePX: fontSizePX,
     startFixedChars: startFixedChars,
@@ -92,5 +72,4 @@ var Truncate = function Truncate(_ref4) {
     endFixedChars: endFixedChars
   }, rightStr));
 };
-
 exports.Truncate = Truncate;

package/dist/cjs/util.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,74 +13,51 @@ exports.getFileInfoFromSrc = getFileInfoFromSrc;
 exports.getMimeIcon = getMimeIcon;
 exports.loadImage = loadImage;
 exports.readImageNaturalOrientationFromDOM = readImageNaturalOrientationFromDOM;
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/pdf-document/24"));
-
 var _2 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/gif/24"));
-
 var _3 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/powerpoint-presentation/24"));
-
 var _4 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/word-document/24"));
-
 var _5 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/sketch/24"));
-
 var _6 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/figma/24"));
-
 var _7 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/executable/24"));
-
 var _8 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/google-doc/24"));
-
 var _9 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/google-form/24"));
-
 var _10 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/google-sheet/24"));
-
 var _11 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/google-slide/24"));
-
 var _12 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/excel-spreadsheet/24"));
-
 var _13 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/spreadsheet/24"));
-
 var _14 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/presentation/24"));
-
 var _15 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/source-code/24"));
-
 var _codeViewer = require("./codeViewer");
-
 function dataURItoFile(dataURI) {
   var filename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'untitled';
-
   if (dataURI.length === 0) {
     throw new Error('dataURI not found');
-  } // convert base64/URLEncoded data component to raw binary data held in a string
-
+  }
 
+  // convert base64/URLEncoded data component to raw binary data held in a string
   var dataURIParts = dataURI.split(',');
-  var byteString = dataURIParts[0].indexOf('base64') >= 0 ? atob(dataURIParts[1]) : decodeURIComponent(dataURIParts[1]); // separate out the mime component
+  var byteString = dataURIParts[0].indexOf('base64') >= 0 ? atob(dataURIParts[1]) : decodeURIComponent(dataURIParts[1]);
 
+  // separate out the mime component
   var mimeString;
-
   try {
     mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
   } catch (e) {
     // https://stackoverflow.com/questions/1176022/unknown-file-type-mime
     mimeString = 'application/octet-stream';
-  } // write the bytes of the string to a typed array
-
+  }
 
+  // write the bytes of the string to a typed array
   var intArray = new Uint8Array(byteString.length);
-
   for (var i = 0; i < byteString.length; i++) {
     intArray[i] = byteString.charCodeAt(i);
   }
-
   var blob = new Blob([intArray], {
     type: mimeString
   });
-
   try {
     return new File([blob], filename, {
       type: mimeString
@@ -99,13 +75,11 @@ function dataURItoFile(dataURI) {
     return ie11File;
   }
 }
-
 function fileToDataURI(blob) {
   return new Promise(function (resolve, reject) {
     var reader = new FileReader();
     reader.addEventListener('load', function () {
       var result = reader.result;
-
       if (typeof result === 'string') {
         resolve(result);
       } else if (result === null) {
@@ -116,11 +90,9 @@ function fileToDataURI(blob) {
     reader.readAsDataURL(blob);
   });
 }
-
 function getFileInfo(_x, _x2) {
   return _getFileInfo.apply(this, arguments);
 }
-
 function _getFileInfo() {
   _getFileInfo = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, src) {
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -129,25 +101,20 @@ function _getFileInfo() {
           case 0:
             _context.t0 = file;
             _context.t1 = src;
-
             if (_context.t1) {
               _context.next = 6;
               break;
             }
-
             _context.next = 5;
             return fileToDataURI(file);
-
           case 5:
             _context.t1 = _context.sent;
-
           case 6:
             _context.t2 = _context.t1;
             return _context.abrupt("return", {
               file: _context.t0,
               src: _context.t2
             });
-
           case 8:
           case "end":
             return _context.stop();
@@ -157,11 +124,9 @@ function _getFileInfo() {
   }));
   return _getFileInfo.apply(this, arguments);
 }
-
 function getFileInfoFromSrc(_x3, _x4) {
   return _getFileInfoFromSrc.apply(this, arguments);
 }
-
 function _getFileInfoFromSrc() {
   _getFileInfoFromSrc = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(src, file) {
     return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -169,18 +134,14 @@ function _getFileInfoFromSrc() {
         switch (_context2.prev = _context2.next) {
           case 0:
             _context2.t0 = file;
-
             if (_context2.t0) {
               _context2.next = 5;
               break;
             }
-
             _context2.next = 4;
             return dataURItoFile(src);
-
           case 4:
             _context2.t0 = _context2.sent;
-
           case 5:
             _context2.t1 = _context2.t0;
             _context2.t2 = src;
@@ -188,7 +149,6 @@ function _getFileInfoFromSrc() {
               file: _context2.t1,
               src: _context2.t2
             });
-
           case 8:
           case "end":
             return _context2.stop();
@@ -198,7 +158,6 @@ function _getFileInfoFromSrc() {
   }));
   return _getFileInfoFromSrc.apply(this, arguments);
 }
-
 function fileToArrayBuffer(file) {
   return new Promise(function (resolve, reject) {
     var reader = new FileReader();
@@ -210,49 +169,38 @@ function fileToArrayBuffer(file) {
     reader.readAsArrayBuffer(file);
   });
 }
-
 function loadImage(src) {
   return new Promise(function (resolve, reject) {
     var img = new Image();
     img.src = src;
-
     img.onload = function () {
       resolve(img);
     };
-
     img.onerror = reject;
   });
 }
-
 function readImageNaturalOrientationFromDOM(img) {
   img.style.position = 'absolute';
   img.style.visibility = 'hidden';
   document.body.appendChild(img);
-
   var _img$getBoundingClien = img.getBoundingClientRect(),
-      width = _img$getBoundingClien.width,
-      height = _img$getBoundingClien.height;
-
+    width = _img$getBoundingClien.width,
+    height = _img$getBoundingClien.height;
   document.body.removeChild(img);
   return {
     width: width,
     height: height
   };
 }
-
 var findParentByClassname = function findParentByClassname(element, className) {
   var maxParentElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document.body;
-
   if (element.classList.contains(className)) {
     return element;
   }
-
   var currentElement = element;
-
   while (currentElement.parentElement !== maxParentElement) {
     if (currentElement.parentElement) {
       currentElement = currentElement.parentElement;
-
       if (currentElement.classList.contains(className)) {
         return currentElement;
       }
@@ -260,10 +208,8 @@ var findParentByClassname = function findParentByClassname(element, className) {
       return undefined;
     }
   }
-
   return undefined;
 };
-
 exports.findParentByClassname = findParentByClassname;
 var mimeTypes = [{
   label: 'pdf',
@@ -314,50 +260,48 @@ var mimeTypes = [{
   mimeTypes: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel', 'application/x-iwork-keynote-sffnumbers'],
   icon: _12.default
 }];
+
 /*
  * Returns a label and icon
  */
-
 function getMimeIcon(mimeType, fileName) {
   // based on the mimeType, determine the corresponding icon and label
   var iconInfo = mimeTypes.find(function (file) {
     return file.mimeTypes.indexOf(mimeType) > -1;
-  }); //return the appropriate icon and its label if we have it
+  });
 
+  //return the appropriate icon and its label if we have it
   if (iconInfo) {
     return iconInfo;
   }
-
   if ((0, _codeViewer.isCodeViewerItem)(fileName, mimeType)) {
     return {
       label: 'source-code',
       icon: _15.default
     };
-  } // we are not able to determine what icon to render based on the mimeType
-  // hence we render the icon based on the filename
-
+  }
 
+  // we are not able to determine what icon to render based on the mimeType
+  // hence we render the icon based on the filename
   if (fileName.match(/.*\.sketch$/)) {
     return {
       label: 'sketch',
       icon: _5.default
     };
   }
-
   if (fileName.match(/.*\.fig$/)) {
     return {
       label: 'figma',
       icon: _6.default
     };
   }
-
   if (fileName.match(/.*\.exe$/) || fileName.match(/.*\.dmg$/)) {
     return {
       label: 'executable',
       icon: _7.default
     };
-  } // cannot find a corresponding mimeType icon.
-
+  }
 
+  // cannot find a corresponding mimeType icon.
   return undefined;
 }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "22.3.0",
+	"version": "22.3.1",
 	"sideEffects": false
 }

package/dist/es2019/MediaButton.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // Keep Media buttons to use static colors from the new color palette to support the hybrid
 // theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
@@ -75,7 +74,6 @@ const buttonTheme = {
     }
   }
 };
-
 function extract(newTheme, {
   appearance,
   state,
@@ -84,9 +82,8 @@ function extract(newTheme, {
   // @ts-ignore
   if (!newTheme[appearance]) {
     return;
-  } // @ts-ignore
-
-
+  }
+  // @ts-ignore
   const root = newTheme[appearance];
   return Object.keys(root).reduce((acc, val) => {
     let node = root;
@@ -94,26 +91,24 @@ function extract(newTheme, {
       if (!node[item]) {
         return;
       }
-
       if (typeof node[item] !== 'object') {
         acc[val] = node[item];
         return;
       }
-
       node = node[item];
       return;
     });
     return acc;
   }, {});
 }
-
 export default function MediaButton({
   appearance = 'default',
   buttonRef,
   ...rest
 }) {
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
-    ref: buttonRef // Giving button the 'default' appearance so it can calculate the base styles
+    ref: buttonRef
+    // Giving button the 'default' appearance so it can calculate the base styles
     ,
     appearance: appearance,
     theme: (currentTheme, themeProps) => {
@@ -122,9 +117,11 @@ export default function MediaButton({
         ...rest
       } = currentTheme(themeProps);
       return {
-        buttonStyles: { ...buttonStyles,
+        buttonStyles: {
+          ...buttonStyles,
           // giving our extract function the real appearance value
-          ...extract(buttonTheme, { ...themeProps,
+          ...extract(buttonTheme, {
+            ...themeProps,
             appearance
           })
         },

package/dist/es2019/MediaInlineCard/ErroredView/index.js

@@ -9,7 +9,6 @@ import { NoLinkAppearance } from '../styled';
 export class MediaInlineCardErroredView extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "renderMessage", () => {
       const {
         message
@@ -18,7 +17,6 @@ export class MediaInlineCardErroredView extends React.Component {
       return /*#__PURE__*/React.createElement(React.Fragment, null, errorMessage);
     });
   }
-
   render() {
     const {
       onClick,
@@ -39,5 +37,4 @@ export class MediaInlineCardErroredView extends React.Component {
       title: this.renderMessage()
     }));
   }
-
 }

package/dist/es2019/MediaInlineCard/Frame/index.js

@@ -4,40 +4,33 @@ import { Wrapper } from './styled';
 export class Frame extends React.Component {
   constructor(...args) {
     super(...args);
-
     _defineProperty(this, "handleClick", event => {
       const {
         onClick
       } = this.props;
-
       if (onClick) {
         event.preventDefault();
         event.stopPropagation();
         onClick(event);
       }
     });
-
     _defineProperty(this, "handleKeyPress", event => {
       if (event.key !== ' ' && event.key !== 'Enter') {
         return;
       }
-
       const {
         onClick
       } = this.props;
-
       if (onClick) {
         event.preventDefault();
         event.stopPropagation();
         onClick(event);
       }
     });
-
     _defineProperty(this, "handleMouseDown", e => {
       e.preventDefault();
     });
   }
-
   render() {
     const {
       isSelected,
@@ -56,5 +49,4 @@ export class Frame extends React.Component {
       "data-testid": testId
     }, children);
   }
-
 }

package/dist/es2019/MediaInlineCard/Frame/styled.js

@@ -13,7 +13,6 @@ const selected = `
     text-decoration: none;
   }
 `;
-
 const isSelected = ({
   isSelected
 }) => {
@@ -23,6 +22,7 @@ const isSelected = ({
     return 'user-select: text';
   }
 };
+
 /*
   Media Inline cards should have the following layout:
   -----------------
@@ -35,8 +35,6 @@ const isSelected = ({
 // NB: `padding` consistent with @mentions.
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-
-
 export const Wrapper = styled.span`
   line-height: 16px;
   padding: 2px 4px 2px 4px;

package/dist/es2019/MediaInlineCard/Icon.js

@@ -1,9 +1,10 @@
-import styled from '@emotion/styled'; // TODO: Figure out a more scalable/responsive solution
+import styled from '@emotion/styled';
+
+// TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-
 export const Icon = styled.img`
   height: 14px;
   width: 14px;
@@ -14,10 +15,11 @@ export const Icon = styled.img`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-`; // Used for 'untrue' icons which claim to be 16x16 but
+`;
+
+// Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-
 export const AKIconWrapper = styled.span`
   margin-right: -2px;
 `;

package/dist/es2019/MediaInlineCard/IconAndTitleLayout/index.js

@@ -10,27 +10,21 @@ export class IconAndTitleLayout extends React.Component {
       icon,
       emoji
     } = this.props;
-
     if (emoji) {
       return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
     }
-
     if (!icon || typeof icon === 'string') {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(IconWrapper, null, icon);
   }
-
   renderImageIcon(errored, testId) {
     const {
       icon: url
     } = this.props;
-
     if (!url || typeof url !== 'string') {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(ImageLoader, {
       src: url,
       loaded: /*#__PURE__*/React.createElement(Icon, {
@@ -41,39 +35,32 @@ export class IconAndTitleLayout extends React.Component {
       errored: errored
     });
   }
-
   renderIconPlaceholder(testId) {
     const {
       defaultIcon
     } = this.props;
-
     if (defaultIcon) {
       return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
     }
-
     return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
       label: "link",
       size: "small",
       testId: `${testId}-default`
     }));
   }
-
   renderIcon(testId) {
     // We render two kinds of icons here:
     // - Image: acquired from either DAC or Teamwork Platform Apps;
     // - Atlaskit Icon: an Atlaskit SVG;
     // Each of these are scaled down to 12x12.
     const icon = this.renderAtlaskitIcon();
-
     if (icon) {
       return icon;
     }
-
     const placeholder = this.renderIconPlaceholder(testId);
     const image = this.renderImageIcon(placeholder, testId);
     return image || placeholder;
   }
-
   render() {
     const {
       children,
@@ -87,5 +74,4 @@ export class IconAndTitleLayout extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
   }
-
 }