@atlaskit/smart-card 27.2.0 → 27.2.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 27.2.2
+
+### Patch Changes
+
+-   [#103697](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103697)
+    [`9b1bedee923a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b1bedee923a) -
+    [ux] Added fixed width and min height to related links modal
+
+## 27.2.1
+
+### Patch Changes
+
+-   [#103165](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103165)
+    [`ea89f19613e2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ea89f19613e2) -
+    Create modal context to fix issue where action modal triggered from hover card disappears when
+    hover card disappears
+
 ## 27.2.0
 
 ### Minor Changes

package/dist/cjs/state/modal/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkModal = exports.SmartLinkModalProvider = exports.SmartLinkModalContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactErrorBoundary = require("react-error-boundary");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var FALLBACK_API = {
+  open: function open() {},
+  close: function close() {}
+};
+var SmartLinkModalContext = exports.SmartLinkModalContext = /*#__PURE__*/_react.default.createContext(FALLBACK_API);
+var SmartLinkModalProvider = exports.SmartLinkModalProvider = function SmartLinkModalProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    element = _useState2[0],
+    setElement = _useState2[1];
+  var api = (0, _react.useMemo)(function () {
+    return {
+      open: function open(modal) {
+        return setElement( /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+          fallback: null
+        }, modal));
+      },
+      close: function close() {
+        return setElement(null);
+      }
+    };
+  }, []);
+  var fallbackRender = (0, _react.useCallback)(function (_ref2) {
+    var resetErrorBoundary = _ref2.resetErrorBoundary;
+    resetErrorBoundary();
+    return null;
+  }, []);
+  var onReset = (0, _react.useCallback)(function () {
+    return setElement(null);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SmartLinkModalContext.Provider, {
+    value: api
+  }, children), /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+    fallbackRender: fallbackRender,
+    onReset: onReset
+  }, element));
+};
+
+/**
+ * Open (lazy load) modal
+ *
+ * This hook injects the element below Card and standalone HoverCard component.
+ * It is intended to solve the issue where modal triggered by the parent component
+ * disappear when the parent component is unmounted.
+ *
+ * For example, clicking on hover card action to open a modal. Once the modal is opened,
+ * hover card disappears.
+ *
+ * Usage:
+ *   const modal = useSmartLinkModal()
+ *   modal.open(<SomeLazyLoadModal isOpen={true} onClose={() => modal.close()} />);
+ */
+var useSmartLinkModal = exports.useSmartLinkModal = function useSmartLinkModal() {
+  return (0, _react.useContext)(SmartLinkModalContext);
+};

package/dist/cjs/state/modal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

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

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

@@ -9,6 +9,7 @@ exports.CardWithUrlContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkProvider = require("@atlaskit/link-provider");
+var _modal = require("../../state/modal");
 var _utils = require("../../utils");
 var measure = _interopRequireWildcard(require("../../utils/performance"));
 var _helpers = require("../../state/helpers");
@@ -278,9 +279,9 @@ function Component(_ref) {
 }
 var CardWithUrlContent = exports.CardWithUrlContent = function CardWithUrlContent(props) {
   var display = (0, _flexible.isFlexibleUiCard)(props.children) ? _constants.CardDisplay.Flexible : props.appearance;
-  return /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
+  return /*#__PURE__*/_react.default.createElement(_modal.SmartLinkModalProvider, null, /*#__PURE__*/_react.default.createElement(_SmartLinkAnalyticsContext.SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/_react.default.createElement(Component, props));
+  }, /*#__PURE__*/_react.default.createElement(Component, props)));
 };

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

@@ -9,6 +9,7 @@ var _react = require("@emotion/react");
 var _react2 = require("react");
 var _reactErrorBoundary = require("react-error-boundary");
 var _analytics = require("../../state/analytics");
+var _modal = require("../../state/modal");
 var _HoverCardComponent = require("./components/HoverCardComponent");
 var _constants = require("../../constants");
 var _reactMagneticDi = require("react-magnetic-di");
@@ -30,7 +31,7 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   return (0, _react.jsx)(_reactErrorBoundary.ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, props, children));
+  }, (0, _react.jsx)(_modal.SmartLinkModalProvider, null, (0, _react.jsx)(_HoverCardComponent.HoverCardComponent, props, children)));
 };
 var HoverCardWithoutAnalyticsContext = (0, _analyticsNext.withAnalyticsEvents)()(HoverCardWithErrorBoundary);
 

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

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

