@atlaskit/smart-card 23.3.0 → 23.4.0

package/dist/es2019/extractors/flexible/actions/extract-preview-action.js

@@ -0,0 +1,23 @@
+import { extractDownloadUrl } from '../../common/detail';
+import { extractPreview as extractPreviewData } from '@atlaskit/linking-common';
+import { extractLink, extractProvider, extractTitle } from '@atlaskit/linking-common/extractors';
+import { extractLinkIcon } from '../icon';
+export const extractPreviewAction = response => {
+  var _extractPreviewData;
+
+  const data = response.data;
+  const src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
+
+  if (src) {
+    var _extractProvider;
+
+    return {
+      downloadUrl: extractDownloadUrl(data),
+      providerName: (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text,
+      src,
+      title: extractTitle(data),
+      linkIcon: extractLinkIcon(response),
+      url: extractLink(data)
+    };
+  }
+};

package/dist/es2019/extractors/flexible/actions/extract-view-action.js

@@ -0,0 +1,13 @@
+import { extractLink } from '@atlaskit/linking-common/extractors';
+import { getActionsFromJsonLd } from '../../common/actions/extractActions';
+export const extractViewAction = data => {
+  const viewActionExists = getActionsFromJsonLd(data).find(action => action['@type'] === 'ViewAction');
+
+  if (viewActionExists) {
+    return {
+      viewUrl: extractLink(data)
+    };
+  }
+
+  return undefined;
+};

package/dist/es2019/extractors/flexible/index.js

@@ -3,11 +3,14 @@ import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
-import { extractPersonCreatedBy, extractLink, extractTitle, extractDateUpdated, extractDateCreated } from '@atlaskit/linking-common/extractors';
+import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCreated, extractLink } from '@atlaskit/linking-common/extractors';
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
 import { extractLatestCommit } from './latest-commit';
