@atlaskit/smart-card 23.3.1 → 23.4.0

package/dist/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -0,0 +1,136 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["popupMountPointId"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+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';
+import Action from '../index';
+import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl-next';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
+import { useSmartLinkAnalytics } from '../../../../../../state';
+import Icon from '../../../elements/icon';
+
+var PreviewAction = function PreviewAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      testId = props.testId,
+      _onClick = props.onClick,
+      linkIcon = props.linkIcon,
+      src = props.src,
+      url = props.url,
+      title = props.title,
+      providerName = props.providerName,
+      downloadUrl = props.downloadUrl;
+  var defaultAnalytics = useSmartLinkAnalytics(url, function () {});
+  var analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  var EmbedIcon = {
+    icon: /*#__PURE__*/React.createElement(Icon, linkIcon),
+    isFlexibleUi: true
+  };
+
+  if (src && url) {
+    var embedModal = function embedModal() {
+      return previewFunction({
+        popupMountPointId: 'twp-editor-preview-iframe',
+        showModal: true,
+        iframeName: 'twp-editor-preview-iframe',
+        onClose: function onClose() {},
+        download: downloadUrl,
+        icon: EmbedIcon,
+        providerName: providerName || 'Preview',
+        src: src,
+        title: title,
+        url: url,
+        analytics: analytics,
+        origin: 'smartLinkCard'
+      });
+    };
+
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        embedModal();
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+/*
+  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 function previewFunction(_x) {
+  return _previewFunction.apply(this, arguments);
+}
+
+function _previewFunction() {
+  _previewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var popupMountPointId, rest, popupMountPoint, Modal;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            popupMountPointId = _ref.popupMountPointId, rest = _objectWithoutProperties(_ref, _excluded);
+            popupMountPoint = document.getElementById(popupMountPointId);
+
+            if (!popupMountPoint) {
+              popupMountPoint = document.createElement('div');
+              popupMountPoint.id = popupMountPointId;
+              popupMountPoint.setAttribute('data-testid', 'preview-modal');
+              document.body.appendChild(popupMountPoint);
+            }
+
+            _context2.next = 5;
+            return import('../../../../../EmbedModal');
+
+          case 5:
+            Modal = _context2.sent;
+            ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+              locale: "en"
+            }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+              onClose: function onClose(_context) {
+                if (popupMountPoint) {
+                  ReactDOM.unmountComponentAtNode(popupMountPoint);
+                }
+              }
+            }))), popupMountPoint);
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _previewFunction.apply(this, arguments);
+}
+
+export default PreviewAction;

package/dist/esm/view/FlexibleCard/components/actions/action/preview-action/types.js

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

package/dist/esm/view/FlexibleCard/components/actions/action/view-action/index.js

@@ -0,0 +1,77 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+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';
+import Action from '../index';
+
+var ViewAction = function ViewAction(props) {
+  var appearance = props.appearance,
+      asDropDownItem = props.asDropDownItem,
+      testId = props.testId,
+      _onClick = props.onClick,
+      viewUrl = props.viewUrl,
+      url = props.url;
+
+  if (viewUrl && url) {
+    var action = _objectSpread(_objectSpread({}, props), {}, {
+      onClick: function onClick() {
+        viewFunction({
+          url: viewUrl
+        });
+
+        if (_onClick) {
+          _onClick();
+        }
+      }
+    });
+
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+export function viewFunction(_x) {
+  return _viewFunction.apply(this, arguments);
+}
+
+function _viewFunction() {
+  _viewFunction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var url;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            url = _ref.url;
+
+            if (url) {
+              _context.next = 3;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 3:
+            window.open(url, '_blank', 'noopener=yes');
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _viewFunction.apply(this, arguments);
+}
+
+export default ViewAction;

package/dist/esm/view/FlexibleCard/components/actions/action/view-action/types.js

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

package/dist/esm/view/FlexibleCard/components/actions/index.js

@@ -1,5 +1,6 @@
 import { ActionName } from '../../../../constants';
-import { createUIAction } from './utils'; // Attention: Keep the export name and action name the same.
+import { createDataAction, createUIAction } from './utils';
+// Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
 
@@ -8,7 +9,6 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
  * the icon to a cross icon.
  * @see Action
  */
-
 export var DeleteAction = createUIAction(ActionName.DeleteAction);
 /**
  * Creates a EditAction component. Accepts default ActionProps, but defaults
@@ -17,6 +17,27 @@ export var DeleteAction = createUIAction(ActionName.DeleteAction);
  */
 
 export var EditAction = createUIAction(ActionName.EditAction);
+/**
+ * Creates a PreviewAction component. Accepts default PreviewActionProps, and defaults
+ * to the text 'Preview' inside the button.
+ * @see Action
+ */
+
+export var PreviewAction = createDataAction(ActionName.PreviewAction);
+/**
+ * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
+ * to the text 'View' inside the button.
+ * @see Action
+ */
+
+export var ViewAction = createDataAction(ActionName.ViewAction);
+/**
+ * Creates a DownloadAction component. Accepts default DownloadActionProps, and defaults
+ * to the text 'Download' inside the button.
+ * @see Action
+ */
+
+export var DownloadAction = createDataAction(ActionName.DownloadAction);
 /**
  * Creates a CustomAction component. Accepts default ActionProps. Required to provide
  * your own icon or text.

package/dist/esm/view/FlexibleCard/components/actions/utils.js

@@ -15,6 +15,12 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import EditIcon from '@atlaskit/icon/glyph/edit';
+import PreviewAction from './action/preview-action';
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import ViewAction from './action/view-action';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import DownloadAction from './action/download-action';
+import DownloadIcon from '@atlaskit/icon/glyph/download';
 var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, ActionName.CustomAction, {
   component: Action,
   props: {}
@@ -38,6 +44,36 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     }),
     tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
   }
+}), _defineProperty(_actionMappings, ActionName.PreviewAction, {
+  component: PreviewAction,
+  props: {
+    testId: 'smart-action-preview-action',
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+    icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+      label: "Preview"
+    }),
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview)
+  }
+}), _defineProperty(_actionMappings, ActionName.ViewAction, {
+  component: ViewAction,
+  props: {
+    testId: 'smart-action-view-action',
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
+    icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+      label: "View"
+    }),
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.view)
+  }
+}), _defineProperty(_actionMappings, ActionName.DownloadAction, {
+  component: DownloadAction,
+  props: {
+    testId: 'smart-action-download-action',
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+    icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+      label: "Download"
+    }),
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.download)
+  }
 }), _actionMappings);
 
 var getContextKey = function getContextKey(name) {
@@ -54,8 +90,13 @@ var getActionData = function getActionData(actionName, contextKey, context) {
   var data = context[contextKey];
 
   switch (actionName) {
-    default:
+    case ActionName.PreviewAction:
+    case ActionName.ViewAction:
+    case ActionName.DownloadAction:
       return data;
+
+    default:
+      return undefined;
   }
 };
 
@@ -73,7 +114,9 @@ export var createDataAction = function createDataAction(name) {
   return function (overrides) {
     var context = useContext(FlexibleUiContext);
     var data = getActionData(name, contextKey, context);
-    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
+    return data ? /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides, {
+      url: context === null || context === void 0 ? void 0 : context.url
+    })) : null;
   };
 };
 export var createUIAction = function createUIAction(name) {

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -43,17 +43,7 @@ var ActionGroup = function ActionGroup(_ref) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var _useMemo = useMemo(function () {
-    var isMoreThenTwoItems = items.length > visibleButtonsNum;
-    var buttons = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-    var dropdownItems = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
-    return [buttons, dropdownItems];
-  }, [items, visibleButtonsNum]),
-      _useMemo2 = _slicedToArray(_useMemo, 2),
-      buttonActions = _useMemo2[0],
-      dropdownItemActions = _useMemo2[1]; // Stop AK dropdown menu to propagate event on click.
+      setIsOpen = _useState2[1]; // Stop AK dropdown menu to propagate event on click.
 
 
   var onClick = useCallback(function (e) {
@@ -73,11 +63,27 @@ var ActionGroup = function ActionGroup(_ref) {
       });
     }
   }, [isOpen, onOpenChange]);
+  var renderableActions = items.filter(function (action) {
+    return renderActionItems([action]);
+  });
+
+  var _useMemo = useMemo(function () {
+    var isMoreThenTwoItems = renderableActions && renderableActions.length > visibleButtonsNum;
+    var buttons = isMoreThenTwoItems ? renderableActions.slice(0, visibleButtonsNum - 1) : renderableActions;
+    var dropdownItems = isMoreThenTwoItems ? renderableActions.slice(visibleButtonsNum - 1) : [];
+    return [buttons, dropdownItems];
+  }, [renderableActions, visibleButtonsNum]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      buttonActions = _useMemo2[0],
+      dropdownItemActions = _useMemo2[1];
+
+  var dropdownMenuElement = renderActionItems(dropdownItemActions, size, appearance, true, onActionClick);
+  var buttonGroupElement = renderActionItems(buttonActions, size, appearance, false, onActionClick);
   return jsx("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, jsx(ButtonGroup, null, renderActionItems(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? jsx(DropdownMenu, {
+  }, jsx(ButtonGroup, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? jsx(DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,
     trigger: function trigger(_ref2) {
@@ -99,7 +105,7 @@ var ActionGroup = function ActionGroup(_ref) {
       })));
     },
     testId: "action-group-dropdown"
-  }, renderActionItems(dropdownItemActions, size, appearance, true, onActionClick)) : null));
+  }, dropdownMenuElement) : null));
 };
 
 export default ActionGroup;

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -64,7 +64,7 @@ var isElementDisplayValid = function isElementDisplayValid(name, display) {
   return (_ElementDisplaySchema2 = (_ElementDisplaySchema3 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema3 === void 0 ? void 0 : _ElementDisplaySchema3.includes(display)) !== null && _ElementDisplaySchema2 !== void 0 ? _ElementDisplaySchema2 : false;
 };
 
-var isElementNull = function isElementNull(children) {
+var isJSXElementNull = function isJSXElementNull(children) {
   return Boolean(children.type() === null);
 };
 
@@ -100,7 +100,7 @@ export var renderElementItems = function renderElementItems() {
         key: idx
       }, typedProps));
 
-      if (!isElementNull(element)) {
+      if (!isJSXElementNull(element)) {
         return [].concat(_toConsumableArray(acc), [element]);
       }
     }
@@ -148,13 +148,18 @@ export var renderActionItems = function renderActionItems() {
         }
       };
 
-      return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Action, _extends({
+      var action = /*#__PURE__*/React.createElement(Action, _extends({
+        url: '',
         asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,
         onClick: handleOnClick
-      }, actionProps))]);
+      }, actionProps));
+
+      if (!isJSXElementNull(action)) {
+        return [].concat(_toConsumableArray(acc), [action]);
+      }
     }
 
     return acc;

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -41,7 +41,7 @@ var Media = function Media(_ref) {
   return jsx("div", {
     css: [styles, overrideCss],
     "data-smart-element": name,
-    "data-smart-element-media": true,
+    "data-smart-element-media": type,
     "data-testid": testId
   }, jsx(ImageIcon, {
     testId: "".concat(testId, "-image"),

package/dist/esm/view/FlexibleCard/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
-import { FlexibleUiContext } from '../../state/flexible-ui-context';
+import { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
@@ -21,7 +21,8 @@ var FlexibleCard = function FlexibleCard(_ref) {
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      analytics = _ref.analytics;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
@@ -58,7 +59,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
         break;
     }
   }, [onError, onResolve, status, title, url]);
-  return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
+  return /*#__PURE__*/React.createElement(FlexibleUiAnalyticsContext.Provider, {
+    value: analytics
+  }, /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
@@ -66,7 +69,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     onClick: onClick,
     retry: retry,
     status: status
-  }), children));
+  }), children)));
 };
 
 export default FlexibleCard;

