@atlaskit/media-ui 19.0.0 → 21.0.0

package/dist/es2019/BlockCard/actions/PreviewAction.js

@@ -1,70 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { IntlProvider, FormattedMessage } from 'react-intl-next';
-import { messages } from '../../messages';
-
-/*
-  Explanatory note:
-  Actions don't have access to the react tree of whatever is rendered them
-  (and this concept is fraught inside editor anyway) so we want to ensure
-  it is mounting to a new unique place. This function manages that, including
-  creating an element if it doesn't exist, as well as tidying up the react tree
-  (but not the element) upon closing the modal.
-
-  This may strike you as really uncomfortable as you read it, so I wanted to note
-  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
-  you find an elegant solution around this, you should definitely feel free to
-  refactor it.
-*/
-export async function previewFunction({
-  popupMountPointId,
-  onClose,
-  ...rest
-}) {
-  let popupMountPoint;
-  popupMountPoint = document.getElementById(popupMountPointId);
-
-  if (!popupMountPoint) {
-    popupMountPoint = document.createElement('div');
-    popupMountPoint.id = popupMountPointId;
-    popupMountPoint.setAttribute('data-testid', 'preview-modal');
-    document.body.appendChild(popupMountPoint);
-  }
-
-  let Modal = await import('../components/Modal');
-  ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
-    locale: "en"
-  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
-    onClose: () => {
-      if (popupMountPoint) {
-        onClose();
-        ReactDOM.unmountComponentAtNode(popupMountPoint);
-      }
-    }
-  }))), popupMountPoint);
-}
-/*
-Most of these are optional as we are being fault-tolerant
-However src, details, icon, title, and providerName are STRONGLY encouraged
-*/
-
-export default (({
-  details,
-  ...rest
-}) => ({
-  id: 'preview-content',
-  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
-  promise: () => previewFunction({
-    popupMountPointId: 'twp-editor-preview-iframe',
-    providerName: 'Preview',
-    closeLabel: 'Close Preview',
-    showModal: true,
-    iframeName: 'twp-editor-preview-iframe',
-    onClose: () => {},
-    metadata: {
-      items: details || []
-    },
-    ...rest
-  })
-}));

package/dist/es2019/BlockCard/actions/RetryAction.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '../../messages';
-export const RetryAction = handler => ({
-  id: 'try-again',
-  promise: async () => handler(),
-  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again)
-});

package/dist/es2019/BlockCard/actions/ViewAction.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '../../messages';
-export async function viewFunction({
-  url
-}) {
-  if (!url) {
-    return;
-  }
-
-  window.open(url, '_blank', 'noopener=yes');
-}
-export const ViewAction = ({
-  url
-}) => ({
-  id: 'view-content',
-  text: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
-  promise: () => viewFunction({
-    url
-  })
-});

package/dist/es2019/BlockCard/components/Action.js

@@ -1,42 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { useState } from 'react';
-import Button from '@atlaskit/button/custom-theme-button';
-import { ActionIcon } from './ActionIcon';
-export const spinnerDelay = 1000;
-export const Action = ({
-  promise,
-  text,
-  buttonAppearance = 'default',
-  id
-}) => {
-  const [state, setState] = useState('init');
-  return jsx(Button, {
-    spacing: "compact",
-    appearance: buttonAppearance,
-    isLoading: state === 'loading',
-    testId: `button-${id}`,
-    onClick: event => {
-      event.stopPropagation();
-      event.preventDefault();
-
-      if (state !== 'loading') {
-        setState('loading');
-        promise().then(() => {
-          setState('success');
-          setTimeout(() => setState('init'), spinnerDelay);
-        }).catch(() => {
-          setState('failure');
-          setTimeout(() => setState('init'), spinnerDelay);
-        });
-      }
-    }
-  }, jsx("div", {
-    css: {
-      transition: 'opacity 0.3s',
-      opacity: state !== 'init' ? 0 : 1
-    }
-  }, text), jsx(ActionIcon, {
-    state: state
-  }));
-};

package/dist/es2019/BlockCard/components/ActionIcon.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import CheckIcon from '@atlaskit/icon/glyph/check';
-import CrossIcon from '@atlaskit/icon/glyph/cross';
-
-/*
-  These styles are taken fro the spinner style for button. There was not an
-  easy way to share tehm between the two components.
-*/
-export const spinnerStyles = {
-  display: 'flex',
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  transform: 'translate(-50%, -50%)'
-};
-export const ActionIcon = ({
-  state
-}) => {
-  switch (state) {
-    case 'init':
-    case 'loading':
-      return null;
-
-    case 'success':
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "check-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/React.createElement(CheckIcon, {
-        size: "small",
-        label: "check"
-      }));
-
-    case 'failure':
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "cross-icon",
-        style: spinnerStyles
-      }, /*#__PURE__*/React.createElement(CrossIcon, {
-        size: "small",
-        label: "check"
-      }));
-  }
-};

