@atlaskit/smart-card 26.5.6 → 26.5.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.5.8
+
+### Patch Changes
+
+- [`27f4aa34132`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27f4aa34132) - [ux] Fix for Hover Card in Flexible UI links: it will show only supported states, such as resolved and unauthorized based on the corresponding featureFlag ('showHoverPreview' and 'showAuthTooltip')
+
+## 26.5.7
+
+### Patch Changes
+
+- [`5b5d7b22e80`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b5d7b22e80) - [ux] Update feature discovery on lozenge action to display for 2s before marking it as discovered
+
 ## 26.5.6
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -192,6 +192,7 @@ function Component(_ref) {
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
+      showAuthTooltip: showAuthTooltipProp,
       showServerActions: showServerActions,
       url: url,
       testId: testId,

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/feature-discovery/index.js

@@ -12,7 +12,9 @@ var _styled = require("./styled");
 
 var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
 var LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-status';
+var LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
 var LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+var LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000; // 2s
 
 /**
  * This is a hacky solution to help with the feature discovery.
@@ -24,17 +26,23 @@ var FeatureDiscovery = function FeatureDiscovery(_ref) {
   var appearance = _ref.appearance,
     children = _ref.children,
     testId = _ref.testId;
+  var renderedTime = (0, _react2.useRef)();
   var storageClient = (0, _react2.useMemo)(function () {
     return new _storageClient.StorageClient(LOCAL_STORAGE_CLIENT_KEY);
   }, []);
   var discovered = (0, _react2.useMemo)(function () {
-    var _storageClient$getIte;
-    return (_storageClient$getIte = storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY)) !== null && _storageClient$getIte !== void 0 ? _storageClient$getIte : false;
+    return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
   }, [storageClient]);
   (0, _react2.useEffect)(function () {
-    if (!discovered) {
-      storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, true, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
-    }
+    renderedTime.current = Date.now();
+    return function () {
+      if (!discovered && renderedTime.current) {
+        var duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+        }
+      }
+    };
   }, [storageClient, discovered]);
   var component = (0, _react2.useMemo)(function () {
     if (!discovered) {

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

@@ -158,6 +158,8 @@ var Container = function Container(_ref3) {
     hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
     onClick = _ref3.onClick,
     retry = _ref3.retry,
+    _ref3$showAuthTooltip = _ref3.showAuthTooltip,
+    showAuthTooltip = _ref3$showAuthTooltip === void 0 ? false : _ref3$showAuthTooltip,
     _ref3$showHoverPrevie = _ref3.showHoverPreview,
     showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
     _ref3$showServerActio = _ref3.showServerActions,
@@ -183,7 +185,7 @@ var Container = function Container(_ref3) {
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-  if (showHoverPreview && context !== null && context !== void 0 && context.url) {
+  if (context !== null && context !== void 0 && context.url && (showHoverPreview && status === 'resolved' || showAuthTooltip && status === 'unauthorized')) {
     return (0, _react2.jsx)(_HoverCard.HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,

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

@@ -31,6 +31,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     onError = _ref.onError,
     onResolve = _ref.onResolve,
     renderers = _ref.renderers,
+    showAuthTooltip = _ref.showAuthTooltip,
     showHoverPreview = _ref.showHoverPreview,
     showServerActions = _ref.showServerActions,
     testId = _ref.testId,
@@ -96,6 +97,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     retry: retry,
     showHoverPreview: showHoverPreview,
     showServerActions: showServerActions,
+    showAuthTooltip: showAuthTooltip,
     status: status
   }), children))));
 };

package/dist/es2019/version.json

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

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

@@ -179,6 +179,7 @@ function Component({
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
+      showAuthTooltip: showAuthTooltipProp,
       showServerActions: showServerActions,
       url: url,
       testId: testId,

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/feature-discovery/index.js

@@ -1,11 +1,13 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
 import { getPulseStyles } from './styled';
 const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
 const LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-status';
+const LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
 const LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+const LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000; // 2s
 
 /**
  * This is a hacky solution to help with the feature discovery.
@@ -18,15 +20,19 @@ const FeatureDiscovery = ({
   children,
   testId
 }) => {
+  const renderedTime = useRef();
   const storageClient = useMemo(() => new StorageClient(LOCAL_STORAGE_CLIENT_KEY), []);
-  const discovered = useMemo(() => {
-    var _storageClient$getIte;
-    return (_storageClient$getIte = storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY)) !== null && _storageClient$getIte !== void 0 ? _storageClient$getIte : false;
-  }, [storageClient]);
+  const discovered = useMemo(() => storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE, [storageClient]);
   useEffect(() => {
-    if (!discovered) {
-      storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, true, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
-    }
+    renderedTime.current = Date.now();
+    return () => {
+      if (!discovered && renderedTime.current) {
+        const duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+        }
+      }
+    };
   }, [storageClient, discovered]);
   const component = useMemo(() => {
     if (!discovered) {

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

@@ -183,6 +183,7 @@ const Container = ({
   hidePadding = false,
   onClick,
   retry,
+  showAuthTooltip = false,
   showHoverPreview = false,
   showServerActions = false,
   size = SmartLinkSize.Medium,
@@ -199,7 +200,7 @@ const Container = ({
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-  if (showHoverPreview && context !== null && context !== void 0 && context.url) {
+  if (context !== null && context !== void 0 && context.url && (showHoverPreview && status === 'resolved' || showAuthTooltip && status === 'unauthorized')) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,

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

@@ -22,6 +22,7 @@ const FlexibleCard = ({
   onError,
   onResolve,
   renderers,
+  showAuthTooltip,
   showHoverPreview,
   showServerActions,
   testId,
@@ -87,6 +88,7 @@ const FlexibleCard = ({
     retry: retry,
     showHoverPreview: showHoverPreview,
     showServerActions: showServerActions,
+    showAuthTooltip: showAuthTooltip,
     status: status
   }), children))));
 };

package/dist/esm/version.json

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

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

@@ -182,6 +182,7 @@ function Component(_ref) {
       renderers: renderers,
       ui: ui,
       showHoverPreview: showHoverPreview,
+      showAuthTooltip: showAuthTooltipProp,
       showServerActions: showServerActions,
       url: url,
       testId: testId,

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/feature-discovery/index.js

@@ -1,11 +1,13 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
 import { getPulseStyles } from './styled';
 var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
 var LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-status';
+var LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
 var LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+var LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000; // 2s
 
 /**
  * This is a hacky solution to help with the feature discovery.
@@ -17,17 +19,23 @@ var FeatureDiscovery = function FeatureDiscovery(_ref) {
   var appearance = _ref.appearance,
     children = _ref.children,
     testId = _ref.testId;
+  var renderedTime = useRef();
   var storageClient = useMemo(function () {
     return new StorageClient(LOCAL_STORAGE_CLIENT_KEY);
   }, []);
   var discovered = useMemo(function () {
-    var _storageClient$getIte;
-    return (_storageClient$getIte = storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY)) !== null && _storageClient$getIte !== void 0 ? _storageClient$getIte : false;
+    return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
   }, [storageClient]);
   useEffect(function () {
-    if (!discovered) {
-      storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, true, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
-    }
+    renderedTime.current = Date.now();
+    return function () {
+      if (!discovered && renderedTime.current) {
+        var duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+        }
+      }
+    };
   }, [storageClient, discovered]);
   var component = useMemo(function () {
     if (!discovered) {

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

@@ -147,6 +147,8 @@ var Container = function Container(_ref3) {
     hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
     onClick = _ref3.onClick,
     retry = _ref3.retry,
+    _ref3$showAuthTooltip = _ref3.showAuthTooltip,
+    showAuthTooltip = _ref3$showAuthTooltip === void 0 ? false : _ref3$showAuthTooltip,
     _ref3$showHoverPrevie = _ref3.showHoverPreview,
     showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
     _ref3$showServerActio = _ref3.showServerActions,
@@ -172,7 +174,7 @@ var Container = function Container(_ref3) {
     "data-smart-link-container": true,
     "data-testid": testId
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-  if (showHoverPreview && context !== null && context !== void 0 && context.url) {
+  if (context !== null && context !== void 0 && context.url && (showHoverPreview && status === 'resolved' || showAuthTooltip && status === 'unauthorized')) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,

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

@@ -22,6 +22,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     onError = _ref.onError,
     onResolve = _ref.onResolve,
     renderers = _ref.renderers,
+    showAuthTooltip = _ref.showAuthTooltip,
     showHoverPreview = _ref.showHoverPreview,
     showServerActions = _ref.showServerActions,
     testId = _ref.testId,
@@ -87,6 +88,7 @@ var FlexibleCard = function FlexibleCard(_ref) {
     retry: retry,
     showHoverPreview: showHoverPreview,
     showServerActions: showServerActions,
+    showAuthTooltip: showAuthTooltip,
     status: status
   }), children))));
 };

package/dist/types/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "onResolve" | "showAuthTooltip" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "fallbackComponent" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "showAuthTooltip" | "onResolve" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "fallbackComponent" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/FlexibleCard/components/container/types.d.ts

@@ -1,6 +1,6 @@
 import { SmartLinkStatus } from '../../../../constants';
 import { FlexibleCardProps, FlexibleUiOptions, RetryOptions } from '../../types';
-export type ContainerProps = Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'showServerActions'> & FlexibleUiOptions & {
+export type ContainerProps = Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'showServerActions' | 'showAuthTooltip'> & FlexibleUiOptions & {
     /**
      * The options that determine the retry behaviour when a Smart Link errors.
      */

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

@@ -81,6 +81,11 @@ export type FlexibleCardProps = {
      * over the smartlink. Default value is false.
      */
     showHoverPreview?: Boolean;
+    /**
+     * Determines whether to show an unauthorised view of the hover card
+     * when a user hovers over a smartlink.
+     */
+    showAuthTooltip?: Boolean;
 };
 export type FlexibleUiOptions = {
     /**

package/dist/types-ts4.5/view/Card/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "onResolve" | "showAuthTooltip" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "fallbackComponent" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "showAuthTooltip" | "onResolve" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "fallbackComponent" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types-ts4.5/view/FlexibleCard/components/container/types.d.ts

@@ -1,6 +1,6 @@
 import { SmartLinkStatus } from '../../../../constants';
 import { FlexibleCardProps, FlexibleUiOptions, RetryOptions } from '../../types';
-export type ContainerProps = Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'showServerActions'> & FlexibleUiOptions & {
+export type ContainerProps = Pick<FlexibleCardProps, 'onClick' | 'showHoverPreview' | 'showServerActions' | 'showAuthTooltip'> & FlexibleUiOptions & {
     /**
      * The options that determine the retry behaviour when a Smart Link errors.
      */

package/dist/types-ts4.5/view/FlexibleCard/types.d.ts

@@ -81,6 +81,11 @@ export type FlexibleCardProps = {
      * over the smartlink. Default value is false.
      */
     showHoverPreview?: Boolean;
+    /**
+     * Determines whether to show an unauthorised view of the hover card
+     * when a user hovers over a smartlink.
+     */
+    showAuthTooltip?: Boolean;
 };
 export type FlexibleUiOptions = {
     /**

package/package.json

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