@atlaskit/smart-card 34.6.2 → 34.6.4

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

@@ -1,4 +1,5 @@
 /* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -11,10 +12,10 @@ const alignmentStyleMap = {
   left: "_1dthv2br _r291v2br _1bah1y6m _y3gn1e5h"
 };
 const baseStyleBySize = {
-  xlarge: "_zulp147b _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
-  large: "_zulp1e9d _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
-  medium: "_zulpcxkx _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf",
-  small: "_zulppdf9 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf"
+  xlarge: "_zulp147b _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz41j6v",
+  large: "_zulp1e9d _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz41j6v",
+  medium: "_zulpcxkx _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz41j6v",
+  small: "_zulppdf9 _1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _vwz41j6v"
 };
 const baseStyleByDirection = {
   horizontal: "_2lx2vrvc _4cvr1h6o",
@@ -48,6 +49,7 @@ const gapStylesRight = {
   medium: "_24rccxkx _3dveidpf",
   small: "_24rcpdf9 _3dveidpf"
 };
+const minWidthStyle = null;
 
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
@@ -66,13 +68,12 @@ const ElementGroupNew = ({
   position = SmartLinkPosition.Center,
   className
 }) => {
-  const totalCss = [baseStyleBySize[size], baseStyleByDirection[direction], baseStyle, alignmentStyleMap[align], null, widthStyle[width], direction === SmartLinkDirection.Horizontal ? horizontalStyleBase : {}, direction === SmartLinkDirection.Horizontal ? horizontalStyleByHeight[size] : {}, direction === SmartLinkDirection.Horizontal ? SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size] : {}, positionStyle[position]];
   return /*#__PURE__*/React.createElement("div", {
     "data-smart-element-group": true,
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax([baseStyleBySize[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], direction === SmartLinkDirection.Horizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", direction === SmartLinkDirection.Horizontal && "", SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size], positionStyle[position], className])
+    className: ax([baseStyleBySize[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], direction === SmartLinkDirection.Horizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", direction === SmartLinkDirection.Horizontal && horizontalStyleByHeight[size], direction === SmartLinkDirection.Horizontal && align === SmartLinkAlignment.Left && gapStylesLeft[size], direction === SmartLinkDirection.Horizontal && align === SmartLinkAlignment.Right && gapStylesRight[size], positionStyle[position], className])
   }, renderChildren(children, size));
 };
 const ElementGroup = props => {

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

@@ -47,7 +47,8 @@ const FooterBlockResolvedView = props => {
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
-    appearance: "default"
+    appearance: "default",
+    size: size
   })) : null);
 };
 const FooterBlockResolvedViewExported = props => {

package/dist/es2019/view/FlexibleCard/components/blocks/metadata-block/index.compiled.css

@@ -1,4 +1,3 @@
-._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
 ._18m915vq{overflow-y:hidden}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0ccj1k{display:-webkit-box}
@@ -7,4 +6,6 @@
 ._1yyjcs5v{-webkit-line-clamp:2}
 ._1yyjkb7n{-webkit-line-clamp:1}
 ._sudp1e54{-webkit-box-orient:vertical}
+._vwz41k8s{line-height:1.5rem}
+._vwz41m1q{line-height:1.75rem}
 @supports not (-webkit-line-clamp:1){._102k1k7u{max-height:3.5rem}._102k1wto{max-height:3rem}}

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

@@ -3,6 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
@@ -17,10 +19,10 @@ const truncateStyles = {
   '2': "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjcs5v _sudp1e54"
 };
 const sizeStyles = {
-  xlarge: "_11c81oud _102k1k7u",
-  large: "_11c81oud _102k1k7u",
-  medium: "_11c81oud _102k1wto",
-  small: "_11c81oud _102k1wto"
+  xlarge: "_vwz41m1q _102k1k7u",
+  large: "_vwz41m1q _102k1k7u",
+  medium: "_vwz41k8s _102k1wto",
+  small: "_vwz41k8s _102k1wto"
 };
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
@@ -62,11 +64,13 @@ const MetadataBlock = ({
     align: SmartLinkAlignment.Left,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible,
+    size: size,
     className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,
     width: SmartLinkWidth.Flexible,
+    size: size,
     className: ax([truncateStyles[maxLinesTotal], sizeStyles[size]])
   }, secondaryElements));
 };

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

