@atlaskit/smart-card 38.3.0 → 38.4.2

package/dist/es2019/view/FlexibleCard/components/elements/{applied-to-components-count → applied-to-components-count-element}/index.js

@@ -1,15 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
-import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
-import Badge from '../badge';
-const AppliedToComponentsCount = props => {
+import { FlexibleUiContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseBadgeElement } from '../common';
+const AppliedToComponentsCountElement = props => {
   const {
     formatMessage
   } = useIntl();
-  const context = useContext(FlexibleUiContext);
+  const context = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiContext() :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useContext(FlexibleUiContext);
   if (
   // Check for null and undefined, render if it's 0.
   (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === null || (context === null || context === void 0 ? void 0 : context.appliedToComponentsCount) === undefined) {
@@ -18,9 +23,9 @@ const AppliedToComponentsCount = props => {
   const label = formatMessage(messages.compass_applied_components_count, {
     numberOfComponents: context.appliedToComponentsCount
   });
-  return /*#__PURE__*/React.createElement(Badge, _extends({
+  return /*#__PURE__*/React.createElement(BaseBadgeElement, _extends({
     icon: IconType.Component,
     label: label
   }, props));
 };
-export default AppliedToComponentsCount;
+export default AppliedToComponentsCountElement;

package/dist/es2019/view/FlexibleCard/components/elements/{atlaskit-badge → atlaskit-badge-element}/index.js

@@ -14,7 +14,7 @@ const badgeStyles = null;
  * @see StoryPoints
  * */
 
-const AtlaskitBadge = ({
+const AtlaskitElementBadge = ({
   value,
   name,
   className,
@@ -34,4 +34,4 @@ const AtlaskitBadge = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y", fg('platform-linking-visual-refresh-v1') && "_4cvr1h6o _1e0c116y _1ul91ns9", className])
   }), /*#__PURE__*/React.createElement(AKBadge, null, value));
 };
-export default AtlaskitBadge;
+export default AtlaskitElementBadge;

package/dist/es2019/view/FlexibleCard/components/elements/{avatar-group → common/base-avatar-group-element}/index.js

@@ -7,10 +7,9 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { ElementName, SmartLinkSize } from '../../../../../constants';
-import { messages } from '../../../../../messages';
-import { getFormattedMessageAsString } from '../../utils';
-const MAX_COUNT = 4;
+import { ElementName, SmartLinkSize } from '../../../../../../constants';
+import { messages } from '../../../../../../messages';
+import { getFormattedMessageAsString } from '../../../utils';
 const styles = null;
 const stylesMap = {
   xlarge: "_1e0c116y _1kvxu2gc _102oidpf",
@@ -30,17 +29,16 @@ const getPersonNameWithPrefix = (elementName, personName, intl) => {
       return personName;
   }
 };
-
 /**
  * A base element that displays a group of avatars.
  * @internal
- * @param {AvatarGroupProps} AvatarGroupProps - The props necessary for the AvatarGroup.
+ * @param {BaseAvatarGroupElementProps} BaseAvatarGroupElementProps - The props necessary for the AvatarGroup.
  * @see AuthorGroup
  * @see CollaboratorGroup
  */
-const AvatarGroup = ({
+const BaseAvatarGroup = ({
   items = [],
-  maxCount = MAX_COUNT,
+  maxCount = 4,
   name,
   className,
   size = SmartLinkSize.Medium,
@@ -92,4 +90,4 @@ const AvatarGroup = ({
     testId: testId
   }));
 };
-export default AvatarGroup;
+export default BaseAvatarGroup;

package/dist/es2019/view/FlexibleCard/components/elements/{badge → common/base-badge-element}/index.js

@@ -5,14 +5,15 @@ import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
 import React, { forwardRef } from 'react';
+import { withFeatureFlaggedComponent } from '@atlaskit/linking-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
-import { IconType } from '../../../../../constants';
-import { messages } from '../../../../../messages';
-import AtlaskitIcon from '../../common/atlaskit-icon';
-import ImageIcon from '../../common/image-icon';
-import { withOverrideCss } from '../../common/with-override-css';
-import { getFormattedMessage } from '../../utils';
+import { IconType } from '../../../../../../constants';
+import { messages } from '../../../../../../messages';
+import AtlaskitIcon from '../../../common/atlaskit-icon';
+import ImageIcon from '../../../common/image-icon';
+import { withOverrideCss } from '../../../common/with-override-css';
+import { getFormattedMessage } from '../../../utils';
 const styles = {
   container: "_zulp1b66 _1e0c116y _4cvr1h6o _1ul91ns9",
   icon: "_1e0c116y _v4pn116y _1b94116y _1ii7116y _4t3i7vkz _bna77vkz _1xjx7vkz _17527vkz _ca0qze3t _14bqze3t _1oh2ze3t _i2i3ze3t _u5f3ze3t _3tceze3t _99ztze3t _uhasze3t _n3tdze3t _1ym6ze3t _1m2uze3t _5jw9ze3t _19bvze3t _1xr1ze3t _9n9oze3t _7wy9ze3t _1bsb7vkz _mezj7vkz _e2oo7vkz _w8l57vkz _s7n4nkob _rtqbnkob _e4kmnkob _z239nkob",
@@ -67,11 +68,10 @@ const renderImageIcon = (url, testId) => {
     });
   }
 };
-
 /**
  * A base element that displays some text with an associated icon.
  * @internal
- * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @param {BaseBadgeElementProps} BaseBadgeElementProps - The props necessary for the Badge.
  * @see CommentCount
  * @see ViewCount
  * @see ReactCount
@@ -81,7 +81,7 @@ const renderImageIcon = (url, testId) => {
  * @see ProgrammingLanguage
  * @see Provider
  */
-const BadgeRefreshNew = /*#__PURE__*/forwardRef(({
+const BaseBadgeRefreshNew = /*#__PURE__*/forwardRef(({
   appearance = 'default',
   hideIcon = false,
   icon,
@@ -116,8 +116,8 @@ const BadgeRefreshNew = /*#__PURE__*/forwardRef(({
 });
 
 // On cleanup of platform-linking-visual-refresh-v1, this should become
-// export default withOverrideCss(Badge);
-const BadgeRefreshNewWithOverrideCss = withOverrideCss(BadgeRefreshNew);
+// export default withOverrideCss(BaseBadgeElement);
+const BaseBadgeElementRefreshNewWithOverrideCss = withOverrideCss(BaseBadgeRefreshNew);
 
 /**
  * A base element that displays some text with an associated icon.
@@ -132,7 +132,7 @@ const BadgeRefreshNewWithOverrideCss = withOverrideCss(BadgeRefreshNew);
  * @see ProgrammingLanguage
  * @see Provider
  */
-const BadgeCompiledNew = ({
+const BaseBadgeElementCompiledNew = ({
   hideIcon = false,
   icon,
   label,
@@ -162,11 +162,4 @@ const BadgeCompiledNew = ({
     className: ax(["_11c8dcr7 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
-const Badge = props => {
-  if (fg('platform-linking-visual-refresh-v1')) {
-    return /*#__PURE__*/React.createElement(BadgeRefreshNewWithOverrideCss, props);
-  } else {
-    return /*#__PURE__*/React.createElement(BadgeCompiledNew, props);
-  }
-};
-export default Badge;
+export default withFeatureFlaggedComponent(BaseBadgeElementCompiledNew, BaseBadgeElementRefreshNewWithOverrideCss, () => fg('platform-linking-visual-refresh-v1'));

package/dist/es2019/view/FlexibleCard/components/elements/{date-time → common/base-date-time-element}/index.js

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { selectUnit } from '@formatjs/intl-utils';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { messages } from '../../../../../messages';
+import { messages } from '../../../../../../messages';
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 const stylesOld = null;
 const styles = null;
@@ -24,16 +24,15 @@ const typeToDescriptorMap = {
     absolute: messages.sent_on_absolute
   }
 };
-
 /**
  * A base element that displays an ISO Timestamp in text.
  * @internal
- * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
+ * @param {BaseDateTimeProps} BaseDateTimeProps - The props necessary for the DateTime element.
  * @see CreatedOn
  * @see ModifiedOn
  * @see SentOn
  */
-const DateTime = ({
+const BaseDateTimeElement = ({
   date,
   name,
   className,
@@ -95,4 +94,4 @@ const DateTime = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_11c8dcr7 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", fg('platform-linking-visual-refresh-v1') && "_11c81o8v _1reo15vq _18m915vq _syaz1gjq _1e0ccj1k _1ul9idpf _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k7vkz", className])
   }, content);
 };
-export default DateTime;
+export default BaseDateTimeElement;

package/dist/es2019/view/FlexibleCard/components/elements/{link → common/base-link-element}/index.js

@@ -7,9 +7,9 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import React, { useMemo } from 'react';
 import Tooltip from '@atlaskit/tooltip';
-import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
-import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
-import { hasWhiteSpace } from '../../utils';
+import { SmartLinkSize, SmartLinkTheme } from '../../../../../../constants';
+import { useMouseDownEvent } from '../../../../../../state/analytics/useLinkClicked';
+import { hasWhiteSpace } from '../../../utils';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
@@ -61,14 +61,13 @@ const themeStyleMap = {
   black: "_syaz1gjq _9oik1r31 _1bnx8stv _jf4cnqa1 _30l31gjq _9h8h1fxt",
   link: "_syaz14q2 _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
 };
-
 /**
  * A base element that represent an anchor.
  * @internal
- * @param {LinkProps} LinkProps - The props necessary for the Link element.
+ * @param {BaseLinkElementProps} BaseLinkElementProps - The props necessary for the Link element.
  * @see LinkIcon
  */
-const Link = ({
+const BaseLinkElement = ({
   hideTooltip,
   maxLines = DEFAULT_MAX_LINES,
   name,
@@ -79,7 +78,8 @@ const Link = ({
   theme = SmartLinkTheme.Link,
   url,
   onClick,
-  target = '_blank'
+  target = '_blank',
+  anchorRef
 }) => {
   const onMouseDown = useMouseDownEvent();
   const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
@@ -97,9 +97,11 @@ const Link = ({
     // click issues in Confluence and Trello which rely on it not being set unless necessary.
   }, target !== '_self' && {
     target
+  }, {
+    ref: anchorRef
   }), text);
   return /*#__PURE__*/React.createElement("span", {
     className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug"])
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
-export default Link;
+export default BaseLinkElement;

package/dist/es2019/view/FlexibleCard/components/elements/{lozenge → common/base-lozenge-element}/index.js

@@ -5,18 +5,17 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleUiOptionContext } from '../../../../../../state/flexible-ui-context';
 import LozengeAction from './lozenge-action';
 const stylesOld = null;
 const styles = null;
-
 /**
  * A base element that displays a Lozenge.
  * @internal
- * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @param {BaseLozengeElementProps} BaseLozengeElementProps - The props necessary for the Lozenge element.
  * @see State
  */
-const Lozenge = ({
+const BaseLozengeElement = ({
   action,
   appearance = 'default',
   name,
@@ -55,4 +54,4 @@ const Lozenge = ({
     className: ax([!fg('platform-linking-visual-refresh-v1') && "_1e0c116y _vwz41kw7", fg('platform-linking-visual-refresh-v1') && "_1e0c116y _1ul91ns9", className])
   }), lozenge);
 };
-export default Lozenge;
+export default BaseLozengeElement;

package/dist/es2019/view/FlexibleCard/components/elements/{lozenge → common/base-lozenge-element}/lozenge-action/index.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
-import extractLozengeActionItems from '../../../../../../extractors/action/extract-lozenge-action-items';
-import useInvoke from '../../../../../../state/hooks/use-invoke';
-import { isInvokeCustomError } from '../../../../../../state/hooks/use-invoke/utils';
-import useResolve from '../../../../../../state/hooks/use-resolve';
-import createStatusUpdateRequest from '../../../../../../utils/actions/create-status-update-request';
-import { TrackQuickActionType } from '../../../../../../utils/analytics/analytics';
+import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
+import extractLozengeActionItems from '../../../../../../../extractors/action/extract-lozenge-action-items';
+import useInvoke from '../../../../../../../state/hooks/use-invoke';
+import { isInvokeCustomError } from '../../../../../../../state/hooks/use-invoke/utils';
+import useResolve from '../../../../../../../state/hooks/use-resolve';
+import createStatusUpdateRequest from '../../../../../../../utils/actions/create-status-update-request';
+import { TrackQuickActionType } from '../../../../../../../utils/analytics/analytics';
 import withErrorBoundary from './error-boundary';
 import { permissionLoadErrorAnalyticsPayload, unknownLoadErrorAnalyticsPayload, unknownUpdateErrorAnalyticsPayload, validationUpdateErrorAnalyticsPayload } from './lozenge-action-analytics';
 import LozengeActionError from './lozenge-action-error';

package/dist/es2019/view/FlexibleCard/components/elements/{lozenge → common/base-lozenge-element}/lozenge-action/lozenge-action-error/index.js

@@ -8,10 +8,10 @@ import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N800, R50, R500 } from '@atlaskit/theme/colors';
-import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
-import { messages } from '../../../../../../../messages';
-import useInvokeClientAction from '../../../../../../../state/hooks/use-invoke-client-action';
-import { getFormattedMessage } from '../../../../utils';
+import { useAnalyticsEvents } from '../../../../../../../../common/analytics/generated/use-analytics-events';
+import { messages } from '../../../../../../../../messages';
+import useInvokeClientAction from '../../../../../../../../state/hooks/use-invoke-client-action';
+import { getFormattedMessage } from '../../../../../utils';
 const MAX_LINE_NUMBER = 8;
 const contentStyles = null;
 const linkStyles = null;

package/dist/es2019/view/FlexibleCard/components/elements/{lozenge → common/base-lozenge-element}/lozenge-action/lozenge-action-error/types.js

@@ -1,4 +1,4 @@
-import { messages } from '../../../../../../../messages';
+import { messages } from '../../../../../../../../messages';
 export const LozengeActionErrorMessages = {
   noData: {
     descriptor: messages['status_change_permission_error']

package/dist/es2019/view/FlexibleCard/components/elements/{text → common/base-text-element}/index.js

@@ -3,18 +3,17 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getFormattedMessage } from '../../utils';
+import { getFormattedMessage } from '../../../utils';
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
 const baseStyleOld = null;
 const baseStyle = null;
-
 /**
  * A base element that displays some Text.
  * @internal
  * @param {TextProps} TextProps - The props necessary for the Text element.
  * @see Title
  */
-const Text = ({
+export const BaseTextElement = ({
   content,
   maxLines = 1,
   message,
@@ -44,4 +43,4 @@ const Text = ({
     }
   }, fg('platform-linking-additional-flexible-element-props') ? newContent : oldContent);
 };
-export default Text;
+export default BaseTextElement;

package/dist/es2019/view/FlexibleCard/components/elements/common/index.js

@@ -0,0 +1,6 @@
+export { default as BaseBadgeElement } from './base-badge-element';
+export { default as BaseTextElement } from './base-text-element';
+export { default as BaseAvatarGroupElement } from './base-avatar-group-element';
+export { default as BaseDateTimeElement } from './base-date-time-element';
+export { default as BaseLozengeElement } from './base-lozenge-element';
+export { default as BaseLinkElement } from './base-link-element';

package/dist/es2019/view/FlexibleCard/components/elements/{icon → icon-element}/index.js

@@ -64,10 +64,10 @@ const renderImageIcon = (defaultIcon, url, testId, size = SmartLinkSize.Medium,
 /**
  * A base element that displays an Icon or favicon.
  * @internal
- * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @param props - The props necessary for the Icon element.
  * @see LinkIcon
  */
-const Icon = ({
+const IconElement = ({
   icon,
   overrideIcon,
   label = 'Link',
@@ -102,4 +102,4 @@ const Icon = ({
     }
   }, element));
 };
-export default Icon;
+export default IconElement;

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

@@ -1,6 +1,5 @@
 import { ElementName } from '../../../../constants';
 import { createElement } from './utils';
-
 // Attention: Keep the export name and element name the same.
 // This will help reducing the code for mapping elements inside
 // createElement and renderElementItems
@@ -93,7 +92,7 @@ export const OwnedByGroup = createElement(ElementName.OwnedByGroup);
  * Creates a Preview element using the data from Preview in the Flexible UI Context.
  * @see Preview
  */
-export { default as Preview } from './preview';
+export { default as Preview } from './preview-element';
 /**
  * Creates a Priority Badge element using the data from Priority in the Flexible UI Context.
  * @see Badge
@@ -174,4 +173,4 @@ export const ViewCount = createElement(ElementName.ViewCount);
  * @see Badge
  */
 export const VoteCount = createElement(ElementName.VoteCount);
-export { default as AppliedToComponentsCount } from './applied-to-components-count';
+export { default as AppliedToComponentsCount } from './applied-to-components-count-element';

package/dist/es2019/view/FlexibleCard/components/elements/{media → media-element}/index.js

@@ -14,14 +14,12 @@ import ImageIcon from '../../common/image-icon';
  * contents within the element's box.
  */
 const styles = null;
-
 /**
  * A base element that displays a Media.
  * @internal
- * @param {MediaProps} MediaProps - The props necessary for the Media element.
- * @see Preview
+ * @param props - The props necessary for the Media element.
  */
-const Media = ({
+const MediaElement = ({
   name,
   className,
   testId = 'smart-element-media',
@@ -48,4 +46,4 @@ const Media = ({
     defaultIcon: null
   }));
 };
-export default Media;
+export default MediaElement;

package/dist/es2019/view/FlexibleCard/components/elements/preview-element/index.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { MediaType } from '../../../../../constants';
+import { FlexibleUiContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import MediaElement from '../media-element';
+const PreviewElement = props => {
+  const {
+    overrideUrl,
+    ...rest
+  } = props !== null && props !== void 0 ? props : {};
+  const context = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiContext() :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useContext(FlexibleUiContext);
+  const data = overrideUrl ? {
+    url: overrideUrl,
+    type: MediaType.Image
+  } : context === null || context === void 0 ? void 0 : context.preview;
+  if (!data) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaElement, _extends({}, rest, data));
+};
+export default PreviewElement;

package/dist/es2019/view/FlexibleCard/components/elements/snippet-element/index.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { FlexibleUiContext } from '../../../../../state/flexible-ui-context';
-import Text from '../text';
+import { FlexibleUiContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { BaseTextElement } from '../common';
 const SNIPPET_DEFAULT_MAX_LINES = 3;
 
 // TODO: Remove on fg cleanup: platform-linking-visual-refresh-v1
@@ -19,8 +19,12 @@ const SnippetElement = props => {
     className,
     ...restOfProps
   } = props !== null && props !== void 0 ? props : {};
-  const context = useContext(FlexibleUiContext);
-  return /*#__PURE__*/React.createElement(Text, _extends({
+  const context = fg('platform-linking-flexible-card-context') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFlexibleUiContext() :
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useContext(FlexibleUiContext);
+  return /*#__PURE__*/React.createElement(BaseTextElement, _extends({
     content: overrideContent !== null && overrideContent !== void 0 ? overrideContent : context === null || context === void 0 ? void 0 : context.snippet,
     maxLines: maxLines,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop