@atlaskit/smart-card 26.9.15 → 26.9.17

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCard = void 0;
+Object.defineProperty(exports, "InlineCardErroredView", {
+  enumerable: true,
+  get: function get() {
+    return _ErroredView.InlineCardErroredView;
+  }
+});
+Object.defineProperty(exports, "InlineCardForbiddenView", {
+  enumerable: true,
+  get: function get() {
+    return _ForbiddenView.InlineCardForbiddenView;
+  }
+});
+Object.defineProperty(exports, "InlineCardResolvedView", {
+  enumerable: true,
+  get: function get() {
+    return _ResolvedView.InlineCardResolvedView;
+  }
+});
+Object.defineProperty(exports, "InlineCardResolvingView", {
+  enumerable: true,
+  get: function get() {
+    return _ResolvingView.InlineCardResolvingView;
+  }
+});
+Object.defineProperty(exports, "InlineCardUnauthorizedView", {
+  enumerable: true,
+  get: function get() {
+    return _UnauthorisedView.InlineCardUnauthorizedView;
+  }
+});
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _jsonld = require("../../utils/jsonld");
+var _inline = require("../../extractors/inline");
+var _context = require("../../extractors/common/context");
+var _LinkView = require("../LinkView");
+var _ErroredView = require("./ErroredView");
+var _ForbiddenView = require("./ForbiddenView");
+var _ResolvedView = require("./ResolvedView");
+var _ResolvingView = require("./ResolvingView");
+var _UnauthorisedView = require("./UnauthorisedView");
+var _linkExtractors = require("@atlaskit/link-extractors");
+var _linkProvider = require("@atlaskit/link-provider");
+var _helpers = require("../../state/helpers");
+var InlineCard = function InlineCard(_ref) {
+  var _details$meta;
+  var analytics = _ref.analytics,
+    id = _ref.id,
+    url = _ref.url,
+    cardState = _ref.cardState,
+    handleAuthorize = _ref.handleAuthorize,
+    handleFrameClick = _ref.handleFrameClick,
+    isSelected = _ref.isSelected,
+    renderers = _ref.renderers,
+    onResolve = _ref.onResolve,
+    onError = _ref.onError,
+    testId = _ref.testId,
+    inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+    showHoverPreview = _ref.showHoverPreview,
+    showAuthTooltip = _ref.showAuthTooltip,
+    showServerActions = _ref.showServerActions;
+  var status = cardState.status,
+    details = cardState.details;
+  var cardDetails = details && details.data || (0, _jsonld.getEmptyJsonLd)();
+  var extensionKey = (0, _helpers.getExtensionKey)(details);
+  var testIdWithStatus = testId ? "".concat(testId, "-").concat(status, "-view") : undefined;
+  var showHoverPreviewFlag = (0, _linkProvider.useFeatureFlag)('showHoverPreview');
+  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
+    showHoverPreview = Boolean(showHoverPreviewFlag);
+  }
+  switch (status) {
+    case 'pending':
+    case 'resolving':
+      return /*#__PURE__*/_react.default.createElement(_ResolvingView.InlineCardResolvingView, {
+        url: url,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        testId: testIdWithStatus,
+        inlinePreloaderStyle: inlinePreloaderStyle
+      });
+    case 'resolved':
+      var resolvedProps = (0, _inline.extractInlineProps)(cardDetails, renderers);
+      if (onResolve) {
+        onResolve({
+          url: url,
+          title: resolvedProps.title
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedProps, {
+        id: id,
+        showHoverPreview: showHoverPreview,
+        showServerActions: showServerActions,
+        link: url,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        testId: testIdWithStatus
+      }));
+    case 'unauthorized':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var provider = (0, _linkExtractors.extractProvider)(cardDetails);
+      return /*#__PURE__*/_react.default.createElement(_UnauthorisedView.InlineCardUnauthorizedView, {
+        icon: provider && provider.icon,
+        context: provider && provider.text,
+        url: url,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        onAuthorise: handleAuthorize,
+        testId: testIdWithStatus,
+        showAuthTooltip: showAuthTooltip,
+        id: id,
+        analytics: analytics,
+        extensionKey: extensionKey
+      });
+    case 'forbidden':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var providerForbidden = (0, _linkExtractors.extractProvider)(cardDetails);
+      var cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
+      var requestAccessContext = (0, _context.extractRequestAccessContext)({
+        jsonLd: cardMetadata,
+        url: url,
+        context: providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text
+      });
+      return /*#__PURE__*/_react.default.createElement(_ForbiddenView.InlineCardForbiddenView, {
+        url: url,
+        icon: providerForbidden && providerForbidden.icon,
+        context: providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        onAuthorise: handleAuthorize,
+        testId: testIdWithStatus,
+        requestAccessContext: requestAccessContext
+      });
+    case 'not_found':
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      var providerNotFound = (0, _linkExtractors.extractProvider)(cardDetails);
+      return /*#__PURE__*/_react.default.createElement(_ErroredView.InlineCardErroredView, {
+        url: url,
+        icon: providerNotFound && providerNotFound.icon,
+        isSelected: isSelected,
+        message: "Can't find link",
+        onClick: handleFrameClick,
+        testId: testIdWithStatus || 'inline-card-not-found-view'
+      });
+    case 'fallback':
+    case 'errored':
+    default:
+      if (onError) {
+        onError({
+          url: url,
+          status: status
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_LinkView.CardLinkView, {
+        link: url,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        testId: testIdWithStatus || 'inline-card-errored-view'
+      });
+  }
+};
+exports.InlineCard = InlineCard;

package/dist/cjs/view/RedesignedInlineCard/styled.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoLinkAppearance = exports.LowercaseAppearance = exports.LinkAppearance = exports.IconStyledButton = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
+var _components = require("@atlaskit/theme/components");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var LINK_COLOR_DARK = '#4794FF';
+
+// By default buttons will hide overflow and ellipsis content instead of wrapping.
+// This basically turns the button back into inline content
+// There is a workaround for negative token spacing suggested by the design system team. calc(${token} * -1)
+var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 2px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
+exports.IconStyledButton = IconStyledButton;
+var NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-left: ", ";\n"])), (0, _components.themed)({
+  light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  dark: "var(--ds-text-subtlest, ".concat(LINK_COLOR_DARK, ")")
+}), "var(--ds-space-050, 4px)");
+exports.NoLinkAppearance = NoLinkAppearance;
+var LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: lowercase;\n"])));
+exports.LowercaseAppearance = LowercaseAppearance;
+var LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), (0, _components.themed)({
+  light: "var(--ds-link, ".concat(_colors.B400, ")"),
+  dark: "var(--ds-link, ".concat(LINK_COLOR_DARK, ")")
+}));
+exports.LinkAppearance = LinkAppearance;

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

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

