@atlaskit/media-card 70.10.0 → 72.1.0

package/dist/types/utils/metadata.d.ts

@@ -1,2 +1,2 @@
-import { FileState, FileDetails } from '@atlaskit/media-client';
-export declare const getFileDetails: (state: FileState) => FileDetails;
+import { FileDetails, Identifier, ErrorFileState } from '@atlaskit/media-client';
+export declare const getFileDetails: (identifier: Identifier, fileState?: import("@atlaskit/media-client").UploadingFileState | import("@atlaskit/media-client").ProcessingFileState | import("@atlaskit/media-client").ProcessedFileState | ErrorFileState | import("@atlaskit/media-client").ProcessingFailedState | undefined) => FileDetails;

package/dist/types/utils/objectURLCache.d.ts

@@ -1,4 +1,4 @@
-import { CardPreview } from '../root/card/getCardPreview';
+import { CardPreview } from '../';
 export declare const PREVIEW_CACHE_LRU_SIZE = 50;
 export declare class ObjectURLCache {
     private readonly cache;
@@ -6,5 +6,6 @@ export declare class ObjectURLCache {
     has(key: string): boolean;
     get(key: string): CardPreview | undefined;
     set(key: string, value: CardPreview): void;
+    remove(key: string): void;
 }
 export declare const createObjectURLCache: () => ObjectURLCache;

package/dist/types/utils/resizeModeToMediaImageProps.d.ts

@@ -0,0 +1,5 @@
+import { ImageResizeMode } from '@atlaskit/media-client';
+export declare function resizeModeToMediaImageProps(resizeMode?: ImageResizeMode): {
+    crop: boolean;
+    stretch: boolean;
+};

package/dist/types/utils/shouldDisplayImageThumbnail.d.ts

@@ -1,3 +1,3 @@
 import { MediaItemType } from '@atlaskit/media-client';
 import { CardStatus } from '..';
-export declare const shouldDisplayImageThumbnail: (cardStatus: CardStatus, mediaItemType: MediaItemType, dataURI?: string | undefined, mediaType?: "audio" | "video" | "doc" | "image" | "archive" | "unknown" | undefined, mimeType?: string | undefined) => boolean;
+export declare const shouldDisplayImageThumbnail: (cardStatus: CardStatus, mediaItemType: MediaItemType, dataURI?: string | undefined, mediaType?: "audio" | "video" | "image" | "doc" | "archive" | "unknown" | undefined, mimeType?: string | undefined) => boolean;

package/example-helpers/developmentUseMessage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import InlineMessage from '@atlaskit/inline-message';
+
+const DevelopmentUseMessage: React.FC = () => (
+  <div style={{ textAlign: 'center' }}>
+    <InlineMessage type={'warning'} title={'Development use only'}>
+      The purpose of this example is to explore on edge cases for this
+      component's feature. Some ways of using the component in here might not be
+      the standard way. It is discouraged to use this code as a base for
+      consumers.
+    </InlineMessage>
+  </div>
+);
+export default DevelopmentUseMessage;

package/example-helpers/index.tsx

@@ -3,14 +3,22 @@
 import React from 'react';
 import { FileItem, Identifier } from '@atlaskit/media-client';
 import {
+  createPollingMaxAttemptsError,
+  createRateLimitedError,
   createStorybookMediaClientConfig,
   FeatureFlagsWrapper,
 } from '@atlaskit/media-test-helpers';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
+import FabricAnalyticsListeners, {
+  AnalyticsWebClient,
+} from '@atlaskit/analytics-listeners';
+
 import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
 import { SelectableCard } from './selectableCard';
 import { Card, CardAppearance, CardEvent, CardAction } from '../src';
 import { relevantFeatureFlagNames } from '../src/root/card/cardAnalytics';
+import { MediaCardError } from '../src/errors';
+import DevelopmentUseMessage from './developmentUseMessage';
 
 const mediaClientConfig = createStorybookMediaClientConfig();
 
@@ -116,8 +124,51 @@ export const wrongMediaClientConfig = createStorybookMediaClientConfig({
 });
 export const wrongCollection = 'adfasdf';
 
-export const MainWrapper: React.FC = ({ children }) => (
-  <FeatureFlagsWrapper filterFlags={relevantFeatureFlagNames}>
-    {children}
-  </FeatureFlagsWrapper>
+export type MainWrapperProps = {
+  developmentOnly?: boolean;
+};
+
+export const MainWrapper: React.FC<MainWrapperProps> = ({
+  children,
+  developmentOnly,
+}) => (
+  <>
+    {developmentOnly && <DevelopmentUseMessage />}
+    <FeatureFlagsWrapper filterFlags={relevantFeatureFlagNames}>
+      {children}
+    </FeatureFlagsWrapper>
+  </>
 );
+
+export const mediaCardErrorState = (
+  error?: string,
+): MediaCardError | undefined => {
+  switch (error) {
+    case 'rateLimitedError':
+      return new MediaCardError('error-file-state', createRateLimitedError());
+    case 'pollingMaxAttemptsError':
+      return new MediaCardError(
+        'error-file-state',
+        createPollingMaxAttemptsError(),
+      );
+    case 'uploadError':
+      return new MediaCardError('upload');
+    default:
+      return undefined;
+  }
+};
+
+export const SSRAnalyticsWrapper: React.FC = ({ children }) => {
+  const mockClient: AnalyticsWebClient = {
+    sendUIEvent: (e) => console.debug('UI event', e),
+    sendOperationalEvent: (e) => console.debug('Operational event', e),
+    sendTrackEvent: (e) => console.debug('Track event', e),
+    sendScreenEvent: (e) => console.debug('Screen event', e),
+  };
+
+  return (
+    <FabricAnalyticsListeners client={mockClient}>
+      {children}
+    </FabricAnalyticsListeners>
+  );
+};

package/example-helpers/selectableCard.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Component } from 'react';
+import { MediaClientConfig } from '@atlaskit/media-core';
 import { Identifier } from '@atlaskit/media-client';
 import { Card } from '../src';
 
 export interface SelectableCardProps {
-  mediaClientConfig: Card['props']['mediaClientConfig'];
+  mediaClientConfig: MediaClientConfig;
   identifier: Identifier;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "70.10.0",
+  "version": "72.1.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,23 +29,23 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^10.1.0",
-    "@atlaskit/editor-shared-styles": "^1.3.0",
-    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/dropdown-menu": "^11.0.0",
+    "@atlaskit/editor-shared-styles": "^1.6.0",
+    "@atlaskit/icon": "^21.9.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-client": "^14.1.0",
-    "@atlaskit/media-common": "^2.8.0",
-    "@atlaskit/media-ui": "^16.5.0",
+    "@atlaskit/media-client": "^14.3.0",
+    "@atlaskit/media-common": "^2.10.0",
+    "@atlaskit/media-ui": "^17.2.0",
     "@atlaskit/media-viewer": "^45.8.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^11.4.0",
-    "@atlaskit/tooltip": "^17.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
     "eventemitter2": "^4.1.0",
     "lru-fast": "^0.2.2",
     "react-lazily-render": "^1.2.0",
-    "uuid": "^3.1.0",
+    "react-loadable": "^5.1.0",
     "video-snapshot": "^1.0.11"
   },
   "peerDependencies": {
@@ -62,19 +62,22 @@
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/field-radio-group": "^8.0.0",
-    "@atlaskit/field-range": "^9.0.0",
+    "@atlaskit/inline-message": "^11.1.5",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^28.7.0",
+    "@atlaskit/media-test-helpers": "^28.9.0",
+    "@atlaskit/radio": "^5.3.2",
+    "@atlaskit/range": "^5.1.0",
+    "@atlaskit/select": "^15.2.1",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/toggle": "^12.2.0",
+    "@atlaskit/toggle": "^12.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
     "@types/classnames": "^2.2.6",
+    "@types/react-loadable": "^5.4.1",
     "deepcopy": "0.6.3",
     "enzyme": "^3.10.0",
     "exenv": "^1.2.2",
@@ -84,6 +87,7 @@
     "react-intl": "^2.6.0",
     "rxjs": "^5.5.0",
     "typescript": "3.9.6",
+    "uuid": "^3.1.0",
     "wait-for-expect": "^1.2.0"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/dist/cjs/root/card/getCardPreview/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/cjs/utils/fileAttributesContext.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withFileAttributes = withFileAttributes;
-exports.FileAttributesProvider = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var FileAttributesContext = /*#__PURE__*/_react.default.createContext(null);
-
-var FileAttributesProvider = function FileAttributesProvider(_ref) {
-  var children = _ref.children,
-      data = _ref.data;
-  return data ? /*#__PURE__*/_react.default.createElement(FileAttributesContext.Provider, {
-    value: data
-  }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
-};
-
-exports.FileAttributesProvider = FileAttributesProvider;
-
-function withFileAttributes(Component) {
-  return function (props) {
-    var fileAttributes = (0, _react.useContext)(FileAttributesContext);
-    return fileAttributes ? /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-      fileAttributes: fileAttributes
-    })) : /*#__PURE__*/_react.default.createElement(Component, props);
-  };
-}

