@atlaskit/smart-card 29.0.2 → 29.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/smart-card
 
+## 29.1.0
+
+### Minor Changes
+
+- [#149644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/149644)
+  [`5a157fb05e298`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5a157fb05e298) -
+  [ux] Enable new icons behind a feature flag.
+- [#148475](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148475)
+  [`09e912b75c96d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/09e912b75c96d) -
+  [ux] Enable new icons behind a feature flag.
+- [#148475](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/148475)
+  [`8a89b1fabdecc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8a89b1fabdecc) -
+  [ux] Enable new icons behind a feature flag.
+
+## 29.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 29.0.2
 
 ### Patch Changes

package/dist/cjs/extractors/common/detail/extractSubscriberCount.js

@@ -7,19 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.extractSubscriberCount = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _colors = require("@atlaskit/theme/colors");
-var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
+var _peopleGroupPeople = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group--people"));
 var extractSubscriberCount = exports.extractSubscriberCount = function extractSubscriberCount(jsonLd) {
   var subscriberCount = jsonLd['atlassian:subscriberCount'];
   if (subscriberCount) {
     return {
       text: subscriberCount.toString(),
-      icon:
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19499
-      _react.default.createElement(_people.default, {
-        size: "small",
+      icon: /*#__PURE__*/_react.default.createElement(_peopleGroupPeople.default, {
+        LEGACY_size: "small",
         label: "subscribers",
-        primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N600, ")")
+        color: "var(--ds-icon-subtle, ".concat(_colors.N600, ")")
       })
     };
   }

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

package/dist/cjs/view/BlockCard/views/ForbiddenView.js

@@ -10,7 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _colors = require("@atlaskit/theme/colors");
-var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+var _lockLockedLockFilled = _interopRequireDefault(require("@atlaskit/icon/utility/migration/lock-locked--lock-filled"));
 var _Frame = require("../components/Frame");
 var _Provider = require("../components/Provider");
 var _Byline = require("../../common/Byline");
@@ -22,12 +22,16 @@ var _ContentHeader = require("../components/ContentHeader");
 var _handlers = require("../utils/handlers");
 var _Link = require("../components/Link");
 var _UnresolvedText = require("../components/UnresolvedText");
+var _primitives = require("@atlaskit/primitives");
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var iconWrapperStyles = (0, _primitives.xcss)({
+  marginRight: 'space.050'
+});
 /**
  * Class name for selecting non-flexible forbidden block card
  *
@@ -90,14 +94,16 @@ var ForbiddenView = exports.ForbiddenView = function ForbiddenView(_ref) {
     ,
     className: blockCardForbiddenViewLinkClassName
   })), (0, _react.jsx)(_Byline.Byline, null, (0, _react.jsx)(_UnresolvedText.UnresolvedText, {
-    icon:
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-    (0, _react.jsx)(_lockFilled.default, {
+    icon: (0, _react.jsx)(_primitives.Flex, {
+      alignItems: "center",
+      xcss: iconWrapperStyles
+    }, (0, _react.jsx)(_lockLockedLockFilled.default, {
       label: "forbidden-lock-icon",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
-      testId: "".concat(testId, "-lock-icon")
-    }),
+      LEGACY_size: "small",
+      color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+      testId: "".concat(testId, "-lock-icon"),
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-050, -4px)", " 0 0")
+    })),
     text: (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages[descriptiveMessageKey], {
       values: {
         product: context.text,

package/dist/cjs/view/BlockCard/views/ResolvingView.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockCardResolvingViewClassName = exports.ResolvingView = void 0;
 var _react = require("@emotion/react");
-var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/document-filled"));
+var _fileEditorFile = _interopRequireDefault(require("@atlaskit/icon/core/migration/file--editor-file"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _Frame = require("../components/Frame");
@@ -46,10 +46,11 @@ var ResolvingView = exports.ResolvingView = function ResolvingView(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: blockCardResolvingViewClassName
-  }, (0, _react.jsx)(_documentFilled.default, {
-    size: "small",
-    primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N50, ")"),
-    label: "document-icon"
+  }, (0, _react.jsx)(_fileEditorFile.default, {
+    LEGACY_size: "medium",
+    color: "var(--ds-icon-subtle, ".concat(_colors.N50, ")"),
+    label: "document-icon",
+    LEGACY_margin: "0 -4.3px 0 -4px"
   }), (0, _react.jsx)("span", {
     css: messageStyles
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -22,6 +22,7 @@ var _messages = require("../../../../../messages");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _actionGroupItem = _interopRequireDefault(require("./action-group-item"));
 var _utils2 = require("../utils");
+var _reactMagneticDi = require("react-magnetic-di");
 var _excluded = ["triggerRef"];
 /**
  * @jsxRuntime classic

package/dist/cjs/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.AIFooterMetadata = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _reactMagneticDi = require("react-magnetic-di");
 var _reactIntlNext = require("react-intl-next");
 var _primitives = require("@atlaskit/primitives");
 var _aiIcon = _interopRequireDefault(require("../../../../../common/ai-icon"));

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

@@ -16,6 +16,7 @@ var _layeredLink = _interopRequireDefault(require("./layered-link"));
 var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
 var _utils = require("../../../../state/flexible-ui-context/utils");
 var _colors = require("@atlaskit/theme/colors");
+var _reactMagneticDi = require("react-magnetic-di");
 var _templateObject;
 /**
  * @jsxRuntime classic

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

package/dist/es2019/extractors/common/detail/extractSubscriberCount.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
-import PeopleIcon from '@atlaskit/icon/glyph/people';
+import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
 export const extractSubscriberCount = jsonLd => {
   const subscriberCount = jsonLd['atlassian:subscriberCount'];
   if (subscriberCount) {
     return {
       text: subscriberCount.toString(),
-      icon:
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19499
-      React.createElement(PeopleIcon, {
-        size: "small",
+      icon: /*#__PURE__*/React.createElement(PeopleIcon, {
+        LEGACY_size: "small",
         label: "subscribers",
-        primaryColor: `var(--ds-icon-subtle, ${N600})`
+        color: `var(--ds-icon-subtle, ${N600})`
       })
     };
   }

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

package/dist/es2019/view/BlockCard/views/ForbiddenView.js

@@ -7,7 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockIcon from '@atlaskit/icon/utility/migration/lock-locked--lock-filled';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
 import { Byline } from '../../common/Byline';
@@ -19,6 +19,10 @@ import { ContentHeader } from '../components/ContentHeader';
 import { handleClickCommon } from '../utils/handlers';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
+import { Flex, xcss } from '@atlaskit/primitives';
+const iconWrapperStyles = xcss({
+  marginRight: 'space.050'
+});
 /**
  * Class name for selecting non-flexible forbidden block card
  *
@@ -73,14 +77,16 @@ export const ForbiddenView = ({
     ,
     className: blockCardForbiddenViewLinkClassName
   })), jsx(Byline, null, jsx(UnresolvedText, {
-    icon:
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-    jsx(LockIcon, {
+    icon: jsx(Flex, {
+      alignItems: "center",
+      xcss: iconWrapperStyles
+    }, jsx(LockIcon, {
       label: "forbidden-lock-icon",
-      size: "small",
-      primaryColor: `var(--ds-icon-danger, ${R300})`,
-      testId: `${testId}-lock-icon`
-    }),
+      LEGACY_size: "small",
+      color: `var(--ds-icon-danger, ${R300})`,
+      testId: `${testId}-lock-icon`,
+      LEGACY_margin: `0 ${"var(--ds-space-negative-050, -4px)"} 0 0`
+    })),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
       values: {
         product: context.text,

package/dist/es2019/view/BlockCard/views/ResolvingView.js

@@ -4,7 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
+import DocumentFilledIcon from '@atlaskit/icon/core/migration/file--editor-file';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { Frame } from '../components/Frame';
@@ -37,9 +37,10 @@ export const ResolvingView = ({
   ,
   className: blockCardResolvingViewClassName
 }, jsx(DocumentFilledIcon, {
-  size: "small",
-  primaryColor: `var(--ds-icon-subtle, ${N50})`,
-  label: "document-icon"
+  LEGACY_size: "medium",
+  color: `var(--ds-icon-subtle, ${N50})`,
+  label: "document-icon",
+  LEGACY_margin: "0 -4.3px 0 -4px"
 }), jsx("span", {
   css: messageStyles
 }, jsx(FormattedMessage, messages.loading)));

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -19,6 +19,7 @@ import { messages } from '../../../../../messages';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import ActionGroupItem from './action-group-item';
 import { filterActionItems } from '../utils';
+import { di } from 'react-magnetic-di';
 const styles = css({
   display: 'inline-flex',
   lineHeight: '1rem',

package/dist/es2019/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
+import { di } from 'react-magnetic-di';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline } from '@atlaskit/primitives';
 import AIIcon from '../../../../../common/ai-icon';

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

@@ -12,6 +12,7 @@ import LayeredLink from './layered-link';
 import HoverCardControl from './hover-card-control';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 import { N40 } from '@atlaskit/theme/colors';
+import { di } from 'react-magnetic-di';
 const elevationStyles = css({
   border: `1px solid ${`var(--ds-border, ${N40})`}`,
   borderRadius: "var(--ds-border-radius-200, 8px)",

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: "29.0.2",
+  packageVersion: "29.1.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/extractors/common/detail/extractSubscriberCount.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import { N600 } from '@atlaskit/theme/colors';
-import PeopleIcon from '@atlaskit/icon/glyph/people';
+import PeopleIcon from '@atlaskit/icon/core/migration/people-group--people';
 export var extractSubscriberCount = function extractSubscriberCount(jsonLd) {
   var subscriberCount = jsonLd['atlassian:subscriberCount'];
   if (subscriberCount) {
     return {
       text: subscriberCount.toString(),
-      icon:
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19499
-      React.createElement(PeopleIcon, {
-        size: "small",
+      icon: /*#__PURE__*/React.createElement(PeopleIcon, {
+        LEGACY_size: "small",
         label: "subscribers",
-        primaryColor: "var(--ds-icon-subtle, ".concat(N600, ")")
+        color: "var(--ds-icon-subtle, ".concat(N600, ")")
       })
     };
   }

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