package/dist/es2019/BlockCard/components/ActionList.js

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { useState } from 'react';
-import Item from '@atlaskit/item';
-import DropList from '@atlaskit/droplist';
-import ButtonGroup from '@atlaskit/button/button-group';
-import Button from '@atlaskit/button/custom-theme-button';
-import { Action } from './Action';
-import { gs, mq } from '../utils';
-export const ActionList = ({
-  items
-}) => {
-  const [isOpen, setOpen] = useState(false);
-  const actionsToShow = items.slice(0, 2);
-  const actionsToList = items.slice(2, items.length);
-  return jsx("div", {
-    css: mq({
-      display: 'flex',
-      marginTop: [gs(2), 0]
-    })
-  }, jsx(ButtonGroup, null, actionsToShow.map(action => jsx(Action, _extends({
-    key: action.id
-  }, action)))), actionsToList.length ? jsx("div", {
-    css: {
-      marginLeft: gs(0.5)
-    }
-  }, jsx(DropList, {
-    appearance: "default",
-    position: "right top",
-    isTriggerNotTabbable: true,
-    onOpenChange: () => setOpen(true),
-    onClick: () => setOpen(!isOpen),
-    isOpen: isOpen,
-    trigger: jsx(Button, {
-      spacing: "compact"
-    }, "...")
-  }, actionsToList.map(actionToList => jsx(Item, {
-    key: actionToList.id
-  }, actionToList.text)))) : null);
-};

package/dist/es2019/BlockCard/components/Byline.js

@@ -1,33 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { N300 } from '@atlaskit/theme/colors';
-import { gs, mq } from '../utils';
-export const Byline = ({
-  text,
-  children,
-  testId,
-  className
-}) => jsx("span", {
-  css: mq({
-    fontSize: gs(1.5),
-    lineHeight: gs(2.5),
-    color: `${N300}`,
-    fontWeight: 'normal',
-    marginTop: gs(0.5),
-    // Spec: only allow two lines MAX to be shown.
-    display: '-webkit-box',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: 'vertical',
-    wordBreak: 'break-word',
-    // Fallback options.
-    maxHeight: gs(5),
-    whiteSpace: 'pre-line',
-    // EDM-713: fixes copy-paste from renderer to editor for Firefox
-    // due to HTML its unwrapping behaviour on paste.
-    MozUserSelect: 'none'
-  }),
-  "data-testid": testId,
-  className: className
-}, text || children);

package/dist/es2019/BlockCard/components/CollaboratorList.js

@@ -1,36 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import AvatarGroup from '@atlaskit/avatar-group';
-import { mq } from '../utils';
-export const CollaboratorList = ({
-  items,
-  handleAvatarClick = () => {},
-  handleMoreAvatarsClick = () => {},
-  testId = 'collaborator-list'
-}) => {
-  if (items.length === 0) {
-    return null;
-  }
-
-  return jsx("span", {
-    css: mq({
-      display: ['none', 'inherit']
-    })
-  }, jsx(AvatarGroup, {
-    maxCount: 4,
-    appearance: "stack",
-    size: "small",
-    data: items,
-    onAvatarClick: event => {
-      event.stopPropagation();
-      event.preventDefault();
-      handleAvatarClick(event);
-    },
-    onMoreClick: event => {
-      event.stopPropagation();
-      event.preventDefault();
-      handleMoreAvatarsClick(event);
-    },
-    testId: testId
-  }));
-};

package/dist/es2019/BlockCard/components/Content.js

@@ -1,18 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { gs, mq } from '../utils';
-export const blockCardContentClassName = 'block-card-content';
-export const Content = ({
-  children,
-  isCompact = false
-}) => jsx("div", {
-  css: mq({
-    padding: isCompact ? gs(1) : gs(2),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: isCompact ? 'unset' : ['unset', 'space-between'],
-    flexGrow: 1
-  }),
-  "data-trello-do-not-use-override": "block-card-content",
-  className: blockCardContentClassName
-}, children);

package/dist/es2019/BlockCard/components/ContentFooter.js