package/dist/cjs/view/RedesignedInlineCard/utils/withFrameStyleControl.js

@@ -0,0 +1,42 @@
+"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 _components = require("@atlaskit/theme/components");
+var _colors = require("@atlaskit/theme/colors");
+/**
+ * This HOC serves as a temporary workaround for controlling the style of a parent component.
+ * We do not want the Frame to have a hover state when hovering over the action button.
+ * TODO: When Firefox begins supporting the :has()pseudo-selector (e.g "frame:has(button:hover){...}"),
+ * it should be used instead and the code should be cleaned up.
+ */
+var _default = function _default(Button, frameRef) {
+  return function (props) {
+    var setBorderStyle = function setBorderStyle() {
+      var borderColor = (0, _components.themed)({
+        light: "".concat("var(--ds-border-input, ".concat(_colors.N40, ")")),
+        dark: "".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
+      })();
+      var frameNode = frameRef.current;
+      if (frameNode) {
+        frameNode.style.borderColor = borderColor;
+      }
+    };
+    var removeBorderStyle = function removeBorderStyle() {
+      var frameNode = frameRef.current;
+      if (frameNode) {
+        frameNode.removeAttribute('style');
+      }
+    };
+    return /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, props, {
+      onMouseEnter: setBorderStyle,
+      onMouseLeave: removeBorderStyle
+    }));
+  };
+};
+exports.default = _default;

package/dist/es2019/state/helpers.js

@@ -49,28 +49,6 @@ export const isVisible = ({
     visibility
   }
 }) => visibility === 'restricted' || visibility === 'public';
