@atlaskit/smart-card 21.0.2 → 21.1.0

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -1,62 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _sizeToSpacing;
-
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
-import Button from '@atlaskit/button/custom-theme-button';
+import { jsx } from '@emotion/core';
 import { SmartLinkSize } from '../../../../../constants';
-import Tooltip from '@atlaskit/tooltip';
-import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { getIconSizeStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
-import { handleOnClick } from '../../../../../utils';
-
-var getIconWidth = function getIconWidth(size) {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Large:
-      return '1.5rem';
-
-    case SmartLinkSize.Medium:
-    case SmartLinkSize.Small:
-    default:
-      return '1rem';
-  }
-};
-
-var getIconStyles = function getIconStyles(size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getIconWidth(size)));
-};
-
-var getButtonStyle = function getButtonStyle(size, iconOnly) {
-  switch (size) {
-    case SmartLinkSize.Large:
-      return iconOnly ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
-
-    case SmartLinkSize.Small:
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
-
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Medium:
-    default:
-      return '';
-  }
-};
-
-var ActionIcon = function ActionIcon(_ref) {
-  var size = _ref.size,
-      testId = _ref.testId,
-      icon = _ref.icon;
-  return jsx("span", {
-    css: getIconStyles(size),
-    "data-testid": "".concat(testId, "-icon")
-  }, icon);
-};
-
-export var sizeToSpacing = (_sizeToSpacing = {}, _defineProperty(_sizeToSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToSpacing, SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
+import ActionButton from './action-button';
+import ActionDropdownItem from './action-dropdown-item';
+import ActionIcon from './action-icon';
 /**
  * A base action that can be triggered with an on click.
  * @internal
@@ -66,60 +14,54 @@ export var sizeToSpacing = (_sizeToSpacing = {}, _defineProperty(_sizeToSpacing,
  * @see CustomAction
  */
 
-var Action = function Action(_ref2) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
-      content = _ref2.content,
-      onClick = _ref2.onClick,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? SmartLinkSize.Medium : _ref2$size,
-      _ref2$testId = _ref2.testId,
-      testId = _ref2$testId === void 0 ? 'smart-action' : _ref2$testId,
-      icon = _ref2.icon,
-      _ref2$iconPosition = _ref2.iconPosition,
-      iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
-      tooltipMessage = _ref2.tooltipMessage,
-      asDropDownItem = _ref2.asDropDownItem,
-      overrideCss = _ref2.overrideCss;
+var Action = function Action(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
+      content = _ref.content,
+      onClick = _ref.onClick,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-action' : _ref$testId,
+      icon = _ref.icon,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
+      tooltipMessage = _ref.tooltipMessage,
+      asDropDownItem = _ref.asDropDownItem,
+      overrideCss = _ref.overrideCss;
 
   if (!onClick) {
     return null;
   }
 
-  var iconBefore = icon && iconPosition === 'before' ? jsx(ActionIcon, {
+  var actionIcon = icon && jsx(ActionIcon, {
+    icon: icon,
     size: size,
-    testId: testId,
-    icon: icon
-  }) : undefined;
-  var iconAfter = icon && iconPosition === 'after' ? jsx(ActionIcon, {
-    size: size,
-    testId: testId,
-    icon: icon
-  }) : undefined;
-  var iconOnly = !content;
+    testId: testId
+  });
+  var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
+  var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
 
   if (asDropDownItem) {
-    return jsx(DropdownItem, {
-      elemBefore: iconBefore,
-      elemAfter: iconAfter,
-      testId: testId,
-      onClick: handleOnClick(onClick)
-    }, content);
+    return jsx(ActionDropdownItem, {
+      content: content,
+      iconAfter: iconAfter,
+      iconBefore: iconBefore,
+      onClick: onClick,
+      testId: testId
+    });
   } else {
-    return jsx(Tooltip, {
-      content: tooltipMessage,
-      testId: "".concat(testId, "-tooltip")
-    }, jsx("div", {
-      css: [getButtonStyle(size, iconOnly), overrideCss],
-      "data-testid": "".concat(testId, "-button-wrapper")
-    }, jsx(Button, {
-      spacing: sizeToSpacing[size],
+    return jsx(ActionButton, {
       appearance: appearance,
-      testId: testId,
-      onClick: handleOnClick(onClick),
+      content: content,
+      iconAfter: iconAfter,
       iconBefore: iconBefore,
-      iconAfter: iconAfter
-    }, content)));
+      onClick: onClick,
+      overrideCss: overrideCss,
+      size: size,
+      testId: testId,
+      tooltipMessage: tooltipMessage
+    });
   }
 };
 

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

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["triggerRef"];
 
 var _templateObject;
 
 /** @jsx jsx */
-import { useCallback } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
@@ -16,7 +17,7 @@ import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
 import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
-import { sizeToSpacing } from '../../actions/action';
+import { sizeToButtonSpacing } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { messages } from '../../../../../messages';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), tokens.focus);
@@ -38,40 +39,67 @@ var ActionGroup = function ActionGroup(_ref) {
       visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
       onDropdownOpenChange = _ref.onDropdownOpenChange,
       testId = _ref.testId;
-  var isMoreThenTwoItems = items.length > visibleButtonsNum;
-  var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
-  var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : []; // Stop AK dropdown menu to propagate event on click.
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useMemo = useMemo(function () {
+    var isMoreThenTwoItems = items.length > visibleButtonsNum;
+    var buttons = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
+    var dropdownItems = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+    return [buttons, dropdownItems];
+  }, [items, visibleButtonsNum]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      buttonActions = _useMemo2[0],
+      dropdownItemActions = _useMemo2[1]; // Stop AK dropdown menu to propagate event on click.
+
 
   var onClick = useCallback(function (e) {
     return e.stopPropagation();
   }, []);
+  var onOpenChange = useCallback(function (attrs) {
+    setIsOpen(attrs.isOpen);
+
+    if (onDropdownOpenChange) {
+      onDropdownOpenChange(attrs.isOpen);
+    }
+  }, [onDropdownOpenChange]);
+  var onActionClick = useCallback(function () {
+    if (isOpen) {
+      onOpenChange({
+        isOpen: false
+      });
+    }
+  }, [isOpen, onOpenChange]);
   return jsx("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, jsx(ButtonGroup, null, renderActionItems(firstActions, size, appearance), restActions.length > 0 ? jsx(DropdownMenu, {
-    onOpenChange: function onOpenChange(_ref2) {
-      var isOpen = _ref2.isOpen;
-      return onDropdownOpenChange && onDropdownOpenChange(isOpen);
-    },
-    trigger: function trigger(_ref3) {
-      var triggerRef = _ref3.triggerRef,
-          props = _objectWithoutProperties(_ref3, _excluded);
+  }, jsx(ButtonGroup, null, renderActionItems(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? jsx(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: onOpenChange,
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          props = _objectWithoutProperties(_ref2, _excluded);
 
       return jsx(Tooltip, {
         content: jsx(FormattedMessage, messages.more_actions),
+        hideTooltipOnClick: true,
         testId: "action-group-more-button-tooltip",
         tag: "span"
       }, jsx(Button, _extends({}, props, {
-        spacing: sizeToSpacing[size],
+        spacing: sizeToButtonSpacing[size],
         testId: "action-group-more-button",
         iconBefore: jsx(MoreIcon, {
           label: "more"
         }),
         ref: triggerRef
       })));
-    }
-  }, renderActionItems(restActions, size, appearance, true)) : null));
+    },
+    testId: "action-group-dropdown"
+  }, renderActionItems(dropdownItemActions, size, appearance, true, onActionClick)) : null));
 };
 
 export default ActionGroup;

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -6,10 +6,10 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
-import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), getBaseStyles(direction, size), getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), getBaseStyles(direction, size), highlightRemoveStyles, getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
 };
 /**
  * A block represents a collection of elements and actions that are arranged

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
+var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onActionMenuOpenChange", "onClick", "overrideCss", "status", "showActionOnHover", "testId", "text", "theme"];
 
 var _templateObject, _templateObject2;
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/core';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
@@ -59,6 +59,7 @@ var TitleBlock = function TitleBlock(_ref) {
       anchorTarget = _ref.anchorTarget,
       hideTitleTooltip = _ref.hideTitleTooltip,
       maxLines = _ref.maxLines,
+      onActionMenuOpenChange = _ref.onActionMenuOpenChange,
       onClick = _ref.onClick,
       overrideCss = _ref.overrideCss,
       _ref$status = _ref.status,
@@ -75,12 +76,19 @@ var TitleBlock = function TitleBlock(_ref) {
       actionDropdownOpen = _useState2[0],
       setActionDropdownOpen = _useState2[1];
 
+  var onDropdownOpenChange = useCallback(function (isOpen) {
+    setActionDropdownOpen(isOpen);
+
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
   var actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,
     visibleButtonsNum: showActionOnHover ? 1 : 2,
-    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
-      return setActionDropdownOpen(isOpen);
-    }
+    onDropdownOpenChange: onDropdownOpenChange
   });
   var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
   var combinedCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", " ", "\n  "])), actionStyles, overrideCss);

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

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["name"],
     _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
 
-var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
+var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -52,6 +52,7 @@ export var getGapSize = function getGapSize(size) {
 export var getBaseStyles = function getBaseStyles(direction, size) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
+export var highlightRemoveStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  outline: none !important;\n  outline-color: inherit;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
 
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
@@ -116,6 +117,7 @@ export var renderActionItems = function renderActionItems() {
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SmartLinkSize.Medium;
   var appearance = arguments.length > 2 ? arguments[2] : undefined;
   var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
+  var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
   var actions = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
         hideContent = curr.hideContent,
@@ -136,12 +138,22 @@ export var renderActionItems = function renderActionItems() {
     }
 
     if (Action) {
+      var handleOnClick = function handleOnClick() {
+        if (onActionItemClick) {
+          onActionItemClick();
+        }
+
+        if (onClick) {
+          onClick();
+        }
+      };
+
       return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Action, _extends({
         asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,
-        onClick: onClick
+        onClick: handleOnClick
       }, actionProps))]);
     }
 

package/dist/esm/view/FlexibleCard/components/utils.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _sizeToButtonSpacing, _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 import React from 'react';
 import { css } from '@emotion/core';
 import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
+export var sizeToButtonSpacing = (_sizeToButtonSpacing = {}, _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Small, 'none'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Medium, 'compact'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.Large, 'compact'), _defineProperty(_sizeToButtonSpacing, SmartLinkSize.XLarge, 'default'), _sizeToButtonSpacing);
 export var getFormattedMessage = function getFormattedMessage(message) {
   if (message) {
     var descriptor = message.descriptor,

package/dist/types/index.d.ts

@@ -18,5 +18,5 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback';
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, } from './constants';
 export { MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock, FooterBlock, } from './view/FlexibleCard/components/blocks';
-export type { ActionItem, ElementItem, } from './view/FlexibleCard/components/blocks/types';
+export type { ActionItem, ElementItem, OnActionMenuOpenChangeOptions, } from './view/FlexibleCard/components/blocks/types';
 export type { AnalyticsAction, AnalyticsActionSubject, AnalyticsPayload, AnalyticsHandler, } from './utils/types';

package/dist/types/view/FlexibleCard/components/actions/action/action-button/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { ActionButtonProps } from './types';
+declare const ActionButton: React.FC<ActionButtonProps>;
+export default ActionButton;

package/dist/types/view/FlexibleCard/components/actions/action/action-button/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SmartLinkSize } from '../../../../../../constants';
+import { ActionProps } from '../types';
+export declare type ActionButtonProps = ActionProps & {
+    iconAfter?: React.ReactChild;
+    iconBefore?: React.ReactChild;
+    size: SmartLinkSize;
+};

package/dist/types/view/FlexibleCard/components/actions/action/action-dropdown-item/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ActionDropdownItemProps } from './types';
+declare const ActionDropdownItem: React.FC<ActionDropdownItemProps>;
+export default ActionDropdownItem;

package/dist/types/view/FlexibleCard/components/actions/action/action-dropdown-item/types.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type ActionDropdownItemProps = {
+    content?: React.ReactNode;
+    iconAfter?: React.ReactNode;
+    iconBefore?: React.ReactNode;
+    onClick: () => any;
+    testId?: string;
+};

package/dist/types/view/FlexibleCard/components/actions/action/action-icon/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import React from 'react';
+import { ActionIconProps } from './types';
+declare const ActionIcon: React.FC<ActionIconProps>;
+export default ActionIcon;

package/dist/types/view/FlexibleCard/components/actions/action/action-icon/types.d.ts

@@ -0,0 +1,7 @@
+import { ReactChild } from 'react';
+import { SmartLinkSize } from '../../../../../../constants';
+export declare type ActionIconProps = {
+    size?: SmartLinkSize;
+    icon?: ReactChild;
+    testId?: string;
+};

package/dist/types/view/FlexibleCard/components/actions/action/index.d.ts

@@ -1,9 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { Spacing } from '@atlaskit/button';
-import { SmartLinkSize } from '../../../../../constants';
 import { ActionProps } from './types';
-export declare const sizeToSpacing: Record<SmartLinkSize, Spacing>;
 /**
  * A base action that can be triggered with an on click.
  * @internal

package/dist/types/view/FlexibleCard/components/actions/action/types.d.ts

@@ -46,19 +46,3 @@ export declare type ActionProps = {
      */
     testId?: string;
 };