package/dist/cjs/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -11,18 +11,26 @@ var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _messages = require("../../../messages");
+var _primitives = require("@atlaskit/primitives");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
 
+var fixedWidth = 'small'; // pre-defined 400px by Atlaskit
+
+var boxStyles = (0, _primitives.xcss)({
+  height: '396px' // Specified by the designer as this will display 5 incoming links and 2 outgoing links
+});
 var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
   var onClose = _ref.onClose,
     showModal = _ref.showModal,
     children = _ref.children;
   return (0, _react.jsx)(_modalDialog.ModalTransition, null, showModal && (0, _react.jsx)(_modalDialog.default, {
     onClose: onClose,
-    width: "small"
-  }, (0, _react.jsx)(_modalDialog.ModalHeader, null, (0, _react.jsx)(_modalDialog.ModalTitle, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_title))), (0, _react.jsx)(_modalDialog.ModalBody, null, children), (0, _react.jsx)(_modalDialog.ModalFooter, null, (0, _react.jsx)(_new.default, {
+    width: fixedWidth
+  }, (0, _react.jsx)(_modalDialog.ModalHeader, null, (0, _react.jsx)(_modalDialog.ModalTitle, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_title))), (0, _react.jsx)(_modalDialog.ModalBody, null, (0, _react.jsx)(_primitives.Box, {
+    xcss: boxStyles
+  }, children)), (0, _react.jsx)(_modalDialog.ModalFooter, null, (0, _react.jsx)(_new.default, {
     appearance: "primary",
     onClick: onClose
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.close)))));

package/dist/es2019/state/modal/index.js

@@ -0,0 +1,47 @@
+import React, { Suspense, useCallback, useContext, useMemo, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+const FALLBACK_API = {
+  open: () => {},
+  close: () => {}
+};
+export const SmartLinkModalContext = /*#__PURE__*/React.createContext(FALLBACK_API);
+export const SmartLinkModalProvider = ({
+  children
+}) => {
+  const [element, setElement] = useState(null);
+  const api = useMemo(() => ({
+    open: modal => setElement( /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, modal)),
+    close: () => setElement(null)
+  }), []);
+  const fallbackRender = useCallback(({
+    resetErrorBoundary
+  }) => {
+    resetErrorBoundary();
+    return null;
+  }, []);
+  const onReset = useCallback(() => setElement(null), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartLinkModalContext.Provider, {
+    value: api
+  }, children), /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallbackRender: fallbackRender,
+    onReset: onReset
+  }, element));
+};
+
+/**
+ * Open (lazy load) modal
+ *
+ * This hook injects the element below Card and standalone HoverCard component.
+ * It is intended to solve the issue where modal triggered by the parent component
+ * disappear when the parent component is unmounted.
+ *
+ * For example, clicking on hover card action to open a modal. Once the modal is opened,
+ * hover card disappears.
+ *
+ * Usage:
+ *   const modal = useSmartLinkModal()
+ *   modal.open(<SomeLazyLoadModal isOpen={true} onClose={() => modal.close()} />);
+ */
+export const useSmartLinkModal = () => useContext(SmartLinkModalContext);

package/dist/es2019/state/modal/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { SmartLinkModalProvider } from '../../state/modal';
 import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct, getCanBeDatasource } from '../../state/helpers';
@@ -265,9 +266,9 @@ function Component({
 }
 export const CardWithUrlContent = props => {
   const display = isFlexibleUiCard(props.children) ? CardDisplay.Flexible : props.appearance;
-  return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+  return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/React.createElement(Component, props));
+  }, /*#__PURE__*/React.createElement(Component, props)));
 };

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

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
+import { SmartLinkModalProvider } from '../../state/modal';
 import { HoverCardComponent } from './components/HoverCardComponent';
 import { CardDisplay } from '../../constants';
 import { di } from 'react-magnetic-di';