package/dist/es2019/root/card/getCardPreview/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/root/inline/inlineMediaCard.js

@@ -1,92 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
-import { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, messages } from '@atlaskit/media-ui';
-import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
-import { MediaViewer } from '@atlaskit/media-viewer';
-// UI component which renders an inline link in the appropiate state based on a media file
-export const InlineMediaCardInternal = ({
-  mediaClient,
-  identifier,
-  shouldOpenMediaViewer,
-  isSelected,
-  onClick,
-  mediaViewerDataSource,
-  intl
-}) => {
-  const [fileState, setFileState] = useState();
-  const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
-
-  const onInlineCardClick = event => {
-    if (shouldOpenMediaViewer) {
-      setMediaViewerVisible(true);
-    }
-
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  const onMediaViewerClose = () => setMediaViewerVisible(false);
-
-  const renderMediaViewer = () => {
-    if (isMediaViewerVisible) {
-      const dataSource = mediaViewerDataSource || {
-        list: []
-      };
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
-        collectionName: identifier.collectionName || '',
-        dataSource: dataSource,
-        mediaClientConfig: mediaClient.mediaClientConfig,
-        selectedItem: identifier,
-        onClose: onMediaViewerClose
-      }), document.body);
-    }
-
-    return null;
-  };
-
-  useEffect(() => {
-    // [EDM-1948] TODO: use mediaClient.file.getFileState()
-    // [EDM-1948] TODO: handle error here
-    mediaClient.file.getCurrentState(identifier.id, {
-      collectionName: identifier.collectionName
-    }).then(fileState => {
-      setFileState(fileState);
-    });
-  }, [identifier.collectionName, identifier.id, mediaClient.file]);
-
-  if (!fileState) {
-    return /*#__PURE__*/React.createElement(InlineCardResolvingView, {
-      url: intl.formatMessage(messages.loading_file),
-      titleTextColor: "black",
-      withoutHover: true
-    });
-  }
-
-  if (fileState.status === 'error') {
-    return /*#__PURE__*/React.createElement(InlineCardErroredView, {
-      url: "",
-      message: fileState.message || ''
-    });
-  }
-
-  const {
-    mediaType,
-    name
-  } = fileState;
-  const linkIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
-    testId: 'inline-media-card-file-type-icon',
-    size: "small",
-    type: mediaType
-  });
-  const mediaViewer = renderMediaViewer(); // [EDM-1948] TODO: add Tooltip
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineCardResolvedView, {
-    icon: linkIcon,
-    title: name,
-    onClick: onInlineCardClick,
-    isSelected: isSelected
-  }), mediaViewer);
-};
-export const InlineMediaCard = injectIntl(InlineMediaCardInternal);

