@atlaskit/smart-card 43.26.12 → 43.27.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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
+
+- [`6f1aadb138410`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f1aadb138410) -
+  Migrate to new FG: jpx-1074-smart-links-iframe
+- Updated dependencies
+
 ## 43.26.12
 
 ### 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.11"
+  packageVersion: "43.26.13"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/EmbedCard/components/Frame.js

@@ -87,7 +87,7 @@ var Frame = exports.Frame = /*#__PURE__*/_react.default.forwardRef(function (_re
   (0, _react.useEffect)(function () {
     var onBlur = function onBlur() {
       setWindowFocused(false);
-      if ((0, _platformFeatureFlags.fg)('jpx-833-smart-links-graphql-provider')) {
+      if ((0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe')) {
         if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
           onIframeFocus && onIframeFocus();
         }
@@ -172,7 +172,7 @@ var FrameUpdated = exports.FrameUpdated = /*#__PURE__*/_react.default.forwardRef
   var _useState13 = (0, _react.useState)(
     // The below will be removed as part of FG cleanup
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-    (0, _platformFeatureFlags.fg)('jpx-833-smart-links-graphql-provider') ? (_doc$hasFocus = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus !== void 0 ? _doc$hasFocus : false : document.hasFocus()),
+    (0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe') ? (_doc$hasFocus = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus !== void 0 ? _doc$hasFocus : false : document.hasFocus()),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
     isWindowFocused = _useState14[0],
     setWindowFocused = _useState14[1];
@@ -215,10 +215,10 @@ var FrameUpdated = exports.FrameUpdated = /*#__PURE__*/_react.default.forwardRef
     // Initialize with current focus state
     // The below will be removed as part of FG cleanup
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-    setWindowFocused((0, _platformFeatureFlags.fg)('jpx-833-smart-links-graphql-provider') ? (_doc$hasFocus2 = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus2 !== void 0 ? _doc$hasFocus2 : false : document.hasFocus());
+    setWindowFocused((0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe') ? (_doc$hasFocus2 = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus2 !== void 0 ? _doc$hasFocus2 : false : document.hasFocus());
     var onBlur = function onBlur() {
       setWindowFocused(false);
-      if ((0, _platformFeatureFlags.fg)('jpx-833-smart-links-graphql-provider')) {
+      if ((0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe')) {
         if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
           onIframeFocus && onIframeFocus();
         }

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.11",
+  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.11"
+  packageVersion: "43.26.13"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedCard/components/Frame.js

@@ -65,7 +65,7 @@ export const Frame = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const onBlur = () => {
       setWindowFocused(false);
-      if (fg('jpx-833-smart-links-graphql-provider')) {
+      if (fg('jpx-1074-smart-links-iframe')) {
         if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
           onIframeFocus && onIframeFocus();
         }
@@ -144,7 +144,7 @@ export const FrameUpdated = /*#__PURE__*/React.forwardRef(({
   const [isWindowFocused, setWindowFocused] = useState(
   // The below will be removed as part of FG cleanup
   // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-  fg('jpx-833-smart-links-graphql-provider') ? (_doc$hasFocus = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus !== void 0 ? _doc$hasFocus : false : document.hasFocus());
+  fg('jpx-1074-smart-links-iframe') ? (_doc$hasFocus = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus !== void 0 ? _doc$hasFocus : false : document.hasFocus());
 
   // Use prop if provided (from wrapper), otherwise use local state (for backward compatibility)
   const effectiveMouseOver = isMouseOverProp !== undefined ? isMouseOverProp : isMouseOver;
@@ -179,10 +179,10 @@ export const FrameUpdated = /*#__PURE__*/React.forwardRef(({
     // Initialize with current focus state
     // The below will be removed as part of FG cleanup
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-    setWindowFocused(fg('jpx-833-smart-links-graphql-provider') ? (_doc$hasFocus2 = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus2 !== void 0 ? _doc$hasFocus2 : false : document.hasFocus());
+    setWindowFocused(fg('jpx-1074-smart-links-iframe') ? (_doc$hasFocus2 = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus2 !== void 0 ? _doc$hasFocus2 : false : document.hasFocus());
     const onBlur = () => {
       setWindowFocused(false);
-      if (fg('jpx-833-smart-links-graphql-provider')) {
+      if (fg('jpx-1074-smart-links-iframe')) {
         if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
           onIframeFocus && onIframeFocus();
         }

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.11",
+  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.11"
+  packageVersion: "43.26.13"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/EmbedCard/components/Frame.js

@@ -80,7 +80,7 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   useEffect(function () {
     var onBlur = function onBlur() {
       setWindowFocused(false);
-      if (fg('jpx-833-smart-links-graphql-provider')) {
+      if (fg('jpx-1074-smart-links-iframe')) {
         if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
           onIframeFocus && onIframeFocus();
         }
@@ -165,7 +165,7 @@ export var FrameUpdated = /*#__PURE__*/React.forwardRef(function (_ref2, iframeR
   var _useState13 = useState(
     // The below will be removed as part of FG cleanup
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-    fg('jpx-833-smart-links-graphql-provider') ? (_doc$hasFocus = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus !== void 0 ? _doc$hasFocus : false : document.hasFocus()),
+    fg('jpx-1074-smart-links-iframe') ? (_doc$hasFocus = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus !== void 0 ? _doc$hasFocus : false : document.hasFocus()),
     _useState14 = _slicedToArray(_useState13, 2),
     isWindowFocused = _useState14[0],
     setWindowFocused = _useState14[1];
@@ -208,10 +208,10 @@ export var FrameUpdated = /*#__PURE__*/React.forwardRef(function (_ref2, iframeR
     // Initialize with current focus state
     // The below will be removed as part of FG cleanup
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
-    setWindowFocused(fg('jpx-833-smart-links-graphql-provider') ? (_doc$hasFocus2 = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus2 !== void 0 ? _doc$hasFocus2 : false : document.hasFocus());
+    setWindowFocused(fg('jpx-1074-smart-links-iframe') ? (_doc$hasFocus2 = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus2 !== void 0 ? _doc$hasFocus2 : false : document.hasFocus());
     var onBlur = function onBlur() {
       setWindowFocused(false);
-      if (fg('jpx-833-smart-links-graphql-provider')) {
+      if (fg('jpx-1074-smart-links-iframe')) {
         if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
           onIframeFocus && onIframeFocus();
         }

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.11",
+  packageVersion: "43.26.13",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.26.12",
+	"version": "43.27.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -63,7 +63,7 @@
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
-		"@atlaskit/popup": "^4.13.0",
+		"@atlaskit/popup": "^4.14.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/react-ufo": "^5.4.0",
 		"@atlaskit/rovo-triggers": "^5.30.0",
@@ -74,7 +74,7 @@
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^22.0.0",
 		"@atlaskit/tile": "^1.0.0",
-		"@atlaskit/tmp-editor-statsig": "^42.0.0",
+		"@atlaskit/tmp-editor-statsig": "^43.0.0",
 		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^21.0.0",
 		"@atlaskit/ufo": "^0.4.0",
@@ -102,7 +102,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-listeners": "^10.0.0",
-		"@atlaskit/css-reset": "^7.3.0",
+		"@atlaskit/css-reset": "^7.4.0",
 		"@atlaskit/media-test-helpers": "^40.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.10.0",
@@ -227,7 +227,10 @@
 		"platform_sl_3p_auth_rovo_action_kill_switch": {
 			"type": "boolean"
 		},
-		"jpx-833-smart-links-graphql-provider": {
+		"jpx-1074-smart-links-iframe": {
+			"type": "boolean"
+		},
+		"fix_hover_card_on_focus_a11y": {
 			"type": "boolean"
 		}
 	},