-export declare type ActionIconProps = {
-    /**
-     * Determines the size of the Icon within the Action.
-     */
-    size?: SmartLinkSize;
-    /**
-     * Determines the icon within the Action.
-     */
-    icon?: ReactChild;
-    /**
-     * 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;
-};

package/dist/types/view/FlexibleCard/components/blocks/title-block/types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActionItem, BlockProps, ElementItem } from '../types';
+import { ActionItem, BlockProps, ElementItem, OnActionMenuOpenChangeOptions } from '../types';
 import { SmartLinkPosition, SmartLinkTheme } from '../../../../../constants';
 import { RetryOptions } from '../../../types';
 import { AnchorTarget } from '../../types';
@@ -34,6 +34,11 @@ export declare type TitleBlockProps = {
      * @see ElementItem
      */
     metadata?: ElementItem[];
+    /**
+     * Called when the action dropdown menu (if present) is open/closed.
+     * Receives an object with `isOpen` state.
+     */
+    onActionMenuOpenChange?: (options: OnActionMenuOpenChangeOptions) => void;
     /**
      * Determines the position of the link icon in relative to the vertical
      * height of the TitleBlock.  It can either be centred or placed on “top”.

package/dist/types/view/FlexibleCard/components/blocks/types.d.ts

@@ -100,6 +100,9 @@ export declare type CustomActionItem = BaseActionItem & {
     name: ActionName.CustomAction;
 } & ((Required<Pick<ActionProps, 'icon' | 'iconPosition'>> & Pick<ActionProps, 'content'>) | ((Required<Pick<ActionProps, 'content'>> & Pick<ActionProps, 'icon' | 'iconPosition'>) & Pick<ActionProps, 'tooltipMessage'>));
 export declare type ActionItem = NamedActionItem | CustomActionItem;
+export declare type OnActionMenuOpenChangeOptions = {
+    isOpen: boolean;
+};
 /**
  * A type that contains all the possible combinations of elements with their corresponding props.
  */

package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts

@@ -7,6 +7,7 @@ export declare type ElementDisplaySchemaType = 'inline' | 'block';
 export declare const ElementDisplaySchema: Record<ElementName, ElementDisplaySchemaType[]>;
 export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
+export declare const highlightRemoveStyles: SerializedStyles;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
 export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
-export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: Appearance | undefined, asDropDownItems?: boolean | undefined) => React.ReactNode | undefined;
+export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: Appearance | undefined, asDropDownItems?: boolean | undefined, onActionItemClick?: (() => void) | undefined) => React.ReactNode | undefined;

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { SerializedStyles } from '@emotion/core';
+import { Spacing } from '@atlaskit/button';
 import { SmartLinkSize } from '../../../constants';
 import { MessageProps } from './types';
