@atlaskit/smart-card 37.0.0 → 37.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 37.1.0
+
+### Minor Changes
+
+- [#149339](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/149339)
+  [`9209eff7c4cb1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9209eff7c4cb1) -
+  [ux] Behind fg `platform-linking-visual-refresh-v2` - Updated interactive state for lozenge action
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 37.0.0
 
 ### Major 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: "37.0.0"
+  packageVersion: "37.1.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,18 +1,24 @@
 
 ._kkk2n7od{all:unset}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._15vhn7od{font-variant:unset}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._189eyh40{border-width:2px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}
+._18m915vq{overflow-y:hidden}
 ._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1e0c1txw{display:flex}
 ._1p1dn7od{text-transform:unset}
+._1reo15vq{overflow-x:hidden}
 ._1wybn7od{font-size:unset}
 ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
 ._80omtlke{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}

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

@@ -14,20 +14,25 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react2 = require("@compiled/react");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _linkingCommon = require("@atlaskit/linking-common");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"];
+var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"],
+  _excluded2 = ["appearance", "isOpen", "testId", "text", "triggerRef"];
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 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 = {
-  chevronDown: "_18u012x7 _1e0c1txw"
+  chevronDown: "_18u012x7 _1e0c1txw",
+  lozengeContainer: "_kkk2n7od _2rkoiti9 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
+  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1p6i"
 };
 var triggerLozengeStyles = null;
 var triggerButtonStyles = null;
-var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
+var LozengeActionTriggerOld = function LozengeActionTriggerOld(_ref) {
   var appearance = _ref.appearance,
     isOpen = _ref.isOpen,
     testId = _ref.testId,
@@ -74,4 +79,100 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     }
   }), lozenge);
 };
-var _default = exports.default = LozengeActionTrigger;
+var LozengeActionTrigger = function LozengeActionTrigger(_ref2) {
+  var appearance = _ref2.appearance,
+    isOpen = _ref2.isOpen,
+    testId = _ref2.testId,
+    text = _ref2.text,
+    triggerRef = _ref2.triggerRef,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHovering = _useState4[0],
+    setIsHovering = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isPressing = _useState6[0],
+    setIsPressing = _useState6[1];
+  var _useState7 = (0, _react.useState)(undefined),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    lozengeBackgroundColor = _useState8[0],
+    setLozengeBackgroundColor = _useState8[1];
+  var _useState9 = (0, _react.useState)(undefined),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    lozengeForegroundColor = _useState10[0],
+    setLozengeForegroundColor = _useState10[1];
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return setIsHovering(true);
+  }, []);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return setIsHovering(false);
+  }, []);
+  var onMouseOrKeyDown = (0, _react.useCallback)(function () {
+    return setIsPressing(true);
+  }, []);
+  var onMouseOrKeyUp = (0, _react.useCallback)(function () {
+    return setIsPressing(false);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isPressing) {
+      setLozengeBackgroundColor("var(--ds-background-selected-pressed, #85B8FF)");
+      setLozengeForegroundColor("var(--ds-text-selected, #0C66E4)");
+    } else if (isOpen) {
+      if (isHovering) {
+        setLozengeBackgroundColor("var(--ds-background-selected-hovered, #CCE0FF)");
+      } else {
+        setLozengeBackgroundColor("var(--ds-background-selected, #E9F2FF)");
+      }
+      setLozengeForegroundColor("var(--ds-text-selected, #0C66E4)");
+    } else {
+      setLozengeBackgroundColor(undefined);
+      setLozengeForegroundColor(undefined);
+    }
+  }, [isPressing, isOpen, isHovering]);
+  var lozenge = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: (0, _react2.cx)(styles.lozengeContainer, (isOpen || isPressing) && styles.lozengeContainerSelected),
+      as: "span"
+    }, /*#__PURE__*/React.createElement(_lozenge.default, {
+      appearance: appearance,
+      isBold: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? true : isHovering
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: {
+        backgroundColor: lozengeBackgroundColor,
+        color: lozengeForegroundColor
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)(["_4cvr1h6o _1e0c1txw"])
+    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.chevronDown
+    }, /*#__PURE__*/React.createElement(_chevronDown.default, {
+      color: "currentColor",
+      label: "options",
+      LEGACY_size: "medium",
+      LEGACY_margin: "-4px -8px -4px -7px"
+    })))));
+  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
+  return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
+    type: "button"
+  }, props, {
+    "data-action-open": isOpen,
+    "data-testid": "".concat(testId, "--trigger"),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseDown: onMouseOrKeyDown,
+    onMouseUp: onMouseOrKeyUp,
+    onKeyDown: onMouseOrKeyDown,
+    onKeyUp: onMouseOrKeyUp,
+    ref: triggerRef,
+    className: (0, _runtime.ax)(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk1j28 _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejjo89b _1u6lo89b _6ssho89b"]),
+    style: {
+      "--_sq39bb": (0, _runtime.ix)("0 0 0 2px ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }), lozenge);
+};
+var _default = exports.default = (0, _linkingCommon.withFeatureFlaggedComponent)(LozengeActionTriggerOld, LozengeActionTrigger, function () {
+  return (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2');
+});

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

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "37.0.0",
+  packageVersion: "37.1.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "37.0.0"
+  packageVersion: "37.1.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,18 +1,24 @@
 
 ._kkk2n7od{all:unset}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._15vhn7od{font-variant:unset}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._189eyh40{border-width:2px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}
+._18m915vq{overflow-y:hidden}
 ._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1e0c1txw{display:flex}
 ._1p1dn7od{text-transform:unset}
+._1reo15vq{overflow-x:hidden}
 ._1wybn7od{font-size:unset}
 ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
 ._80omtlke{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}

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

@@ -5,17 +5,21 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { cx } from '@compiled/react';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { withFeatureFlaggedComponent } from '@atlaskit/linking-common';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
-  chevronDown: "_18u012x7 _1e0c1txw"
+  chevronDown: "_18u012x7 _1e0c1txw",
+  lozengeContainer: "_kkk2n7od _2rkoiti9 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
+  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1p6i"
 };
 const triggerLozengeStyles = null;
 const triggerButtonStyles = null;
-const LozengeActionTrigger = ({
+const LozengeActionTriggerOld = ({
   appearance,
   isOpen,
   testId,
@@ -51,4 +55,76 @@ const LozengeActionTrigger = ({
     className: ax(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk1j28 _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejj1vm4 _1u6l1vm4 _6ssh1vm4"])
   }), lozenge);
 };
-export default LozengeActionTrigger;
+const LozengeActionTrigger = ({
+  appearance,
+  isOpen,
+  testId,
+  text,
+  triggerRef,
+  ...props
+}) => {
+  const [isHovering, setIsHovering] = useState(false);
+  const [isPressing, setIsPressing] = useState(false);
+  const [lozengeBackgroundColor, setLozengeBackgroundColor] = useState(undefined);
+  const [lozengeForegroundColor, setLozengeForegroundColor] = useState(undefined);
+  const onMouseEnter = useCallback(() => setIsHovering(true), []);
+  const onMouseLeave = useCallback(() => setIsHovering(false), []);
+  const onMouseOrKeyDown = useCallback(() => setIsPressing(true), []);
+  const onMouseOrKeyUp = useCallback(() => setIsPressing(false), []);
+  useEffect(() => {
+    if (isPressing) {
+      setLozengeBackgroundColor("var(--ds-background-selected-pressed, #85B8FF)");
+      setLozengeForegroundColor("var(--ds-text-selected, #0C66E4)");
+    } else if (isOpen) {
+      if (isHovering) {
+        setLozengeBackgroundColor("var(--ds-background-selected-hovered, #CCE0FF)");
+      } else {
+        setLozengeBackgroundColor("var(--ds-background-selected, #E9F2FF)");
+      }
+      setLozengeForegroundColor("var(--ds-text-selected, #0C66E4)");
+    } else {
+      setLozengeBackgroundColor(undefined);
+      setLozengeForegroundColor(undefined);
+    }
+  }, [isPressing, isOpen, isHovering]);
+  const lozenge = useMemo(() => {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.lozengeContainer, (isOpen || isPressing) && styles.lozengeContainerSelected),
+      as: "span"
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: appearance,
+      isBold: fg('platform-component-visual-refresh') ? true : isHovering
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: {
+        backgroundColor: lozengeBackgroundColor,
+        color: lozengeForegroundColor
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: ax(["_4cvr1h6o _1e0c1txw"])
+    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.chevronDown
+    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      color: "currentColor",
+      label: "options",
+      LEGACY_size: "medium",
+      LEGACY_margin: "-4px -8px -4px -7px"
+    })))));
+  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button"
+  }, props, {
+    "data-action-open": isOpen,
+    "data-testid": `${testId}--trigger`,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseDown: onMouseOrKeyDown,
+    onMouseUp: onMouseOrKeyUp,
+    onKeyDown: onMouseOrKeyDown,
+    onKeyUp: onMouseOrKeyUp,
+    ref: triggerRef,
+    className: ax(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk1j28 _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejj1vm4 _1u6l1vm4 _6ssh1vm4"])
+  }), lozenge);
+};
+export default withFeatureFlaggedComponent(LozengeActionTriggerOld, LozengeActionTrigger, () => fg('platform-linking-visual-refresh-v2'));

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: "37.0.0",
+  packageVersion: "37.1.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

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: "37.0.0"
+  packageVersion: "37.1.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,18 +1,24 @@
 
 ._kkk2n7od{all:unset}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
 ._15vhn7od{font-variant:unset}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._189eyh40{border-width:2px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
+._1h6d1p6i{border-color:var(--ds-border-focused,#388bff)}
+._18m915vq{overflow-y:hidden}
 ._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}
 ._1e0c1txw{display:flex}
 ._1p1dn7od{text-transform:unset}
+._1reo15vq{overflow-x:hidden}
 ._1wybn7od{font-size:unset}
 ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
 ._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
 ._80omtlke{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
 ._ca0qidpf{padding-top:0}

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

@@ -2,23 +2,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"];
+var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"],
+  _excluded2 = ["appearance", "isOpen", "testId", "text", "triggerRef"];
 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 { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { cx } from '@compiled/react';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { withFeatureFlaggedComponent } from '@atlaskit/linking-common';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  chevronDown: "_18u012x7 _1e0c1txw"
+  chevronDown: "_18u012x7 _1e0c1txw",
+  lozengeContainer: "_kkk2n7od _2rkoiti9 _1dqonqa1 _189ee4h9 _1h6d1j28 _bfhk1j28 _1e0c1txw _4cvr1h6o _4t3i7vkz",
+  lozengeContainerSelected: "_1reo15vq _18m915vq _1h6d1p6i"
 };
 var triggerLozengeStyles = null;
 var triggerButtonStyles = null;
-var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
+var LozengeActionTriggerOld = function LozengeActionTriggerOld(_ref) {
   var appearance = _ref.appearance,
     isOpen = _ref.isOpen,
     testId = _ref.testId,
@@ -65,4 +70,100 @@ var LozengeActionTrigger = function LozengeActionTrigger(_ref) {
     }
   }), lozenge);
 };
-export default LozengeActionTrigger;
+var LozengeActionTrigger = function LozengeActionTrigger(_ref2) {
+  var appearance = _ref2.appearance,
+    isOpen = _ref2.isOpen,
+    testId = _ref2.testId,
+    text = _ref2.text,
+    triggerRef = _ref2.triggerRef,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHovering = _useState4[0],
+    setIsHovering = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isPressing = _useState6[0],
+    setIsPressing = _useState6[1];
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    lozengeBackgroundColor = _useState8[0],
+    setLozengeBackgroundColor = _useState8[1];
+  var _useState9 = useState(undefined),
+    _useState10 = _slicedToArray(_useState9, 2),
+    lozengeForegroundColor = _useState10[0],
+    setLozengeForegroundColor = _useState10[1];
+  var onMouseEnter = useCallback(function () {
+    return setIsHovering(true);
+  }, []);
+  var onMouseLeave = useCallback(function () {
+    return setIsHovering(false);
+  }, []);
+  var onMouseOrKeyDown = useCallback(function () {
+    return setIsPressing(true);
+  }, []);
+  var onMouseOrKeyUp = useCallback(function () {
+    return setIsPressing(false);
+  }, []);
+  useEffect(function () {
+    if (isPressing) {
+      setLozengeBackgroundColor("var(--ds-background-selected-pressed, #85B8FF)");
+      setLozengeForegroundColor("var(--ds-text-selected, #0C66E4)");
+    } else if (isOpen) {
+      if (isHovering) {
+        setLozengeBackgroundColor("var(--ds-background-selected-hovered, #CCE0FF)");
+      } else {
+        setLozengeBackgroundColor("var(--ds-background-selected, #E9F2FF)");
+      }
+      setLozengeForegroundColor("var(--ds-text-selected, #0C66E4)");
+    } else {
+      setLozengeBackgroundColor(undefined);
+      setLozengeForegroundColor(undefined);
+    }
+  }, [isPressing, isOpen, isHovering]);
+  var lozenge = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.lozengeContainer, (isOpen || isPressing) && styles.lozengeContainerSelected),
+      as: "span"
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: appearance,
+      isBold: fg('platform-component-visual-refresh') ? true : isHovering
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: {
+        backgroundColor: lozengeBackgroundColor,
+        color: lozengeForegroundColor
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: ax(["_4cvr1h6o _1e0c1txw"])
+    }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.chevronDown
+    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      color: "currentColor",
+      label: "options",
+      LEGACY_size: "medium",
+      LEGACY_margin: "-4px -8px -4px -7px"
+    })))));
+  }, [appearance, isHovering, isPressing, text, isOpen, lozengeBackgroundColor, lozengeForegroundColor]);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button"
+  }, props, {
+    "data-action-open": isOpen,
+    "data-testid": "".concat(testId, "--trigger"),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseDown: onMouseOrKeyDown,
+    onMouseUp: onMouseOrKeyUp,
+    onKeyDown: onMouseOrKeyDown,
+    onKeyUp: onMouseOrKeyUp,
+    ref: triggerRef,
+    className: ax(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk1j28 _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejjo89b _1u6lo89b _6ssho89b"]),
+    style: {
+      "--_sq39bb": ix("0 0 0 2px ".concat("var(--ds-border-focused, #388BFF)"))
+    }
+  }), lozenge);
+};
+export default withFeatureFlaggedComponent(LozengeActionTriggerOld, LozengeActionTrigger, function () {
+  return fg('platform-linking-visual-refresh-v2');
+});

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

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

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type LozengeActionTriggerProps } from './type';
-declare const LozengeActionTrigger: ({ appearance, isOpen, testId, text, triggerRef, ...props }: LozengeActionTriggerProps) => JSX.Element;
-export default LozengeActionTrigger;
+declare const _default: (props: LozengeActionTriggerProps) => import("react").JSX.Element;
+export default _default;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type LozengeActionTriggerProps } from './type';
-declare const LozengeActionTrigger: ({ appearance, isOpen, testId, text, triggerRef, ...props }: LozengeActionTriggerProps) => JSX.Element;
-export default LozengeActionTrigger;
+declare const _default: (props: LozengeActionTriggerProps) => import("react").JSX.Element;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "37.0.0",
+	"version": "37.1.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,9 +39,9 @@
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/frontend-utilities": "^3.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.7.0",
+		"@atlaskit/icon": "^25.8.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
-		"@atlaskit/icon-lab": "^4.11.0",
+		"@atlaskit/icon-lab": "^4.12.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/icon-priority": "^6.3.0",
 		"@atlaskit/image": "^3.0.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/link-analytics": "^9.1.0",
 		"@atlaskit/link-client-extension": "^4.0.0",
 		"@atlaskit/link-extractors": "^2.3.0",
-		"@atlaskit/linking-common": "^8.0.0",
+		"@atlaskit/linking-common": "^8.1.0",
 		"@atlaskit/linking-types": "^9.10.0",
 		"@atlaskit/logo": "^18.0.0",
 		"@atlaskit/lozenge": "^12.2.0",