@@ -101,7 +101,9 @@ const TitleBlockNew = ({
     title: title,
     metadataPosition: metadataPosition,
     hideIcon: hideIcon,
-    icon: icon
+    icon: icon,
+    size: props.size,
+    theme: theme
   }));
 };
 const TitleBlock = props => {

package/dist/es2019/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.6.2",
+  packageVersion: "34.6.4",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/RelatedLinksModal/components/related-link-item/index.compiled.css

@@ -0,0 +1,4 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulputpp{gap:var(--ds-space-150,9pt)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}

package/dist/es2019/view/RelatedLinksModal/components/related-link-item/index.js

@@ -1,6 +1,10 @@
-import React from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
+import { SmartLinkStatus } from '../../../../constants';
 import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
 import RelatedLinkItemOld from './RelatedLinkItemOld';
 const hoverStyles = xcss({
@@ -9,12 +13,9 @@ const hoverStyles = xcss({
     borderRadius: 'border.radius.100',
     marginInline: 'space.negative.100',
     paddingInline: 'space.100'
-  },
-  paddingTop: 'space.100',
-  paddingBottom: 'space.100',
-  gap: 'space.150',
-  font: 'font.body.small'
+  }
 });
+const relatedLinkItemStyles = null;
 const RelatedLinkItem = ({
   url,
   testId
@@ -43,7 +44,11 @@ const RelatedLinkItem = ({
     hideTitleTooltip: true,
     position: SmartLinkPosition.Center,
     subtitle: subtitle,
-    anchorTarget: "_blank"
+    anchorTarget: "_blank",
+    size: ui.size,
+    theme: ui.theme,
+    status: SmartLinkStatus.Resolved,
+    className: ax(["_zulputpp _11c81vlj _ca0qu2gc _n3tdu2gc"])
   })));
 };
 const RelatedLinkItemExported = props => {

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.6.2"
+  packageVersion: "34.6.4"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/ResolvedView.compiled.css

@@ -3,4 +3,5 @@
 ._1sxbcxkx span[data-smart-element-avatar-group]>ul{margin-right:var(--ds-space-100,.5rem)}
 ._4t3i1k8s{height:1.5rem}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
+._i8d01j6v [data-smart-element-group]{line-height:1rem}
 ._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -76,12 +76,12 @@ var ResolvedView = function ResolvedView(_ref) {
     primary: topMetadata,
     maxLines: 1,
     status: SmartLinkStatus.Resolved,
-    className: ax(["_wwyvidpf _1sxbcxkx"])
+    className: ax(["_wwyvidpf _1sxbcxkx _i8d01j6v"])
   }), /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomMetadata,
     maxLines: 1,
     status: SmartLinkStatus.Resolved,
-    className: ax(["_wwyvidpf _1sxbcxkx"])
+    className: ax(["_wwyvidpf _1sxbcxkx _i8d01j6v"])
   }), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
     onError: function onError() {
       setIsPreviewBlockErrored(true);

package/dist/esm/view/FlexibleCard/components/blocks/action-block/ActionBlockOld.js

@@ -0,0 +1,105 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { di } from 'react-magnetic-di';
+import { xcss } from '@atlaskit/primitives';
+import { SmartLinkSize } from '../../../../../constants';
+import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import * as Actions from '../../actions';
+import { getPrimitivesPaddingSpaceBySize } from '../../utils';
+import { ActionFooter } from './action-footer';
+var ignoreContainerPaddingStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  flexGrow: 1,
+  width: '100%',
+  // We have to find a better way to ignore container padding
+  // This has become more and more of a common use case.
+  marginLeft: 'calc(var(--container-gap-left) * -1)',
+  marginRight: 'calc(var(--container-gap-right) * -1)'
+});
+var DEFAULT_SORT_ORDER = ['PreviewAction', 'CopyLinkAction', 'AISummaryAction'];
+var sort = function sort(a, b) {
+  var idxA = DEFAULT_SORT_ORDER.indexOf(a);
+  var idxB = DEFAULT_SORT_ORDER.indexOf(b);
+  if (idxA === -1) {
+    idxA = DEFAULT_SORT_ORDER.length;
+  }
+  if (idxB === -1) {
+    idxB = DEFAULT_SORT_ORDER.length;
+  }
+  return idxA - idxB;
+};
+var ActionBlockOld = function ActionBlockOld(_ref) {
+  var blockRef = _ref.blockRef,
+    onClickCallback = _ref.onClick,
+    size = _ref.size,
+    spaceInline = _ref.spaceInline,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-action' : _ref$testId;
+  var context = useFlexibleUiContext();
+  var ui = useFlexibleUiOptionContext();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    message = _useState2[0],
+    setMessage = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var onLoadingChange = useCallback(function (isLoading) {
+    setIsLoading(isLoading);
+  }, [setIsLoading]);
+  var padding = !(ui !== null && ui !== void 0 && ui.hidePadding) ? getPrimitivesPaddingSpaceBySize((ui === null || ui === void 0 ? void 0 : ui.size) || SmartLinkSize.Medium) : undefined;
+  var _onClick = useCallback(function (name) {
+    setMessage(undefined);
+    onClickCallback === null || onClickCallback === void 0 || onClickCallback(name);
+  }, [onClickCallback]);
+  var onError = useCallback(function (error) {
+    setMessage(error);
+  }, []);
+  var actions = useMemo(function () {
+    if (!(context !== null && context !== void 0 && context.actions)) {
+      return;
+    }
+    var arr = Object.keys(context.actions);
+    arr.sort(sort);
+    return arr.map(function (name) {
+      var Action = name in Actions ? Actions[name] : undefined;
+      return Action ? jsx(Action, {
+        as: "stack-item",
+        spaceInline: spaceInline,
+        key: name,
+        onClick: function onClick() {
+          return _onClick(name);
+        },
+        onError: onError,
+        onLoadingChange: onLoadingChange,
+        size: size
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        ,
+        xcss: xcss({
+          paddingInline: padding
+        }),
+        hideTooltip: isLoading
+      }) : null;
+    });
+  }, [context === null || context === void 0 ? void 0 : context.actions, _onClick, onError, padding, size, spaceInline, isLoading, onLoadingChange]);
+  return actions ? jsx("div", {
+    css: ignoreContainerPaddingStyles,
+    ref: blockRef,
+    "data-testid": testId
+  }, actions, jsx(ActionFooter, {
+    message: message,
+    paddingInline: padding,
+    testId: testId
+  })) : null;
+};
+export default ActionBlockOld;