+export declare const sizeToButtonSpacing: Record<SmartLinkSize, Spacing>;
 export declare const getFormattedMessage: (message?: MessageProps | undefined) => JSX.Element | undefined;
 export declare const getIconSizeStyles: (width: string) => SerializedStyles;
 export declare const getIconWidth: (size?: SmartLinkSize | undefined) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "21.0.2",
+  "version": "21.1.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/avatar-group": "^9.0.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/dropdown-menu": "^11.2.0",
+    "@atlaskit/dropdown-menu": "^11.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/icon-object": "^6.2.0",
@@ -36,10 +36,10 @@
     "@atlaskit/linking-common": "^1.5.0",
     "@atlaskit/logo": "^13.8.0",
     "@atlaskit/lozenge": "^11.1.0",
-    "@atlaskit/media-common": "^2.15.0",
+    "@atlaskit/media-common": "^2.16.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
-    "@atlaskit/popup": "^1.3.0",
+    "@atlaskit/popup": "^1.4.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -66,6 +66,7 @@
   "devDependencies": {
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/checkbox": "^12.3.0",
+    "@atlaskit/code": "^14.3.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/field-base": "^15.0.6",
@@ -78,11 +79,12 @@
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/section-message": "^6.1.5",
-    "@atlaskit/select": "^15.4.0",
+    "@atlaskit/select": "^15.6.0",
     "@atlaskit/table-tree": "^9.1.0",
     "@atlaskit/tabs": "^13.2.10",
     "@atlaskit/textarea": "^4.3.0",
     "@atlaskit/textfield": "^5.1.0",
+    "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/jest-dom": "^4.1.0",
@@ -103,6 +105,7 @@
     "mockdate": "^3.0.2",
     "react": "^16.8.0",
     "react-ace": "^6.1.0",
+    "react-beautiful-dnd": "^12.1.1",
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-test-renderer": "^16.8.0",