@@ -25,7 +26,7 @@ const HoverCardWithErrorBoundary = props => {
   return jsx(ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, jsx(HoverCardComponent, props, children));
+  }, jsx(SmartLinkModalProvider, null, jsx(HoverCardComponent, props, children)));
 };
 const HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
 

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.2.0",
+  packageVersion: "27.2.2",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -5,6 +5,12 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { messages } from '../../../messages';
+import { Box, xcss } from '@atlaskit/primitives';
+const fixedWidth = 'small'; // pre-defined 400px by Atlaskit
+
+const boxStyles = xcss({
+  height: '396px' // Specified by the designer as this will display 5 incoming links and 2 outgoing links
+});
 const RelatedLinksBaseModal = ({
   onClose,
   showModal,
@@ -12,8 +18,10 @@ const RelatedLinksBaseModal = ({
 }) => {
   return jsx(ModalTransition, null, showModal && jsx(Modal, {
     onClose: onClose,
-    width: "small"
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, children), jsx(ModalFooter, null, jsx(Button, {
+    width: fixedWidth
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, jsx(Box, {
+    xcss: boxStyles
+  }, children)), jsx(ModalFooter, null, jsx(Button, {
     appearance: "primary",
     onClick: onClose
   }, jsx(FormattedMessage, messages.close)))));

package/dist/esm/state/modal/index.js

@@ -0,0 +1,59 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { Suspense, useCallback, useContext, useMemo, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+var FALLBACK_API = {
+  open: function open() {},
+  close: function close() {}
+};
+export var SmartLinkModalContext = /*#__PURE__*/React.createContext(FALLBACK_API);
+export var SmartLinkModalProvider = function SmartLinkModalProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    element = _useState2[0],
+    setElement = _useState2[1];
+  var api = useMemo(function () {
+    return {
+      open: function open(modal) {
+        return setElement( /*#__PURE__*/React.createElement(Suspense, {
+          fallback: null
+        }, modal));
+      },
+      close: function close() {
+        return setElement(null);
+      }
+    };
+  }, []);
+  var fallbackRender = useCallback(function (_ref2) {
+    var resetErrorBoundary = _ref2.resetErrorBoundary;
+    resetErrorBoundary();
+    return null;
+  }, []);
+  var onReset = useCallback(function () {
+    return setElement(null);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartLinkModalContext.Provider, {
+    value: api
+  }, children), /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallbackRender: fallbackRender,
+    onReset: onReset
+  }, element));
+};
+
+/**
+ * Open (lazy load) modal
+ *
+ * This hook injects the element below Card and standalone HoverCard component.
+ * It is intended to solve the issue where modal triggered by the parent component
+ * disappear when the parent component is unmounted.
+ *
+ * For example, clicking on hover card action to open a modal. Once the modal is opened,
+ * hover card disappears.
+ *
+ * Usage:
+ *   const modal = useSmartLinkModal()
+ *   modal.open(<SomeLazyLoadModal isOpen={true} onClose={() => modal.close()} />);
+ */
+export var useSmartLinkModal = function useSmartLinkModal() {
+  return useContext(SmartLinkModalContext);
+};

package/dist/esm/state/modal/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
+import { SmartLinkModalProvider } from '../../state/modal';
 import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct, getCanBeDatasource } from '../../state/helpers';
@@ -268,9 +269,9 @@ function Component(_ref) {
 }
 export var CardWithUrlContent = function CardWithUrlContent(props) {
   var display = isFlexibleUiCard(props.children) ? CardDisplay.Flexible : props.appearance;
-  return /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
+  return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/React.createElement(Component, props));
+  }, /*#__PURE__*/React.createElement(Component, props)));
 };

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

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';
+import { SmartLinkModalProvider } from '../../state/modal';
 import { HoverCardComponent } from './components/HoverCardComponent';
 import { CardDisplay } from '../../constants';
 import { di } from 'react-magnetic-di';