package/dist/esm/view/FlexibleCard/components/blocks/action-block/index.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._18u01ivi{margin-left:calc(var(--container-gap-left)*-1)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2hwxc10g{margin-right:calc(var(--container-gap-right)*-1)}
+._2lx21bp4{flex-direction:column}
+._vchhusvi{box-sizing:border-box}

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

@@ -1,30 +1,19 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { xcss } from '@atlaskit/primitives';
 import { SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
 import { getPrimitivesPaddingSpaceBySize } from '../../utils';
 import { ActionFooter } from './action-footer';
-var ignoreContainerPaddingStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  boxSizing: 'border-box',
-  flexGrow: 1,
-  width: '100%',
-  // We have to find a better way to ignore container padding
-  // This has become more and more of a common use case.
-  marginLeft: 'calc(var(--container-gap-left) * -1)',
-  marginRight: 'calc(var(--container-gap-right) * -1)'
-});
+import ActionBlockOld from './ActionBlockOld';
+var ignoreContainerPaddingStyles = null;
 var DEFAULT_SORT_ORDER = ['PreviewAction', 'CopyLinkAction', 'AISummaryAction'];
 var sort = function sort(a, b) {
   var idxA = DEFAULT_SORT_ORDER.indexOf(a);
@@ -37,7 +26,7 @@ var sort = function sort(a, b) {
   }
   return idxA - idxB;
 };