package/dist/esm/view/common/Icon.js

@@ -1,16 +1,39 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import { gs } from './utils';
 export var blockCardIconImageClassName = 'block-card-icon-image';
+
+var getImageStyles = function getImageStyles(isFlexibleUi) {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n  "])), gs(2), gs(2));
+};
+
+var getSpanStyles = function getSpanStyles(isFlexibleUi) {
+  if (isFlexibleUi) {
+    return;
+  }
+
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])), gs(2.5), gs(2));
+};
+
 export var Icon = function Icon(_ref) {
   var url = _ref.url,
       icon = _ref.icon,
       defaultIcon = _ref.defaultIcon,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId;
+      testId = _ref$testId === void 0 ? 'block-card-icon' : _ref$testId,
+      _ref$isFlexibleUi = _ref.isFlexibleUi,
+      isFlexibleUi = _ref$isFlexibleUi === void 0 ? false : _ref$isFlexibleUi;
   var placeholder = defaultIcon || jsx(LinkIcon, {
     label: "link",
     size: "small",
@@ -19,23 +42,14 @@ export var Icon = function Icon(_ref) {
   var image = url && jsx(ImageLoader, {
     src: url,
     loaded: jsx("img", {
-      css: {
-        height: gs(2),
-        width: gs(2)
-      },
+      css: getImageStyles(isFlexibleUi),
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),
     errored: placeholder
   });
   return jsx("span", {
-    css: {
-      height: gs(2.5),
-      width: gs(2),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
+    css: getSpanStyles(isFlexibleUi),
     "data-testid": testId,
     className: blockCardIconImageClassName
   }, icon || image || placeholder);

package/dist/types/constants.d.ts

@@ -112,6 +112,9 @@ export declare enum ElementName {
 export declare enum ActionName {
     DeleteAction = "DeleteAction",
     EditAction = "EditAction",
+    PreviewAction = "PreviewAction",
+    ViewAction = "ViewAction",
+    DownloadAction = "DownloadAction",
     CustomAction = "CustomAction"
 }
 /**