@atlaskit/smart-card 25.5.1 → 25.5.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 25.5.2
+
+### Patch Changes
+
+- [`c2aab8ee44b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2aab8ee44b) - Add lozenge dropdown action to Flexible Smart Link based element lozenge
+
 ## 25.5.1
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -78,7 +78,7 @@ var LozengeAction = function LozengeAction(_ref) {
               return invoke(action.read, _extractLozengeActionItems.default);
             case 6:
               responseItems = _context.sent;
-              validItems = validateItems(responseItems, text);
+              validItems = typeof text === 'string' ? validateItems(responseItems, text) : responseItems;
               setItems(validItems);
               setIsLoaded(true);
               if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -8,7 +8,7 @@ exports.triggerLozengeStyles = exports.triggerButtonStyles = exports.dropdownIte
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
-var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: -2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
+var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
 exports.triggerButtonStyles = triggerButtonStyles;
 var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
 exports.triggerLozengeStyles = triggerLozengeStyles;

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

@@ -11,13 +11,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _lozengeAction = _interopRequireDefault(require("../../common/lozenge-action"));
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: visible;\n"])));
 
 /**
  * A base element that displays a Lozenge.
@@ -26,7 +26,8 @@ var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0,
  * @see State
  */
 var Lozenge = function Lozenge(_ref) {
-  var _ref$appearance = _ref.appearance,
+  var action = _ref.action,
+    _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
     onClick = _ref.onClick,
@@ -52,6 +53,16 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
+  var lozenge = action ? (0, _react2.jsx)(_lozengeAction.default, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text
+  }) : (0, _react2.jsx)(_lozenge.default, {
+    appearance: appearance,
+    isBold: isBold,
+    testId: "".concat(testId, "-lozenge")
+  }, text);
   return (0, _react2.jsx)("span", {
     css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
@@ -62,14 +73,7 @@ var Lozenge = function Lozenge(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     tabIndex: onClick ? 0 : -1
-  }, (0, _react2.jsx)(_lozenge.default, {
-    appearance: appearance,
-    isBold: isBold,
-    testId: "".concat(testId, "-lozenge")
-  }, text, onClick && (0, _react2.jsx)(_chevronDown.default, {
-    label: "action",
-    testId: "".concat(testId, "-action")
-  })));
+  }, lozenge);
 };
 var _default = Lozenge;
 exports.default = _default;

package/dist/es2019/version.json

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

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

@@ -35,7 +35,7 @@ const LozengeAction = ({
       try {
         setIsLoading(true);
         const responseItems = await invoke(action.read, extractLozengeActionItems);
-        const validItems = validateItems(responseItems, text);
+        const validItems = typeof text === 'string' ? validateItems(responseItems, text) : responseItems;
         setItems(validItems);
         setIsLoaded(true);
         if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -14,7 +14,7 @@ export const triggerButtonStyles = css`
   text-transform: unset;
 
   border: 2px solid transparent;
-  margin: -2px;
+  margin: 2px;
 
   &:focus-visible,
   &:focus-within,

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

@@ -2,27 +2,13 @@
 import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import LozengeAction from '../../common/lozenge-action';
 const styles = css`
   display: inline-flex;
   line-height: inherit;
 `;
 const actionStyles = css`
-  > span > span {
-    display: inline-flex;
-    align-items: center;
-    margin-right: -2px;
-  }
-
-  svg {
-    width: unset;
-    height: unset;
-    margin: -4px 0;
-  }
-
-  :hover {
-    cursor: pointer;
-  }
+  overflow: visible;
 `;
 
 /**
@@ -32,6 +18,7 @@ const actionStyles = css`
  * @see State
  */
 const Lozenge = ({
+  action,
   appearance = 'default',
   name,
   onClick,
@@ -50,6 +37,16 @@ const Lozenge = ({
   if (!text) {
     return null;
   }
+  const lozenge = action ? jsx(LozengeAction, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text
+  }) : jsx(AtlaskitLozenge, {
+    appearance: appearance,
+    isBold: isBold,
+    testId: `${testId}-lozenge`
+  }, text);
   return jsx("span", {
     css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
@@ -60,13 +57,6 @@ const Lozenge = ({
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     tabIndex: onClick ? 0 : -1
-  }, jsx(AtlaskitLozenge, {
-    appearance: appearance,
-    isBold: isBold,
-    testId: `${testId}-lozenge`
-  }, text, onClick && jsx(ChevronDownIcon, {
-    label: "action",
-    testId: `${testId}-action`
-  })));
+  }, lozenge);
 };
 export default Lozenge;

package/dist/esm/version.json

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

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

@@ -70,7 +70,7 @@ var LozengeAction = function LozengeAction(_ref) {
               return invoke(action.read, extractLozengeActionItems);
             case 6:
               responseItems = _context.sent;
-              validItems = validateItems(responseItems, text);
+              validItems = typeof text === 'string' ? validateItems(responseItems, text) : responseItems;
               setItems(validItems);
               setIsLoaded(true);
               if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
-export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: -2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
+export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
 export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
 export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  button {\n    padding: 6px 12px;\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");

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

@@ -5,9 +5,9 @@ var _templateObject, _templateObject2;
 import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import LozengeAction from '../../common/lozenge-action';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: visible;\n"])));
 
 /**
  * A base element that displays a Lozenge.
@@ -16,7 +16,8 @@ var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLi
  * @see State
  */
 var Lozenge = function Lozenge(_ref) {
-  var _ref$appearance = _ref.appearance,
+  var action = _ref.action,
+    _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
     onClick = _ref.onClick,
@@ -42,6 +43,16 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
+  var lozenge = action ? jsx(LozengeAction, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text
+  }) : jsx(AtlaskitLozenge, {
+    appearance: appearance,
+    isBold: isBold,
+    testId: "".concat(testId, "-lozenge")
+  }, text);
   return jsx("span", {
     css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
@@ -52,13 +63,6 @@ var Lozenge = function Lozenge(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     tabIndex: onClick ? 0 : -1
-  }, jsx(AtlaskitLozenge, {
-    appearance: appearance,
-    isBold: isBold,
-    testId: "".concat(testId, "-lozenge")
-  }, text, onClick && jsx(ChevronDownIcon, {
-    label: "action",
-    testId: "".concat(testId, "-action")
-  })));
+  }, lozenge);
 };
 export default Lozenge;

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

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import type { ThemeAppearance } from '@atlaskit/lozenge';
 import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
 export declare type LozengeActionTriggerProps = {
     appearance?: ThemeAppearance;
     testId?: string;
-    text: string;
+    text: string | React.ReactNode;
 } & CustomTriggerProps<HTMLButtonElement>;

package/dist/types/view/FlexibleCard/components/common/lozenge-action/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ThemeAppearance } from '@atlaskit/lozenge';
 import type { InvokeActions } from '../../../../../state/hooks/use-invoke/types';
 export declare type LozengeItem = {
@@ -9,5 +10,5 @@ export declare type LozengeActionProps = {
     action?: InvokeActions;
     appearance?: ThemeAppearance;
     testId?: string;
-    text: string;
+    text: string | React.ReactNode;
 };

package/dist/types/view/FlexibleCard/components/elements/lozenge/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { LozengeProps } from './types';
+import type { LozengeProps } from './types';
 /**
  * A base element that displays a Lozenge.
  * @internal

package/dist/types/view/FlexibleCard/components/elements/lozenge/types.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="react" />
 import { ElementProps } from '../types';
+import { InvokeActions } from '../../../../../state/hooks/use-invoke/types';
 export declare type LozengeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
 export declare type LozengeProps = ElementProps & {
+    /**
+     * Action that can be performed on the element
+     */
+    action?: InvokeActions;
     /**
      * Determines the appearance of the Atlaskit lozenge.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "25.5.1",
+  "version": "25.5.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"