-var ActionBlock = function ActionBlock(_ref) {
+var ActionBlockNew = function ActionBlockNew(_ref) {
   var blockRef = _ref.blockRef,
     onClickCallback = _ref.onClick,
     size = _ref.size,
@@ -73,7 +62,7 @@ var ActionBlock = function ActionBlock(_ref) {
     arr.sort(sort);
     return arr.map(function (name) {
       var Action = name in Actions ? Actions[name] : undefined;
-      return Action ? jsx(Action, {
+      return Action ? /*#__PURE__*/React.createElement(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
@@ -92,14 +81,21 @@ var ActionBlock = function ActionBlock(_ref) {
       }) : null;
     });
   }, [context === null || context === void 0 ? void 0 : context.actions, _onClick, onError, padding, size, spaceInline, isLoading, onLoadingChange]);
-  return actions ? jsx("div", {
-    css: ignoreContainerPaddingStyles,
+  return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
-    "data-testid": testId
-  }, actions, jsx(ActionFooter, {
+    "data-testid": testId,
+    className: ax(["_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g"])
+  }, actions, /*#__PURE__*/React.createElement(ActionFooter, {
     message: message,
     paddingInline: padding,
     testId: testId
   })) : null;
 };
+var ActionBlock = function ActionBlock(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionBlockNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ActionBlockOld, props);
+  }
+};
 export default ActionBlock;

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

@@ -0,0 +1,141 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["triggerRef"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/standard-button';
+import DropdownMenu from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import Tooltip from '@atlaskit/tooltip';
+import { SmartLinkSize } from '../../../../../constants';
+import { messages } from '../../../../../messages';
+import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import { sizeToButtonSpacing } from '../../utils';
+import { filterActionItems } from '../utils';
+import ActionGroupItem from './action-group-item';
+var styles = css({
+  display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '1rem',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> div': {
+    alignItems: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    'button:focus-visible': {
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
+    }
+  }
+});
+var renderActionItems = function renderActionItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  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;
+  return items.map(function (item, idx) {
+    return jsx(ActionGroupItem, {
+      item: item,
+      key: idx,
+      size: size,
+      appearance: appearance,
+      asDropDownItems: asDropDownItems,
+      onActionItemClick: onActionItemClick
+    });
+  });
+};
+
+/**
+ * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
+ * preferences.
+ * @internal
+ * @param {ActionGroupProps} ActionGroupProps
+ * @see Action
+ */
+var ActionGroupOld = function ActionGroupOld(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+    appearance = _ref.appearance,
+    _ref$visibleButtonsNu = _ref.visibleButtonsNum,
+    visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
+    onDropdownOpenChange = _ref.onDropdownOpenChange;
+  var context = useFlexibleUiContext();
+  var ui = useFlexibleUiOptionContext();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var renderableActionItems = useMemo(function () {
+    return filterActionItems(items, context);
+  }, [context, items]);
+  var isMoreThenTwoItems = renderableActionItems.length > visibleButtonsNum;
+  var onOpenChange = useCallback(function (attrs) {
+    setIsOpen(attrs.isOpen);
+    if (onDropdownOpenChange) {
+      onDropdownOpenChange(attrs.isOpen);
+    }
+  }, [onDropdownOpenChange]);
+  var onActionItemClick = useCallback(function () {
+    if (isOpen) {
+      onOpenChange({
+        isOpen: false
+      });
+    }
+  }, [isOpen, onOpenChange]);
+  var actionButtons = useMemo(function () {
+    var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(0, visibleButtonsNum - 1) : renderableActionItems;
+    return renderActionItems(actionItems, size, appearance, false, onActionItemClick);
+  }, [appearance, isMoreThenTwoItems, onActionItemClick, renderableActionItems, size, visibleButtonsNum]);
+  var moreActionDropdown = useMemo(function () {
+    var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
+    if (actionItems.length > 0) {
+      var spacing = sizeToButtonSpacing[size];
+      var moreIcon = jsx(MoreIcon, {
+        label: "more",
+        color: "currentColor"
+      });
+      var formatMessage = jsx(FormattedMessage, messages.more_actions);
+      return jsx(DropdownMenu, {
+        isOpen: isOpen,
+        onOpenChange: onOpenChange,
+        trigger: function trigger(_ref2) {
+          var triggerRef = _ref2.triggerRef,
+            props = _objectWithoutProperties(_ref2, _excluded);
+          return jsx(Tooltip, {
+            content: formatMessage,
+            hideTooltipOnClick: true,
+            testId: "action-group-more-button-tooltip",
+            tag: "span"
+          }, jsx(Button, _extends({}, props, {
+            spacing: spacing,
+            testId: "action-group-more-button",
+            iconBefore: moreIcon,
+            ref: triggerRef
+          })));
+        },
+        testId: "action-group-dropdown",
+        zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
+      }, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
+    }
+    return null;
+  }, [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
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "actions-button-group",
+    "data-action-open": isOpen
+  }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;
+};
+export default ActionGroupOld;

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

@@ -4,14 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["name", "hideContent", "hideIcon", "onClick", "isDisabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { useCallback } from 'react';
 import * as Actions from '../../../actions';
 var ActionGroupItem = function ActionGroupItem(_ref) {
   var item = _ref.item,
@@ -47,7 +40,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
   if (item !== null && item !== void 0 && item.entryPointWrapper) {
     actionProps.wrapper = item.entryPointWrapper;
   }
-  return jsx(Action, _extends({
+  return /*#__PURE__*/React.createElement(Action, _extends({
     asDropDownItem: asDropDownItems,
     size: size,
     appearance: appearance,

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

@@ -0,0 +1,4 @@
+._1e0c116y{display:inline-flex}
+._dzc21h6o >div{align-items:center}
+._vwz41j6v{line-height:1rem}
+._1ilq1i6y >div button:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}