@atlaskit/smart-card 26.6.0 → 26.6.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 26.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.6.1
+
+### Patch Changes
+
+- [`ebb6750a97d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ebb6750a97d) - [ux] Flexible Smart Links: Change hover preview show/hide behavior. Hover preview should not show when hovering over metadata elements and actions.
+- Updated dependencies
+
 ## 26.6.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

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

@@ -140,7 +140,8 @@ var ActionGroup = function ActionGroup(_ref) {
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? (0, _react2.jsx)("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    "data-action-open": isOpen
   }, (0, _react2.jsx)(_buttonGroup.default, null, actionButtons, moreActionDropdown)) : null;
 };
 var _default = ActionGroup;

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getContainerStyles = exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
@@ -80,7 +81,7 @@ var getContainerStyles = function getContainerStyles(size, hideBackground, hideE
   return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 exports.getContainerStyles = getContainerStyles;
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return _react.default.Children.map(children, function (child) {
     // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
@@ -95,13 +96,6 @@ var renderChildren = function renderChildren(children, containerSize, containerT
           status: status,
           theme: containerTheme
         });
-      } else if (onActionMenuOpenChange && (0, _flexible.isFlexibleUiFooterBlock)(child)) {
-        return /*#__PURE__*/_react.default.cloneElement(child, {
-          // @ts-expect-error
-          size: size,
-          status: status,
-          onActionMenuOpenChange: onActionMenuOpenChange
-        });
       }
       // @ts-expect-error
       return /*#__PURE__*/_react.default.cloneElement(child, {
@@ -138,7 +132,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
 
 /**
  * A container is a hidden component that build the Flexible Smart Link.
- * All of the Flexible UI components are wrapped inside the container.
+ * All the Flexible UI components are wrapped inside the container.
  * It inherits the ui props from Card component and applies the custom styling
  * accordingly.
  * @internal
@@ -177,15 +171,33 @@ var Container = function Container(_ref3) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hoverCardCanOpen = _useState2[0],
     setHoverCardCanOpen = _useState2[1];
-  var onActionMenuOpenChange = (0, _react.useCallback)(function (options) {
-    return setHoverCardCanOpen(!options.isOpen);
-  }, []);
-  var containerContent = (0, _react2.jsx)("div", {
+  var canShowHoverPreview = showHoverPreview && status === 'resolved';
+  var canShowAuthTooltip = showAuthTooltip && status === 'unauthorized';
+  var onMouseOver = (0, _react.useCallback)(function (e) {
+    var _e$target$closest;
+    // Never show hover card on action or when action dropdown opens.
+    // The code below can be simplified by using :is() and :has()
+    // but the pseudo-class isn't support by Firefox yet.
+    var action =
+    // Any action button group (title/footer block)
+    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
+    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
+    var canOpen = canShowAuthTooltip && !action ||
+    // EDM-7060: For hover preview, also hide hover card on all elements
+    // except title element (link title)
+    canShowHoverPreview && !action && !e.target.closest("[data-smart-element]:not([data-smart-element=\"".concat(_constants.ElementName.Title, "\"])"));
+    if (hoverCardCanOpen !== canOpen) {
+      setHoverCardCanOpen(canOpen);
+    }
+  }, [canShowAuthTooltip, canShowHoverPreview, hoverCardCanOpen]);
+  var containerContent = (0, _react2.jsx)("div", (0, _extends2.default)({
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-  if (context !== null && context !== void 0 && context.url && (showHoverPreview && status === 'resolved' || showAuthTooltip && status === 'unauthorized')) {
+  }, canShowHoverPreview || canShowAuthTooltip ? {
+    onMouseOver: onMouseOver
+  } : undefined), clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return (0, _react2.jsx)(_HoverCard.HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js

@@ -151,11 +151,12 @@ var LozengeAction = function LozengeAction(_ref) {
   var trigger = (0, _react2.useCallback)(function (props) {
     return (0, _react.jsx)(_lozengeActionTrigger.default, (0, _extends2.default)({}, props, {
       appearance: selected.appearance,
+      isOpen: isOpen,
       showFeatureDiscovery: action === null || action === void 0 ? void 0 : action.showFeatureDiscovery,
       testId: testId,
       text: selected.text
     }));
-  }, [selected.appearance, selected.text, action === null || action === void 0 ? void 0 : action.showFeatureDiscovery, testId]);
+  }, [selected.appearance, selected.text, isOpen, action === null || action === void 0 ? void 0 : action.showFeatureDiscovery, testId]);
   var handleItemClick = (0, _react2.useCallback)( /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, text, appearance) {
       var updateAction, request;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js

@@ -14,10 +14,11 @@ var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _styled = require("../styled");
 var _featureDiscovery = _interopRequireDefault(require("../feature-discovery"));
-var _excluded = ["appearance", "showFeatureDiscovery", "testId", "text", "triggerRef"];
+var _excluded = ["appearance", "isOpen", "showFeatureDiscovery", "testId", "text", "triggerRef"];
 /** @jsx jsx */
 var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
   var appearance = _ref.appearance,
+    isOpen = _ref.isOpen,
     showFeatureDiscovery = _ref.showFeatureDiscovery,
     testId = _ref.testId,
     text = _ref.text,
@@ -48,6 +49,7 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     type: "button"
   }, props, {
     css: _styled.triggerButtonStyles,
+    "data-action-open": isOpen,
     "data-testid": "".concat(testId, "--trigger"),
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/dist/es2019/version.json

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

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

@@ -124,7 +124,8 @@ const ActionGroup = ({
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? jsx("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    "data-action-open": isOpen
   }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
 };
 export default ActionGroup;

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

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { useContext, useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isFlexibleUiFooterBlock } from '../../../../utils/flexible';
+import { ElementName, MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
@@ -111,7 +112,7 @@ export const getContainerStyles = (size, hideBackground, hideElevation, hidePadd
     }
   `;
 };
