@atlaskit/smart-card 18.0.1 → 18.0.4

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -1,67 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import React, { useState } from 'react';
-import { css, jsx } from '@emotion/core';
-import { LinkIcon, Title } from '../../../elements';
-import Block from '../../block';
-import ElementGroup from '../../element-group';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
-import { renderElementItems } from '../../utils';
-import ActionGroup from '../../action-group';
-const actionOnHoverOnlyStyle = css`
-  .action-group-more-button {
-    visibility: hidden;
-  }
+import React from 'react';
+import { jsx } from '@emotion/core';
+import { BaseTitleBlockComponent } from '../utils';
 
-  &:hover {
-    .action-group-more-button {
-      visibility: visible;
-    }
-  }
-`;
-
-const TitleBlockResolvedView = ({
-  maxLines,
-  metadata = [],
-  position,
-  subtitle = [],
-  actions = [],
-  testId,
-  theme,
-  onClick,
-  text,
-  showActionOnHover,
-  ...blockProps
-}) => {
-  const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
-  const metadataElements = renderElementItems(metadata);
-  const subtitleElements = renderElementItems(subtitle);
-  const overrideText = !!text ? {
-    text
-  } : {};
-  const extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
-  return jsx(Block, _extends({}, blockProps, {
-    testId: `${testId}-resolved-view`,
-    extraCss: extraCss
-  }), jsx(LinkIcon, {
-    position: position
-  }), jsx(ElementGroup, {
-    direction: SmartLinkDirection.Vertical,
-    width: SmartLinkWidth.Flexible
-  }, jsx(Title, _extends({
-    maxLines: maxLines,
-    theme: theme,
-    onClick: onClick
-  }, overrideText)), subtitleElements && jsx(ElementGroup, {
-    direction: SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && jsx(ElementGroup, {
-    direction: SmartLinkDirection.Horizontal,
-    align: SmartLinkAlignment.Right
-  }, metadataElements), actions.length > 0 && jsx(ActionGroup, {
-    items: actions,
-    visibleButtonsNum: showActionOnHover ? 1 : 2,
-    onDropdownOpenChange: isOpen => setActionDropdownOpen(isOpen)
+const TitleBlockResolvedView = props => {
+  return jsx(BaseTitleBlockComponent, _extends({}, props, {
+    blockTestIdPostfix: "resolved-view"
   }));
 };
 

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -4,9 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
-import { Title } from '../../../elements';
-import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
+import { BaseTitleBlockComponent } from '../utils';
 
 const getSpinnerSize = size => {
   // Spinner sizes should be equivalent or smaller than Icon size
@@ -27,30 +26,19 @@ const getSpinnerSize = size => {
   }
 };
 
-const TitleBlockResolvingView = ({
-  maxLines,
-  retry,
-  position,
-  testId,
-  theme,
-  text,
-  ...blockProps
-}) => {
+const TitleBlockResolvingView = props => {
   const {
-    size = SmartLinkSize.Medium
-  } = blockProps;
-  const overrideText = !!text ? {
-    text
-  } : {};
-  return jsx(Block, _extends({}, blockProps, {
-    testId: `${testId}-resolving-view`
-  }), jsx(Spinner, {
+    size = SmartLinkSize.Medium,
+    testId
+  } = props;
+  const spinnerIcon = jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: `${testId}-resolving-spinner`
-  }), jsx(Title, _extends({}, overrideText, {
-    maxLines: maxLines,
-    theme: theme
-  })));
+  });
+  return jsx(BaseTitleBlockComponent, _extends({}, props, {
+    blockIcon: spinnerIcon,
+    blockTestIdPostfix: "resolving-view"
+  }));
 };
 
 export default TitleBlockResolvingView;

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/utils.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { jsx } from '@emotion/core';
+import { css } from '@emotion/core';
+import Block from '../block';
+import { LinkIcon, Title } from '../../elements';
+import ActionGroup from '../action-group';
+import { SmartLinkAlignment, SmartLinkWidth, SmartLinkDirection } from '../../../../../constants';
+import ElementGroup from '../element-group';
+import { renderElementItems } from '../utils';
+export const actionOnHoverOnlyStyle = css`
+  .action-group-more-button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .action-group-more-button {
+      visibility: visible;
+    }
+  }
+`;
+export const BaseTitleBlockComponent = ({
+  children,
+  blockTestIdPostfix,
+  blockIcon,
+  testId,
+  showActionOnHover,
+  position,
+  actions = [],
+  text,
+  maxLines,
+  theme,
+  onClick,
+  metadata = [],
+  subtitle = [],
+  ...blockProps
+}) => {
+  const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
+  const extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
+  const overrideText = !!text ? {
+    text
+  } : {};
+  const metadataElements = renderElementItems(metadata);
+  const subtitleElements = renderElementItems(subtitle);
+  return jsx(Block, _extends({}, blockProps, {
+    testId: `${testId}-${blockTestIdPostfix}`,
+    extraCss: extraCss
+  }), blockIcon || jsx(LinkIcon, {
+    position: position
+  }), jsx(ElementGroup, {
+    direction: SmartLinkDirection.Vertical,
+    width: SmartLinkWidth.Flexible
+  }, jsx(Title, _extends({
+    maxLines: maxLines,
+    theme: theme,
+    onClick: onClick
+  }, overrideText)), subtitleElements && jsx(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && jsx(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, metadataElements), children, actions.length > 0 && jsx(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: isOpen => setActionDropdownOpen(isOpen)
+  }));
+};

package/dist/es2019/view/HoverCard/index.js

@@ -1,9 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useRef } from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useCallback, useRef, useMemo } from 'react';
 import { TitleBlock, SnippetBlock, FooterBlock } from '../FlexibleCard/components/blocks';
 import { Card } from '../Card';
 import Popup from '@atlaskit/popup';
-import { SmartLinkSize } from '../../constants';
+import { SmartLinkSize, ActionName } from '../../constants';
+import { useSmartLinkActions } from '../../state/hooks-external/useSmartLinkActions';
+import { HoverCardContainer } from './styled';
 export const HoverCard = ({
   children,
   url
@@ -29,28 +34,44 @@ export const HoverCard = ({
     fadeInTimeoutId.current = setTimeout(() => {
       setIsOpen(true);
     }, delay);
-  }, [delay]);
+  }, [delay]); //TODO: EDM-2905: Add analytics events
+
+  const analyticsHandler = useCallback(() => {}, []);
+  const linkActions = useSmartLinkActions({
+    url,
+    appearance: 'block',
+    analyticsHandler
+  });
+  const actions = useMemo(() => linkActions.map(action => ({
+    content: action.text,
+    name: ActionName.CustomAction,
+    onClick: () => action.invoke(),
+    testId: action.id
+  })), [linkActions]);
 
-  const cardComponent = () => /*#__PURE__*/React.createElement("span", {
+  const cardComponent = () => jsx("div", {
     onMouseEnter: initShowCard,
-    onMouseLeave: initHideCard
-  }, /*#__PURE__*/React.createElement(Card, {
+    onMouseLeave: initHideCard,
+    css: HoverCardContainer
+  }, jsx(Card, {
     appearance: "block",
     url: url,
     ui: {
       hideElevation: true,
       size: SmartLinkSize.Large
     }
-  }, /*#__PURE__*/React.createElement(TitleBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(FooterBlock, null)));
+  }, jsx(TitleBlock, null), jsx(SnippetBlock, null), jsx(FooterBlock, {
+    actions: actions
+  })));
 
   const onClose = useCallback(() => setIsOpen(false), []);
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     testId: "hover-card",
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom",
     content: cardComponent,
-    trigger: triggerProps => /*#__PURE__*/React.createElement("span", _extends({}, triggerProps, {
+    trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard
     }), children)

package/dist/es2019/view/HoverCard/styled.js

@@ -1,9 +1,7 @@
-import styled from '@emotion/styled';
-import { TooltipPrimitive } from '@atlaskit/tooltip';
-export const HoverCardContainer = styled(TooltipPrimitive)`
+import { css } from '@emotion/core';
+export const HoverCardContainer = css`
   background: none;
   border-width: 0;
-  box-sizing: content-box; /* do not set this to border-box or it will break the overflow handling */
   max-width: 500px;
   padding: 0;
 `;

package/dist/esm/version.json

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

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

@@ -8,6 +8,7 @@ import { InlineCard } from '../InlineCard';
 import { EmbedCard } from '../EmbedCard';
 import { isFlexibleUiCard } from '../../utils/flexible';
 import FlexibleCard from '../FlexibleCard';
+import { APIError } from '../..';
 export function CardWithUrlContent(_ref) {
   var id = _ref.id,
       url = _ref.url,
@@ -82,15 +83,14 @@ export function CardWithUrlContent(_ref) {
     if (isFinalState(state.status)) {
       analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
     }
-  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]); // We have to keep this last to prevent hook order from being violated
-
-  if (error) {
-    throw error;
-  }
+  }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
   if (isFlexibleUi) {
+    var cardState = (error === null || error === void 0 ? void 0 : error.constructor) === APIError ? {
+      status: 'errored'
+    } : state;
     return /*#__PURE__*/React.createElement(FlexibleCard, {
-      cardState: state,
+      cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
       renderers: renderers,
@@ -98,6 +98,11 @@ export function CardWithUrlContent(_ref) {
       url: url,
       testId: testId
     }, children);
+  } // We have to keep this last to prevent hook order from being violated
+
+
+  if (error) {
+    throw error;
   }
 
   switch (appearance) {

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 var _templateObject, _templateObject2;
 
@@ -9,12 +7,11 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
-import { LinkIcon, Title } from '../../../elements';
-import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
 import { tokens } from '../../../../../../utils/token';
+import { BaseTitleBlockComponent } from '../utils';
 var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), tokens.errorMessageHover);
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
@@ -22,42 +19,29 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
   return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
 };
 
-var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
-  var maxLines = _ref.maxLines,
-      retry = _ref.retry,
-      position = _ref.position,
-      testId = _ref.testId,
-      theme = _ref.theme,
-      text = _ref.text,
-      blockProps = _objectWithoutProperties(_ref, _excluded);
+var TitleBlockErroredView = function TitleBlockErroredView(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
+      retry = props.retry,
+      testId = props.testId;
 
-  var _ref2 = retry || {},
-      descriptor = _ref2.descriptor,
-      onClick = _ref2.onClick,
-      values = _ref2.values;
+  var _ref = retry || {},
+      retryDescriptor = _ref.descriptor,
+      onClick = _ref.onClick,
+      retryValues = _ref.values;
 
-  var _blockProps$size = blockProps.size,
-      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
-  var overrideText = !!text ? {
-    text: text
-  } : {};
-  return jsx(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-errored-view")
-  }), jsx(LinkIcon, {
-    position: position
-  }), jsx(Title, _extends({}, overrideText, {
-    maxLines: maxLines,
-    theme: theme
-  })), descriptor && jsx(ElementGroup, {
+  return jsx(BaseTitleBlockComponent, _extends({}, props, {
+    blockTestIdPostfix: "errored-view"
+  }), retryDescriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": "".concat(testId, "-errored-view-message")
-  }, jsx(FormattedMessage, _extends({}, descriptor, {
-    values: values
+  }, jsx(FormattedMessage, _extends({}, retryDescriptor, {
+    values: retryValues
   })))));
 };
 

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/index.js

@@ -1,72 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "onClick", "text", "showActionOnHover"];
-
-var _templateObject;
 
 /** @jsx jsx */
-import React, { useState } from 'react';
-import { css, jsx } from '@emotion/core';
-import { LinkIcon, Title } from '../../../elements';
-import Block from '../../block';
-import ElementGroup from '../../element-group';
-import { SmartLinkAlignment, SmartLinkDirection, SmartLinkWidth } from '../../../../../../constants';
-import { renderElementItems } from '../../utils';
-import ActionGroup from '../../action-group';
-var actionOnHoverOnlyStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .action-group-more-button {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .action-group-more-button {\n      visibility: visible;\n    }\n  }\n"])));
-
-var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
-  var maxLines = _ref.maxLines,
-      _ref$metadata = _ref.metadata,
-      metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
-      position = _ref.position,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      testId = _ref.testId,
-      theme = _ref.theme,
-      onClick = _ref.onClick,
-      text = _ref.text,
-      showActionOnHover = _ref.showActionOnHover,
-      blockProps = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      actionDropdownOpen = _useState2[0],
-      setActionDropdownOpen = _useState2[1];
+import React from 'react';
+import { jsx } from '@emotion/core';
+import { BaseTitleBlockComponent } from '../utils';
 
-  var metadataElements = renderElementItems(metadata);
-  var subtitleElements = renderElementItems(subtitle);
-  var overrideText = !!text ? {
-    text: text
-  } : {};
-  var extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
-  return jsx(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-resolved-view"),
-    extraCss: extraCss
-  }), jsx(LinkIcon, {
-    position: position
-  }), jsx(ElementGroup, {
-    direction: SmartLinkDirection.Vertical,
-    width: SmartLinkWidth.Flexible
-  }, jsx(Title, _extends({
-    maxLines: maxLines,
-    theme: theme,
-    onClick: onClick
-  }, overrideText)), subtitleElements && jsx(ElementGroup, {
-    direction: SmartLinkDirection.Horizontal
-  }, subtitleElements)), metadataElements && jsx(ElementGroup, {
-    direction: SmartLinkDirection.Horizontal,
-    align: SmartLinkAlignment.Right
-  }, metadataElements), actions.length > 0 && jsx(ActionGroup, {
-    items: actions,
-    visibleButtonsNum: showActionOnHover ? 1 : 2,
-    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
-      return setActionDropdownOpen(isOpen);
-    }
+var TitleBlockResolvedView = function TitleBlockResolvedView(props) {
+  return jsx(BaseTitleBlockComponent, _extends({}, props, {
+    blockTestIdPostfix: "resolved-view"
   }));
 };
 

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -1,14 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
-import { Title } from '../../../elements';
-import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
+import { BaseTitleBlockComponent } from '../utils';
 
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
@@ -29,29 +26,18 @@ var getSpinnerSize = function getSpinnerSize(size) {
   }
 };
 
-var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
-  var maxLines = _ref.maxLines,
-      retry = _ref.retry,
-      position = _ref.position,
-      testId = _ref.testId,
-      theme = _ref.theme,
-      text = _ref.text,
-      blockProps = _objectWithoutProperties(_ref, _excluded);
-
-  var _blockProps$size = blockProps.size,
-      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
-  var overrideText = !!text ? {
-    text: text
-  } : {};
-  return jsx(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-resolving-view")
-  }), jsx(Spinner, {
+var TitleBlockResolvingView = function TitleBlockResolvingView(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
+      testId = props.testId;
+  var spinnerIcon = jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  }), jsx(Title, _extends({}, overrideText, {
-    maxLines: maxLines,
-    theme: theme
-  })));
+  });
+  return jsx(BaseTitleBlockComponent, _extends({}, props, {
+    blockIcon: spinnerIcon,
+    blockTestIdPostfix: "resolving-view"
+  }));
 };
 
 export default TitleBlockResolvingView;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/utils.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["children", "blockTestIdPostfix", "blockIcon", "testId", "showActionOnHover", "position", "actions", "text", "maxLines", "theme", "onClick", "metadata", "subtitle"];
+
+var _templateObject;
+
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { jsx } from '@emotion/core';
+import { css } from '@emotion/core';
+import Block from '../block';
+import { LinkIcon, Title } from '../../elements';
+import ActionGroup from '../action-group';
+import { SmartLinkAlignment, SmartLinkWidth, SmartLinkDirection } from '../../../../../constants';
+import ElementGroup from '../element-group';
+import { renderElementItems } from '../utils';
+export var actionOnHoverOnlyStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .action-group-more-button {\n    visibility: hidden;\n  }\n\n  &:hover {\n    .action-group-more-button {\n      visibility: visible;\n    }\n  }\n"])));
+export var BaseTitleBlockComponent = function BaseTitleBlockComponent(_ref) {
+  var children = _ref.children,
+      blockTestIdPostfix = _ref.blockTestIdPostfix,
+      blockIcon = _ref.blockIcon,
+      testId = _ref.testId,
+      showActionOnHover = _ref.showActionOnHover,
+      position = _ref.position,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      text = _ref.text,
+      maxLines = _ref.maxLines,
+      theme = _ref.theme,
+      onClick = _ref.onClick,
+      _ref$metadata = _ref.metadata,
+      metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? [] : _ref$subtitle,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      actionDropdownOpen = _useState2[0],
+      setActionDropdownOpen = _useState2[1];
+
+  var extraCss = showActionOnHover && !actionDropdownOpen ? actionOnHoverOnlyStyle : undefined;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
+  var metadataElements = renderElementItems(metadata);
+  var subtitleElements = renderElementItems(subtitle);
+  return jsx(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-").concat(blockTestIdPostfix),
+    extraCss: extraCss
+  }), blockIcon || jsx(LinkIcon, {
+    position: position
+  }), jsx(ElementGroup, {
+    direction: SmartLinkDirection.Vertical,
+    width: SmartLinkWidth.Flexible
+  }, jsx(Title, _extends({
+    maxLines: maxLines,
+    theme: theme,
+    onClick: onClick
+  }, overrideText)), subtitleElements && jsx(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal
+  }, subtitleElements)), metadataElements && jsx(ElementGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    align: SmartLinkAlignment.Right
+  }, metadataElements), children, actions.length > 0 && jsx(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
+      return setActionDropdownOpen(isOpen);
+    }
+  }));
+};