@atlaskit/smart-card 43.26.13 → 43.27.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 43.27.0
+
+### Minor Changes
+
+- [`171234137629d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/171234137629d) -
+  Open smart hover card on focus
+
 ## 43.26.13
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.26.12"
+  packageVersion: "43.26.13"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -233,6 +233,12 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/_react.default.createElement(_HoverCardContent.default, hoverCardContentProps));
   }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    if (e.key === ' ') {
+      e.preventDefault();
+      initShowCard(e);
+    }
+  }, [initShowCard]);
   var trigger = (0, _react.useCallback)(function (_ref3) {
     var _ariaHasPopup = _ref3['aria-haspopup'],
       _ariaExpanded = _ref3['aria-expanded'],
@@ -246,13 +252,14 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       ,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
+      onKeyDown: (0, _platformFeatureFlags.fg)('fix_hover_card_on_focus_a11y') ? handleKeyDown : undefined,
       onClick: onChildClick,
       onContextMenu: onContextMenuClick,
       "data-testid": HOVER_CARD_TRIGGER_WRAPPER
     }, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) ? {
       className: HOVER_CARD_TRIGGER_WRAPPER
     } : {}), children));
-  }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
+  }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition, handleKeyDown]);
   var popupComponent = (0, _react.useMemo)(
   // Within the Popup component, if shouldRenderToParent, the zIndex prop is ignored
   // as it is assumed that the custom popup container has the desired styles
@@ -262,7 +269,7 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
   return /*#__PURE__*/_react.default.createElement(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
-    onClose: hideCard,
+    onClose: (0, _platformFeatureFlags.fg)('fix_hover_card_on_focus_a11y') ? initHideCard : hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
     autoFocus: false,

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

@@ -22,7 +22,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.26.12",
+  packageVersion: "43.26.13",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.26.12"
+  packageVersion: "43.26.13"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -207,6 +207,12 @@ export const HoverCardComponent = ({
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/React.createElement(HoverCardContent, hoverCardContentProps));
   }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === ' ') {
+      e.preventDefault();
+      initShowCard(e);
+    }
+  }, [initShowCard]);
   const trigger = useCallback(({
     'aria-haspopup': _ariaHasPopup,
     'aria-expanded': _ariaExpanded,
@@ -220,12 +226,13 @@ export const HoverCardComponent = ({
     ,
     onMouseLeave: initHideCard,
     onMouseMove: setMousePosition,
+    onKeyDown: fg('fix_hover_card_on_focus_a11y') ? handleKeyDown : undefined,
     onClick: onChildClick,
     onContextMenu: onContextMenuClick,
     "data-testid": HOVER_CARD_TRIGGER_WRAPPER
   }, editorExperiment('platform_editor_preview_panel_linking_exp', true) ? {
     className: HOVER_CARD_TRIGGER_WRAPPER
-  } : {}), children)), [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
+  } : {}), children)), [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition, handleKeyDown]);
   const popupComponent = useMemo(
   // Within the Popup component, if shouldRenderToParent, the zIndex prop is ignored
   // as it is assumed that the custom popup container has the desired styles
@@ -233,7 +240,7 @@ export const HoverCardComponent = ({
   return /*#__PURE__*/React.createElement(Popup, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
-    onClose: hideCard,
+    onClose: fg('fix_hover_card_on_focus_a11y') ? initHideCard : hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
     autoFocus: false,

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

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.26.12",
+  packageVersion: "43.26.13",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.26.12"
+  packageVersion: "43.26.13"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -224,6 +224,12 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       source: HOVER_CARD_SOURCE
     }, /*#__PURE__*/React.createElement(HoverCardContent, hoverCardContentProps));
   }, [initShowCard, initHideCard, linkState, onActionClick, renderers, actionOptions, url, id, hoverPreviewOptions]);
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === ' ') {
+      e.preventDefault();
+      initShowCard(e);
+    }
+  }, [initShowCard]);
   var trigger = useCallback(function (_ref3) {
     var _ariaHasPopup = _ref3['aria-haspopup'],
       _ariaExpanded = _ref3['aria-expanded'],
@@ -237,13 +243,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       ,
       onMouseLeave: initHideCard,
       onMouseMove: setMousePosition,
+      onKeyDown: fg('fix_hover_card_on_focus_a11y') ? handleKeyDown : undefined,
       onClick: onChildClick,
       onContextMenu: onContextMenuClick,
       "data-testid": HOVER_CARD_TRIGGER_WRAPPER
     }, editorExperiment('platform_editor_preview_panel_linking_exp', true) ? {
       className: HOVER_CARD_TRIGGER_WRAPPER
     } : {}), children));
-  }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
+  }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition, handleKeyDown]);
   var popupComponent = useMemo(
   // Within the Popup component, if shouldRenderToParent, the zIndex prop is ignored
   // as it is assumed that the custom popup container has the desired styles
@@ -253,7 +260,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
   return /*#__PURE__*/React.createElement(Popup, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
-    onClose: hideCard,
+    onClose: fg('fix_hover_card_on_focus_a11y') ? initHideCard : hideCard,
     placement: "bottom-start",
     offset: popupOffset.current,
     autoFocus: false,

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

@@ -15,7 +15,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "43.26.12",
+  packageVersion: "43.26.13",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.26.13",
+	"version": "43.27.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -229,6 +229,9 @@
 		},
 		"jpx-1074-smart-links-iframe": {
 			"type": "boolean"
+		},
+		"fix_hover_card_on_focus_a11y": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/f74ef1bc-7240-4aac-9dc8-9dc43b502089"