@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTruncateStyles = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _constants = require("../../../constants");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var getFormattedMessage = function getFormattedMessage(message) {
+  if (message) {
+    var descriptor = message.descriptor,
+        values = message.values;
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+      values: values
+    }));
+  }
+};
+
+exports.getFormattedMessage = getFormattedMessage;
+
+var getIconDimensionStyles = function getIconDimensionStyles(value) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n"])), value, value, value, value, value, value);
+};
+
+var getIconSizeStyles = function getIconSizeStyles(width) {
+  var sizeStyles = getIconDimensionStyles(width);
+  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
+};
+
+exports.getIconSizeStyles = getIconSizeStyles;
+
+var getLinkLineHeight = function getLinkLineHeight(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Large:
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+exports.getLinkLineHeight = getLinkLineHeight;
+
+var getLinkSizeStyles = function getLinkSizeStyles(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 1.25rem;\n        font-weight: 400;\n        letter-spacing: -0.008em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+
+    case _constants.SmartLinkSize.Large:
+    case _constants.SmartLinkSize.Medium:
+      return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.875rem;\n        font-weight: 500;\n        letter-spacing: -0.003em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+
+    case _constants.SmartLinkSize.Small:
+    default:
+      return (0, _core.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+  }
+};
+
+exports.getLinkSizeStyles = getLinkSizeStyles;
+
+var getTruncateStyles = function getTruncateStyles(maxLines) {
+  var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
+  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);
+};
+
+exports.getTruncateStyles = getTruncateStyles;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _container = _interopRequireDefault(require("./components/container"));
+
+var _flexibleUiContext = require("../../state/flexible-ui-context");
+
+var _utils = require("./utils");
+
+var FlexibleCard = function FlexibleCard(_ref) {
+  var cardState = _ref.cardState,
+      children = _ref.children,
+      onAuthorize = _ref.onAuthorize,
+      renderers = _ref.renderers,
+      ui = _ref.ui,
+      url = _ref.url;
+  var cardType = cardState.status,
+      details = cardState.details;
+  var status = cardType;
+  var context = (0, _utils.getContextByStatus)(url, status, details, renderers);
+  var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
+  return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({}, ui, {
+    retry: retry,
+    status: status
+  }), children));
+};
+
+var _default = FlexibleCard;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/types.js

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

