@atlaskit/smart-card 34.3.0 → 34.4.0

package/dist/es2019/utils/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import Loadable from 'react-loadable';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { themeObjectToString } from '@atlaskit/tokens';
+import { IconType } from '../constants';
+import extractFileFormatIcon from '../extractors/flexible/icon/extract-file-formatIcon';
 export const isSpecialEvent = evt => evt.isDefaultPrevented() && (isIframe() || isSpecialKey(evt) || isSpecialClick(evt));
 export const isIframe = () => window.parent !== parent;
 
@@ -20,7 +22,7 @@ export const getIconForFileType = fileMimeType => {
   if (!fileMimeType) {
     return;
   }
-  let icon = fg('platform-smart-card-icon-migration') ? getTypeToIconMap()[fileMimeType.toLowerCase()] : typeToIcon[fileMimeType.toLowerCase()];
+  let icon = fg('platform-smart-card-icon-migration') ? getTypeToIconMap(fileMimeType.toLowerCase()) : typeToIcon[fileMimeType.toLowerCase()];
   if (!icon) {
     return;
   }
@@ -39,7 +41,7 @@ export const getIconForFileType = fileMimeType => {
   });
 };
 export const getLabelForFileType = fileMimeType => {
-  let icon = fg('platform-smart-card-icon-migration') ? getTypeToIconMap()[fileMimeType.toLowerCase()] : typeToIcon[fileMimeType.toLowerCase()];
+  let icon = fg('platform-smart-card-icon-migration') ? getTypeToIconMap(fileMimeType.toLowerCase()) : typeToIcon[fileMimeType.toLowerCase()];
   if (!icon) {
     return;
   }
@@ -99,59 +101,71 @@ const typeToIcon = {
   'application/sketch': ['Sketch', () => import('@atlaskit/icon-file-type/glyph/sketch/16')],
   folder: ['Folder', () => import('@atlaskit/icon-file-type/glyph/folder/16')]
 };
-const getTypeToIconMap = () => ({
-  'text/plain': ['Document', () => import( /* webpackChunkName: "@atlaskit-internal_page-icon" */'../common/ui/icons/page-icon')],
-  'application/vnd.oasis.opendocument.text': ['Document', () => import( /* webpackChunkName: "@atlaskit-internal_page-icon" */'../common/ui/icons/page-icon')],
-  'application/vnd.apple.pages': ['Document', () => import( /* webpackChunkName: "@atlaskit-internal_page-icon" */'../common/ui/icons/page-icon')],
-  'application/vnd.google-apps.document': ['Google Doc', () => import('@atlaskit/icon-file-type/glyph/google-doc/16')],
-  'application/msword': ['Word document', () => import('@atlaskit/icon-file-type/glyph/word-document/16')],
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['Word document', () => import('@atlaskit/icon-file-type/glyph/word-document/16')],
-  'application/pdf': ['PDF document', () => import('@atlaskit/icon-file-type/glyph/pdf-document/16')],
-  'application/vnd.oasis.opendocument.spreadsheet': ['Spreadsheet', () => import( /* webpackChunkName: "@atlaskit-internal_list-bullet-icon" */'../common/ui/icons/list-bullet-icon')],
-  'application/vnd.apple.numbers': ['Spreadsheet', () => import( /* webpackChunkName: "@atlaskit-internal_list-bullet-icon" */'../common/ui/icons/list-bullet-icon')],
-  'application/vnd.google-apps.spreadsheet': ['Google Sheet', () => import('@atlaskit/icon-file-type/glyph/google-sheet/16')],
-  'application/vnd.ms-excel': ['Excel spreadsheet', () => import('@atlaskit/icon-file-type/glyph/excel-spreadsheet/16')],
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['Excel spreadsheet', () => import('@atlaskit/icon-file-type/glyph/excel-spreadsheet/16')],
-  'application/vnd.oasis.opendocument.presentation': ['Presentation', () => import( /* webpackChunkName: "@atlaskit-internal_chart-bar-icon" */'../common/ui/icons/chart-bar-icon')],
-  'application/vnd.apple.keynote': ['Presentation', () => import( /* webpackChunkName: "@atlaskit-internal_chart-bar-icon" */'../common/ui/icons/chart-bar-icon')],
-  'application/vnd.google-apps.presentation': ['Google Slide', () => import('@atlaskit/icon-file-type/glyph/google-slide/16')],
-  'application/vnd.ms-powerpoint': ['PowerPoint presentation', () => import('@atlaskit/icon-file-type/glyph/powerpoint-presentation/16')],
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['PowerPoint presentation', () => import('@atlaskit/icon-file-type/glyph/powerpoint-presentation/16')],
-  'application/vnd.google-apps.form': ['Google Form', () => import('@atlaskit/icon-file-type/glyph/google-form/16')],
-  'image/png': ['Image', () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon')],
-  'image/jpeg': ['Image', () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon')],
-  'image/bmp': ['Image', () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon')],
-  'image/webp': ['Image', () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon')],
-  'image/svg+xml': ['Image', () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon')],
-  'image/gif': ['GIF', () => import('@atlaskit/icon-file-type/glyph/gif/16')],
-  'audio/midi': ['Audio', () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon')],
-  'audio/mpeg': ['Audio', () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon')],
-  'audio/webm': ['Audio', () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon')],
-  'audio/ogg': ['Audio', () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon')],
-  'audio/wav': ['Audio', () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon')],
-  'video/mp4': ['Video', () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')],
-  'video/quicktime': ['Video', () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')],
-  'video/mov': ['Video', () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')],
-  'video/webm': ['Video', () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')],
-  'video/ogg': ['Video', () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')],
-  'video/x-ms-wmv': ['Video', () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')],
-  'video/x-msvideo': ['Video', () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon')],
-  'application/zip': ['Archive', () => import('@atlaskit/icon-file-type/glyph/archive/16')],
-  'application/x-tar': ['Archive', () => import('@atlaskit/icon-file-type/glyph/archive/16')],
-  'application/x-gtar': ['Archive', () => import('@atlaskit/icon-file-type/glyph/archive/16')],
-  'application/x-7z-compressed': ['Archive', () => import('@atlaskit/icon-file-type/glyph/archive/16')],
-  'application/x-apple-diskimage': ['Archive', () => import('@atlaskit/icon-file-type/glyph/archive/16')],
-  'application/vnd.rar': ['Archive', () => import('@atlaskit/icon-file-type/glyph/archive/16')],
-  'application/dmg': ['Executable', () => import('@atlaskit/icon-file-type/glyph/executable/16')],
-  'text/css': ['Source Code', () => import( /* webpackChunkName: "@atlaskit-internal_angle-brackets-icon" */'../common/ui/icons/angle-brackets-icon')],
-  'text/html': ['Source Code', () => import( /* webpackChunkName: "@atlaskit-internal_angle-brackets-icon" */'../common/ui/icons/angle-brackets-icon')],
-  'application/javascript': ['Source Code', () => import( /* webpackChunkName: "@atlaskit-internal_angle-brackets-icon" */'../common/ui/icons/angle-brackets-icon')],
-  'application/octet-stream': ['Binary file', () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon')],
-  'application/invision.prototype': ['Prototype', () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon')],
-  // TODO: Figure a way to detect those
-  'application/sketch': ['Sketch', () => import('@atlaskit/icon-file-type/glyph/sketch/16')],
-  folder: ['Folder', () => import( /* webpackChunkName: "@atlaskit-internal_folder-icon" */'../common/ui/icons/folder-icon')]
-});
+export const getLazyIcons = () => {
+  return {
+    [IconType.Document]: () => import( /* webpackChunkName: "@atlaskit-internal_page-icon" */'../common/ui/icons/page-icon'),
+    [IconType.Blog]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphBlock" */'@atlaskit/icon-object/glyph/blog/16'),
+    [IconType.Audio]: () => import( /* webpackChunkName: "@atlaskit-internal_audio-icon" */'../common/ui/icons/audio-icon'),
+    [IconType.Code]: () => import( /* webpackChunkName: "@atlaskit-internal_angle-brackets-icon" */'../common/ui/icons/angle-brackets-icon'),
+    [IconType.File]: () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon'),
+    [IconType.Folder]: () => import( /* webpackChunkName: "@atlaskit-internal_folder-icon" */'../common/ui/icons/folder-icon'),
+    [IconType.Generic]: () => import( /* webpackChunkName: "@atlaskit-internal_file-icon" */'../common/ui/icons/file-icon'),
+    [IconType.Image]: () => import( /* webpackChunkName: "@atlaskit-internal_image-icon" */'../common/ui/icons/image-icon'),
+    [IconType.Presentation]: () => import( /* webpackChunkName: "@atlaskit-internal_chart-bar-icon" */'../common/ui/icons/chart-bar-icon'),
+    [IconType.Spreadsheet]: () => import( /* webpackChunkName: "@atlaskit-internal_list-bullet-icon" */'../common/ui/icons/list-bullet-icon'),
+    [IconType.Video]: () => import( /* webpackChunkName: "@atlaskit-internal_video-icon" */'../common/ui/icons/video-icon'),
+    [IconType.Project]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphProject" */'@atlaskit/icon/core/migration/people-group'),
+    [IconType.Template]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphTemplate" */'@atlaskit/icon/core/migration/file--document-filled'),
+    [IconType.Forbidden]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphForbidden" */'@atlaskit/icon/core/migration/lock-locked--lock-filled'),
+    [IconType.Default]: () => import( /* webpackChunkName: "@atlaskit-internal_glyphDefault" */'@atlaskit/icon/core/migration/link'),
+    [IconType.Archive]: () => import( /* webpackChunkName: "glyphArchive" */'@atlaskit/icon-file-type/glyph/archive/16'),
+    [IconType.Executable]: () => import( /* webpackChunkName: "glyphExecutable" */'@atlaskit/icon-file-type/glyph/executable/16'),
+    [IconType.GIF]: () => import( /* webpackChunkName: "glyphGIF" */'@atlaskit/icon-file-type/glyph/gif/16'),
+    [IconType.GoogleDocs]: () => import( /* webpackChunkName: "glyphGoogleDocs" */'@atlaskit/icon-file-type/glyph/google-doc/16'),
+    [IconType.GoogleForms]: () => import( /* webpackChunkName: "glyphGoogleForms" */'@atlaskit/icon-file-type/glyph/google-form/16'),
+    [IconType.GoogleSheets]: () => import( /* webpackChunkName: "glyphGoogleSheets" */'@atlaskit/icon-file-type/glyph/google-sheet/16'),
+    [IconType.GoogleSlides]: () => import( /* webpackChunkName: "glyphGoogleSlides" */'@atlaskit/icon-file-type/glyph/google-slide/16'),
+    [IconType.MSExcel]: () => import( /* webpackChunkName: "glyphMSExcel" */'@atlaskit/icon-file-type/glyph/excel-spreadsheet/16'),
+    [IconType.MSPowerpoint]: () => import( /* webpackChunkName: "glyphMSPowerpoint" */'@atlaskit/icon-file-type/glyph/powerpoint-presentation/16'),
+    [IconType.MSWord]: () => import( /* webpackChunkName: "glyphMSWord" */'@atlaskit/icon-file-type/glyph/word-document/16'),
+    [IconType.PDF]: () => import( /* webpackChunkName: "glyphPDF" */'@atlaskit/icon-file-type/glyph/pdf-document/16'),
+    [IconType.Sketch]: () => import( /* webpackChunkName: "glyphSketch" */'@atlaskit/icon-file-type/glyph/sketch/16'),
+    // Bitbucket icons
+    [IconType.Branch]: () => import( /* webpackChunkName: "glyphBranch" */'@atlaskit/icon-object/glyph/branch/16'),
+    [IconType.Commit]: () => import( /* webpackChunkName: "glyphCommit" */'@atlaskit/icon-object/glyph/commit/16'),
+    [IconType.PullRequest]: () => import( /* webpackChunkName: "glyphPullRequest" */'@atlaskit/icon-object/glyph/pull-request/16'),
+    [IconType.Repo]: () => import( /* webpackChunkName: "glyphRepo" */'@atlaskit/icon-object/glyph/code/16'),
+    // Jira icons
+    [IconType.Bug]: () => import( /* webpackChunkName: "glyphBug" */'@atlaskit/icon-object/glyph/bug/16'),
+    [IconType.Change]: () => import( /* webpackChunkName: "glyphChange" */'@atlaskit/icon-object/glyph/changes/16'),
+    [IconType.Epic]: () => import( /* webpackChunkName: "glyphEpic" */'@atlaskit/icon-object/glyph/epic/16'),
+    [IconType.Incident]: () => import( /* webpackChunkName: "glyphIncident" */'@atlaskit/icon-object/glyph/incident/16'),
+    [IconType.Problem]: () => import( /* webpackChunkName: "glyphProblem" */'@atlaskit/icon-object/glyph/problem/16'),
+    [IconType.ServiceRequest]: () => import( /* webpackChunkName: "glyphServiceRequest" */'@atlaskit/icon-object/glyph/issue/16'),
+    [IconType.Story]: () => import( /* webpackChunkName: "glyphStory" */'@atlaskit/icon-object/glyph/story/16'),
+    [IconType.SubTask]: () => import( /* webpackChunkName: "glyphSubTask" */'@atlaskit/icon-object/glyph/subtask/16'),
+    [IconType.Task]: () => import( /* webpackChunkName: "glyphTask" */'@atlaskit/icon-object/glyph/task/16'),
+    // Provider icons
+    [IconType.Confluence]: () => import( /* webpackChunkName: "glyphConfluence" */'@atlaskit/logo/confluence-icon').then(({
+      ConfluenceIcon
+    }) => ({
+      default: ConfluenceIcon
+    })),
+    [IconType.Jira]: () => import( /* webpackChunkName: "glyphJira" */'@atlaskit/logo/jira-icon').then(({
+      JiraIcon
+    }) => ({
+      default: JiraIcon
+    }))
+  };
+};
+const getTypeToIconMap = fileFormat => {
+  const iconDescriptor = extractFileFormatIcon(fileFormat);
+  if (!(iconDescriptor !== null && iconDescriptor !== void 0 && iconDescriptor.icon) || !iconDescriptor.label) {
+    return null;
+  }
+  const lazyIcons = getLazyIcons();
+  return [iconDescriptor.label, lazyIcons[iconDescriptor.icon]];
+};
 export const getIframeSandboxAttribute = isTrusted => {
   if (isTrusted) {
     return undefined;

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/ElementGroupOld.js

@@ -0,0 +1,113 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
+import { getMaxLineHeight, getTruncateStyles } from '../../utils';
+import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+const getAlignmentStyles = align => {
+  switch (align) {
+    case SmartLinkAlignment.Right:
+      return css({
+        WebkitBoxAlign: 'end',
+        MsFlexAlign: 'end',
+        justifyContent: 'flex-end',
+        textAlign: 'right'
+      });
+    case SmartLinkAlignment.Left:
+    default:
+      return css({
+        WebkitBoxAlign: 'start',
+        MsFlexAlign: 'start',
+        justifyContent: 'flex-start',
+        textAlign: 'left'
+      });
+  }
+};
+const getGapStyles = (size, align) => {
+  const gap = getGapSize(size);
+  if (align === SmartLinkAlignment.Right) {
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '> span': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        marginLeft: `${gap}rem`
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '> span:first-child': {
+        marginLeft: 'initial'
+      }
+    });
+  }
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '> span': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      marginRight: `${gap}rem`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '&:last-child': {
+        marginRight: 'initial'
+      }
+    }
+  });
+};
+const getHorizontalDirectionStyles = (size, align) => {
+  const lineHeight = getMaxLineHeight(size);
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  return css`
+		display: block;
+		vertical-align: middle;
+		${getTruncateStyles(1, lineHeight + 'rem')}
+
+		> span, > div {
+			vertical-align: middle;
+
+			&[data-smart-element-date-time],
+			&[data-smart-element-text] {
+				// Show all/wrapped/truncated
+				display: inline;
+			}
+		}
+
+		${getGapStyles(size, align)}
+	`;
+};
+export const getElementGroupStyles = (direction, size, align, width, position) => css(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+getBaseStyles(direction, size),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+getAlignmentStyles(align), {
+  minWidth: '10%'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+width === SmartLinkWidth.Flexible ? `flex: 1 3;` : '',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
+
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @internal
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
+const ElementGroup = ({
+  align = SmartLinkAlignment.Left,
+  children,
+  overrideCss,
+  direction = SmartLinkDirection.Horizontal,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-element-group',
+  width = SmartLinkWidth.FitToContent,
+  position = SmartLinkPosition.Center
+}) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
+  "data-smart-element-group": true,
+  "data-testid": testId
+}, renderChildren(children, size));
+export default ElementGroup;

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.compiled.css

@@ -0,0 +1,46 @@
+
+._zulp147b{gap:var(--ds-space-250,1.25rem)}
+._zulp1e9d{gap:var(--ds-space-200,1rem)}
+._zulpcxkx{gap:var(--ds-space-100,.5rem)}
+._zulppdf9{gap:var(--ds-space-050,.25rem)}._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1aaynkob >div, ._15tynkob >span{vertical-align:middle}
+._1bah1y6m{justify-content:flex-start}
+._1bahesu3{justify-content:flex-end}
+._1bto1l2s{text-overflow:ellipsis}
+._1dthh9n0{-webkit-box-align:end}
+._1dthv2br{-webkit-box-align:start}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1iu61nu9 >div[data-smart-element-date-time], ._166k1nu9 >div[data-smart-element-text], ._1div1nu9 >span[data-smart-element-date-time], ._bmfb1nu9 >span[data-smart-element-text]{display:inline}
+._1nmz1hna{word-break:break-word}
+._1o9z11wp{flex-shrink:3}
+._1ouwidpf>*{min-width:0}
+._1reo15vq{overflow-x:hidden}
+._1ul99by0{min-width:10%}
+._1ul9idpf{min-width:0}
+._1wpz1y6m{align-self:flex-start}
+._1yyjkb7n{-webkit-line-clamp:1}
+._24rc147b >span{margin-left:var(--ds-space-250,1.25rem)}
+._24rc1e9d >span{margin-left:var(--ds-space-200,1rem)}
+._24rccxkx >span{margin-left:var(--ds-space-100,.5rem)}
+._24rcpdf9 >span{margin-left:var(--ds-space-050,.25rem)}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._3dveidpf >span:first-of-type{margin-left:0}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._7yhb147b >span{margin-right:var(--ds-space-250,1.25rem)}
+._7yhb1e9d >span{margin-right:var(--ds-space-200,1rem)}
+._7yhbcxkx >span{margin-right:var(--ds-space-100,.5rem)}
+._7yhbpdf9 >span{margin-right:var(--ds-space-050,.25rem)}
+._f6ju1ns9>[data-fit-to-content]{min-width:-moz-fit-content;min-width:fit-content}
+._fiawglyw:empty{display:none}
+._i0dlf1ug{flex-basis:0%}
+._m6ukidpf >span:last-child{margin-right:0}
+._r291h9n0{-ms-flex-align:end}
+._r291v2br{-ms-flex-align:start}
+._s7n4nkob{vertical-align:middle}
+._sudp1e54{-webkit-box-orient:vertical}
+._y3gn1e5h{text-align:left}
+._y3gnusic{text-align:right}

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

@@ -1,92 +1,52 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
-import { getMaxLineHeight, getTruncateStyles } from '../../utils';
-import { getBaseStyles, getGapSize, renderChildren } from '../utils';
-const getAlignmentStyles = align => {
-  switch (align) {
-    case SmartLinkAlignment.Right:
-      return css({
-        WebkitBoxAlign: 'end',
-        MsFlexAlign: 'end',
-        justifyContent: 'flex-end',
-        textAlign: 'right'
-      });
-    case SmartLinkAlignment.Left:
-    default:
-      return css({
-        WebkitBoxAlign: 'start',
-        MsFlexAlign: 'start',
-        justifyContent: 'flex-start',
-        textAlign: 'left'
-      });
-  }
+import { renderChildren } from '../utils';
+import ElementGroupOld from './ElementGroupOld';
+const alignmentStyleMap = {
+  right: "_1dthh9n0 _r291h9n0 _1bahesu3 _y3gnusic",
+  left: "_1dthv2br _r291v2br _1bah1y6m _y3gn1e5h"
 };
-const getGapStyles = (size, align) => {
-  const gap = getGapSize(size);
-  if (align === SmartLinkAlignment.Right) {
-    return css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '> span': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        marginLeft: `${gap}rem`
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '> span:first-child': {
-        marginLeft: 'initial'
-      }
-    });
-  }
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      marginRight: `${gap}rem`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-      '&:last-child': {
-        marginRight: 'initial'
-      }
-    }
-  });
+const baseStyleBySize = {
+  xlarge: "_zulp147b _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  large: "_zulp1e9d _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  medium: "_zulpcxkx _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
+  small: "_zulppdf9 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf"
 };
-const getHorizontalDirectionStyles = (size, align) => {
-  const lineHeight = getMaxLineHeight(size);
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  return css`
-		display: block;
-		vertical-align: middle;
-		${getTruncateStyles(1, lineHeight + 'rem')}
-
-		> span, > div {
-			vertical-align: middle;
-
-			&[data-smart-element-date-time],
-			&[data-smart-element-text] {
-				// Show all/wrapped/truncated
-				display: inline;
-			}
-		}
-
-		${getGapStyles(size, align)}
-	`;
+const baseStyleByDirection = {
+  horizontal: "_2lx2vrvc _4cvr1h6o",
+  vertical: "_2lx21bp4 _4cvr1y6m"
+};
+const baseStyle = null;
+const widthStyle = {
+  flexible: "_16jlkb7n _1o9z11wp _i0dlf1ug",
+  'fit-to-content': ""
+};
+const positionStyle = {
+  top: "_1wpz1y6m",
+  center: ""
+};
+const horizontalStyleBase = null;
+const horizontalStyleByHeight = {
+  'xlarge': "_1e0ccj1k _102k1m1q",
+  'large': "_1e0ccj1k _102k1m1q",
+  'medium': "_1e0ccj1k _102k1k8s",
+  'small': "_1e0ccj1k _102k1k8s"
+};
+const gapStylesLeft = {
+  'xlarge': "_7yhb147b _m6ukidpf",
+  'large': "_7yhb1e9d _m6ukidpf",
+  'medium': "_7yhbcxkx _m6ukidpf",
+  'small': "_7yhbpdf9 _m6ukidpf"
+};
+const gapStylesRight = {
+  'xlarge': "_24rc147b _3dveidpf",
+  'large': "_24rc1e9d _3dveidpf",
+  'medium': "_24rccxkx _3dveidpf",
+  'small': "_24rcpdf9 _3dveidpf"
 };
-export const getElementGroupStyles = (direction, size, align, width, position) => css(
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-getBaseStyles(direction, size),
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-getAlignmentStyles(align), {
-  minWidth: '10%'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-width === SmartLinkWidth.Flexible ? `flex: 1 3;` : '',
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '',
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
@@ -95,19 +55,24 @@ position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-const ElementGroup = ({
+const ElementGroupNew = ({
   align = SmartLinkAlignment.Left,
   children,
-  overrideCss,
   direction = SmartLinkDirection.Horizontal,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-group',
   width = SmartLinkWidth.FitToContent,
-  position = SmartLinkPosition.Center
-}) => jsx("div", {
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-  css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
-  "data-smart-element-group": true,
-  "data-testid": testId
-}, renderChildren(children, size));
-export default ElementGroup;
+  position = SmartLinkPosition.Center,
+  className
+}) => {
+  const totalCss = [baseStyleBySize[size], baseStyleByDirection[direction], baseStyle, alignmentStyleMap[align], null, widthStyle[width], direction === SmartLinkDirection.Horizontal ? horizontalStyleBase : {}, direction === SmartLinkDirection.Horizontal ? horizontalStyleByHeight[size] : {}, direction === SmartLinkDirection.Horizontal ? SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size] : {}, positionStyle[position]];
+  return /*#__PURE__*/React.createElement("div", {
+    "data-smart-element-group": true,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax([baseStyleBySize[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], direction === SmartLinkDirection.Horizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", direction === SmartLinkDirection.Horizontal && "", SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size], positionStyle[position], className])
+  }, renderChildren(children, size));
+};
+export default ElementGroupOld;
+export { ElementGroupNew };

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/TitleBlockOld.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css } from '@emotion/react';
+import { SmartLinkStatus } from '../../../../../constants';
+import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
+import { Title } from '../../elements';
+import ActionGroup from '../action-group';
+import TitleBlockErroredView from './errored';
+import TitleBlockResolvedView from './resolved';
+import TitleBlockResolvingView from './resolving';
+const getActionStyles = (showOnHover, isOpen) => {
+  if (showOnHover && !isOpen) {
+    return css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '.actions-button-group': {
+        opacity: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      '&:hover .actions-button-group, .actions-button-group:focus-within': {
+        opacity: 1
+      }
+    });
+  }
+};
+const getTitleBlockViewComponent = status => {
+  switch (status) {
+    case SmartLinkStatus.Pending:
+    case SmartLinkStatus.Resolving:
+      return TitleBlockResolvingView;
+    case SmartLinkStatus.Resolved:
+      return TitleBlockResolvedView;
+    case SmartLinkStatus.Unauthorized:
+    case SmartLinkStatus.Forbidden:
+    case SmartLinkStatus.NotFound:
+    case SmartLinkStatus.Errored:
+    case SmartLinkStatus.Fallback:
+    default:
+      return TitleBlockErroredView;
+  }
+};
+
+/**
+ * Represents a TitleBlock, which is the foundation of Flexible UI.
+ * This contains an icon, the link, and any associated metadata and actions in one block.
+ * The TitleBlock will also render differently given the state of the smart link.
+ * This can be found in the corresponding Resolving, Resolved and Errored views.
+ * @public
+ * @param {TitleBlockProps} TitleBlockProps
+ * @see Block
+ * @see TitleBlockResolvingView
+ * @see TitleBlockResolvedView
+ * @see TitleBlockErroredView
+ */
+const TitleBlock = ({
+  actions = [],
+  anchorTarget,
+  hideTitleTooltip,
+  maxLines,
+  onActionMenuOpenChange,
+  onClick,
+  overrideCss,
+  status = SmartLinkStatus.Fallback,
+  showActionOnHover,
+  testId = 'smart-block-title',
+  text,
+  icon,
+  theme,
+  hideRetry,
+  metadataPosition,
+  hideIcon = false,
+  ...props
+}) => {
+  if (hideRetry && props.retry) {
+    delete props.retry;
+  }
+  const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    setActionDropdownOpen(isOpen);
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  const actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
+    items: actions,
+    visibleButtonsNum: showActionOnHover ? 1 : 2,
+    onDropdownOpenChange: onDropdownOpenChange
+  });
+  const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  const combinedCss = css(actionStyles, overrideCss);
+  const overrideText = !!text ? {
+    text
+  } : {};
+  const onMouseDown = useMouseDownEvent();
+  const title = /*#__PURE__*/React.createElement(Title, _extends({
+    hideTooltip: hideTitleTooltip,
+    maxLines: maxLines,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: anchorTarget,
+    theme: theme
+  }, overrideText));
+  const Component = getTitleBlockViewComponent(status);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    actionGroup: actionGroup,
+    overrideCss: combinedCss,
+    testId: testId,
+    title: title,
+    metadataPosition: metadataPosition,
+    hideIcon: hideIcon,
+    icon: icon
+  }));
+};
+export default TitleBlock;