@atlaskit/smart-card 21.0.4 → 21.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 21.1.0
+
+### Minor Changes
+
+- [`fa7f42de6c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fa7f42de6c0) - Flexible UI: Add onActionMenuOpenChange on TitleBlock to detect action dropdown menu open/close
+
 ## 21.0.4
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -33,7 +33,7 @@ var _actionGroup = _interopRequireDefault(require("../action-group"));
 
 var _elements = require("../../elements");
 
-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;
 
@@ -85,6 +85,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,
@@ -101,12 +102,20 @@ var TitleBlock = function TitleBlock(_ref) {
       actionDropdownOpen = _useState2[0],
       setActionDropdownOpen = _useState2[1];
 
+  var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
+    setActionDropdownOpen(isOpen);
+
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+
   var actionGroup = actions.length > 0 && /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
     items: actions,
     visibleButtonsNum: showActionOnHover ? 1 : 2,
-    onDropdownOpenChange: function onDropdownOpenChange(isOpen) {
-      return setActionDropdownOpen(isOpen);
-    }
+    onDropdownOpenChange: onDropdownOpenChange
   });
 
   var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);

package/dist/es2019/version.json

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

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/core';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
@@ -60,6 +60,7 @@ const TitleBlock = ({
   anchorTarget,
   hideTitleTooltip,
   maxLines,
+  onActionMenuOpenChange,
   onClick,
   overrideCss,
   status = SmartLinkStatus.Fallback,
@@ -70,10 +71,19 @@ const TitleBlock = ({
   ...props
 }) => {
   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: isOpen => setActionDropdownOpen(isOpen)
+    onDropdownOpenChange: onDropdownOpenChange
   });
   const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
   const combinedCss = css`

package/dist/esm/version.json

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

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "21.0.4",
+  "version": "21.1.0",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -79,7 +79,7 @@
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/section-message": "^6.1.5",
-    "@atlaskit/select": "^15.5.0",
+    "@atlaskit/select": "^15.6.0",
     "@atlaskit/table-tree": "^9.1.0",
     "@atlaskit/tabs": "^13.2.10",
     "@atlaskit/textarea": "^4.3.0",

package/report.api.md

@@ -641,6 +641,10 @@ declare type NamedActionItem = BaseActionItem & {
   name: Exclude<ActionName, ActionName.CustomAction>;
 };
 
+export declare type OnActionMenuOpenChangeOptions = {
+  isOpen: boolean;
+};
+
 declare type OnErrorCallback = (data: {
   status: Extract<CardType, ErrorCardType>;
   url: string;
@@ -911,6 +915,11 @@ 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”.