package/dist/cjs/view/FlexibleCard/utils.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRetryOptions = exports.getContextByStatus = void 0;
+
+var _constants = require("../../constants");
+
+var _jsonld = require("../../utils/jsonld");
+
+var _context = require("../../extractors/common/context");
+
+var _messages = require("../../messages");
+
+var _flexible = _interopRequireDefault(require("../../extractors/flexible"));
+
+var _icon = require("../../extractors/flexible/icon");
+
+var _utils = require("../../utils");
+
+var getContextByStatus = function getContextByStatus(url, status, details, renderers) {
+  switch (status) {
+    case _constants.SmartLinkStatus.Pending:
+    case _constants.SmartLinkStatus.Resolving:
+      return {
+        title: url,
+        url: url
+      };
+
+    case _constants.SmartLinkStatus.Resolved:
+      return (0, _flexible.default)(details, renderers);
+
+    case _constants.SmartLinkStatus.Unauthorized:
+    case _constants.SmartLinkStatus.Forbidden:
+    case _constants.SmartLinkStatus.NotFound:
+    case _constants.SmartLinkStatus.Errored:
+    case _constants.SmartLinkStatus.Fallback:
+    default:
+      var linkIcon = (0, _icon.extractErrorIcon)(details, status);
+      return {
+        linkIcon: linkIcon,
+        title: url,
+        url: url
+      };
+  }
+};
+
+exports.getContextByStatus = getContextByStatus;
+
+var getForbiddenMessageKey = function getForbiddenMessageKey(meta) {
+  var _meta$requestAccess;
+
+  var accessType = meta === null || meta === void 0 ? void 0 : (_meta$requestAccess = meta.requestAccess) === null || _meta$requestAccess === void 0 ? void 0 : _meta$requestAccess.accessType;
+
+  switch (accessType) {
+    case 'DIRECT_ACCESS':
+      return 'click_to_join';
+
+    case 'REQUEST_ACCESS':
+      return 'request_access';
+
+    case 'PENDING_REQUEST_EXISTS':
+      return 'pending_request';
+
+    case 'FORBIDDEN':
+      return 'forbidden_access';
+
+    case 'DENIED_REQUEST_EXISTS':
+      return 'request_denied';
+
+    default:
+      return 'restricted_link';
+  }
+};
+
+var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize) {
+  var _details$meta, _access$action;
+
+  switch (status) {
+    case _constants.SmartLinkStatus.Forbidden:
+      var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
+      var meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getUnauthorizedJsonLd)().meta;
+      var provider = (0, _context.extractProvider)(data);
+      var context = provider === null || provider === void 0 ? void 0 : provider.text;
+      var access = (0, _context.extractRequestAccessContext)({
+        jsonLd: meta,
+        url: url,
+        context: context
+      });
+      var messageKey = getForbiddenMessageKey(meta);
+      var descriptor = _messages.messages[messageKey];
+      var values = context ? {
+        context: context
+      } : undefined;
+      var retry = onAuthorize || (access === null || access === void 0 ? void 0 : (_access$action = access.action) === null || _access$action === void 0 ? void 0 : _access$action.promise);
+      var onClick = retry ? (0, _utils.handleOnClick)(retry) : undefined;
+      return {
+        descriptor: descriptor,
+        onClick: onClick,
+        values: values
+      };
+
+    case _constants.SmartLinkStatus.Unauthorized:
+      return {
+        descriptor: _messages.messages.connect_link_account,
+        onClick: onAuthorize ? (0, _utils.handleOnClick)(onAuthorize) : undefined
+      };
+
+    case _constants.SmartLinkStatus.NotFound:
+      return {
+        descriptor: _messages.messages.cannot_find_link
+      };
+  }
+};
+
+exports.getRetryOptions = getRetryOptions;

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardErroredView = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _Frame = require("../Frame");
+
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+
+var _Icon = require("../Icon");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+var _reactIntlNext = require("react-intl-next");
+
+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 InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(InlineCardErroredView, _React$Component);
+
+  var _super = _createSuper(InlineCardErroredView);
+
+  function InlineCardErroredView() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, InlineCardErroredView);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRetry", function (event) {
+      var onRetry = _this.props.onRetry;
+
+      if (onRetry) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRetry();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
+      var _this$props = _this.props,
+          onRetry = _this$props.onRetry,
+          url = _this$props.url,
+          message = _this$props.message;
+
+      var link = /*#__PURE__*/_react.default.createElement(_styled.LinkAppearance, null, url);
+
+      var errorMessage = /*#__PURE__*/_react.default.createElement(_styled.NoLinkAppearance, null, message);
+
+      return !onRetry ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, " - ", errorMessage) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, " - ", errorMessage, ",\xA0", /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+        spacing: "none",
+        appearance: "subtle-link",
+        component: _styled.IconStyledButton,
+        onClick: _this.handleRetry
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again, function (formattedMessage) {
+        return /*#__PURE__*/_react.default.createElement(_styled.LowercaseAppearance, null, formattedMessage);
+      })));
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(InlineCardErroredView, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          url = _this$props2.url,
+          onClick = _this$props2.onClick,
+          isSelected = _this$props2.isSelected,
+          _this$props2$testId = _this$props2.testId,
+          testId = _this$props2$testId === void 0 ? 'inline-card-errored-view' : _this$props2$testId,
+          icon = _this$props2.icon;
+      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+        testId: testId,
+        link: url,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+          label: "error",
+          size: "small",
+          primaryColor: _colors.R300
+        })),
+        title: this.renderMessage()
+      }));
+    }
+  }]);
+  return InlineCardErroredView;
+}(_react.default.Component);
+
+exports.InlineCardErroredView = InlineCardErroredView;