package/dist/esm/view/BlockCard/views/ForbiddenView.js

@@ -8,7 +8,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import LockIcon from '@atlaskit/icon/utility/migration/lock-locked--lock-filled';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';
 import { Byline } from '../../common/Byline';
@@ -20,6 +20,10 @@ import { ContentHeader } from '../components/ContentHeader';
 import { handleClickCommon } from '../utils/handlers';
 import { Link } from '../components/Link';
 import { UnresolvedText } from '../components/UnresolvedText';
+import { Flex, xcss } from '@atlaskit/primitives';
+var iconWrapperStyles = xcss({
+  marginRight: 'space.050'
+});
 /**
  * Class name for selecting non-flexible forbidden block card
  *
@@ -82,14 +86,16 @@ export var ForbiddenView = function ForbiddenView(_ref) {
     ,
     className: blockCardForbiddenViewLinkClassName
   })), jsx(Byline, null, jsx(UnresolvedText, {
-    icon:
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19497
-    jsx(LockIcon, {
+    icon: jsx(Flex, {
+      alignItems: "center",
+      xcss: iconWrapperStyles
+    }, jsx(LockIcon, {
       label: "forbidden-lock-icon",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
-      testId: "".concat(testId, "-lock-icon")
-    }),
+      LEGACY_size: "small",
+      color: "var(--ds-icon-danger, ".concat(R300, ")"),
+      testId: "".concat(testId, "-lock-icon"),
+      LEGACY_margin: "0 ".concat("var(--ds-space-negative-050, -4px)", " 0 0")
+    })),
     text: jsx(FormattedMessage, _extends({}, messages[descriptiveMessageKey], {
       values: {
         product: context.text,

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -4,7 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
+import DocumentFilledIcon from '@atlaskit/icon/core/migration/file--editor-file';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { Frame } from '../components/Frame';
@@ -39,9 +39,10 @@ export var ResolvingView = function ResolvingView(_ref) {
     ,
     className: blockCardResolvingViewClassName
   }, jsx(DocumentFilledIcon, {
-    size: "small",
-    primaryColor: "var(--ds-icon-subtle, ".concat(N50, ")"),
-    label: "document-icon"
+    LEGACY_size: "medium",
+    color: "var(--ds-icon-subtle, ".concat(N50, ")"),
+    label: "document-icon",
+    LEGACY_margin: "0 -4.3px 0 -4px"
   }), jsx("span", {
     css: messageStyles
   }, jsx(FormattedMessage, messages.loading)));

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -22,6 +22,7 @@ import { messages } from '../../../../../messages';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import ActionGroupItem from './action-group-item';
 import { filterActionItems } from '../utils';
+import { di } from 'react-magnetic-di';
 var styles = css({
   display: 'inline-flex',
   lineHeight: '1rem',

package/dist/esm/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Tooltip from '@atlaskit/tooltip';
+import { di } from 'react-magnetic-di';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline } from '@atlaskit/primitives';
 import AIIcon from '../../../../../common/ai-icon';

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

@@ -14,6 +14,7 @@ import LayeredLink from './layered-link';
 import HoverCardControl from './hover-card-control';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 import { N40 } from '@atlaskit/theme/colors';
+import { di } from 'react-magnetic-di';
 var elevationStyles = css({
   border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
   borderRadius: "var(--ds-border-radius-200, 8px)",

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: "29.0.2",
+  packageVersion: "29.1.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

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

@@ -31,26 +31,57 @@ export type CardActionOptions = {
     exclude?: Array<CardAction>;
 };
 interface ActionProps {
+    /**
+     * Configure visibility of actions available.
+     * By default, smart links show all actions available on the views.
+     * Set `hide` to true to disable all actions.
+     * Set `hide` to false and set `exclude` to enable only specific actions.
+     */
     actionOptions?: CardActionOptions;
 }
 interface HoverPreviewProps extends ActionProps {
+    /**
+     * Flag to display hover preview on hover.
+     */
     showHoverPreview?: boolean;
+    /**
+     * Configuration for hover card.
+     */
     hoverPreviewOptions?: HoverPreviewOptions;
+    /**
+     * Flag to display unresolved views on hover preview.
+     */
     showAuthTooltip?: boolean;
 }
 export interface BaseCardProps {
+    /**
+     * Define smart card default appearance.
+     */
     appearance: CardAppearance;
+    /**
+     * The container which `react-lazily-render` listens to for scroll events.
+     * This property can be used in a scenario where you want to specify your own scroll container
+     * while the Card component is (lazy)loading.
+     */
     container?: HTMLElement;
     /**
-     * A component that will be rendered when smart card fails to render
-     * because of uncaught errors
+     * A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
      */
     fallbackComponent?: React.ComponentType;
+    /**
+     * Unique id for smart link used in analytics.
+     */
     id?: string;
+    /**
+     * Show selected state of smart link.
+     */
     isSelected?: boolean;
+    /**
+     * A callback function after a link is clicked.
+     */
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     /**
-     * A callback function currently invoked in two cases
+     * A callback function currently invoked in two cases:
      * 1. When the {@link CardState.status} is one of {@link ErrorCardType}. "err" property in argument will be undefined in this case
      *    This does not mean that smart card failed to render.
      * 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card succesfully.
@@ -60,19 +91,40 @@ export interface BaseCardProps {
      *    If fallbackComponent is not provided, smart card will render null
      */
     onError?: OnErrorCallback;
+    /**
+     * A callback function after the url is resolved into smart card.
+     */
     onResolve?: OnResolveCallback;
+    /**
+     * String to be displayed while the Card component is (lazy)loading.
+     */
     placeholder?: string;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
     testId?: string;
+    /**
+     * The url link of the resource to be resolved and shown as Smart Link.
+     */
     url?: string;
 }
 export interface InlineProps extends HoverPreviewProps {
+    /**
+     * By default, inline resolving states show a frame with a spinner on the left.
+     * An alternative is to remove the frame and place the spinner on the right by setting this value to `on-right-without-skeleton`.
+     * This property is specific to inline links in the editor.
+     */
     inlinePreloaderStyle?: InlinePreloaderStyle;
-    /** A flag that determines whether a card is in a hover state in edit mode. Currently used for inline links only */
+    /**
+     * A flag that determines whether a card is in a hover state. Currently used for inline links in editor only.
+     */
     isHovered?: boolean;
     /**
      * When set to true, the text fragment will be removed from the title.
      * This will have no impact on the url and text highlighting will still persist in the url,
-     * however the the text fragment will be stripped from the title of the smart card.
+     * however the text fragment will be stripped from the title of the smart card.
      * For example, when set to true: "my name | :~:text=highlight this" will be displayed as "my name"
      */
     removeTextHighlightingFromTitle?: boolean;
@@ -80,27 +132,49 @@ export interface InlineProps extends HoverPreviewProps {
      * When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.
      */
     resolvingPlaceholder?: string;
-    /** When set to true, inline cards will be truncated to one line. */
+    /**
+     * When set to true, inline cards will be truncated to one line
+     */
     truncateInline?: boolean;
 }
 export interface BlockProps extends ActionProps {
     /**
-     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15021 Internal documentation for deprecation (no external access)}
      * When enabled the legacy block card is always used, even if the enableFlexibleBlockCard flag is set to true.
      * Usage is strongly discouraged. This should only be used if there is a specific reason you're
      * unable to use the new flexible block cards.
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15021 Internal documentation for deprecation (no external access)}
      */
     useLegacyBlockCard?: boolean;
 }
 export interface EmbedProps {
+    /**
+     * React referenced value on embed iframe.
+     */
     embedIframeRef?: React.Ref<HTMLIFrameElement>;
+    /**
+     * Type of URL used with embed iframe. By default, the embed use `data.preview.href` from link response.
+     * `interactiveHref` is suitable for displaying iframe content that contains "more editable" version of
+     * the link, e.g. includes toolbar.
+     * It is only available on supported link response with `data.preview.interactiveHref`.
+     */
     embedIframeUrlType?: EmbedIframeUrlType;
-    /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
+    /**
+     * A prop that determines the style of a frame:
+     * whether to show it, hide it or only show it when a user hovers over embed.
+     */
     frameStyle?: FrameStyle;
-    /** This props determines if dimensions of an embed card are to be inherited from the parent.
-     * The parent container needs to override a style '.loader-wrapper' and set the desirable height there. (for instance, 'height: 100%')
+    /**
+     * Determines whether width and height of an embed card are to be inherited from the parent.
+     * If `true`, embed iframe will remove restrictions on iframe aspect ratio, height and width.
+     * The parent container needs to override a style `.loader-wrapper` and set the desirable height there.
+     * (For instance, 'height: 100%')
      */
     inheritDimensions?: boolean;
+    /**
+     * Informs Smart Link of the device it is rendered in. Available values are `web` and `mobile`.
+     * It is used together with link response `data.preview["atlassian:supportedPlatforms"]`.
+     * To make embed content available on all supported urls, use `web`.
+     */
     platform?: CardPlatform;
 }
 export interface FlexibleProps extends ActionProps, HoverPreviewProps {

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

@@ -31,26 +31,57 @@ export type CardActionOptions = {
     exclude?: Array<CardAction>;
 };
 interface ActionProps {
+    /**
+     * Configure visibility of actions available.
+     * By default, smart links show all actions available on the views.
+     * Set `hide` to true to disable all actions.
+     * Set `hide` to false and set `exclude` to enable only specific actions.
+     */
     actionOptions?: CardActionOptions;
 }
 interface HoverPreviewProps extends ActionProps {
+    /**
+     * Flag to display hover preview on hover.
+     */
     showHoverPreview?: boolean;
+    /**
+     * Configuration for hover card.
+     */
     hoverPreviewOptions?: HoverPreviewOptions;
+    /**
+     * Flag to display unresolved views on hover preview.
+     */
     showAuthTooltip?: boolean;
 }
 export interface BaseCardProps {
+    /**
+     * Define smart card default appearance.
+     */
     appearance: CardAppearance;
+    /**
+     * The container which `react-lazily-render` listens to for scroll events.
+     * This property can be used in a scenario where you want to specify your own scroll container
+     * while the Card component is (lazy)loading.
+     */
     container?: HTMLElement;
     /**
-     * A component that will be rendered when smart card fails to render
-     * because of uncaught errors
+     * A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.
      */
     fallbackComponent?: React.ComponentType;
+    /**
+     * Unique id for smart link used in analytics.
+     */
     id?: string;
+    /**
+     * Show selected state of smart link.
+     */
     isSelected?: boolean;
+    /**
+     * A callback function after a link is clicked.
+     */
     onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     /**
-     * A callback function currently invoked in two cases
+     * A callback function currently invoked in two cases:
      * 1. When the {@link CardState.status} is one of {@link ErrorCardType}. "err" property in argument will be undefined in this case
      *    This does not mean that smart card failed to render.
      * 2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card succesfully.
@@ -60,19 +91,40 @@ export interface BaseCardProps {
      *    If fallbackComponent is not provided, smart card will render null
      */
     onError?: OnErrorCallback;
+    /**
+     * A callback function after the url is resolved into smart card.
+     */
     onResolve?: OnResolveCallback;
+    /**
+     * String to be displayed while the Card component is (lazy)loading.
+     */
     placeholder?: string;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
     testId?: string;
+    /**
+     * The url link of the resource to be resolved and shown as Smart Link.
+     */
     url?: string;
 }
 export interface InlineProps extends HoverPreviewProps {
+    /**
+     * By default, inline resolving states show a frame with a spinner on the left.
+     * An alternative is to remove the frame and place the spinner on the right by setting this value to `on-right-without-skeleton`.
+     * This property is specific to inline links in the editor.
+     */
     inlinePreloaderStyle?: InlinePreloaderStyle;
-    /** A flag that determines whether a card is in a hover state in edit mode. Currently used for inline links only */
+    /**
+     * A flag that determines whether a card is in a hover state. Currently used for inline links in editor only.
+     */
     isHovered?: boolean;
     /**
      * When set to true, the text fragment will be removed from the title.
      * This will have no impact on the url and text highlighting will still persist in the url,
-     * however the the text fragment will be stripped from the title of the smart card.
+     * however the text fragment will be stripped from the title of the smart card.
      * For example, when set to true: "my name | :~:text=highlight this" will be displayed as "my name"
      */
     removeTextHighlightingFromTitle?: boolean;
@@ -80,27 +132,49 @@ export interface InlineProps extends HoverPreviewProps {
      * When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.
      */
     resolvingPlaceholder?: string;
-    /** When set to true, inline cards will be truncated to one line. */
+    /**
+     * When set to true, inline cards will be truncated to one line
+     */
     truncateInline?: boolean;
 }
 export interface BlockProps extends ActionProps {
     /**
-     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15021 Internal documentation for deprecation (no external access)}
      * When enabled the legacy block card is always used, even if the enableFlexibleBlockCard flag is set to true.
      * Usage is strongly discouraged. This should only be used if there is a specific reason you're
      * unable to use the new flexible block cards.
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15021 Internal documentation for deprecation (no external access)}
      */
     useLegacyBlockCard?: boolean;
 }
 export interface EmbedProps {
+    /**
+     * React referenced value on embed iframe.
+     */
     embedIframeRef?: React.Ref<HTMLIFrameElement>;
+    /**
+     * Type of URL used with embed iframe. By default, the embed use `data.preview.href` from link response.
+     * `interactiveHref` is suitable for displaying iframe content that contains "more editable" version of
+     * the link, e.g. includes toolbar.
+     * It is only available on supported link response with `data.preview.interactiveHref`.
+     */
     embedIframeUrlType?: EmbedIframeUrlType;
-    /** A prop that determines the style of a frame: whether to show it, hide it or only show it when a user hovers over embed */
+    /**
+     * A prop that determines the style of a frame:
+     * whether to show it, hide it or only show it when a user hovers over embed.
+     */
     frameStyle?: FrameStyle;
-    /** This props determines if dimensions of an embed card are to be inherited from the parent.
-     * The parent container needs to override a style '.loader-wrapper' and set the desirable height there. (for instance, 'height: 100%')
+    /**
+     * Determines whether width and height of an embed card are to be inherited from the parent.
+     * If `true`, embed iframe will remove restrictions on iframe aspect ratio, height and width.
+     * The parent container needs to override a style `.loader-wrapper` and set the desirable height there.
+     * (For instance, 'height: 100%')
      */
     inheritDimensions?: boolean;
+    /**
+     * Informs Smart Link of the device it is rendered in. Available values are `web` and `mobile`.
+     * It is used together with link response `data.preview["atlassian:supportedPlatforms"]`.
+     * To make embed content available on all supported urls, use `web`.
+     */
     platform?: CardPlatform;
 }
 export interface FlexibleProps extends ActionProps, HoverPreviewProps {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "29.0.2",
+	"version": "29.1.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,11 +32,11 @@
 		"@atlaskit/badge": "^16.4.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/checkbox": "^14.0.0",
-		"@atlaskit/dropdown-menu": "^12.18.0",
+		"@atlaskit/dropdown-menu": "^12.19.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.20.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/icon-file-type": "^6.5.0",
 		"@atlaskit/icon-object": "^6.5.0",
 		"@atlaskit/icon-priority": "^6.3.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/popup": "^1.28.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/section-message": "^6.6.0",
-		"@atlaskit/select": "^17.19.0",
+		"@atlaskit/select": "^18.0.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/textarea": "^5.6.0",
 		"@atlaskit/textfield": "^6.5.0",
@@ -89,6 +89,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/analytics-listeners": "^8.11.0",
 		"@atlaskit/css-reset": "^6.11.0",
+		"@atlaskit/link": "^1.2.1",
 		"@atlaskit/link-test-helpers": "^7.5.0",
 		"@atlaskit/media-test-helpers": "^34.4.0",
 		"@atlaskit/ssr": "*",