@@ -1,18 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { gs, mq } from '../utils';
-export const contentFooterClassName = 'smart-link-content-footer';
-export const ContentFooter = ({
-  children,
-  hasSpaceBetween = false
-}) => jsx("div", {
-  css: mq({
-    display: 'flex',
-    flexDirection: ['column', 'row'],
-    flexGrow: [1, 'unset'],
-    justifyContent: [hasSpaceBetween ? 'space-between' : 'flex-end', 'space-between'],
-    alignItems: ['unset', 'center'],
-    marginTop: [gs(1), gs(1.5)]
-  }),
-  className: contentFooterClassName
-}, children);

package/dist/es2019/BlockCard/components/ContentHeader.js

@@ -1,21 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-export const blockCardContentHeaderClassName = 'block-card-content-header';
-export const ContentHeader = ({
-  onClick,
-  link,
-  children
-}) => jsx("a", {
-  onClick: onClick,
-  href: link,
-  target: "_blank",
-  css: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    // EDM-713: fixes copy-paste from renderer to editor for Firefox
-    // due to HTML its unwrapping behaviour on paste.
-    MozUserSelect: 'none'
-  },
-  "data-trello-do-not-use-override": "block-card-content-header",
-  className: blockCardContentHeaderClassName
-}, children);

package/dist/es2019/BlockCard/components/Emoji.js

@@ -1,18 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { gs } from '../utils';
-export const Emoji = ({
-  emoji
-}) => {
-  return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: '-2px'
-    }
-  }, emoji);
-};

package/dist/es2019/BlockCard/components/Frame.js

@@ -1,68 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
-import { gs, br, mq } from '../utils';
-export const Frame = (props = {
-  isSelected: false,
-  isHoverable: false,
-  isFluidHeight: false
-}) => props.compact ? jsx(CompactFrame, props) : jsx(ExpandedFrame, props);
-const sharedFrameStyles = {
-  maxWidth: gs(95),
-  width: '100%',
-  display: 'flex',
-  backgroundColor: 'white'
-};
-export const ExpandedFrame = ({
-  children,
-  isSelected,
-  isHoverable,
-  testId,
-  className,
-  isFluidHeight
-}) => {
-  return jsx("div", {
-    css: mq({ ...sharedFrameStyles,
-      '&:hover': isHoverable ? {
-        backgroundColor: N20A,
-        cursor: 'pointer'
-      } : undefined,
-      minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
-      borderRadius: isSelected ? br() : br(0.5),
-      border: `2px solid ${isSelected ? B200 : 'transparent'}`,
-      justifyContent: 'space-between',
-      overflow: 'hidden',
-      boxShadow: `0 1px 1px ${N50A}, 0 0 1px 1px ${N40A};`
-    }),
-    "data-testid": testId,
-    className: className,
-    "data-trello-do-not-use-override": testId
-  }, children);
-};
-export const CompactFrame = ({
-  children,
-  isHoverable,
-  isSelected,
-  testId,
-  className,
-  inheritDimensions
-}) => {
-  return jsx("div", {
-    css: mq({ ...sharedFrameStyles,
-      '&:hover': isHoverable ? {
-        backgroundColor: N30A
-      } : undefined,
-      borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? `2px solid ${B200}` : '',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: inheritDimensions ? '100%' : gs(5),
-      backgroundColor: N20A,
-      width: ['calc(100% - 16px)', '100%'],
-      padding: [`0px ${gs(1)}`, '0']
-    }),
-    "data-testid": testId,
-    className: className
-  }, children);
-};

package/dist/es2019/BlockCard/components/Icon.js

@@ -1,42 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import React from 'react';
-import ImageLoader from 'react-render-image';
-import LinkIcon from '@atlaskit/icon/glyph/link';
-import { gs } from '../utils';
-export const blockCardIconImageClassName = 'block-card-icon-image';
-export const Icon = ({
-  url,
-  icon,
-  defaultIcon,
-  testId = 'block-card-icon'
-}) => {
-  const placeholder = defaultIcon || jsx(LinkIcon, {
-    label: "link",
-    size: "small",
-    testId: `${testId}-default`
-  });
-  const image = url && jsx(ImageLoader, {
-    src: url,
-    loaded: jsx("img", {
-      css: {
-        height: gs(2),
-        width: gs(2)
-      },
-      src: url,
-      "data-testid": `${testId}-image`
-    }),
-    errored: placeholder
-  });
-  return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    "data-testid": testId,
-    className: blockCardIconImageClassName
-  }, icon || image || placeholder);
-};

package/dist/es2019/BlockCard/components/Link.js

@@ -1,17 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { B400 } from '@atlaskit/theme/colors';
-export const Link = ({
-  url,
-  testId = 'block-card',
-  className
-}) => {
-  return jsx("span", {
-    "data-testid": `${testId}-link`,
-    className: className,
-    css: {
-      color: B400,
-      wordBreak: 'break-all'
-    }
-  }, url);
-};