-
-// Be aware, this is a copy of a function in link-provider/src/helpers
-export const getStatus = ({
-  meta
-}) => {
-  const {
-    access,
-    visibility
-  } = meta;
-  switch (access) {
-    case 'forbidden':
-      if (visibility === 'not_found') {
-        return 'not_found';
-      } else {
-        return 'forbidden';
-      }
-    case 'unauthorized':
-      return 'unauthorized';
-    default:
-      return 'resolved';
-  }
-};
 export const getStatusDetails = details => {
   var _details$meta6, _details$meta6$reques;
   return details === null || details === void 0 ? void 0 : (_details$meta6 = details.meta) === null || _details$meta6 === void 0 ? void 0 : (_details$meta6$reques = _details$meta6.requestAccess) === null || _details$meta6$reques === void 0 ? void 0 : _details$meta6$reques.accessType;

package/dist/es2019/state/hooks/use-resolve/index.js

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 import { addMetadataToExperience } from '../../analytics';
-import { getStatus } from '../../helpers';
-import { ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_RESOLVED, ACTION_UPDATE_METADATA_STATUS, APIError, cardAction } from '@atlaskit/linking-common';
+import { ACTION_ERROR, ACTION_ERROR_FALLBACK, ACTION_RELOADING, ACTION_RESOLVED, ACTION_UPDATE_METADATA_STATUS, APIError, cardAction, getStatus } from '@atlaskit/linking-common';
 import { ERROR_MESSAGE_FATAL, ERROR_MESSAGE_METADATA, ERROR_MESSAGE_OAUTH } from '../../actions/constants';
 import { getUnauthorizedJsonLd } from '../../../utils/jsonld';
 import { SmartLinkStatus } from '../../../constants';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "26.9.15",
+	"version": "26.9.17",
 	"sideEffects": false
 }

package/dist/es2019/view/CardWithUrl/component.js

@@ -7,6 +7,8 @@ import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceTyp
 import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
+import { InlineCard as RedesignedInlineCard } from '../RedesignedInlineCard';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
@@ -192,7 +194,7 @@ function Component({
   }
   switch (appearance) {
     case 'inline':
-      return /*#__PURE__*/React.createElement(InlineCard, {
+      const inlineProps = {
         analytics: analytics,
         id: id,
         url: url,
@@ -208,7 +210,8 @@ function Component({
         showHoverPreview: showHoverPreview,
         showAuthTooltip: showAuthTooltip,
         showServerActions: showServerActions
-      });
+      };
+      return getBooleanFF('platform.linking-platform.smart-card.show-inline-card-refreshed-design') ? /*#__PURE__*/React.createElement(RedesignedInlineCard, inlineProps) : /*#__PURE__*/React.createElement(InlineCard, inlineProps);
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {
         id: id,

package/dist/es2019/view/InlineCard/Icon.js

@@ -30,9 +30,7 @@ export const Shimmer = ({
 }) => {
   const skeletonCustomStyles = {
     position: 'absolute',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     top: '50%',
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     left: '50%',
     transform: 'translate(-50%, -50%)',
     marginRight: "var(--ds-space-050, 4px)"

package/dist/es2019/view/RedesignedInlineCard/ErroredView/index.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { R300 } from '@atlaskit/theme/colors';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Frame } from '../Frame';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { AKIconWrapper } from '../Icon';
+import { messages } from '../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import { IconStyledButton } from '../styled';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+export class InlineCardErroredView extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handleRetry", event => {
+      const {
+        onRetry
+      } = this.props;
+      if (onRetry) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRetry();
+      }
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      const {
+        onRetry
+      } = this.props;
+      const ActionButton = withFrameStyleControl(Button, this.frameRef);
+      return onRetry && /*#__PURE__*/React.createElement(ActionButton, {
+        spacing: "none",
+        component: IconStyledButton,
+        onClick: this.handleRetry,
+        role: "button"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
+    });
+  }
+  render() {
+    const {
+      url,
+      onClick,
+      isSelected,
+      testId = 'inline-card-errored-view',
+      icon,
+      message
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+        label: "error",
+        size: "small",
+        primaryColor: `var(--ds-icon-danger, ${R300})`,
+        testId: "errored-view-default-icon"
+      })),
+      link: url,
+      title: url,
+      onClick: onClick,
+      rightSide: message
+    }), this.renderActionButton());
+  }
+}