@@ -23,7 +24,7 @@ var HoverCardWithErrorBoundary = function HoverCardWithErrorBoundary(props) {
   return jsx(ErrorBoundary, {
     fallback: children,
     onError: onError
-  }, jsx(HoverCardComponent, props, children));
+  }, jsx(SmartLinkModalProvider, null, jsx(HoverCardComponent, props, children)));
 };
 var HoverCardWithoutAnalyticsContext = withAnalyticsEvents()(HoverCardWithErrorBoundary);
 

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

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.2.0",
+  packageVersion: "27.2.2",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -5,14 +5,22 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { messages } from '../../../messages';
+import { Box, xcss } from '@atlaskit/primitives';
+var fixedWidth = 'small'; // pre-defined 400px by Atlaskit
+
+var boxStyles = xcss({
+  height: '396px' // Specified by the designer as this will display 5 incoming links and 2 outgoing links
+});
 var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
   var onClose = _ref.onClose,
     showModal = _ref.showModal,
     children = _ref.children;
   return jsx(ModalTransition, null, showModal && jsx(Modal, {
     onClose: onClose,
-    width: "small"
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, children), jsx(ModalFooter, null, jsx(Button, {
+    width: fixedWidth
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, jsx(Box, {
+    xcss: boxStyles
+  }, children)), jsx(ModalFooter, null, jsx(Button, {
     appearance: "primary",
     onClick: onClose
   }, jsx(FormattedMessage, messages.close)))));

package/dist/types/state/modal/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type SmartLinkModalAPI, type SmartLinkModalProviderProps } from './types';
+export declare const SmartLinkModalContext: React.Context<SmartLinkModalAPI>;
+export declare const SmartLinkModalProvider: ({ children, }: SmartLinkModalProviderProps) => JSX.Element;
+/**
+ * Open (lazy load) modal
+ *
+ * This hook injects the element below Card and standalone HoverCard component.
+ * It is intended to solve the issue where modal triggered by the parent component
+ * disappear when the parent component is unmounted.
+ *
+ * For example, clicking on hover card action to open a modal. Once the modal is opened,
+ * hover card disappears.
+ *
+ * Usage:
+ *   const modal = useSmartLinkModal()
+ *   modal.open(<SomeLazyLoadModal isOpen={true} onClose={() => modal.close()} />);
+ */
+export declare const useSmartLinkModal: () => SmartLinkModalAPI;

package/dist/types/state/modal/types.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export type SmartLinkModalAPI = {
+    /**
+     * Insert a modal component on the root of Card or standalone HoverCard.
+     * This is to ensure that the modal would not be unmounted
+     * when HoverCard is unmounted.
+     */
+    open: (node: JSX.Element) => void;
+    /**
+     * Remove modal component.
+     */
+    close: () => void;
+};
+export type SmartLinkModalProviderProps = {
+    children?: ReactNode;
+};

package/dist/types-ts4.5/state/modal/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type SmartLinkModalAPI, type SmartLinkModalProviderProps } from './types';
+export declare const SmartLinkModalContext: React.Context<SmartLinkModalAPI>;
+export declare const SmartLinkModalProvider: ({ children, }: SmartLinkModalProviderProps) => JSX.Element;
+/**
+ * Open (lazy load) modal
+ *
+ * This hook injects the element below Card and standalone HoverCard component.
+ * It is intended to solve the issue where modal triggered by the parent component
+ * disappear when the parent component is unmounted.
+ *
+ * For example, clicking on hover card action to open a modal. Once the modal is opened,
+ * hover card disappears.
+ *
+ * Usage:
+ *   const modal = useSmartLinkModal()
+ *   modal.open(<SomeLazyLoadModal isOpen={true} onClose={() => modal.close()} />);
+ */
+export declare const useSmartLinkModal: () => SmartLinkModalAPI;

package/dist/types-ts4.5/state/modal/types.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+export type SmartLinkModalAPI = {
+    /**
+     * Insert a modal component on the root of Card or standalone HoverCard.
+     * This is to ensure that the modal would not be unmounted
+     * when HoverCard is unmounted.
+     */
+    open: (node: JSX.Element) => void;
+    /**
+     * Remove modal component.
+     */
+    close: () => void;
+};
+export type SmartLinkModalProviderProps = {
+    children?: ReactNode;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "27.2.0",
+  "version": "27.2.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
     "@atlaskit/avatar-group": "^9.6.0",
     "@atlaskit/badge": "^16.1.0",
     "@atlaskit/button": "^17.17.0",
-    "@atlaskit/checkbox": "^13.3.0",
+    "@atlaskit/checkbox": "^13.4.0",
     "@atlaskit/dropdown-menu": "^12.10.0",
     "@atlaskit/form": "^10.2.0",
     "@atlaskit/frontend-utilities": "^2.7.0",