@atlaskit/smart-card 34.6.2 → 34.6.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/smart-card
 
+## 34.6.3
+
+### Patch Changes
+
+- [#106497](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106497)
+  [`d56401d90b5e5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d56401d90b5e5) -
+  [ux] Migrate flexible card components to compiled and fix blockcard
+
 ## 34.6.2
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

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

package/dist/cjs/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/cjs/view/BlockCard/views/ResolvedView.js

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

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactMagneticDi = require("react-magnetic-di");
+var _primitives = require("@atlaskit/primitives");
+var _constants = require("../../../../../constants");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+var Actions = _interopRequireWildcard(require("../../actions"));
+var _utils = require("../../utils");
+var _actionFooter = require("./action-footer");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var ignoreContainerPaddingStyles = (0, _react2.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 = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    message = _useState2[0],
+    setMessage = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var onLoadingChange = (0, _react.useCallback)(function (isLoading) {
+    setIsLoading(isLoading);
+  }, [setIsLoading]);
+  var padding = !(ui !== null && ui !== void 0 && ui.hidePadding) ? (0, _utils.getPrimitivesPaddingSpaceBySize)((ui === null || ui === void 0 ? void 0 : ui.size) || _constants.SmartLinkSize.Medium) : undefined;
+  var _onClick = (0, _react.useCallback)(function (name) {
+    setMessage(undefined);
+    onClickCallback === null || onClickCallback === void 0 || onClickCallback(name);
+  }, [onClickCallback]);
+  var onError = (0, _react.useCallback)(function (error) {
+    setMessage(error);
+  }, []);
+  var actions = (0, _react.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 ? (0, _react2.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: (0, _primitives.xcss)({
+          paddingInline: padding
+        }),
+        hideTooltip: isLoading
+      }) : null;
+    });
+  }, [context === null || context === void 0 ? void 0 : context.actions, _onClick, onError, padding, size, spaceInline, isLoading, onLoadingChange]);
+  return actions ? (0, _react2.jsx)("div", {
+    css: ignoreContainerPaddingStyles,
+    ref: blockRef,
+    "data-testid": testId
+  }, actions, (0, _react2.jsx)(_actionFooter.ActionFooter, {
+    message: message,
+    paddingInline: padding,
+    testId: testId
+  })) : null;
+};
+var _default = exports.default = ActionBlockOld;

package/dist/cjs/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/cjs/view/FlexibleCard/components/blocks/action-block/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,36 +7,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _reactMagneticDi = require("react-magnetic-di");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../constants");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var Actions = _interopRequireWildcard(require("../../actions"));
 var _utils = require("../../utils");
 var _actionFooter = require("./action-footer");
+var _ActionBlockOld = _interopRequireDefault(require("./ActionBlockOld"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var ignoreContainerPaddingStyles = (0, _react2.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 ignoreContainerPaddingStyles = null;
 var DEFAULT_SORT_ORDER = ['PreviewAction', 'CopyLinkAction', 'AISummaryAction'];
 var sort = function sort(a, b) {
   var idxA = DEFAULT_SORT_ORDER.indexOf(a);
@@ -48,7 +36,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,
@@ -84,7 +72,7 @@ var ActionBlock = function ActionBlock(_ref) {
     arr.sort(sort);
     return arr.map(function (name) {
       var Action = name in Actions ? Actions[name] : undefined;
-      return Action ? (0, _react2.jsx)(Action, {
+      return Action ? /*#__PURE__*/React.createElement(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
@@ -103,14 +91,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 ? (0, _react2.jsx)("div", {
-    css: ignoreContainerPaddingStyles,
+  return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
-    "data-testid": testId
-  }, actions, (0, _react2.jsx)(_actionFooter.ActionFooter, {
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g"])
+  }, actions, /*#__PURE__*/React.createElement(_actionFooter.ActionFooter, {
     message: message,
     paddingInline: padding,
     testId: testId
   })) : null;
 };
+var ActionBlock = function ActionBlock(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionBlockNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_ActionBlockOld.default, props);
+  }
+};
 var _default = exports.default = ActionBlock;

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

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _reactMagneticDi = require("react-magnetic-di");
+var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
+var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _constants = require("../../../../../constants");
+var _messages = require("../../../../../messages");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+var _utils = require("../../utils");
+var _utils2 = require("../utils");
+var _actionGroupItem = _interopRequireDefault(require("./action-group-item"));
+var _excluded = ["triggerRef"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var styles = (0, _react2.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] : _constants.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 (0, _react2.jsx)(_actionGroupItem.default, {
+      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 ? _constants.SmartLinkSize.Medium : _ref$size,
+    appearance = _ref.appearance,
+    _ref$visibleButtonsNu = _ref.visibleButtonsNum,
+    visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
+    onDropdownOpenChange = _ref.onDropdownOpenChange;
+  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var renderableActionItems = (0, _react.useMemo)(function () {
+    return (0, _utils2.filterActionItems)(items, context);
+  }, [context, items]);
+  var isMoreThenTwoItems = renderableActionItems.length > visibleButtonsNum;
+  var onOpenChange = (0, _react.useCallback)(function (attrs) {
+    setIsOpen(attrs.isOpen);
+    if (onDropdownOpenChange) {
+      onDropdownOpenChange(attrs.isOpen);
+    }
+  }, [onDropdownOpenChange]);
+  var onActionItemClick = (0, _react.useCallback)(function () {
+    if (isOpen) {
+      onOpenChange({
+        isOpen: false
+      });
+    }
+  }, [isOpen, onOpenChange]);
+  var actionButtons = (0, _react.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 = (0, _react.useMemo)(function () {
+    var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
+    if (actionItems.length > 0) {
+      var spacing = _utils.sizeToButtonSpacing[size];
+      var moreIcon = (0, _react2.jsx)(_showMoreHorizontalMore.default, {
+        label: "more",
+        color: "currentColor"
+      });
+      var formatMessage = (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions);
+      return (0, _react2.jsx)(_dropdownMenu.default, {
+        isOpen: isOpen,
+        onOpenChange: onOpenChange,
+        trigger: function trigger(_ref2) {
+          var triggerRef = _ref2.triggerRef,
+            props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+          return (0, _react2.jsx)(_tooltip.default, {
+            content: formatMessage,
+            hideTooltipOnClick: true,
+            testId: "action-group-more-button-tooltip",
+            tag: "span"
+          }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, 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 ? (0, _react2.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
+  }, (0, _react2.jsx)(_buttonGroup.default, null, actionButtons, moreActionDropdown)) : null;
+};
+var _default = exports.default = ActionGroupOld;

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

@@ -9,15 +9,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var Actions = _interopRequireWildcard(require("../../../actions"));
 var _excluded = ["name", "hideContent", "hideIcon", "onClick", "isDisabled"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -56,7 +50,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
   if (item !== null && item !== void 0 && item.entryPointWrapper) {
     actionProps.wrapper = item.entryPointWrapper;
   }
-  return (0, _react2.jsx)(Action, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(Action, (0, _extends2.default)({
     asDropDownItem: asDropDownItems,
     size: size,
     appearance: appearance,

package/dist/cjs/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)}

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

@@ -1,21 +1,26 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _reactMagneticDi = require("react-magnetic-di");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
 var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
@@ -23,25 +28,11 @@ var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _utils = require("../../utils");
 var _utils2 = require("../utils");
 var _actionGroupItem = _interopRequireDefault(require("./action-group-item"));
+var _ActionGroupOld = _interopRequireDefault(require("./ActionGroupOld"));
 var _excluded = ["triggerRef"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var styles = (0, _react2.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)"
-    }
-  }
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = null;
 var renderActionItems = function renderActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.SmartLinkSize.Medium;
@@ -49,7 +40,7 @@ var renderActionItems = function renderActionItems() {
   var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
   var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
   return items.map(function (item, idx) {
-    return (0, _react2.jsx)(_actionGroupItem.default, {
+    return /*#__PURE__*/React.createElement(_actionGroupItem.default, {
       item: item,
       key: idx,
       size: size,
@@ -67,7 +58,7 @@ var renderActionItems = function renderActionItems() {
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-var ActionGroup = function ActionGroup(_ref) {
+var ActionGroupNew = function ActionGroupNew(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     _ref$size = _ref.size,
@@ -107,23 +98,23 @@ var ActionGroup = function ActionGroup(_ref) {
     var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
     if (actionItems.length > 0) {
       var spacing = _utils.sizeToButtonSpacing[size];
-      var moreIcon = (0, _react2.jsx)(_showMoreHorizontalMore.default, {
+      var moreIcon = /*#__PURE__*/React.createElement(_showMoreHorizontalMore.default, {
         label: "more",
         color: "currentColor"
       });
-      var formatMessage = (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions);
-      return (0, _react2.jsx)(_dropdownMenu.default, {
+      var formatMessage = /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.messages.more_actions);
+      return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
         isOpen: isOpen,
         onOpenChange: onOpenChange,
         trigger: function trigger(_ref2) {
           var triggerRef = _ref2.triggerRef,
             props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-          return (0, _react2.jsx)(_tooltip.default, {
+          return /*#__PURE__*/React.createElement(_tooltip.default, {
             content: formatMessage,
             hideTooltipOnClick: true,
             testId: "action-group-more-button-tooltip",
             tag: "span"
-          }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+          }, /*#__PURE__*/React.createElement(_standardButton.default, (0, _extends2.default)({}, props, {
             spacing: spacing,
             testId: "action-group-more-button",
             iconBefore: moreIcon,
@@ -136,12 +127,17 @@ var ActionGroup = function ActionGroup(_ref) {
     }
     return null;
   }, [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
+  return renderableActionItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "actions-button-group",
+    className: (0, _runtime.ax)(["_1e0c116y _vwz41j6v _dzc21h6o _1ilq1i6y", "actions-button-group"]),
     "data-action-open": isOpen
-  }, (0, _react2.jsx)(_buttonGroup.default, null, actionButtons, moreActionDropdown)) : null;
+  }, /*#__PURE__*/React.createElement(_buttonGroup.default, null, actionButtons, moreActionDropdown)) : null;
+};
+var ActionGroup = function ActionGroup(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_ActionGroupOld.default, props);
+  }
 };
 var _default = exports.default = ActionGroup;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/FeatureDiscoveryOld.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _storageClient = require("@atlaskit/frontend-utilities/storage-client");
+var _styled = require("./styled");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
+var LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-ai-summarise';
+var LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+var LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+var LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000;
+/**
+ * This is a hacky solution to help with the feature discovery.
+ * This implementation must be removed once the experiment is completed.
+ * Cleanup on https://product-fabric.atlassian.net/browse/EDM-9649
+ */
+var FeatureDiscoveryOld = function FeatureDiscoveryOld(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  var renderedTime = (0, _react.useRef)();
+  var storageClient = (0, _react.useMemo)(function () {
+    return new _storageClient.StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+  }, []);
+  var discovered = (0, _react.useMemo)(function () {
+    try {
+      return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
+    } catch (_unused) {
+      // If localStorage is not available, don't show feature discovery component. Treat it as 'discovered'.
+      return true;
+    }
+  }, [storageClient]);
+  (0, _react.useEffect)(function () {
+    renderedTime.current = Date.now();
+    return function () {
+      if (!discovered && renderedTime.current) {
+        var duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          try {
+            storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+          } catch (_unused2) {
+            // silent error
+          }
+        }
+      }
+    };
+  }, [storageClient, discovered]);
+  var component = (0, _react.useMemo)(function () {
+    if (!discovered) {
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        (0, _react2.jsx)("span", {
+          css: (0, _styled.getPulseStyles)(),
+          "data-testid": "".concat(testId, "-discovery")
+        }, children)
+      );
+    }
+  }, [children, discovered, testId]);
+  return component !== null && component !== void 0 ? component : children;
+};
+var _default = exports.default = FeatureDiscoveryOld;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/index.compiled.css

@@ -0,0 +1,4 @@
+
+._2rko1l7b{border-radius:3px}
+._y44v1kew{animation:var(--_d0o24t)}._16qs10kv{box-shadow:var(--_zsb6fb)}
+._1e0c116y{display:inline-flex}