@atlaskit/media-card 72.1.0 → 73.2.0

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

@@ -1,8 +1,16 @@
-import React, { FC } from 'react';
-declare type ViewportDetectorProps = {
-    targetRef: HTMLElement | null;
+import React from 'react';
+/**
+ * As IntersectionObserver::rootMargin doesn't work within IFrames, we use an empty div + dynamic offsetTop to eagerly detect cards entering viewport.
+ * Using this approach, we can lazy load cards ABS_VIEWPORT_ANCHOR_OFFSET_TOP px before they enter viewport.
+ */
+export declare const ABS_VIEWPORT_ANCHOR_OFFSET_TOP = 900;
+export declare const ViewportAnchor: React.ForwardRefExoticComponent<{
+    offsetTop: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare type ViewportDetectorProps = {
+    cardEl: HTMLElement | null;
+    preAnchorRef: React.RefObject<HTMLDivElement>;
+    postAnchorRef: React.RefObject<HTMLDivElement>;
     onVisible: () => void;
 };
-export declare const createViewportDetector: (isIntersectionObserverSupported: boolean) => React.FC<ViewportDetectorProps>;
 export declare const ViewportDetector: React.FC<ViewportDetectorProps>;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "72.1.0",
+  "version": "73.2.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,49 +29,47 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/dropdown-menu": "^11.0.0",
+    "@atlaskit/dropdown-menu": "^11.1.0",
     "@atlaskit/editor-shared-styles": "^1.6.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/in-product-testing": "^0.1.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/media-ui": "^19.0.0",
+    "@atlaskit/media-viewer": "^46.0.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.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",
     "react-loadable": "^5.1.0",
     "video-snapshot": "^1.0.11"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
-    "@atlaskit/analytics-listeners": "^8.0.0",
-    "@atlaskit/analytics-namespaced-context": "^6.3.0",
-    "@atlaskit/build-utils": "*",
+    "@atlaskit/analytics-listeners": "^8.2.0",
+    "@atlaskit/analytics-namespaced-context": "^6.4.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/inline-message": "^11.1.5",
+    "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/item": "^12.0.0",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^28.9.0",
+    "@atlaskit/media-test-helpers": "^29.1.0",
     "@atlaskit/radio": "^5.3.2",
-    "@atlaskit/range": "^5.1.0",
+    "@atlaskit/range": "^6.0.0",
     "@atlaskit/select": "^15.2.1",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/toggle": "^12.3.0",
+    "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -84,7 +82,7 @@
     "local-cypress": "^1.2.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "typescript": "3.9.6",
     "uuid": "^3.1.0",

package/dist/cjs/utils/lazyContent/index.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LazyContent = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styled = require("./styled");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var LazyContent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(LazyContent, _React$Component);
-
-  var _super = _createSuper(LazyContent);
-
-  function LazyContent() {
-    (0, _classCallCheck2.default)(this, LazyContent);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(LazyContent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          placeholder = _this$props.placeholder,
-          onRender = _this$props.onRender;
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        offset: 300,
-        onRender: onRender,
-        placeholder: placeholder,
-        content: children
-      });
-    }
-  }]);
-  return LazyContent;
-}(_react.default.Component);
-
-exports.LazyContent = LazyContent;

package/dist/cjs/utils/lazyContent/styled.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _reactLazilyRender = _interopRequireDefault(require("react-lazily-render"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _templateObject;
-
-// We need to override the element provided by the library
-// in order to make it get the parent dimensions.
-var Wrapper = (0, _styledComponents.default)(_reactLazilyRender.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), (0, _mediaUi.size)());
-exports.Wrapper = Wrapper;

package/dist/es2019/utils/lazyContent/index.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Wrapper } from './styled';
-export class LazyContent extends React.Component {
-  render() {
-    const {
-      children,
-      placeholder,
-      onRender
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      offset: 300,
-      onRender: onRender,
-      placeholder: placeholder,
-      content: children
-    });
-  }
-
-}

package/dist/es2019/utils/lazyContent/styled.js

@@ -1,12 +0,0 @@
-// @ts-ignore: unused variable
-// prettier-ignore
-import LazilyRender from 'react-lazily-render'; // @ts-ignore: unused variable
-// prettier-ignore
-
-import styled from 'styled-components';
-import { size } from '@atlaskit/media-ui'; // We need to override the element provided by the library
-// in order to make it get the parent dimensions.
-
-export const Wrapper = styled(LazilyRender)`
-  ${size()};
-`;

package/dist/esm/utils/lazyContent/index.js

@@ -1,41 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
-import { Wrapper } from './styled';
-export var LazyContent = /*#__PURE__*/function (_React$Component) {
-  _inherits(LazyContent, _React$Component);
-
-  var _super = _createSuper(LazyContent);
-
-  function LazyContent() {
-    _classCallCheck(this, LazyContent);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(LazyContent, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          placeholder = _this$props.placeholder,
-          onRender = _this$props.onRender;
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        offset: 300,
-        onRender: onRender,
-        placeholder: placeholder,
-        content: children
-      });
-    }
-  }]);
-
-  return LazyContent;
-}(React.Component);

package/dist/esm/utils/lazyContent/styled.js

@@ -1,14 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-// @ts-ignore: unused variable
-// prettier-ignore
-import LazilyRender from 'react-lazily-render'; // @ts-ignore: unused variable
-// prettier-ignore
-
-import styled from 'styled-components';
-import { size } from '@atlaskit/media-ui'; // We need to override the element provided by the library
-// in order to make it get the parent dimensions.
-
-export var Wrapper = styled(LazilyRender)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), size());

package/dist/types/utils/lazyContent/index.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface LazyContentProps {
-    placeholder?: JSX.Element;
-    children?: React.ReactNode;
-    onRender?: () => void;
-}
-export interface LazyContentState {
-}
-export declare class LazyContent extends React.Component<LazyContentProps, LazyContentState> {
-    render(): JSX.Element;
-}

package/dist/types/utils/lazyContent/styled.d.ts

@@ -1,5 +0,0 @@
-import { LazilyRenderProps } from 'react-lazily-render';
-import { StyledComponentClass } from 'styled-components';
-export declare const Wrapper: StyledComponentClass<LazilyRenderProps, any, Pick<LazilyRenderProps, "className" | "placeholder" | "children" | "content" | "offset" | "component" | "onRender" | "scrollContainer"> & {
-    theme?: any;
-}>;