+import { extractPreviewAction } from './actions/extract-preview-action';
+import { extractDownloadAction } from './actions/extract-download-action';
+import { extractViewAction } from './actions/extract-view-action';
 
 const extractFlexibleUiContext = (response, renderers) => {
   if (!response) {
@@ -27,6 +30,9 @@ const extractFlexibleUiContext = (response, renderers) => {
     createdBy: extractCreatedBy(data),
     createdOn: extractDateCreated(data),
     dueOn: extractDueOn(data),
+    previewAction: extractPreviewAction(response),
+    viewAction: extractViewAction(data),
+    downloadAction: extractDownloadAction(data),
     latestCommit: extractLatestCommit(data),
     linkIcon: extractLinkIcon(response, renderers),
     modifiedBy: extractModifiedBy(data),

package/dist/es2019/messages.js

@@ -70,6 +70,16 @@ export const messages = defineMessages({
     defaultMessage: 'To show a preview of this link, connect your {context} account.',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view. Displayed in byline.'
   },
+  connect_unauthorised_account_action: {
+    id: 'fabric.linking.connect_unauthorised_account_action',
+    defaultMessage: 'Connect to {context}',
+    description: 'Shown on a button to connect user external account to their Atlassian account.'
+  },
+  connect_unauthorised_account_description: {
+    id: 'fabric.linking.connect_unauthorised_account_description',
+    defaultMessage: 'Connect {context} to Atlassian to view more details from your work and collaboration from one place.',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",
@@ -125,6 +135,11 @@ export const messages = defineMessages({
     defaultMessage: 'Join {context} to view this issue',
     description: 'Allows the user join the product or service immediately'
   },
+  learn_more_about_smart_links_security: {
+    id: 'fabric.linking.learn_more_about_smart_links_security',
+    defaultMessage: 'Learn more about smart link security and permissions.',
+    description: 'An anchor link to redirect user to a page about smart link security and permissions.'
+  },
   loading: {
     id: 'fabric.linking.loading',
     defaultMessage: 'Loading...',

package/dist/es2019/state/flexible-ui-context/index.js

@@ -5,4 +5,11 @@ import { useContext, createContext } from 'react';
  * underlying elements.
  */
 export const FlexibleUiContext = /*#__PURE__*/createContext(undefined);
-export const useFlexibleUiContext = () => useContext(FlexibleUiContext);
+export const useFlexibleUiContext = () => useContext(FlexibleUiContext);
+/**
+ * This provides the data that will be used by Smart Links Flexible UI to populate it's
+ * underlying elements.
+ */
+
+export const FlexibleUiAnalyticsContext = /*#__PURE__*/createContext(undefined);
+export const useFlexibleUiAnalyticsContext = () => useContext(FlexibleUiAnalyticsContext);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.3.0",
+	"version": "23.4.0",
 	"sideEffects": false
 }

package/dist/es2019/view/{BlockCard/utils → EmbedCard}/constants.js

@@ -1,4 +1,4 @@
 const CDN_BASE_URL = 'https://smart-links-cdn.us-east-1.prod.public.atl-paas.net';
 export const LockImage = `${CDN_BASE_URL}/lock.svg`;
-export const CelebrationImage = `${CDN_BASE_URL}/celebration.svg`;
-export const NotFoundImage = `${CDN_BASE_URL}/not_found.svg`;
+export const NotFoundImage = `${CDN_BASE_URL}/not_found.svg`;
+export const UnauthorisedImage = `${CDN_BASE_URL}/unauth.svg`;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { LockImage } from '../../BlockCard/utils/constants';
+import { LockImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 export const EmbedCardForbiddenView = ({

package/dist/es2019/view/EmbedCard/views/NotFoundView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { NotFoundImage } from '../../BlockCard/utils/constants';
+import { NotFoundImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 export const EmbedCardNotFoundView = ({

package/dist/es2019/view/EmbedCard/views/UnauthorisedView.js

@@ -1,8 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { CelebrationImage } from '../../BlockCard/utils/constants';
+import { UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
+import { messages } from '../../../messages';
+import { CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../../constants';
 export const EmbedCardUnauthorisedView = ({
   link,
   context,
@@ -12,6 +16,8 @@ export const EmbedCardUnauthorisedView = ({
   inheritDimensions,
   onClick
 }) => {
+  var _context$image;
+
   const icon = context && context.icon && /*#__PURE__*/React.createElement(ImageIcon, {
     src: typeof context.icon === 'string' ? context.icon : undefined
   });
@@ -25,16 +31,24 @@ export const EmbedCardUnauthorisedView = ({
     onClick: onClick,
     testId: testId
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: CelebrationImage,
+    image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
     title: "connect_link_account_card_name",
-    description: "connect_link_account_card_description",
+    description: "connect_unauthorised_account_description",
     context: context && context.text,
     button: {
       appearance: 'primary',
-      text: 'connect_link_account_card',
+      text: 'connect_unauthorised_account_action',
       testId: 'connect-account'
     },
     onClick: onAuthorise,
     testId: testId
-  }));
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
+    values: {
+      context: context === null || context === void 0 ? void 0 : context.text
+    }
+  })), ' ', /*#__PURE__*/React.createElement("a", {
+    href: CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    "data-testid": `${testId}-learn-more`
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.learn_more_about_smart_links_security))));
 };

package/dist/es2019/view/EmbedCard/views/UnresolvedView.js

@@ -14,7 +14,8 @@ export const EmbedCardUnresolvedView = ({
   button,
   context,
   onClick,
-  testId
+  testId,
+  children
 }) => {
   return jsx("div", {
     css: {
@@ -31,14 +32,16 @@ export const EmbedCardUnresolvedView = ({
     css: {
       height: gridSize(14),
       marginBottom: gridSize(4)
-    }
+    },
+    "data-testid": `${testId}-unresolved-image`
   }), jsx("span", {
     css: {
       fontSize: gridSize(2.5),
       marginBottom: gridSize(1.5),
       width: gridSize(50),
       textAlign: 'center'
-    }
+    },
+    "data-testid": `${testId}-unresolved-title`
   }, jsx(FormattedMessage, _extends({}, messages[title], {
     values: {
       context
@@ -50,8 +53,9 @@ export const EmbedCardUnresolvedView = ({
       textAlign: 'center',
       width: gridSize(50),
       lineHeight: gridSize(3)
-    }
-  }, jsx(FormattedMessage, _extends({}, messages[description], {
+    },
+    "data-testid": `${testId}-unresolved-description`
+  }, children !== null && children !== void 0 ? children : jsx(FormattedMessage, _extends({}, messages[description], {
     values: {
       context
     }

package/dist/es2019/view/FlexibleCard/components/actions/action/download-action/index.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Action from '../index';
+
+const DownloadAction = props => {
+  const {
+    appearance,
+    asDropDownItem,
+    downloadUrl,
+    onClick,
+    testId,
+    url
+  } = props;
+
+  if (downloadUrl && url) {
+    const action = { ...props,
+      onClick: () => {
+        downloadFunction({
+          url: downloadUrl
+        });
+
+        if (onClick) {
+          onClick();
+        }
+      }
+    };
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+async function downloadFunction({
+  url
+}) {
+  if (!url) {
+    return;
+  }
+
+  const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  const iframeName = 'media-download-iframe';
+  const link = document.createElement('a');
+  let iframe = document.getElementById(iframeName);
+
+  if (!iframe) {
+    iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    iframe.id = iframeName;
+    iframe.name = iframeName;
+    document.body.appendChild(iframe);
+  }
+
+  link.href = url;
+  link.download = url;
+  link.target = isIE11 || isSafari ? '_blank' : iframeName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+export default DownloadAction;

package/dist/es2019/view/FlexibleCard/components/actions/action/download-action/types.js

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

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Action from '../index';
+import ReactDOM from 'react-dom';
+import { IntlProvider } from 'react-intl-next';
+import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
+import { useSmartLinkAnalytics } from '../../../../../../state';
+import Icon from '../../../elements/icon';
+
+const PreviewAction = props => {
+  const {
+    appearance,
+    asDropDownItem,
+    testId,
+    onClick,
+    linkIcon,
+    src,
+    url,
+    title,
+    providerName,
+    downloadUrl
+  } = props;
+  const defaultAnalytics = useSmartLinkAnalytics(url, () => {});
+  const analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
+  const EmbedIcon = {
+    icon: /*#__PURE__*/React.createElement(Icon, linkIcon),
+    isFlexibleUi: true
+  };
+
+  if (src && url) {
+    const embedModal = () => previewFunction({
+      popupMountPointId: 'twp-editor-preview-iframe',
+      showModal: true,
+      iframeName: 'twp-editor-preview-iframe',
+      onClose: () => {},
+      download: downloadUrl,
+      icon: EmbedIcon,
+      providerName: providerName || 'Preview',
+      src,
+      title,
+      url,
+      analytics,
+      origin: 'smartLinkCard'
+    });
+
+    const action = { ...props,
+      onClick: () => {
+        embedModal();
+
+        if (onClick) {
+          onClick();
+        }
+      }
+    };
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+/*
+  Explanatory note:
+  Actions don't have access to the react tree of whatever is rendered them
+  (and this concept is fraught inside editor anyway) so we want to ensure
+  it is mounting to a new unique place. This function manages that, including
+  creating an element if it doesn't exist, as well as tidying up the react tree
+  (but not the element) upon closing the modal.
+
+  This may strike you as really uncomfortable as you read it, so I wanted to note
+  that a) this was discussed and agreed upon, and b) it's definitely odd, and if
+  you find an elegant solution around this, you should definitely feel free to
+  refactor it.
+*/
+
+
+export async function previewFunction({
+  popupMountPointId,
+  ...rest
+}) {
+  let popupMountPoint;
+  popupMountPoint = document.getElementById(popupMountPointId);
+
+  if (!popupMountPoint) {
+    popupMountPoint = document.createElement('div');
+    popupMountPoint.id = popupMountPointId;
+    popupMountPoint.setAttribute('data-testid', 'preview-modal');
+    document.body.appendChild(popupMountPoint);
+  }
+
+  let Modal = await import('../../../../../EmbedModal');
+  ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, /*#__PURE__*/React.createElement(Modal.default, _extends({}, rest, {
+    onClose: _context => {
+      if (popupMountPoint) {
+        ReactDOM.unmountComponentAtNode(popupMountPoint);
+      }
+    }
+  }))), popupMountPoint);
+}
+export default PreviewAction;

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/types.js

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

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

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Action from '../index';
+
+const ViewAction = props => {
+  const {
+    appearance,
+    asDropDownItem,
+    testId,
+    onClick,
+    viewUrl,
+    url
+  } = props;
+
+  if (viewUrl && url) {
+    const action = { ...props,
+      onClick: () => {
+        viewFunction({
+          url: viewUrl
+        });
+
+        if (onClick) {
+          onClick();
+        }
+      }
+    };
+    return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
+      appearance: appearance,
+      asDropDownItem: asDropDownItem,
+      testId: testId
+    }));
+  } else {
+    return null;
+  }
+};
+
+export async function viewFunction({
+  url
+}) {
+  if (!url) {
+    return;
+  }
+
+  window.open(url, '_blank', 'noopener=yes');
+}
+export default ViewAction;

package/dist/es2019/view/FlexibleCard/components/actions/action/view-action/types.js

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

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

@@ -1,5 +1,6 @@
 import { ActionName } from '../../../../constants';
-import { createUIAction } from './utils'; // Attention: Keep the export name and action name the same.
+import { createDataAction, createUIAction } from './utils';
+// Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
 
@@ -8,7 +9,6 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
  * the icon to a cross icon.
  * @see Action
  */
-
 export const DeleteAction = createUIAction(ActionName.DeleteAction);
 /**
  * Creates a EditAction component. Accepts default ActionProps, but defaults
@@ -17,6 +17,27 @@ export const DeleteAction = createUIAction(ActionName.DeleteAction);
  */
 
 export const EditAction = createUIAction(ActionName.EditAction);
+/**
+ * Creates a PreviewAction component. Accepts default PreviewActionProps, and defaults
+ * to the text 'Preview' inside the button.
+ * @see Action
+ */
+
+export const PreviewAction = createDataAction(ActionName.PreviewAction);
+/**
+ * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
+ * to the text 'View' inside the button.
+ * @see Action
+ */
+
+export const ViewAction = createDataAction(ActionName.ViewAction);
+/**
+ * Creates a DownloadAction component. Accepts default DownloadActionProps, and defaults
+ * to the text 'Download' inside the button.
+ * @see Action
+ */
+
+export const DownloadAction = createDataAction(ActionName.DownloadAction);
 /**
  * Creates a CustomAction component. Accepts default ActionProps. Required to provide
  * your own icon or text.

package/dist/es2019/view/FlexibleCard/components/actions/utils.js

@@ -7,6 +7,12 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import EditIcon from '@atlaskit/icon/glyph/edit';
+import PreviewAction from './action/preview-action';
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import ViewAction from './action/view-action';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import DownloadAction from './action/download-action';
+import DownloadIcon from '@atlaskit/icon/glyph/download';
 const actionMappings = {
   [ActionName.CustomAction]: {
     component: Action,
@@ -33,6 +39,39 @@ const actionMappings = {
       }),
       tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
     }
+  },
+  [ActionName.PreviewAction]: {
+    component: PreviewAction,
+    props: {
+      testId: 'smart-action-preview-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview),
+      icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+        label: "Preview"
+      }),
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview)
+    }
+  },
+  [ActionName.ViewAction]: {
+    component: ViewAction,
+    props: {
+      testId: 'smart-action-view-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.view),
+      icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
+        label: "View"
+      }),
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.view)
+    }
+  },
+  [ActionName.DownloadAction]: {
+    component: DownloadAction,
+    props: {
+      testId: 'smart-action-download-action',
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+      icon: /*#__PURE__*/React.createElement(DownloadIcon, {
+        label: "Download"
+      }),
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.download)
+    }
   }
 };
 
@@ -50,8 +89,13 @@ const getActionData = (actionName, contextKey, context) => {
   const data = context[contextKey];
 
   switch (actionName) {
-    default:
+    case ActionName.PreviewAction:
+    case ActionName.ViewAction:
+    case ActionName.DownloadAction:
       return data;
+
+    default:
+      return undefined;
   }
 };
 
@@ -69,7 +113,9 @@ export const createDataAction = name => {
   return overrides => {
     const context = useContext(FlexibleUiContext);
     const data = getActionData(name, contextKey, context);
-    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
+    return data ? /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides, {
+      url: context === null || context === void 0 ? void 0 : context.url
+    })) : null;
   };
 };
 export const createUIAction = name => {

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

@@ -46,13 +46,7 @@ const ActionGroup = ({
   onDropdownOpenChange,
   testId
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [buttonActions, dropdownItemActions] = useMemo(() => {
-    const isMoreThenTwoItems = items.length > visibleButtonsNum;
-    const buttons = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-    const dropdownItems = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
-    return [buttons, dropdownItems];
-  }, [items, visibleButtonsNum]); // Stop AK dropdown menu to propagate event on click.
+  const [isOpen, setIsOpen] = useState(false); // Stop AK dropdown menu to propagate event on click.
 
   const onClick = useCallback(e => e.stopPropagation(), []);
   const onOpenChange = useCallback(attrs => {
@@ -69,11 +63,20 @@ const ActionGroup = ({
       });
     }
   }, [isOpen, onOpenChange]);
+  const renderableActions = items.filter(action => renderActionItems([action]));
+  const [buttonActions, dropdownItemActions] = useMemo(() => {
+    const isMoreThenTwoItems = renderableActions && renderableActions.length > visibleButtonsNum;
+    const buttons = isMoreThenTwoItems ? renderableActions.slice(0, visibleButtonsNum - 1) : renderableActions;
+    const dropdownItems = isMoreThenTwoItems ? renderableActions.slice(visibleButtonsNum - 1) : [];
+    return [buttons, dropdownItems];
+  }, [renderableActions, visibleButtonsNum]);
+  const dropdownMenuElement = renderActionItems(dropdownItemActions, size, appearance, true, onActionClick);
+  const buttonGroupElement = renderActionItems(buttonActions, size, appearance, false, onActionClick);
   return jsx("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, jsx(ButtonGroup, null, renderActionItems(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? jsx(DropdownMenu, {
+  }, jsx(ButtonGroup, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? jsx(DropdownMenu, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,
     trigger: ({
@@ -93,7 +96,7 @@ const ActionGroup = ({
       ref: triggerRef
     }))),
     testId: "action-group-dropdown"
-  }, renderActionItems(dropdownItemActions, size, appearance, true, onActionClick)) : null));
+  }, dropdownMenuElement) : null));
 };
 
 export default ActionGroup;

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -105,7 +105,7 @@ const isElementDisplayValid = (name, display) => {
   return (_ElementDisplaySchema = (_ElementDisplaySchema2 = ElementDisplaySchema[name]) === null || _ElementDisplaySchema2 === void 0 ? void 0 : _ElementDisplaySchema2.includes(display)) !== null && _ElementDisplaySchema !== void 0 ? _ElementDisplaySchema : false;
 };
 
-const isElementNull = children => {
+const isJSXElementNull = children => {
   return Boolean(children.type() === null);
 };
 
@@ -138,7 +138,7 @@ export const renderElementItems = (items = [], display = 'inline') => {
         key: idx
       }, typedProps));
 
-      if (!isElementNull(element)) {
+      if (!isJSXElementNull(element)) {
         return [...acc, element];
       }
     }
@@ -182,13 +182,18 @@ export const renderActionItems = (items = [], size = SmartLinkSize.Medium, appea
         }
       };
 
-      return [...acc, /*#__PURE__*/React.createElement(Action, _extends({
+      const action = /*#__PURE__*/React.createElement(Action, _extends({
+        url: '',
         asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,
         onClick: handleOnClick
-      }, actionProps))];
+      }, actionProps));
+
+      if (!isJSXElementNull(action)) {
+        return [...acc, action];
+      }
     }
 
     return acc;