package/dist/cjs/view/InlineCard/ForbiddenView/index.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardForbiddenView = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _Frame = require("../Frame");
+
+var _IconAndTitleLayout = require("../IconAndTitleLayout");
+
+var _Icon = require("../Icon");
+
+var _messages = require("@atlaskit/media-ui/messages");
+
+var _reactIntlNext = require("react-intl-next");
+
+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 FallbackForbiddenIcon = /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  label: "error",
+  size: "small",
+  primaryColor: _colors.R400
+}));
+
+var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(InlineCardForbiddenView, _React$Component);
+
+  var _super = _createSuper(InlineCardForbiddenView);
+
+  function InlineCardForbiddenView() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, InlineCardForbiddenView);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRetry", function (event) {
+      var onAuthorise = _this.props.onAuthorise;
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (onAuthorise) {
+        onAuthorise();
+      } else {
+        var _this$props, _this$props$requestAc, _this$props$requestAc2;
+
+        (_this$props = _this.props) === null || _this$props === void 0 ? void 0 : (_this$props$requestAc = _this$props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : (_this$props$requestAc2 = _this$props$requestAc.action) === null || _this$props$requestAc2 === void 0 ? void 0 : _this$props$requestAc2.promise();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderForbiddenAccessMessage", function () {
+      var _this$props2, _this$props2$requestA;
+
+      if ((_this$props2 = _this.props) !== null && _this$props2 !== void 0 && (_this$props2$requestA = _this$props2.requestAccessContext) !== null && _this$props2$requestA !== void 0 && _this$props2$requestA.callToActionMessageKey) {
+        var callToActionMessageKey = _this.props.requestAccessContext.callToActionMessageKey;
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[callToActionMessageKey], {
+          values: {
+            context: _this.props.context
+          }
+        }));
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.invalid_permissions, function (formattedMessage) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedMessage, ", ");
+      }), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_another_account, function (formattedMessage) {
+        return /*#__PURE__*/_react.default.createElement(_styled.LowercaseAppearance, null, formattedMessage);
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMessage", function () {
+      var _this$props4, _this$props4$requestA;
+
+      var _this$props3 = _this.props,
+          url = _this$props3.url,
+          onAuthorise = _this$props3.onAuthorise;
+
+      var link = /*#__PURE__*/_react.default.createElement(_styled.LinkAppearance, null, url);
+
+      var hasRequestAccessContextMessage = (_this$props4 = _this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$requestA = _this$props4.requestAccessContext) === null || _this$props4$requestA === void 0 ? void 0 : _this$props4$requestA.callToActionMessageKey;
+      return !onAuthorise && !hasRequestAccessContextMessage ? link : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, ' - ', /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+        spacing: "none",
+        appearance: "subtle-link",
+        onClick: _this.handleRetry,
+        component: _styled.IconStyledButton,
+        testId: "button-connect-other-account"
+      }, _this.renderForbiddenAccessMessage()));
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(InlineCardForbiddenView, [{
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+          url = _this$props5.url,
+          icon = _this$props5.icon,
+          onClick = _this$props5.onClick,
+          isSelected = _this$props5.isSelected,
+          _this$props5$testId = _this$props5.testId,
+          testId = _this$props5$testId === void 0 ? 'inline-card-forbidden-view' : _this$props5$testId;
+      return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+        testId: testId,
+        link: url,
+        onClick: onClick,
+        isSelected: isSelected
+      }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
+        icon: icon ? icon : FallbackForbiddenIcon,
+        title: this.renderMessage(),
+        titleColor: _colors.N500
+      }));
+    }
+  }]);
+  return InlineCardForbiddenView;
+}(_react.default.Component);
+
+exports.InlineCardForbiddenView = InlineCardForbiddenView;

package/dist/cjs/view/InlineCard/Frame/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Frame = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = require("@atlaskit/theme/components");
+
+var _styled = require("./styled");
+
+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 Frame = function Frame(props) {
+  var isSelected = props.isSelected,
+      children = props.children,
+      onClick = props.onClick,
+      link = props.link,
+      withoutBackground = props.withoutBackground,
+      withoutHover = props.withoutHover,
+      testId = props.testId,
+      className = props.className;
+  var handleClick = (0, _react.useCallback)(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
+    }
+
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]); // prevent default on mousedown to avoid inline card losing focus
+
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+  }, []);
+  var isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
+  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
+
+  return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+    theme: (0, _components.useGlobalTheme)(),
+    href: link,
+    withoutBackground: withoutBackground,
+    withoutHover: withoutHover,
+    isSelected: isSelected,
+    isInteractive: isInteractive,
+    tabIndex: isInteractive ? 0 : undefined,
+    role: isInteractive ? 'button' : undefined,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyPress: handleKeyPress,
+    "data-testid": testId,
+    className: className
+  }, children);
+};
+
+exports.Frame = Frame;