@atlaskit/smart-card 25.5.2 → 25.5.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 25.5.4
+
+### Patch Changes
+
+- [`19622f395b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19622f395b0) - Connect `showServerActions` prop to flexible smart links, surfacing the lozenge dropdown action behind feature flag.
+
+## 25.5.3
+
+### Patch Changes
+
+- [`da5d5b2dbef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da5d5b2dbef) - Fire link clicked analytics event for LinkUrl component
+
 ## 25.5.2
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -36,6 +36,7 @@ function CardWithUrlContent(_ref) {
     onError = _ref.onError,
     testId = _ref.testId,
     showActions = _ref.showActions,
+    showServerActionsProp = _ref.showServerActions,
     inheritDimensions = _ref.inheritDimensions,
     embedIframeRef = _ref.embedIframeRef,
     embedIframeUrlType = _ref.embedIframeUrlType,
@@ -69,6 +70,7 @@ function CardWithUrlContent(_ref) {
   var showAuthTooltipFeatureFlagValue = (0, _linkProvider.useFeatureFlag)('showAuthTooltip');
   var showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard'));
+  var showServerActions = showServerActionsProp && platform !== 'mobile';
 
   // Setup UI handlers.
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
@@ -188,6 +190,7 @@ function CardWithUrlContent(_ref) {
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
+      showServerActions: showServerActions,
       url: url,
       testId: testId,
       onResolve: onResolve,

package/dist/cjs/view/CardWithUrl/loader.js

@@ -48,6 +48,7 @@ function CardWithURLRenderer(props) {
     onError = props.onError,
     testId = props.testId,
     showActions = props.showActions,
+    showServerActions = props.showServerActions,
     inheritDimensions = props.inheritDimensions,
     platform = props.platform,
     embedIframeRef = props.embedIframeRef,
@@ -119,6 +120,7 @@ function CardWithURLRenderer(props) {
     onError: onError,
     testId: testId,
     showActions: showActions,
+    showServerActions: showServerActions,
     inheritDimensions: inheritDimensions,
     platform: platform,
     embedIframeRef: embedIframeRef,

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _linkProvider = require("@atlaskit/link-provider");
 var _constants = require("../../constants");
 var _container = _interopRequireDefault(require("./components/container"));
 var _flexibleUiContext = require("../../state/flexible-ui-context");
@@ -38,16 +39,23 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardType = cardState.status,
     details = cardState.details;
   var status = cardType;
+  var useLozengeAction = (0, _linkProvider.useFeatureFlag)('useLozengeAction');
+  var featureFlags = (0, _react.useMemo)(function () {
+    return {
+      useLozengeAction: useLozengeAction
+    };
+  }, [useLozengeAction]);
   var context = (0, _react.useMemo)(function () {
     return (0, _utils.getContextByStatus)({
       response: details,
+      featureFlags: featureFlags,
       id: id,
       renderers: renderers,
       showServerActions: showServerActions,
       status: status,
       url: url
     });
-  }, [details, id, renderers, showServerActions, status, url]);
+  }, [details, featureFlags, id, renderers, showServerActions, status, url]);
   var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
   var _ref2 = context || {},
     title = _ref2.title;

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

@@ -12,7 +12,9 @@ var _useLinkWarningModal2 = require("./LinkWarningModal/hooks/use-link-warning-m
 var _LinkWarningModal = _interopRequireDefault(require("./LinkWarningModal"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _version = require("../../version.json");
-var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
+var _click = require("../../utils/analytics/click");
+var _useMouseDownEvent = _interopRequireDefault(require("../../state/analytics/useMouseDownEvent"));
+var _excluded = ["href", "children", "checkSafety", "onClick", "onMouseDown", "testId"],
   _excluded2 = ["checkLinkSafety"];
 var PACKAGE_DATA = {
   packageName: _version.name,
@@ -25,18 +27,27 @@ var LinkUrl = function LinkUrl(_ref) {
     _ref$checkSafety = _ref.checkSafety,
     checkSafety = _ref$checkSafety === void 0 ? true : _ref$checkSafety,
     _onClick = _ref.onClick,
+    _onMouseDown = _ref.onMouseDown,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useLinkWarningModal = (0, _useLinkWarningModal2.useLinkWarningModal)(),
     checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
     linkWarningModalProps = (0, _objectWithoutProperties2.default)(_useLinkWarningModal, _excluded2);
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var handleMouseDown = (0, _useMouseDownEvent.default)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
     "data-testid": testId,
     href: href,
     onClick: function onClick(e) {
       checkSafety && checkLinkSafety(e, href);
       _onClick && _onClick(e);
+      (0, _click.fireLinkClickedEvent)(createAnalyticsEvent)(e);
+    },
+    onMouseDown: function onMouseDown(e) {
+      _onMouseDown && _onMouseDown(e);
+      handleMouseDown(e); // add analytics
     }
   }, props), children), checkSafety && /*#__PURE__*/_react.default.createElement(_LinkWarningModal.default, linkWarningModalProps));
 };

package/dist/es2019/version.json

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

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

@@ -26,6 +26,7 @@ export function CardWithUrlContent({
   onError,
   testId,
   showActions,
+  showServerActions: showServerActionsProp,
   inheritDimensions,
   embedIframeRef,
   embedIframeUrlType,
@@ -60,6 +61,7 @@ export function CardWithUrlContent({
   const showAuthTooltipFeatureFlagValue = useFeatureFlag('showAuthTooltip');
   const showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
+  const showServerActions = showServerActionsProp && platform !== 'mobile';
 
   // Setup UI handlers.
   const handleClickWrapper = useCallback(event => {
@@ -175,6 +177,7 @@ export function CardWithUrlContent({
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
+      showServerActions: showServerActions,
       url: url,
       testId: testId,
       onResolve: onResolve,

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

@@ -28,6 +28,7 @@ export function CardWithURLRenderer(props) {
     onError,
     testId,
     showActions,
+    showServerActions,
     inheritDimensions,
     platform,
     embedIframeRef,
@@ -102,6 +103,7 @@ export function CardWithURLRenderer(props) {
     onError,
     testId,
     showActions,
+    showServerActions,
     inheritDimensions,
     platform,
     embedIframeRef,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useMemo } from 'react';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
 import { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
@@ -32,14 +33,19 @@ const FlexibleCard = ({
     details
   } = cardState;
   const status = cardType;
+  const useLozengeAction = useFeatureFlag('useLozengeAction');
+  const featureFlags = useMemo(() => ({
+    useLozengeAction
+  }), [useLozengeAction]);
   const context = useMemo(() => getContextByStatus({
     response: details,
+    featureFlags,
     id,
     renderers,
     showServerActions,
     status,
     url
-  }), [details, id, renderers, showServerActions, status, url]);
+  }), [details, featureFlags, id, renderers, showServerActions, status, url]);
   const retry = getRetryOptions(url, status, details, onAuthorize);
   const {
     title

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

@@ -2,8 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 import LinkWarningModal from './LinkWarningModal';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { useAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
 import { name as packageName, version as packageVersion } from '../../version.json';
+import { fireLinkClickedEvent } from '../../utils/analytics/click';
+import useMouseDownEvent from '../../state/analytics/useMouseDownEvent';
 const PACKAGE_DATA = {
   packageName,
   packageVersion,
@@ -14,6 +16,7 @@ const LinkUrl = ({
   children,
   checkSafety = true,
   onClick,
+  onMouseDown,
   testId = 'link-with-safety',
   ...props
 }) => {
@@ -21,12 +24,21 @@ const LinkUrl = ({
     checkLinkSafety,
     ...linkWarningModalProps
   } = useLinkWarningModal();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const handleMouseDown = useMouseDownEvent();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
     "data-testid": testId,
     href: href,
     onClick: e => {
       checkSafety && checkLinkSafety(e, href);
       onClick && onClick(e);
+      fireLinkClickedEvent(createAnalyticsEvent)(e);
+    },
+    onMouseDown: e => {
+      onMouseDown && onMouseDown(e);
+      handleMouseDown(e); // add analytics
     }
   }, props), children), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
 };

package/dist/esm/version.json

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

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

@@ -26,6 +26,7 @@ export function CardWithUrlContent(_ref) {
     onError = _ref.onError,
     testId = _ref.testId,
     showActions = _ref.showActions,
+    showServerActionsProp = _ref.showServerActions,
     inheritDimensions = _ref.inheritDimensions,
     embedIframeRef = _ref.embedIframeRef,
     embedIframeUrlType = _ref.embedIframeUrlType,
@@ -59,6 +60,7 @@ export function CardWithUrlContent(_ref) {
   var showAuthTooltipFeatureFlagValue = useFeatureFlag('showAuthTooltip');
   var showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
+  var showServerActions = showServerActionsProp && platform !== 'mobile';
 
   // Setup UI handlers.
   var handleClickWrapper = useCallback(function (event) {
@@ -178,6 +180,7 @@ export function CardWithUrlContent(_ref) {
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
+      showServerActions: showServerActions,
       url: url,
       testId: testId,
       onResolve: onResolve,

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

@@ -36,6 +36,7 @@ export function CardWithURLRenderer(props) {
     onError = props.onError,
     testId = props.testId,
     showActions = props.showActions,
+    showServerActions = props.showServerActions,
     inheritDimensions = props.inheritDimensions,
     platform = props.platform,
     embedIframeRef = props.embedIframeRef,
@@ -107,6 +108,7 @@ export function CardWithURLRenderer(props) {
     onError: onError,
     testId: testId,
     showActions: showActions,
+    showServerActions: showServerActions,
     inheritDimensions: inheritDimensions,
     platform: platform,
     embedIframeRef: embedIframeRef,

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useMemo } from 'react';
+import { useFeatureFlag } from '@atlaskit/link-provider';
 import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
 import { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
@@ -29,16 +30,23 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardType = cardState.status,
     details = cardState.details;
   var status = cardType;
+  var useLozengeAction = useFeatureFlag('useLozengeAction');
+  var featureFlags = useMemo(function () {
+    return {
+      useLozengeAction: useLozengeAction
+    };
+  }, [useLozengeAction]);
   var context = useMemo(function () {
     return getContextByStatus({
       response: details,
+      featureFlags: featureFlags,
       id: id,
       renderers: renderers,
       showServerActions: showServerActions,
       status: status,
       url: url
     });
-  }, [details, id, renderers, showServerActions, status, url]);
+  }, [details, featureFlags, id, renderers, showServerActions, status, url]);
   var retry = getRetryOptions(url, status, details, onAuthorize);
   var _ref2 = context || {},
     title = _ref2.title;

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

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
+var _excluded = ["href", "children", "checkSafety", "onClick", "onMouseDown", "testId"],
   _excluded2 = ["checkLinkSafety"];
 import React from 'react';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 import LinkWarningModal from './LinkWarningModal';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { useAnalyticsEvents, withAnalyticsContext } from '@atlaskit/analytics-next';
 import { name as packageName, version as packageVersion } from '../../version.json';
+import { fireLinkClickedEvent } from '../../utils/analytics/click';
+import useMouseDownEvent from '../../state/analytics/useMouseDownEvent';
 var PACKAGE_DATA = {
   packageName: packageName,
   packageVersion: packageVersion,
@@ -18,18 +20,27 @@ var LinkUrl = function LinkUrl(_ref) {
     _ref$checkSafety = _ref.checkSafety,
     checkSafety = _ref$checkSafety === void 0 ? true : _ref$checkSafety,
     _onClick = _ref.onClick,
+    _onMouseDown = _ref.onMouseDown,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'link-with-safety' : _ref$testId,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useLinkWarningModal = useLinkWarningModal(),
     checkLinkSafety = _useLinkWarningModal.checkLinkSafety,
     linkWarningModalProps = _objectWithoutProperties(_useLinkWarningModal, _excluded2);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var handleMouseDown = useMouseDownEvent();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
     "data-testid": testId,
     href: href,
     onClick: function onClick(e) {
       checkSafety && checkLinkSafety(e, href);
       _onClick && _onClick(e);
+      fireLinkClickedEvent(createAnalyticsEvent)(e);
+    },
+    onMouseDown: function onMouseDown(e) {
+      _onMouseDown && _onMouseDown(e);
+      handleMouseDown(e); // add analytics
     }
   }, props), children), checkSafety && /*#__PURE__*/React.createElement(LinkWarningModal, linkWarningModalProps));
 };

package/dist/types/view/CardWithUrl/component.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CardWithUrlContentProps } from './types';
-export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, frameStyle, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, inheritDimensions, embedIframeRef, embedIframeUrlType, inlinePreloaderStyle, ui, children, showHoverPreview, showAuthTooltip: showAuthTooltipProp, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;
+export declare function CardWithUrlContent({ id, url, isSelected, isFrameVisible, frameStyle, platform, onClick, appearance, dispatchAnalytics, onResolve, onError, testId, showActions, showServerActions: showServerActionsProp, inheritDimensions, embedIframeRef, embedIframeUrlType, inlinePreloaderStyle, ui, children, showHoverPreview, showAuthTooltip: showAuthTooltipProp, analyticsEvents, }: CardWithUrlContentProps): JSX.Element;

package/dist/types/view/CardWithUrl/types.d.ts

@@ -20,6 +20,7 @@ export declare type CardWithUrlContentProps = {
     onResolve?: OnResolveCallback;
     onError?: OnErrorCallback;
     showActions?: boolean;
+    showServerActions?: boolean;
     inheritDimensions?: boolean;
     embedIframeRef?: React.Ref<HTMLIFrameElement>;
     embedIframeUrlType?: EmbedIframeUrlType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "25.5.2",
+  "version": "25.5.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"