package/dist/es2019/BlockCard/components/Metadata.js

@@ -1,46 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import Tooltip from '@atlaskit/tooltip';
-import { gs } from '../utils';
-import { N300 } from '@atlaskit/theme/colors';
-export const Metadata = ({
-  text,
-  icon,
-  iconUrl,
-  tooltip
-}) => {
-  let metadataIcon = icon || null;
-
-  if (!metadataIcon && iconUrl) {
-    metadataIcon = jsx("img", {
-      src: iconUrl,
-      css: {
-        width: gs(1),
-        height: gs(1)
-      }
-    });
-  }
-
-  const metadata = jsx("div", {
-    css: {
-      display: 'flex',
-      alignItems: 'center',
-      marginRight: gs(0.5)
-    }
-  }, metadataIcon, jsx("span", {
-    css: {
-      fontSize: gs(1.5),
-      color: `${N300}`,
-      marginRight: gs(0.5),
-      marginLeft: '2px'
-    }
-  }, text));
-
-  if (tooltip) {
-    return jsx(Tooltip, {
-      content: tooltip
-    }, metadata);
-  }
-
-  return metadata;
-};

package/dist/es2019/BlockCard/components/MetadataList.js

@@ -1,26 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Metadata } from './Metadata';
-import { gs } from '../utils';
-export const metadataListClassName = 'smart-link-metadata-list';
-export const MetadataList = ({
-  items,
-  testId
-}) => {
-  return jsx("div", {
-    css: {
-      display: 'flex',
-      marginTop: gs(0.5),
-      alignItems: 'center',
-      '&:last-child': {
-        marginRight: '0px'
-      }
-    },
-    "data-testid": testId,
-    className: metadataListClassName
-  }, items.map(item => jsx(Metadata, _extends({
-    key: item.text
-  }, item))));
-};

package/dist/es2019/BlockCard/components/Modal.js

@@ -1,94 +0,0 @@
-/* TODO: (from codemod)
-We have converted this file as best we could but you might still need
-to manually complete migrating this usage of ModalDialog.
-
-This file uses one or more of the following ModalDialog props: 'components', 'header',
-'footer', 'body'. These props have been removed as part of moving to
-a compositional API.
-
-The render props that used to be exposed by the custom component APIs are
-now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
-
-We are also no longer exposing 'appearance' as render prop, so this needs to be
-manually passed to your custom components.
-
-For a complete guide on customization using the new compositional API, refer to the docs at
-https://atlassian.design/components/modal-dialog/examples#customizing-modal-dialog. */
-import React, { useState } from 'react';
-import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
-import { Header } from './ModalHeader';
-import { getIframeSandboxAttribute } from '../../util';
-const iframeStyles = {
-  width: `100%`,
-  height: 'calc(100vh - 248px)'
-};
-
-class ModalWithErrorBoundary extends React.Component {
-  componentDidCatch(error, errorInfo) {
-    if (this.props.onOpenFailed) {
-      this.props.onOpenFailed(error, errorInfo);
-    }
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement(Modal, this.props);
-  }
-
-}
-
-const Modal = ({
-  onClose,
-  onOpen,
-  src,
-  testId,
-  showModal,
-  providerName,
-  metadata,
-  icon,
-  closeLabel,
-  iframeName,
-  title,
-  url,
-  download,
-  byline,
-  isTrusted = false,
-  onViewActionClick,
-  onDownloadActionClick
-}) => {
-  let [isOpen, setIsOpen] = useState(showModal);
-  const sandbox = getIframeSandboxAttribute(isTrusted);
-  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
-    height: "100%",
-    width: "large",
-    testId: testId,
-    onOpenComplete: onOpen,
-    onClose: () => {
-      setIsOpen(false);
-    },
-    onCloseComplete: onClose
-  }, /*#__PURE__*/React.createElement(Header, {
-    providerName: providerName,
-    icon: icon,
-    metadata: metadata,
-    url: url,
-    title: title,
-    label: closeLabel,
-    download: download,
-    byline: byline,
-    onViewActionClick: onViewActionClick,
-    onDownloadActionClick: onDownloadActionClick
-  }), /*#__PURE__*/React.createElement(ModalBody, null, src ? /*#__PURE__*/React.createElement("iframe", {
-    style: iframeStyles,
-    name: iframeName,
-    frameBorder: 0,
-    src: src,
-    sandbox: sandbox
-  }) : /*#__PURE__*/React.createElement("iframe", {
-    style: iframeStyles,
-    name: iframeName,
-    frameBorder: 0,
-    sandbox: sandbox
-  }))));
-};
-
-export default ModalWithErrorBoundary;