package/dist/es2019/utils/fileAttributesContext.js

@@ -1,19 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useContext } from 'react';
-const FileAttributesContext = /*#__PURE__*/React.createContext(null);
-export const FileAttributesProvider = ({
-  children,
-  data
-}) => {
-  return data ? /*#__PURE__*/React.createElement(FileAttributesContext.Provider, {
-    value: data
-  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
-export function withFileAttributes(Component) {
-  return props => {
-    const fileAttributes = useContext(FileAttributesContext);
-    return fileAttributes ? /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      fileAttributes: fileAttributes
-    })) : /*#__PURE__*/React.createElement(Component, props);
-  };
-}

package/dist/esm/root/card/getCardPreview/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/root/inline/inlineMediaCard.js

@@ -1,100 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
-import { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, messages } from '@atlaskit/media-ui';
-import { MediaTypeIcon } from '@atlaskit/media-ui/media-type-icon';
-import { MediaViewer } from '@atlaskit/media-viewer';
-// UI component which renders an inline link in the appropiate state based on a media file
-export var InlineMediaCardInternal = function InlineMediaCardInternal(_ref) {
-  var mediaClient = _ref.mediaClient,
-      identifier = _ref.identifier,
-      shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
-      isSelected = _ref.isSelected,
-      onClick = _ref.onClick,
-      mediaViewerDataSource = _ref.mediaViewerDataSource,
-      intl = _ref.intl;
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      fileState = _useState2[0],
-      setFileState = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isMediaViewerVisible = _useState4[0],
-      setMediaViewerVisible = _useState4[1];
-
-  var onInlineCardClick = function onInlineCardClick(event) {
-    if (shouldOpenMediaViewer) {
-      setMediaViewerVisible(true);
-    }
-
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  var onMediaViewerClose = function onMediaViewerClose() {
-    return setMediaViewerVisible(false);
-  };
-
-  var renderMediaViewer = function renderMediaViewer() {
-    if (isMediaViewerVisible) {
-      var dataSource = mediaViewerDataSource || {
-        list: []
-      };
-      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
-        collectionName: identifier.collectionName || '',
-        dataSource: dataSource,
-        mediaClientConfig: mediaClient.mediaClientConfig,
-        selectedItem: identifier,
-        onClose: onMediaViewerClose
-      }), document.body);
-    }
-
-    return null;
-  };
-
-  useEffect(function () {
-    // [EDM-1948] TODO: use mediaClient.file.getFileState()
-    // [EDM-1948] TODO: handle error here
-    mediaClient.file.getCurrentState(identifier.id, {
-      collectionName: identifier.collectionName
-    }).then(function (fileState) {
-      setFileState(fileState);
-    });
-  }, [identifier.collectionName, identifier.id, mediaClient.file]);
-
-  if (!fileState) {
-    return /*#__PURE__*/React.createElement(InlineCardResolvingView, {
-      url: intl.formatMessage(messages.loading_file),
-      titleTextColor: "black",
-      withoutHover: true
-    });
-  }
-
-  if (fileState.status === 'error') {
-    return /*#__PURE__*/React.createElement(InlineCardErroredView, {
-      url: "",
-      message: fileState.message || ''
-    });
-  }
-
-  var mediaType = fileState.mediaType,
-      name = fileState.name;
-  var linkIcon = /*#__PURE__*/React.createElement(MediaTypeIcon, {
-    testId: 'inline-media-card-file-type-icon',
-    size: "small",
-    type: mediaType
-  });
-  var mediaViewer = renderMediaViewer(); // [EDM-1948] TODO: add Tooltip
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineCardResolvedView, {
-    icon: linkIcon,
-    title: name,
-    onClick: onInlineCardClick,
-    isSelected: isSelected
-  }), mediaViewer);
-};
-export var InlineMediaCard = injectIntl(InlineMediaCardInternal);