package/dist/es2019/view/RedesignedInlineCard/ForbiddenView/index.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { R400, N500 } from '@atlaskit/theme/colors';
+import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Frame } from '../Frame';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { AKIconWrapper } from '../Icon';
+import { messages } from '../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import { IconStyledButton } from '../styled';
+import Lozenge from '@atlaskit/lozenge';
+import { LozengeWrapper } from '../IconAndTitleLayout/styled';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+  label: "error",
+  size: "small",
+  primaryColor: `var(--ds-icon-danger, ${R400})`,
+  testId: "forbidden-view-fallback-icon"
+}));
+export class InlineCardForbiddenView extends React.Component {
+  constructor(...args) {
+    var _this$props, _this$props$requestAc;
+    super(...args);
+    _defineProperty(this, "frameRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
+      hasRequestAccessContextMessage: !!((_this$props = this.props) !== null && _this$props !== void 0 && (_this$props$requestAc = _this$props.requestAccessContext) !== null && _this$props$requestAc !== void 0 && _this$props$requestAc.callToActionMessageKey)
+    });
+    _defineProperty(this, "handleRetry", event => {
+      const {
+        onAuthorise
+      } = this.props;
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAuthorise) {
+        onAuthorise();
+      } else {
+        var _this$props2, _this$props2$requestA, _this$props2$requestA2;
+        (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$requestA = _this$props2.requestAccessContext) === null || _this$props2$requestA === void 0 ? void 0 : (_this$props2$requestA2 = _this$props2$requestA.action) === null || _this$props2$requestA2 === void 0 ? void 0 : _this$props2$requestA2.promise();
+      }
+    });
+    _defineProperty(this, "renderForbiddenAccessMessage", () => {
+      var _this$props3, _this$props3$requestA;
+      if ((_this$props3 = this.props) !== null && _this$props3 !== void 0 && (_this$props3$requestA = _this$props3.requestAccessContext) !== null && _this$props3$requestA !== void 0 && _this$props3$requestA.callToActionMessageKey) {
+        const {
+          callToActionMessageKey
+        } = this.props.requestAccessContext;
+        return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[callToActionMessageKey], {
+          values: {
+            context: this.props.context
+          }
+        }));
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.invalid_permissions, formattedMessage => {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, formattedMessage);
+      }));
+    });
+    _defineProperty(this, "renderActionButton", () => {
+      const {
+        onAuthorise
+      } = this.props;
+      const ActionButton = withFrameStyleControl(Button, this.frameRef);
+      if (this.state.hasRequestAccessContextMessage) {
+        return /*#__PURE__*/React.createElement(ActionButton, {
+          spacing: "none",
+          onClick: this.handleRetry,
+          component: IconStyledButton,
+          testId: "button-connect-other-account",
+          role: "button"
+        }, this.renderForbiddenAccessMessage());
+      }
+      if (onAuthorise) {
+        return /*#__PURE__*/React.createElement(Button, {
+          spacing: "none",
+          onClick: this.handleRetry,
+          appearance: "subtle-link",
+          testId: "button-connect-other-account",
+          role: "button"
+        }, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+          appearance: 'moved'
+        }, this.renderForbiddenAccessMessage())));
+      }
+      return null;
+    });
+  }
+  render() {
+    const {
+      url,
+      icon,
+      onClick,
+      isSelected,
+      testId = 'inline-card-forbidden-view'
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Frame, {
+      testId: testId,
+      isSelected: isSelected,
+      ref: this.frameRef
+    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+      icon: icon ? icon : FallbackForbiddenIcon,
+      link: url,
+      title: url,
+      onClick: onClick,
+      titleColor: `var(--ds-text-subtle, ${N500})`
+    }), this.renderActionButton());
+  }
+}

package/dist/es2019/view/RedesignedInlineCard/Frame/index.js

@@ -0,0 +1,55 @@
+import React, { useCallback, forwardRef } from 'react';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { WrapperAnchor, WrapperSpan } from './styled';
+import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
+export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    isSelected,
+    children,
+    onClick,
+    link,
+    withoutBackground,
+    testId,
+    className
+  } = props;
+  const handleClick = useCallback(event => {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  const handleKeyPress = useCallback(event => {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
+    }
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  const handleMouseDown = useMouseDownEvent();
+  const isInteractive = Boolean(onClick);
+
+  // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
+  const Wrapper = link || onClick ? WrapperAnchor : WrapperSpan;
+
+  // 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.createElement(Wrapper, {
+    theme: useGlobalTheme(),
+    href: link,
+    withoutBackground: withoutBackground,
+    isSelected: isSelected,
+    isInteractive: isInteractive,
+    tabIndex: isInteractive ? 0 : undefined,
+    role: isInteractive ? 'button' : undefined,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyPress: handleKeyPress,
+    "data-testid": testId,
+    className: className,
+    ref: ref
+  }, children);
+});