@atlaskit/smart-card 21.0.3 → 21.1.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 21.1.1
+
+### Patch Changes
+
+- [`e6a3654a137`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6a3654a137) - Fix bug where smart cards used `elevation.surface` instead of `elevation.surface.raised` design tokens for card backgrounds.
+
+## 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
+
+- [`4347099f4ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4347099f4ba) - [ux] Blue highlight is removed for when a user right-clicks on a Flex UI Smart Link
+
 ## 21.0.3
 
 ### Patch Changes

package/dist/cjs/utils/token.js

@@ -9,7 +9,7 @@ var _tokens = require("@atlaskit/tokens");
 
 var tokens = {
   actionIcon: (0, _tokens.token)('color.icon', '#44546F'),
-  background: (0, _tokens.token)('elevation.surface', '#FFFFFF'),
+  background: (0, _tokens.token)('elevation.surface.raised', '#FFFFFF'),
   badgeIcon: (0, _tokens.token)('color.icon.subtle', '#626F86'),
   badgeText: (0, _tokens.token)('color.text.subtlest', '#626F86'),
   blackLink: (0, _tokens.token)('color.text.subtle', '#44546F'),

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/components/Frame.js

@@ -37,7 +37,7 @@ var sharedFrameStyles = {
   maxWidth: (0, _utils.gs)(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: (0, _tokens.token)('elevation.surface', 'white')
+  backgroundColor: (0, _tokens.token)('elevation.surface.raised', 'white')
 };
 
 var ExpandedFrame = function ExpandedFrame(_ref) {

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -144,7 +144,7 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface.raised', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

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

@@ -20,7 +20,7 @@ var _utils = require("../utils");
 var _templateObject;
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _utils.getBaseStyles)(direction, size), (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };
 /**
  * A block represents a collection of elements and actions that are arranged

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/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
+exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.highlightRemoveStyles = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -38,7 +38,7 @@ var _elementGroup = _interopRequireDefault(require("./element-group"));
 var _excluded = ["name"],
     _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
 
-var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
+var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -86,6 +86,8 @@ var getBaseStyles = function getBaseStyles(direction, size) {
 };
 
 exports.getBaseStyles = getBaseStyles;
+var highlightRemoveStyles = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+exports.highlightRemoveStyles = highlightRemoveStyles;
 
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;

package/dist/es2019/utils/token.js

@@ -1,7 +1,7 @@
 import { token } from '@atlaskit/tokens';
 export const tokens = {
   actionIcon: token('color.icon', '#44546F'),
-  background: token('elevation.surface', '#FFFFFF'),
+  background: token('elevation.surface.raised', '#FFFFFF'),
   badgeIcon: token('color.icon.subtle', '#626F86'),
   badgeText: token('color.text.subtlest', '#626F86'),
   blackLink: token('color.text.subtle', '#44546F'),

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/components/Frame.js

@@ -13,7 +13,7 @@ const sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: token('elevation.surface', 'white')
+  backgroundColor: token('elevation.surface.raised', 'white')
 };
 export const ExpandedFrame = ({
   children,

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -191,7 +191,7 @@ export const TextWrapper = styled.div`
 export const Content = styled.div`
   ${borderRadius}
   ${cardShadow}
-  background-color: ${token('elevation.surface', 'white')};
+  background-color: ${token('elevation.surface.raised', 'white')};
   position: absolute;
   z-index: 1;
   width: 100%;

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

@@ -2,10 +2,11 @@
 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';
 
 const getBlockStyles = (direction, size) => css`
   ${getBaseStyles(direction, size)}
+  ${highlightRemoveStyles}
   justify-content: flex-start;
   [data-separator] + [data-separator]:before {
     content: '•';

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/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -84,6 +84,17 @@ export const getBaseStyles = (direction, size) => css`
     min-width: fit-content;
   }
 `;
+export const highlightRemoveStyles = css`
+  outline: none !important;
+  outline-color: inherit;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
 
 const isActionGroup = node => /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 

package/dist/esm/utils/token.js

@@ -1,7 +1,7 @@
 import { token } from '@atlaskit/tokens';
 export var tokens = {
   actionIcon: token('color.icon', '#44546F'),
-  background: token('elevation.surface', '#FFFFFF'),
+  background: token('elevation.surface.raised', '#FFFFFF'),
   badgeIcon: token('color.icon.subtle', '#626F86'),
   badgeText: token('color.text.subtlest', '#626F86'),
   blackLink: token('color.text.subtle', '#44546F'),

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/components/Frame.js

@@ -22,7 +22,7 @@ var sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: token('elevation.surface', 'white')
+  backgroundColor: token('elevation.surface.raised', 'white')
 };
 export var ExpandedFrame = function ExpandedFrame(_ref) {
   var children = _ref.children,

package/dist/esm/view/EmbedCard/components/styled.js

@@ -99,7 +99,7 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, token('elevation.surface', 'white'), gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, token('elevation.surface.raised', 'white'), gridSize(4), gridSize(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

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;

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/utils/token.d.ts

@@ -1,6 +1,6 @@
 export declare const tokens: {
     actionIcon: "var(--ds-icon)";
-    background: "var(--ds-surface)";
+    background: "var(--ds-surface-raised)";
     badgeIcon: "var(--ds-icon-subtle)";
     badgeText: "var(--ds-text-subtlest)";
     blackLink: "var(--ds-text-subtle)";

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, onActionItemClick?: (() => void) | undefined) => React.ReactNode | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "21.0.3",
+  "version": "21.1.1",
   "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”.