package/dist/esm/utils/fileAttributesContext.js

@@ -1,18 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useContext } from 'react';
-var FileAttributesContext = /*#__PURE__*/React.createContext(null);
-export var FileAttributesProvider = function FileAttributesProvider(_ref) {
-  var children = _ref.children,
-      data = _ref.data;
-  return data ? /*#__PURE__*/React.createElement(FileAttributesContext.Provider, {
-    value: data
-  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
-export function withFileAttributes(Component) {
-  return function (props) {
-    var fileAttributes = useContext(FileAttributesContext);
-    return fileAttributes ? /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-      fileAttributes: fileAttributes
-    })) : /*#__PURE__*/React.createElement(Component, props);
-  };
-}

package/dist/types/root/card/getCardPreview/types.d.ts

@@ -1,5 +0,0 @@
-export interface CardPreview {
-    dataURI: string;
-    orientation?: number;
-    source: 'local' | 'remote' | 'cache' | 'external';
-}

package/dist/types/utils/fileAttributesContext.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { FileAttributes } from '@atlaskit/media-common';
-export declare type FileAttributesProviderProps = {
-    data: FileAttributes;
-};
-export declare const FileAttributesProvider: React.FC<FileAttributesProviderProps>;
-export declare type WithFileAttributesProps = {
-    fileAttributes?: FileAttributes;
-};
-export declare function withFileAttributes<Props>(Component: React.ComponentType<Props & WithFileAttributesProps>): React.FC<Props>;