@atlaskit/smart-card 43.8.1 → 43.9.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 43.9.0
+
+### Minor Changes
+
+- [`f2ab75f2947ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2ab75f2947ab) -
+  [ux] Add shouldRenderToParent prop to HoverCard which is propagated to the internal Popup
+  component
+
+### Patch Changes
+
+- [`06d5717d57f36`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/06d5717d57f36) -
+  Suppress i18n errors
+
 ## 43.8.1
 
 ### Patch Changes

package/dist/cjs/extractors/flexible/icon/extract-file-formatIcon.js

@@ -11,6 +11,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
   switch (fileFormat) {
     // Generic documents
     case 'folder':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Folder,
         label: 'Folder'
@@ -18,44 +19,52 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'text/plain':
     case 'application/vnd.oasis.opendocument.text':
     case 'application/vnd.apple.pages':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Document,
         label: 'Document'
       };
     case 'application/pdf':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.PDF,
         label: 'PDF document'
       };
     case 'application/vnd.oasis.opendocument.presentation':
     case 'application/vnd.apple.keynote':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Presentation,
         label: 'Presentation'
       };
     case 'application/vnd.oasis.opendocument.spreadsheet':
     case 'application/vnd.apple.numbers':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Spreadsheet,
         label: 'Spreadsheet'
       };
     // Google Drive
     case 'application/vnd.google-apps.document':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.GoogleDocs,
         label: 'Google Docs'
       };
     case 'application/vnd.google-apps.form':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.GoogleForms,
         label: 'Google Form'
       };
     case 'application/vnd.google-apps.spreadsheet':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.GoogleSheets,
         label: 'Google Sheets'
       };
     case 'application/vnd.google-apps.presentation':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.GoogleSlides,
         label: 'Google Slides'
@@ -63,18 +72,21 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     // Microsoft
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.MSExcel,
         label: 'Excel spreadsheet'
       };
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.MSPowerpoint,
         label: 'PowerPoint presentation'
       };
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.MSWord,
         label: 'Word document'
@@ -84,11 +96,13 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'image/bmp':
     case 'image/webp':
     case 'image/svg+xml':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Image,
         label: 'Image'
       };
     case 'image/gif':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.GIF,
         label: 'GIF'
@@ -98,6 +112,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'audio/webm':
     case 'audio/ogg':
     case 'audio/wav':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Audio,
         label: 'Audio'
@@ -109,6 +124,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'video/ogg':
     case 'video/x-ms-wmv':
     case 'video/x-msvideo':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Video,
         label: 'Video'
@@ -117,6 +133,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'text/css':
     case 'text/html':
     case 'application/javascript':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Code,
         label: 'Source Code'
@@ -127,26 +144,31 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'application/x-7z-compressed':
     case 'application/x-apple-diskimage':
     case 'application/vnd.rar':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Archive,
         label: 'Archive'
       };
     case 'application/dmg':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Executable,
         label: 'Executable'
       };
     case 'application/sketch':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Sketch,
         label: 'Sketch'
       };
     case 'application/octet-stream':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Generic,
         label: 'Binary file'
       };
     case 'application/invision.prototype':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: _constants.IconType.Generic,
         label: 'Prototype'

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

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

@@ -4,11 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.createCustomPopupContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children", "shouldFitContainer", "shouldRenderToParent"];
+var _excluded = ["children", "shouldFitContainer", "shouldRenderToParent"],
+  _excluded2 = ["children", "shouldFitContainer", "shouldRenderToParent"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * The purpose of this component is to hide the default Popup border.
  * HoverCard border implementation is in ContentContainer where it can
@@ -23,4 +27,23 @@ var CustomPopupContainer = /*#__PURE__*/_react.default.forwardRef(function (_ref
     ref: ref
   }), children);
 });
+
+/**
+ * Factory function to create a CustomPopupContainer with a specific z-index
+ */
+var createCustomPopupContainer = exports.createCustomPopupContainer = function createCustomPopupContainer(zIndex) {
+  return /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
+    var children = _ref2.children,
+      _ = _ref2.shouldFitContainer,
+      __ = _ref2.shouldRenderToParent,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, props, {
+      ref: ref
+    }, zIndex !== undefined && {
+      style: _objectSpread(_objectSpread({}, props.style), {}, {
+        zIndex: zIndex
+      })
+    }), children);
+  });
+};
 var _default = exports.default = CustomPopupContainer;

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

@@ -18,7 +18,7 @@ var _actions = require("../../../state/actions");
 var _renderers = require("../../../state/renderers");
 var _store = require("../../../state/store");
 var _SmartLinkAnalyticsContext = require("../../../utils/analytics/SmartLinkAnalyticsContext");
-var _CustomPopupContainer = _interopRequireDefault(require("../components/CustomPopupContainer"));
+var _CustomPopupContainer = _interopRequireWildcard(require("../components/CustomPopupContainer"));
 var _HoverCardContent = _interopRequireDefault(require("../components/HoverCardContent"));
 var _styled = require("../styled");
 var _excluded = ["aria-haspopup", "aria-expanded"];
@@ -47,6 +47,8 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
     noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay,
     hoverPreviewOptions = _ref.hoverPreviewOptions,
     role = _ref.role,
+    _ref$shouldRenderToPa = _ref.shouldRenderToParent,
+    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     label = _ref.label,
     titleId = _ref.titleId,
     onVisibilityChange = _ref.onVisibilityChange;
@@ -244,7 +246,14 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
       className: HOVER_CARD_TRIGGER_WRAPPER
     } : {}), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return /*#__PURE__*/_react.default.createElement(_popup.default, {
+  var popupComponent = (0, _platformFeatureFlags.fg)('hover-card-prop-should-render-to-parent') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useMemo)(function () {
+    // Within the Popup component, if shouldRenderToParent, the zIndex prop is ignored
+    // as it is assumed that the custom popup container has the desired styles
+    return (0, _CustomPopupContainer.createCustomPopupContainer)(shouldRenderToParent ? zIndex : undefined);
+  }, [zIndex, shouldRenderToParent]) : _CustomPopupContainer.default;
+  return /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,
@@ -257,8 +266,10 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
     role: role,
     titleId: titleId,
     label: label
+  }, (0, _platformFeatureFlags.fg)('hover-card-prop-should-render-to-parent') ? {
+    shouldRenderToParent: shouldRenderToParent
+  } : {}, {
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
-    popupComponent: _CustomPopupContainer.default
-  });
+    popupComponent: popupComponent
+  }));
 };

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

package/dist/es2019/extractors/flexible/icon/extract-file-formatIcon.js

@@ -4,6 +4,7 @@ const extractFileFormatIcon = fileFormat => {
   switch (fileFormat) {
     // Generic documents
     case 'folder':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Folder,
         label: 'Folder'
@@ -11,44 +12,52 @@ const extractFileFormatIcon = fileFormat => {
     case 'text/plain':
     case 'application/vnd.oasis.opendocument.text':
     case 'application/vnd.apple.pages':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Document,
         label: 'Document'
       };
     case 'application/pdf':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.PDF,
         label: 'PDF document'
       };
     case 'application/vnd.oasis.opendocument.presentation':
     case 'application/vnd.apple.keynote':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Presentation,
         label: 'Presentation'
       };
     case 'application/vnd.oasis.opendocument.spreadsheet':
     case 'application/vnd.apple.numbers':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Spreadsheet,
         label: 'Spreadsheet'
       };
     // Google Drive
     case 'application/vnd.google-apps.document':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleDocs,
         label: 'Google Docs'
       };
     case 'application/vnd.google-apps.form':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleForms,
         label: 'Google Form'
       };
     case 'application/vnd.google-apps.spreadsheet':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleSheets,
         label: 'Google Sheets'
       };
     case 'application/vnd.google-apps.presentation':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleSlides,
         label: 'Google Slides'
@@ -56,18 +65,21 @@ const extractFileFormatIcon = fileFormat => {
     // Microsoft
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.MSExcel,
         label: 'Excel spreadsheet'
       };
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.MSPowerpoint,
         label: 'PowerPoint presentation'
       };
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.MSWord,
         label: 'Word document'
@@ -77,11 +89,13 @@ const extractFileFormatIcon = fileFormat => {
     case 'image/bmp':
     case 'image/webp':
     case 'image/svg+xml':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Image,
         label: 'Image'
       };
     case 'image/gif':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GIF,
         label: 'GIF'
@@ -91,6 +105,7 @@ const extractFileFormatIcon = fileFormat => {
     case 'audio/webm':
     case 'audio/ogg':
     case 'audio/wav':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Audio,
         label: 'Audio'
@@ -102,6 +117,7 @@ const extractFileFormatIcon = fileFormat => {
     case 'video/ogg':
     case 'video/x-ms-wmv':
     case 'video/x-msvideo':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Video,
         label: 'Video'
@@ -110,6 +126,7 @@ const extractFileFormatIcon = fileFormat => {
     case 'text/css':
     case 'text/html':
     case 'application/javascript':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Code,
         label: 'Source Code'
@@ -120,26 +137,31 @@ const extractFileFormatIcon = fileFormat => {
     case 'application/x-7z-compressed':
     case 'application/x-apple-diskimage':
     case 'application/vnd.rar':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Archive,
         label: 'Archive'
       };
     case 'application/dmg':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Executable,
         label: 'Executable'
       };
     case 'application/sketch':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Sketch,
         label: 'Sketch'
       };
     case 'application/octet-stream':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Generic,
         label: 'Binary file'
       };
     case 'application/invision.prototype':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Generic,
         label: 'Prototype'

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

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

@@ -13,4 +13,23 @@ const CustomPopupContainer = /*#__PURE__*/React.forwardRef(({
 }, ref) => /*#__PURE__*/React.createElement("div", _extends({}, props, {
   ref: ref
 }), children));
+
+/**
+ * Factory function to create a CustomPopupContainer with a specific z-index
+ */
+export const createCustomPopupContainer = zIndex => {
+  return /*#__PURE__*/React.forwardRef(({
+    children,
+    shouldFitContainer: _,
+    shouldRenderToParent: __,
+    ...props
+  }, ref) => /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    ref: ref
+  }, zIndex !== undefined && {
+    style: {
+      ...props.style,
+      zIndex
+    }
+  }), children));
+};
 export default CustomPopupContainer;

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -8,7 +8,7 @@ import { useSmartCardActions } from '../../../state/actions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
-import CustomPopupContainer from '../components/CustomPopupContainer';
+import CustomPopupContainer, { createCustomPopupContainer } from '../components/CustomPopupContainer';
 import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 export const HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
@@ -28,6 +28,7 @@ export const HoverCardComponent = ({
   noFadeDelay = false,
   hoverPreviewOptions,
   role,
+  shouldRenderToParent = false,
   label,
   titleId,
   onVisibilityChange
@@ -220,7 +221,14 @@ export const HoverCardComponent = ({
   }, editorExperiment('platform_editor_preview_panel_linking_exp', true) ? {
     className: HOVER_CARD_TRIGGER_WRAPPER
   } : {}), children)), [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return /*#__PURE__*/React.createElement(Popup, {
+  const popupComponent = fg('hover-card-prop-should-render-to-parent') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  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
+    return createCustomPopupContainer(shouldRenderToParent ? zIndex : undefined);
+  }, [zIndex, shouldRenderToParent]) : CustomPopupContainer;
+  return /*#__PURE__*/React.createElement(Popup, _extends({
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,
@@ -233,8 +241,10 @@ export const HoverCardComponent = ({
     role: role,
     titleId: titleId,
     label: label
+  }, fg('hover-card-prop-should-render-to-parent') ? {
+    shouldRenderToParent
+  } : {}, {
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
-    popupComponent: CustomPopupContainer
-  });
+    popupComponent: popupComponent
+  }));
 };

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

package/dist/esm/extractors/flexible/icon/extract-file-formatIcon.js

@@ -4,6 +4,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
   switch (fileFormat) {
     // Generic documents
     case 'folder':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Folder,
         label: 'Folder'
@@ -11,44 +12,52 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'text/plain':
     case 'application/vnd.oasis.opendocument.text':
     case 'application/vnd.apple.pages':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Document,
         label: 'Document'
       };
     case 'application/pdf':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.PDF,
         label: 'PDF document'
       };
     case 'application/vnd.oasis.opendocument.presentation':
     case 'application/vnd.apple.keynote':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Presentation,
         label: 'Presentation'
       };
     case 'application/vnd.oasis.opendocument.spreadsheet':
     case 'application/vnd.apple.numbers':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Spreadsheet,
         label: 'Spreadsheet'
       };
     // Google Drive
     case 'application/vnd.google-apps.document':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleDocs,
         label: 'Google Docs'
       };
     case 'application/vnd.google-apps.form':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleForms,
         label: 'Google Form'
       };
     case 'application/vnd.google-apps.spreadsheet':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleSheets,
         label: 'Google Sheets'
       };
     case 'application/vnd.google-apps.presentation':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GoogleSlides,
         label: 'Google Slides'
@@ -56,18 +65,21 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     // Microsoft
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.MSExcel,
         label: 'Excel spreadsheet'
       };
     case 'application/vnd.ms-powerpoint':
     case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.MSPowerpoint,
         label: 'PowerPoint presentation'
       };
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.MSWord,
         label: 'Word document'
@@ -77,11 +89,13 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'image/bmp':
     case 'image/webp':
     case 'image/svg+xml':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Image,
         label: 'Image'
       };
     case 'image/gif':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.GIF,
         label: 'GIF'
@@ -91,6 +105,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'audio/webm':
     case 'audio/ogg':
     case 'audio/wav':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Audio,
         label: 'Audio'
@@ -102,6 +117,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'video/ogg':
     case 'video/x-ms-wmv':
     case 'video/x-msvideo':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Video,
         label: 'Video'
@@ -110,6 +126,7 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'text/css':
     case 'text/html':
     case 'application/javascript':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Code,
         label: 'Source Code'
@@ -120,26 +137,31 @@ var extractFileFormatIcon = function extractFileFormatIcon(fileFormat) {
     case 'application/x-7z-compressed':
     case 'application/x-apple-diskimage':
     case 'application/vnd.rar':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Archive,
         label: 'Archive'
       };
     case 'application/dmg':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Executable,
         label: 'Executable'
       };
     case 'application/sketch':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Sketch,
         label: 'Sketch'
       };
     case 'application/octet-stream':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Generic,
         label: 'Binary file'
       };
     case 'application/invision.prototype':
+      // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
       return {
         icon: IconType.Generic,
         label: 'Prototype'

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

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

@@ -1,6 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "shouldFitContainer", "shouldRenderToParent"];
+var _excluded = ["children", "shouldFitContainer", "shouldRenderToParent"],
+  _excluded2 = ["children", "shouldFitContainer", "shouldRenderToParent"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 /**
  * The purpose of this component is to hide the default Popup border.
@@ -16,4 +20,23 @@ var CustomPopupContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref
   }), children);
 });
+
+/**
+ * Factory function to create a CustomPopupContainer with a specific z-index
+ */
+export var createCustomPopupContainer = function createCustomPopupContainer(zIndex) {
+  return /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+    var children = _ref2.children,
+      _ = _ref2.shouldFitContainer,
+      __ = _ref2.shouldRenderToParent,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+      ref: ref
+    }, zIndex !== undefined && {
+      style: _objectSpread(_objectSpread({}, props.style), {}, {
+        zIndex: zIndex
+      })
+    }), children);
+  });
+};
 export default CustomPopupContainer;

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["aria-haspopup", "aria-expanded"];
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -11,7 +11,7 @@ import { useSmartCardActions } from '../../../state/actions';
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
-import CustomPopupContainer from '../components/CustomPopupContainer';
+import CustomPopupContainer, { createCustomPopupContainer } from '../components/CustomPopupContainer';
 import HoverCardContent from '../components/HoverCardContent';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 export var HOVER_CARD_SOURCE = 'smartLinkPreviewHoverCard';
@@ -38,6 +38,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay,
     hoverPreviewOptions = _ref.hoverPreviewOptions,
     role = _ref.role,
+    _ref$shouldRenderToPa = _ref.shouldRenderToParent,
+    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     label = _ref.label,
     titleId = _ref.titleId,
     onVisibilityChange = _ref.onVisibilityChange;
@@ -235,7 +237,14 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       className: HOVER_CARD_TRIGGER_WRAPPER
     } : {}), children));
   }, [children, initHideCard, initShowCard, onChildClick, onContextMenuClick, setMousePosition]);
-  return /*#__PURE__*/React.createElement(Popup, {
+  var popupComponent = fg('hover-card-prop-should-render-to-parent') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(function () {
+    // Within the Popup component, if shouldRenderToParent, the zIndex prop is ignored
+    // as it is assumed that the custom popup container has the desired styles
+    return createCustomPopupContainer(shouldRenderToParent ? zIndex : undefined);
+  }, [zIndex, shouldRenderToParent]) : CustomPopupContainer;
+  return /*#__PURE__*/React.createElement(Popup, _extends({
     testId: "hover-card",
     isOpen: isOpen && canOpen,
     onClose: hideCard,
@@ -248,8 +257,10 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     role: role,
     titleId: titleId,
     label: label
+  }, fg('hover-card-prop-should-render-to-parent') ? {
+    shouldRenderToParent: shouldRenderToParent
+  } : {}, {
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
-    popupComponent: CustomPopupContainer
-  });
+    popupComponent: popupComponent
+  }));
 };

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

package/dist/types/view/HoverCard/components/CustomPopupContainer.d.ts

@@ -6,4 +6,8 @@ import { type PopupComponentProps } from '@atlaskit/popup';
  * change between the default border and prism border during runtime.
  */
 declare const CustomPopupContainer: React.ForwardRefExoticComponent<Omit<PopupComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Factory function to create a CustomPopupContainer with a specific z-index
+ */
+export declare const createCustomPopupContainer: (zIndex?: number) => React.ForwardRefExoticComponent<Omit<PopupComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CustomPopupContainer;

package/dist/types/view/HoverCard/components/HoverCardComponent.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type HoverCardComponentProps } from '../types';
 export declare const HOVER_CARD_SOURCE = "smartLinkPreviewHoverCard";
-export declare const HoverCardComponent: ({ children, url, id, canOpen, closeOnChildClick, actionOptions, allowEventPropagation, zIndex, noFadeDelay, hoverPreviewOptions, role, label, titleId, onVisibilityChange, }: HoverCardComponentProps) => React.JSX.Element;
+export declare const HoverCardComponent: ({ children, url, id, canOpen, closeOnChildClick, actionOptions, allowEventPropagation, zIndex, noFadeDelay, hoverPreviewOptions, role, shouldRenderToParent, label, titleId, onVisibilityChange, }: HoverCardComponentProps) => React.JSX.Element;

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

@@ -51,6 +51,11 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      * Should be used along with `label` or `titleId` for supported roles.
      */
     role?: string;
+    /**
+     * Whether the hover card should render to the parent element, to the
+     * atlaskit-portal-container at the root of the document. Defaults to false.
+     */
+    shouldRenderToParent?: boolean;
     /**
      * Id referenced by the hover card `aria-labelledby` attribute.
      * Usage of either this, or the `label` attribute is strongly recommended.
@@ -86,6 +91,7 @@ export interface HoverCardComponentProps extends HoverCardProps, HoverCardIntern
 export type HoverCardContentProps = {
     actionOptions?: CardActionOptions;
     cardState: CardState;
+    hoverPreviewOptions?: HoverPreviewOptions;
     id?: string;
     onActionClick: (actionId: string | ActionName) => void;
     onMouseEnter?: MouseEventHandler;
@@ -93,7 +99,6 @@ export type HoverCardContentProps = {
     onResolve: () => void;
     renderers?: CardProviderRenderers;
     url: string;
-    hoverPreviewOptions?: HoverPreviewOptions;
 };
 export type ContentContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     isAIEnabled?: boolean;

package/dist/types-ts4.5/view/HoverCard/components/CustomPopupContainer.d.ts

@@ -6,4 +6,8 @@ import { type PopupComponentProps } from '@atlaskit/popup';
  * change between the default border and prism border during runtime.
  */
 declare const CustomPopupContainer: React.ForwardRefExoticComponent<Omit<PopupComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Factory function to create a CustomPopupContainer with a specific z-index
+ */
+export declare const createCustomPopupContainer: (zIndex?: number) => React.ForwardRefExoticComponent<Omit<PopupComponentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CustomPopupContainer;

package/dist/types-ts4.5/view/HoverCard/components/HoverCardComponent.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type HoverCardComponentProps } from '../types';
 export declare const HOVER_CARD_SOURCE = "smartLinkPreviewHoverCard";
-export declare const HoverCardComponent: ({ children, url, id, canOpen, closeOnChildClick, actionOptions, allowEventPropagation, zIndex, noFadeDelay, hoverPreviewOptions, role, label, titleId, onVisibilityChange, }: HoverCardComponentProps) => React.JSX.Element;
+export declare const HoverCardComponent: ({ children, url, id, canOpen, closeOnChildClick, actionOptions, allowEventPropagation, zIndex, noFadeDelay, hoverPreviewOptions, role, shouldRenderToParent, label, titleId, onVisibilityChange, }: HoverCardComponentProps) => React.JSX.Element;

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

@@ -51,6 +51,11 @@ export interface HoverCardProps extends WithAnalyticsEventsProps {
      * Should be used along with `label` or `titleId` for supported roles.
      */
     role?: string;
+    /**
+     * Whether the hover card should render to the parent element, to the
+     * atlaskit-portal-container at the root of the document. Defaults to false.
+     */
+    shouldRenderToParent?: boolean;
     /**
      * Id referenced by the hover card `aria-labelledby` attribute.
      * Usage of either this, or the `label` attribute is strongly recommended.
@@ -86,6 +91,7 @@ export interface HoverCardComponentProps extends HoverCardProps, HoverCardIntern
 export type HoverCardContentProps = {
     actionOptions?: CardActionOptions;
     cardState: CardState;
+    hoverPreviewOptions?: HoverPreviewOptions;
     id?: string;
     onActionClick: (actionId: string | ActionName) => void;
     onMouseEnter?: MouseEventHandler;
@@ -93,7 +99,6 @@ export type HoverCardContentProps = {
     onResolve: () => void;
     renderers?: CardProviderRenderers;
     url: string;
-    hoverPreviewOptions?: HoverPreviewOptions;
 };
 export type ContentContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     isAIEnabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "43.8.1",
+	"version": "43.9.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -235,6 +235,9 @@
 		"navx-2479-sl-fix-inilne-card-show-connect-button": {
 			"type": "boolean"
 		},
+		"hover-card-prop-should-render-to-parent": {
+			"type": "boolean"
+		},
 		"platform-linking-smart-card-layered-link-a11y": {
 			"type": "boolean"
 		},