-const renderChildren = (children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) => React.Children.map(children, child => {
+const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
   // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
   if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
     const {
@@ -127,13 +128,6 @@ const renderChildren = (children, containerSize, containerTheme, status, retry,
         status,
         theme: containerTheme
       });
-    } else if (onActionMenuOpenChange && isFlexibleUiFooterBlock(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-expect-error
-        size,
-        status,
-        onActionMenuOpenChange
-      });
     }
     // @ts-expect-error
     return /*#__PURE__*/React.cloneElement(child, {
@@ -168,7 +162,7 @@ const getLayeredLink = (testId, context, children, onClick) => {
 
 /**
  * A container is a hidden component that build the Flexible Smart Link.
- * All of the Flexible UI components are wrapped inside the container.
+ * All the Flexible UI components are wrapped inside the container.
  * It inherits the ui props from Card component and applies the custom styling
  * accordingly.
  * @internal
@@ -194,13 +188,33 @@ const Container = ({
   const context = useContext(FlexibleUiContext);
   const childrenOptions = getChildrenOptions(children, context);
   const [hoverCardCanOpen, setHoverCardCanOpen] = useState(true);
-  const onActionMenuOpenChange = useCallback(options => setHoverCardCanOpen(!options.isOpen), []);
-  const containerContent = jsx("div", {
+  const canShowHoverPreview = showHoverPreview && status === 'resolved';
+  const canShowAuthTooltip = showAuthTooltip && status === 'unauthorized';
+  const onMouseOver = useCallback(e => {
+    var _e$target$closest;
+    // Never show hover card on action or when action dropdown opens.
+    // The code below can be simplified by using :is() and :has()
+    // but the pseudo-class isn't support by Firefox yet.
+    const action =
+    // Any action button group (title/footer block)
+    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
+    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
+    const canOpen = canShowAuthTooltip && !action ||
+    // EDM-7060: For hover preview, also hide hover card on all elements
+    // except title element (link title)
+    canShowHoverPreview && !action && !e.target.closest(`[data-smart-element]:not([data-smart-element="${ElementName.Title}"])`);
+    if (hoverCardCanOpen !== canOpen) {
+      setHoverCardCanOpen(canOpen);
+    }
+  }, [canShowAuthTooltip, canShowHoverPreview, hoverCardCanOpen]);
+  const containerContent = jsx("div", _extends({
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-  if (context !== null && context !== void 0 && context.url && (showHoverPreview && status === 'resolved' || showAuthTooltip && status === 'unauthorized')) {
+  }, canShowHoverPreview || canShowAuthTooltip ? {
+    onMouseOver
+  } : undefined), clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,

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

@@ -86,10 +86,11 @@ const LozengeAction = ({
   }, [action.read, analytics, invoke, isLoaded, text]);
   const trigger = useCallback(props => jsx(LozengeActionTrigger, _extends({}, props, {
     appearance: selected.appearance,
+    isOpen: isOpen,
     showFeatureDiscovery: action === null || action === void 0 ? void 0 : action.showFeatureDiscovery,
     testId: testId,
     text: selected.text
-  })), [selected.appearance, selected.text, action === null || action === void 0 ? void 0 : action.showFeatureDiscovery, testId]);
+  })), [selected.appearance, selected.text, isOpen, action === null || action === void 0 ? void 0 : action.showFeatureDiscovery, testId]);
   const handleItemClick = useCallback(async (id, text, appearance) => {
     try {
       analytics === null || analytics === void 0 ? void 0 : analytics.ui.smartLinkLozengeActionListItemClickedEvent();

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js

@@ -8,6 +8,7 @@ import { triggerButtonStyles, triggerLozengeStyles } from '../styled';
 import FeatureDiscovery from '../feature-discovery';
 const LozengeActionTrigger = ({
   appearance,
+  isOpen,
   showFeatureDiscovery,
   testId,
   text,
@@ -30,6 +31,7 @@ const LozengeActionTrigger = ({
     type: "button"
   }, props, {
     css: triggerButtonStyles,
+    "data-action-open": isOpen,
     "data-testid": `${testId}--trigger`,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/dist/esm/version.json

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

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

@@ -133,7 +133,8 @@ var ActionGroup = function ActionGroup(_ref) {
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? jsx("div", {
     css: styles,
-    className: "actions-button-group"
+    className: "actions-button-group",
+    "data-action-open": isOpen
   }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
 };
 export default ActionGroup;

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -1,11 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React, { useContext, useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
-import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock, isFlexibleUiFooterBlock } from '../../../../utils/flexible';
+import { ElementName, MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
@@ -69,7 +70,7 @@ export var getContainerStyles = function getContainerStyles(size, hideBackground
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
-var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return React.Children.map(children, function (child) {
     // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
     if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
@@ -84,13 +85,6 @@ var renderChildren = function renderChildren(children, containerSize, containerT
           status: status,
           theme: containerTheme
         });
-      } else if (onActionMenuOpenChange && isFlexibleUiFooterBlock(child)) {
-        return /*#__PURE__*/React.cloneElement(child, {
-          // @ts-expect-error
-          size: size,
-          status: status,
-          onActionMenuOpenChange: onActionMenuOpenChange
-        });
       }
       // @ts-expect-error
       return /*#__PURE__*/React.cloneElement(child, {
@@ -127,7 +121,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
 
 /**
  * A container is a hidden component that build the Flexible Smart Link.
- * All of the Flexible UI components are wrapped inside the container.
+ * All the Flexible UI components are wrapped inside the container.
  * It inherits the ui props from Card component and applies the custom styling
  * accordingly.
  * @internal
@@ -166,15 +160,33 @@ var Container = function Container(_ref3) {
     _useState2 = _slicedToArray(_useState, 2),
     hoverCardCanOpen = _useState2[0],
     setHoverCardCanOpen = _useState2[1];
-  var onActionMenuOpenChange = useCallback(function (options) {
-    return setHoverCardCanOpen(!options.isOpen);
-  }, []);
-  var containerContent = jsx("div", {
+  var canShowHoverPreview = showHoverPreview && status === 'resolved';
+  var canShowAuthTooltip = showAuthTooltip && status === 'unauthorized';
+  var onMouseOver = useCallback(function (e) {
+    var _e$target$closest;
+    // Never show hover card on action or when action dropdown opens.
+    // The code below can be simplified by using :is() and :has()
+    // but the pseudo-class isn't support by Firefox yet.
+    var action =
+    // Any action button group (title/footer block)
+    e.target.closest('.actions-button-group') || ( // When action dropdown list is opened on action button group or lozenge action
+    (_e$target$closest = e.target.closest('[data-smart-link-container]')) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.querySelector('[data-action-open="true"]'));
+    var canOpen = canShowAuthTooltip && !action ||
+    // EDM-7060: For hover preview, also hide hover card on all elements
+    // except title element (link title)
+    canShowHoverPreview && !action && !e.target.closest("[data-smart-element]:not([data-smart-element=\"".concat(ElementName.Title, "\"])"));
+    if (hoverCardCanOpen !== canOpen) {
+      setHoverCardCanOpen(canOpen);
+    }
+  }, [canShowAuthTooltip, canShowHoverPreview, hoverCardCanOpen]);
+  var containerContent = jsx("div", _extends({
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick, showHoverPreview ? onActionMenuOpenChange : undefined));
-  if (context !== null && context !== void 0 && context.url && (showHoverPreview && status === 'resolved' || showAuthTooltip && status === 'unauthorized')) {
+  }, canShowHoverPreview || canShowAuthTooltip ? {
+    onMouseOver: onMouseOver
+  } : undefined), clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
     return jsx(HoverCard, {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js

@@ -140,11 +140,12 @@ var LozengeAction = function LozengeAction(_ref) {
   var trigger = useCallback(function (props) {
     return jsx(LozengeActionTrigger, _extends({}, props, {
       appearance: selected.appearance,
+      isOpen: isOpen,
       showFeatureDiscovery: action === null || action === void 0 ? void 0 : action.showFeatureDiscovery,
       testId: testId,
       text: selected.text
     }));
-  }, [selected.appearance, selected.text, action === null || action === void 0 ? void 0 : action.showFeatureDiscovery, testId]);
+  }, [selected.appearance, selected.text, isOpen, action === null || action === void 0 ? void 0 : action.showFeatureDiscovery, testId]);
   var handleItemClick = useCallback( /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id, text, appearance) {
       var updateAction, request;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "showFeatureDiscovery", "testId", "text", "triggerRef"];
+var _excluded = ["appearance", "isOpen", "showFeatureDiscovery", "testId", "text", "triggerRef"];
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { useCallback, useMemo, useState } from 'react';
@@ -11,6 +11,7 @@ import { triggerButtonStyles, triggerLozengeStyles } from '../styled';
 import FeatureDiscovery from '../feature-discovery';
 var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
   var appearance = _ref.appearance,
+    isOpen = _ref.isOpen,
     showFeatureDiscovery = _ref.showFeatureDiscovery,
     testId = _ref.testId,
     text = _ref.text,
@@ -41,6 +42,7 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     type: "button"
   }, props, {
     css: triggerButtonStyles,
+    "data-action-open": isOpen,
     "data-testid": "".concat(testId, "--trigger"),
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/dist/types/view/FlexibleCard/components/container/index.d.ts

@@ -6,7 +6,7 @@ import { ChildrenOptions, ContainerProps } from './types';
 export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean, clickableContainer: boolean, childrenOptions: ChildrenOptions) => SerializedStyles;
 /**
  * A container is a hidden component that build the Flexible Smart Link.
- * All of the Flexible UI components are wrapped inside the container.
+ * All the Flexible UI components are wrapped inside the container.
  * It inherits the ui props from Card component and applies the custom styling
  * accordingly.
  * @internal

package/dist/types/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/type.d.ts

@@ -3,6 +3,7 @@ import type { ThemeAppearance } from '@atlaskit/lozenge';
 import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
 export type LozengeActionTriggerProps = {
     appearance?: ThemeAppearance;
+    isOpen?: boolean;
     showFeatureDiscovery?: boolean;
     testId?: string;
     text: string | React.ReactNode;

package/dist/types-ts4.5/view/FlexibleCard/components/container/index.d.ts

@@ -6,7 +6,7 @@ import { ChildrenOptions, ContainerProps } from './types';
 export declare const getContainerStyles: (size: SmartLinkSize, hideBackground: boolean, hideElevation: boolean, hidePadding: boolean, clickableContainer: boolean, childrenOptions: ChildrenOptions) => SerializedStyles;
 /**
  * A container is a hidden component that build the Flexible Smart Link.
- * All of the Flexible UI components are wrapped inside the container.
+ * All the Flexible UI components are wrapped inside the container.
  * It inherits the ui props from Card component and applies the custom styling
  * accordingly.
  * @internal

package/dist/types-ts4.5/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/type.d.ts

@@ -3,6 +3,7 @@ import type { ThemeAppearance } from '@atlaskit/lozenge';
 import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
 export type LozengeActionTriggerProps = {
     appearance?: ThemeAppearance;
+    isOpen?: boolean;
     showFeatureDiscovery?: boolean;
     testId?: string;
     text: string | React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.6.0",
+  "version": "26.6.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,19 +43,19 @@
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
     "@atlaskit/link-analytics": "^8.0.2",
-    "@atlaskit/link-client-extension": "^1.4.0",
+    "@atlaskit/link-client-extension": "^1.5.0",
     "@atlaskit/linking-common": "^3.1.0",
-    "@atlaskit/linking-types": "^7.0.0",
+    "@atlaskit/linking-types": "^8.0.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
-    "@atlaskit/media-common": "^7.0.0",
+    "@atlaskit/media-common": "^7.1.0",
     "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/popup": "^1.8.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.10.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",