@atlaskit/editor-common 121.1.1 → 121.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,45 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 121.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`b94131fcee276`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b94131fcee276) -
8
+ Removes the `platform_smartlink_xpc_url_wrapping` feature gate and makes cross-product URL
9
+ wrapping for Smart Links permanent, on for all consumers.
10
+
11
+ What this behavior does: when a resolved Smart Link points to a first-party Atlassian destination
12
+ (e.g. a Jira issue, Confluence page), the URL used for navigation — via click, "Open link", or any
13
+ other destination-URL usage — now has a short-lived interaction-session query parameter (`xpis`)
14
+ appended automatically. This lets the destination product attribute the visit back to the product
15
+ and surface the link was opened from, powering cross-product usage analytics. It has no effect on:
16
+ - third-party (non-Atlassian) links,
17
+ - links that are not yet resolved,
18
+ - URLs that already contain the parameter.
19
+
20
+ No API shape changes: this only affects the resolved value returned by existing Smart Link
21
+ URL/navigation behavior (e.g. `Card`, `useSmartLinkDestinationUrl`, inline/block/embed card
22
+ click-through, and datasource table link cells). No new props, exports, or configuration are
23
+ introduced, and no action is required from consumers.
24
+
25
+ - [`a3884f09ad3e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3884f09ad3e9) -
26
+ Use elevation.surface.hovered for element browser item hover backgrounds when
27
+ platform_editor_slash_command is enabled. Keep hovered items square and preserve selected item
28
+ backgrounds on hover. Remove the registry element browser's top scroll border. Make custom empty
29
+ states span all result columns so Confluence Marketplace content is not constrained to a single
30
+ item column. Add an optional isLoading prop to the public RegistryElementBrowser component to
31
+ leave the results area blank until the initial registry snapshot is available, then render the
32
+ normal empty state whenever there are no results.
33
+ - [`622b48a52961e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/622b48a52961e) -
34
+ [ux] Use `elevation.surface.overlay.hovered`, 48px menu items, 16px/8px padding, a 12px icon/text
35
+ gap, and the selected-item border for the registered editor slash menu when the
36
+ `platform_editor_slash_command` experiment is enabled. Preserve the 32px icon width by preventing
37
+ icon shrinking and sizing the text to the remaining space. Keep the original 40px minimum height
38
+ so the View more footer retains its height. Set the selected item's left border to 2px using the
39
+ selected border-width token. Preserve the View more icon's original position with a centered 24px
40
+ minimum icon container.
41
+ - Updated dependencies
42
+
3
43
  ## 121.1.1
4
44
 
5
45
  ### Patch Changes
@@ -27,7 +27,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
27
27
  var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
28
28
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
29
29
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
30
- var packageVersion = "121.1.0";
30
+ var packageVersion = "121.1.1";
31
31
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
32
32
  // Remove URL as it has UGC
33
33
  // Ignored via go/ees007
@@ -1,14 +1,16 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.ElementBrowserQuickInsertMenuItem = void 0;
8
- var _react = _interopRequireDefault(require("react"));
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
9
10
  var _primitives = require("@atlaskit/primitives");
10
11
  var _quickInsertMenuItemUtils = require("./quickInsertMenuItemUtils");
11
12
  var _useQuickInsertContext = require("./useQuickInsertContext");
13
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
12
14
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
13
15
 
14
16
  var borderlessItemStyles = (0, _primitives.xcss)({
@@ -61,6 +63,12 @@ var borderlessDisabledItemStyles = (0, _primitives.xcss)({
61
63
  textAlign: 'start',
62
64
  width: '100%'
63
65
  });
66
+ var hoveredItemStyles = (0, _primitives.xcss)({
67
+ ':hover': {
68
+ backgroundColor: 'elevation.surface.hovered',
69
+ borderRadius: 0
70
+ }
71
+ });
64
72
  var iconStyles = (0, _primitives.xcss)({
65
73
  alignItems: 'center',
66
74
  backgroundColor: 'elevation.surface.overlay',
@@ -106,14 +114,20 @@ var ElementBrowserQuickInsertMenuItem = exports.ElementBrowserQuickInsertMenuIte
106
114
  isSelected = _ref2.isSelected;
107
115
  var itemDescription = description !== null && description !== void 0 ? description : item === null || item === void 0 ? void 0 : item.description;
108
116
  var handleClick = (0, _quickInsertMenuItemUtils.useQuickInsertMenuItemSelection)(onSelect);
117
+ var isSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
118
+ var itemStyles = (0, _react.useMemo)(function () {
119
+ return [isDisabled ? borderlessDisabledItemStyles : isSelected ? borderlessSelectedItemStyles : borderlessItemStyles, isSlashCommandEnabled && !isDisabled && !isSelected && hoveredItemStyles];
120
+ }, [isDisabled, isSelected, isSlashCommandEnabled]);
109
121
  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
110
122
  "aria-label": ariaLabel,
111
123
  "aria-selected": isSelected,
112
124
  id: id,
113
125
  isDisabled: isDisabled,
114
126
  onClick: handleClick,
115
- role: "option",
116
- xcss: isDisabled ? borderlessDisabledItemStyles : isSelected ? borderlessSelectedItemStyles : borderlessItemStyles
127
+ role: "option"
128
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Memoizes composition of module-scoped xcss styles for Pressable.
129
+ ,
130
+ xcss: itemStyles
117
131
  }, iconBefore && shouldWrapIcon ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
118
132
  xcss: iconStyles
119
133
  }, iconBefore) : iconBefore, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
@@ -6,13 +6,20 @@
6
6
  ._1dqonqa1{border-style:solid}
7
7
  ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
8
8
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
9
+ ._16jlkb7n{flex-grow:1}
9
10
  ._18m915vq{overflow-y:hidden}
10
11
  ._1bah1h6o{justify-content:center}
11
12
  ._1bsbzwfg{width:2pc}
12
13
  ._1e0c1txw{display:flex}
14
+ ._1o9zidpf{flex-shrink:0}
15
+ ._1o9zkb7n{flex-shrink:1}
13
16
  ._1reo15vq{overflow-x:hidden}
17
+ ._1tke1tcg{min-height:24px}
18
+ ._1ul91tcg{min-width:24px}
19
+ ._1ul9idpf{min-width:0}
14
20
  ._4cvr1h6o{align-items:center}
15
21
  ._4t3izwfg{height:2pc}
16
22
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
17
23
  ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
24
+ ._i0dlidpf{flex-basis:0}
18
25
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
@@ -10,13 +10,71 @@ require("./TypeAheadQuickInsertMenuItem.compiled.css");
10
10
  var _runtime = require("@compiled/react/runtime");
11
11
  var _react = _interopRequireDefault(require("react"));
12
12
  var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
13
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
14
+ var _primitives = require("@atlaskit/primitives");
13
15
  var _compiled = require("@atlaskit/primitives/compiled");
14
16
  var _quickInsertMenuItemUtils = require("./quickInsertMenuItemUtils");
15
17
  var _useQuickInsertContext = require("./useQuickInsertContext");
18
+ // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
16
19
  var styles = {
20
+ iconContainer: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o _1tke1tcg _1ul91tcg",
21
+ content: "_16jlkb7n _1o9zkb7n _i0dlidpf _1ul9idpf",
17
22
  icon: "_2rko1qi0 _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
18
23
  shortcut: "_2rko12b0 _11c8wadc _1rjcv77o _18zr1b66 _bfhki8nm _syazazsu"
19
24
  };
25
+ var itemStyles = (0, _primitives.xcss)({
26
+ alignItems: 'center',
27
+ backgroundColor: 'elevation.surface.overlay',
28
+ color: 'color.text',
29
+ display: 'flex',
30
+ gap: 'space.150',
31
+ minHeight: '40px',
32
+ paddingBlock: 'space.100',
33
+ paddingInline: 'space.200',
34
+ textAlign: 'start',
35
+ width: '100%',
36
+ ':hover': {
37
+ backgroundColor: 'elevation.surface.overlay.hovered'
38
+ }
39
+ });
40
+ var selectedItemStyles = (0, _primitives.xcss)({
41
+ alignItems: 'center',
42
+ backgroundColor: 'elevation.surface.overlay.hovered',
43
+ color: 'color.text',
44
+ display: 'flex',
45
+ gap: 'space.150',
46
+ minHeight: '40px',
47
+ paddingBlock: 'space.100',
48
+ paddingInline: 'space.200',
49
+ position: 'relative',
50
+ textAlign: 'start',
51
+ width: '100%',
52
+ ':hover': {
53
+ backgroundColor: 'elevation.surface.overlay.hovered'
54
+ },
55
+ '::before': {
56
+ borderInlineStartColor: 'color.border.selected',
57
+ borderInlineStartStyle: 'solid',
58
+ borderInlineStartWidth: 'border.width.selected',
59
+ content: "''",
60
+ insetBlock: 'space.0',
61
+ insetInlineStart: 'space.0',
62
+ pointerEvents: 'none',
63
+ position: 'absolute'
64
+ }
65
+ });
66
+ var disabledItemStyles = (0, _primitives.xcss)({
67
+ alignItems: 'center',
68
+ backgroundColor: 'elevation.surface.overlay',
69
+ color: 'color.text.disabled',
70
+ display: 'flex',
71
+ gap: 'space.150',
72
+ minHeight: '40px',
73
+ paddingBlock: 'space.100',
74
+ paddingInline: 'space.200',
75
+ textAlign: 'start',
76
+ width: '100%'
77
+ });
20
78
  var TypeAheadQuickInsertMenuItem = exports.TypeAheadQuickInsertMenuItem = function TypeAheadQuickInsertMenuItem(_ref) {
21
79
  var ariaLabel = _ref.ariaLabel,
22
80
  iconBefore = _ref.iconBefore,
@@ -35,20 +93,41 @@ var TypeAheadQuickInsertMenuItem = exports.TypeAheadQuickInsertMenuItem = functi
35
93
  id = _ref2.id,
36
94
  isSelected = _ref2.isSelected;
37
95
  var handleClick = (0, _quickInsertMenuItemUtils.useQuickInsertMenuItemSelection)(onSelect);
38
- return /*#__PURE__*/_react.default.createElement(_buttonItem.default, {
96
+ var wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
97
+ xcss: styles.icon
98
+ }, iconBefore) : iconBefore;
99
+ if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command')) {
100
+ return /*#__PURE__*/_react.default.createElement(_buttonItem.default, {
101
+ "aria-label": ariaLabel,
102
+ "aria-selected": isSelected,
103
+ iconBefore: wrappedIcon,
104
+ id: id,
105
+ isDisabled: isDisabled,
106
+ isSelected: isSelected,
107
+ onClick: handleClick,
108
+ role: "option"
109
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
110
+ alignBlock: "center",
111
+ spread: "space-between"
112
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, title), shortcut && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
113
+ as: "span",
114
+ xcss: styles.shortcut
115
+ }, shortcut)));
116
+ }
117
+ return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
39
118
  "aria-label": ariaLabel,
40
119
  "aria-selected": isSelected,
41
- iconBefore: iconBefore && shouldWrapIcon ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
42
- xcss: styles.icon
43
- }, iconBefore) : iconBefore,
44
120
  id: id,
45
121
  isDisabled: isDisabled,
46
- isSelected: isSelected,
47
122
  onClick: handleClick,
48
- role: "option"
49
- }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
123
+ role: "option",
124
+ xcss: isDisabled ? disabledItemStyles : isSelected ? selectedItemStyles : itemStyles
125
+ }, wrappedIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
126
+ xcss: styles.iconContainer
127
+ }, wrappedIcon), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
50
128
  alignBlock: "center",
51
- spread: "space-between"
129
+ spread: "space-between",
130
+ xcss: styles.content
52
131
  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, title), shortcut && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
53
132
  as: "span",
54
133
  xcss: styles.shortcut
@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
24
24
  * @jsx jsx
25
25
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "121.1.0";
27
+ var packageVersion = "121.1.1";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var fadeIn = (0, _react2.keyframes)({
@@ -16,7 +16,6 @@ var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-dia
16
16
  var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
17
17
  var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
18
18
  var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
19
- var _fg = require("@atlaskit/platform-feature-flags/fg");
20
19
  var _primitives = require("@atlaskit/primitives");
21
20
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
22
21
  var _analytics = require("../../analytics");
@@ -198,7 +197,7 @@ var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
198
197
  sendVisitLinkAnalytics(_analytics.INPUT_METHOD.DOUBLE_CLICK);
199
198
 
200
199
  // Double click opens the link in a new tab
201
- window.open((0, _fg.fg)('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url, '_blank');
200
+ window.open(destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url, '_blank');
202
201
  }
203
202
  };
204
203
  var handleClick = function handleClick(event) {
@@ -249,7 +248,7 @@ var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
249
248
  }, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
250
249
  ref: hoverLinkButtonRef,
251
250
  xcss: linkStylesCommon,
252
- href: (0, _fg.fg)('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url,
251
+ href: destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url,
253
252
  target: "_blank"
254
253
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic paddingBlock value based on experiment flags
255
254
  ,
@@ -13,7 +13,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
13
13
  const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
14
14
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
15
15
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
16
- const packageVersion = "121.1.0";
16
+ const packageVersion = "121.1.1";
17
17
  const sanitiseSentryEvents = (data, _hint) => {
18
18
  // Remove URL as it has UGC
19
19
  // Ignored via go/ees007
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
-
1
+ import React, { useMemo } from 'react';
2
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
3
3
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
4
4
  import { Box, Inline, Pressable, Stack, Text, xcss } from '@atlaskit/primitives';
5
5
  import { useQuickInsertMenuItemSelection } from './quickInsertMenuItemUtils';
@@ -54,6 +54,12 @@ const borderlessDisabledItemStyles = xcss({
54
54
  textAlign: 'start',
55
55
  width: '100%'
56
56
  });
57
+ const hoveredItemStyles = xcss({
58
+ ':hover': {
59
+ backgroundColor: 'elevation.surface.hovered',
60
+ borderRadius: 0
61
+ }
62
+ });
57
63
  const iconStyles = xcss({
58
64
  alignItems: 'center',
59
65
  backgroundColor: 'elevation.surface.overlay',
@@ -101,14 +107,18 @@ export const ElementBrowserQuickInsertMenuItem = ({
101
107
  };
102
108
  const itemDescription = description !== null && description !== void 0 ? description : item === null || item === void 0 ? void 0 : item.description;
103
109
  const handleClick = useQuickInsertMenuItemSelection(onSelect);
110
+ const isSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
111
+ const itemStyles = useMemo(() => [isDisabled ? borderlessDisabledItemStyles : isSelected ? borderlessSelectedItemStyles : borderlessItemStyles, isSlashCommandEnabled && !isDisabled && !isSelected && hoveredItemStyles], [isDisabled, isSelected, isSlashCommandEnabled]);
104
112
  return /*#__PURE__*/React.createElement(Pressable, {
105
113
  "aria-label": ariaLabel,
106
114
  "aria-selected": isSelected,
107
115
  id: id,
108
116
  isDisabled: isDisabled,
109
117
  onClick: handleClick,
110
- role: "option",
111
- xcss: isDisabled ? borderlessDisabledItemStyles : isSelected ? borderlessSelectedItemStyles : borderlessItemStyles
118
+ role: "option"
119
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Memoizes composition of module-scoped xcss styles for Pressable.
120
+ ,
121
+ xcss: itemStyles
112
122
  }, iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
113
123
  xcss: iconStyles
114
124
  }, iconBefore) : iconBefore, /*#__PURE__*/React.createElement(Stack, {
@@ -6,13 +6,20 @@
6
6
  ._1dqonqa1{border-style:solid}
7
7
  ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
8
8
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
9
+ ._16jlkb7n{flex-grow:1}
9
10
  ._18m915vq{overflow-y:hidden}
10
11
  ._1bah1h6o{justify-content:center}
11
12
  ._1bsbzwfg{width:2pc}
12
13
  ._1e0c1txw{display:flex}
14
+ ._1o9zidpf{flex-shrink:0}
15
+ ._1o9zkb7n{flex-shrink:1}
13
16
  ._1reo15vq{overflow-x:hidden}
17
+ ._1tke1tcg{min-height:24px}
18
+ ._1ul91tcg{min-width:24px}
19
+ ._1ul9idpf{min-width:0}
14
20
  ._4cvr1h6o{align-items:center}
15
21
  ._4t3izwfg{height:2pc}
16
22
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
17
23
  ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
24
+ ._i0dlidpf{flex-basis:0}
18
25
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
@@ -3,13 +3,71 @@ import "./TypeAheadQuickInsertMenuItem.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
5
5
  import ButtonItem from '@atlaskit/menu/button-item';
6
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
7
+ // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
8
+ import { Pressable, xcss } from '@atlaskit/primitives';
6
9
  import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
7
10
  import { useQuickInsertMenuItemSelection } from './quickInsertMenuItemUtils';
8
11
  import { useQuickInsertContext } from './useQuickInsertContext';
9
12
  const styles = {
13
+ iconContainer: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o _1tke1tcg _1ul91tcg",
14
+ content: "_16jlkb7n _1o9zkb7n _i0dlidpf _1ul9idpf",
10
15
  icon: "_2rko1qi0 _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
11
16
  shortcut: "_2rko12b0 _11c8wadc _1rjcv77o _18zr1b66 _bfhki8nm _syazazsu"
12
17
  };
18
+ const itemStyles = xcss({
19
+ alignItems: 'center',
20
+ backgroundColor: 'elevation.surface.overlay',
21
+ color: 'color.text',
22
+ display: 'flex',
23
+ gap: 'space.150',
24
+ minHeight: '40px',
25
+ paddingBlock: 'space.100',
26
+ paddingInline: 'space.200',
27
+ textAlign: 'start',
28
+ width: '100%',
29
+ ':hover': {
30
+ backgroundColor: 'elevation.surface.overlay.hovered'
31
+ }
32
+ });
33
+ const selectedItemStyles = xcss({
34
+ alignItems: 'center',
35
+ backgroundColor: 'elevation.surface.overlay.hovered',
36
+ color: 'color.text',
37
+ display: 'flex',
38
+ gap: 'space.150',
39
+ minHeight: '40px',
40
+ paddingBlock: 'space.100',
41
+ paddingInline: 'space.200',
42
+ position: 'relative',
43
+ textAlign: 'start',
44
+ width: '100%',
45
+ ':hover': {
46
+ backgroundColor: 'elevation.surface.overlay.hovered'
47
+ },
48
+ '::before': {
49
+ borderInlineStartColor: 'color.border.selected',
50
+ borderInlineStartStyle: 'solid',
51
+ borderInlineStartWidth: 'border.width.selected',
52
+ content: "''",
53
+ insetBlock: 'space.0',
54
+ insetInlineStart: 'space.0',
55
+ pointerEvents: 'none',
56
+ position: 'absolute'
57
+ }
58
+ });
59
+ const disabledItemStyles = xcss({
60
+ alignItems: 'center',
61
+ backgroundColor: 'elevation.surface.overlay',
62
+ color: 'color.text.disabled',
63
+ display: 'flex',
64
+ gap: 'space.150',
65
+ minHeight: '40px',
66
+ paddingBlock: 'space.100',
67
+ paddingInline: 'space.200',
68
+ textAlign: 'start',
69
+ width: '100%'
70
+ });
13
71
  export const TypeAheadQuickInsertMenuItem = ({
14
72
  ariaLabel,
15
73
  iconBefore,
@@ -30,20 +88,41 @@ export const TypeAheadQuickInsertMenuItem = ({
30
88
  isSelected: false
31
89
  };
32
90
  const handleClick = useQuickInsertMenuItemSelection(onSelect);
33
- return /*#__PURE__*/React.createElement(ButtonItem, {
91
+ const wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
92
+ xcss: styles.icon
93
+ }, iconBefore) : iconBefore;
94
+ if (!isExperimentEnabled('platform_editor_slash_command')) {
95
+ return /*#__PURE__*/React.createElement(ButtonItem, {
96
+ "aria-label": ariaLabel,
97
+ "aria-selected": isSelected,
98
+ iconBefore: wrappedIcon,
99
+ id: id,
100
+ isDisabled: isDisabled,
101
+ isSelected: isSelected,
102
+ onClick: handleClick,
103
+ role: "option"
104
+ }, /*#__PURE__*/React.createElement(Inline, {
105
+ alignBlock: "center",
106
+ spread: "space-between"
107
+ }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
108
+ as: "span",
109
+ xcss: styles.shortcut
110
+ }, shortcut)));
111
+ }
112
+ return /*#__PURE__*/React.createElement(Pressable, {
34
113
  "aria-label": ariaLabel,
35
114
  "aria-selected": isSelected,
36
- iconBefore: iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
37
- xcss: styles.icon
38
- }, iconBefore) : iconBefore,
39
115
  id: id,
40
116
  isDisabled: isDisabled,
41
- isSelected: isSelected,
42
117
  onClick: handleClick,
43
- role: "option"
44
- }, /*#__PURE__*/React.createElement(Inline, {
118
+ role: "option",
119
+ xcss: isDisabled ? disabledItemStyles : isSelected ? selectedItemStyles : itemStyles
120
+ }, wrappedIcon && /*#__PURE__*/React.createElement(Box, {
121
+ xcss: styles.iconContainer
122
+ }, wrappedIcon), /*#__PURE__*/React.createElement(Inline, {
45
123
  alignBlock: "center",
46
- spread: "space-between"
124
+ spread: "space-between",
125
+ xcss: styles.content
47
126
  }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
48
127
  as: "span",
49
128
  xcss: styles.shortcut
@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
14
14
  import { fg } from '@atlaskit/platform-feature-flags/fg';
15
15
  import Layer from '../Layer';
16
16
  const packageName = "@atlaskit/editor-common";
17
- const packageVersion = "121.1.0";
17
+ const packageVersion = "121.1.1";
18
18
  const halfFocusRing = 1;
19
19
  const dropOffset = '0, 8';
20
20
  const fadeIn = keyframes({
@@ -16,7 +16,6 @@ import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
16
16
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
17
17
  import PanelRightIcon from '@atlaskit/icon/core/panel-right';
18
18
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
19
- import { fg } from '@atlaskit/platform-feature-flags/fg';
20
19
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
21
20
  import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
22
21
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -177,7 +176,7 @@ const HoverLinkOverlay = ({
177
176
  sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
178
177
 
179
178
  // Double click opens the link in a new tab
180
- window.open(fg('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url, '_blank');
179
+ window.open(destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url, '_blank');
181
180
  }
182
181
  };
183
182
  const handleClick = event => {
@@ -224,7 +223,7 @@ const HoverLinkOverlay = ({
224
223
  }, label)), isHovered && jsx(Anchor, {
225
224
  ref: hoverLinkButtonRef,
226
225
  xcss: linkStylesCommon,
227
- href: fg('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url,
226
+ href: destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url,
228
227
  target: "_blank"
229
228
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic paddingBlock value based on experiment flags
230
229
  ,
@@ -19,7 +19,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
19
19
  var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
20
20
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
21
21
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
22
- var packageVersion = "121.1.0";
22
+ var packageVersion = "121.1.1";
23
23
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
24
24
  // Remove URL as it has UGC
25
25
  // Ignored via go/ees007
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
-
1
+ import React, { useMemo } from 'react';
2
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
3
3
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
4
4
  import { Box, Inline, Pressable, Stack, Text, xcss } from '@atlaskit/primitives';
5
5
  import { useQuickInsertMenuItemSelection } from './quickInsertMenuItemUtils';
@@ -54,6 +54,12 @@ var borderlessDisabledItemStyles = xcss({
54
54
  textAlign: 'start',
55
55
  width: '100%'
56
56
  });
57
+ var hoveredItemStyles = xcss({
58
+ ':hover': {
59
+ backgroundColor: 'elevation.surface.hovered',
60
+ borderRadius: 0
61
+ }
62
+ });
57
63
  var iconStyles = xcss({
58
64
  alignItems: 'center',
59
65
  backgroundColor: 'elevation.surface.overlay',
@@ -99,14 +105,20 @@ export var ElementBrowserQuickInsertMenuItem = function ElementBrowserQuickInser
99
105
  isSelected = _ref2.isSelected;
100
106
  var itemDescription = description !== null && description !== void 0 ? description : item === null || item === void 0 ? void 0 : item.description;
101
107
  var handleClick = useQuickInsertMenuItemSelection(onSelect);
108
+ var isSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
109
+ var itemStyles = useMemo(function () {
110
+ return [isDisabled ? borderlessDisabledItemStyles : isSelected ? borderlessSelectedItemStyles : borderlessItemStyles, isSlashCommandEnabled && !isDisabled && !isSelected && hoveredItemStyles];
111
+ }, [isDisabled, isSelected, isSlashCommandEnabled]);
102
112
  return /*#__PURE__*/React.createElement(Pressable, {
103
113
  "aria-label": ariaLabel,
104
114
  "aria-selected": isSelected,
105
115
  id: id,
106
116
  isDisabled: isDisabled,
107
117
  onClick: handleClick,
108
- role: "option",
109
- xcss: isDisabled ? borderlessDisabledItemStyles : isSelected ? borderlessSelectedItemStyles : borderlessItemStyles
118
+ role: "option"
119
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Memoizes composition of module-scoped xcss styles for Pressable.
120
+ ,
121
+ xcss: itemStyles
110
122
  }, iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
111
123
  xcss: iconStyles
112
124
  }, iconBefore) : iconBefore, /*#__PURE__*/React.createElement(Stack, {
@@ -6,13 +6,20 @@
6
6
  ._1dqonqa1{border-style:solid}
7
7
  ._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
8
8
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
9
+ ._16jlkb7n{flex-grow:1}
9
10
  ._18m915vq{overflow-y:hidden}
10
11
  ._1bah1h6o{justify-content:center}
11
12
  ._1bsbzwfg{width:2pc}
12
13
  ._1e0c1txw{display:flex}
14
+ ._1o9zidpf{flex-shrink:0}
15
+ ._1o9zkb7n{flex-shrink:1}
13
16
  ._1reo15vq{overflow-x:hidden}
17
+ ._1tke1tcg{min-height:24px}
18
+ ._1ul91tcg{min-width:24px}
19
+ ._1ul9idpf{min-width:0}
14
20
  ._4cvr1h6o{align-items:center}
15
21
  ._4t3izwfg{height:2pc}
16
22
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
17
23
  ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
24
+ ._i0dlidpf{flex-basis:0}
18
25
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
@@ -3,13 +3,71 @@ import "./TypeAheadQuickInsertMenuItem.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
5
5
  import ButtonItem from '@atlaskit/menu/button-item';
6
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
7
+ // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
8
+ import { Pressable, xcss } from '@atlaskit/primitives';
6
9
  import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
7
10
  import { useQuickInsertMenuItemSelection } from './quickInsertMenuItemUtils';
8
11
  import { useQuickInsertContext } from './useQuickInsertContext';
9
12
  var styles = {
13
+ iconContainer: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o _1tke1tcg _1ul91tcg",
14
+ content: "_16jlkb7n _1o9zkb7n _i0dlidpf _1ul9idpf",
10
15
  icon: "_2rko1qi0 _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
11
16
  shortcut: "_2rko12b0 _11c8wadc _1rjcv77o _18zr1b66 _bfhki8nm _syazazsu"
12
17
  };
18
+ var itemStyles = xcss({
19
+ alignItems: 'center',
20
+ backgroundColor: 'elevation.surface.overlay',
21
+ color: 'color.text',
22
+ display: 'flex',
23
+ gap: 'space.150',
24
+ minHeight: '40px',
25
+ paddingBlock: 'space.100',
26
+ paddingInline: 'space.200',
27
+ textAlign: 'start',
28
+ width: '100%',
29
+ ':hover': {
30
+ backgroundColor: 'elevation.surface.overlay.hovered'
31
+ }
32
+ });
33
+ var selectedItemStyles = xcss({
34
+ alignItems: 'center',
35
+ backgroundColor: 'elevation.surface.overlay.hovered',
36
+ color: 'color.text',
37
+ display: 'flex',
38
+ gap: 'space.150',
39
+ minHeight: '40px',
40
+ paddingBlock: 'space.100',
41
+ paddingInline: 'space.200',
42
+ position: 'relative',
43
+ textAlign: 'start',
44
+ width: '100%',
45
+ ':hover': {
46
+ backgroundColor: 'elevation.surface.overlay.hovered'
47
+ },
48
+ '::before': {
49
+ borderInlineStartColor: 'color.border.selected',
50
+ borderInlineStartStyle: 'solid',
51
+ borderInlineStartWidth: 'border.width.selected',
52
+ content: "''",
53
+ insetBlock: 'space.0',
54
+ insetInlineStart: 'space.0',
55
+ pointerEvents: 'none',
56
+ position: 'absolute'
57
+ }
58
+ });
59
+ var disabledItemStyles = xcss({
60
+ alignItems: 'center',
61
+ backgroundColor: 'elevation.surface.overlay',
62
+ color: 'color.text.disabled',
63
+ display: 'flex',
64
+ gap: 'space.150',
65
+ minHeight: '40px',
66
+ paddingBlock: 'space.100',
67
+ paddingInline: 'space.200',
68
+ textAlign: 'start',
69
+ width: '100%'
70
+ });
13
71
  export var TypeAheadQuickInsertMenuItem = function TypeAheadQuickInsertMenuItem(_ref) {
14
72
  var ariaLabel = _ref.ariaLabel,
15
73
  iconBefore = _ref.iconBefore,
@@ -28,20 +86,41 @@ export var TypeAheadQuickInsertMenuItem = function TypeAheadQuickInsertMenuItem(
28
86
  id = _ref2.id,
29
87
  isSelected = _ref2.isSelected;
30
88
  var handleClick = useQuickInsertMenuItemSelection(onSelect);
31
- return /*#__PURE__*/React.createElement(ButtonItem, {
89
+ var wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
90
+ xcss: styles.icon
91
+ }, iconBefore) : iconBefore;
92
+ if (!isExperimentEnabled('platform_editor_slash_command')) {
93
+ return /*#__PURE__*/React.createElement(ButtonItem, {
94
+ "aria-label": ariaLabel,
95
+ "aria-selected": isSelected,
96
+ iconBefore: wrappedIcon,
97
+ id: id,
98
+ isDisabled: isDisabled,
99
+ isSelected: isSelected,
100
+ onClick: handleClick,
101
+ role: "option"
102
+ }, /*#__PURE__*/React.createElement(Inline, {
103
+ alignBlock: "center",
104
+ spread: "space-between"
105
+ }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
106
+ as: "span",
107
+ xcss: styles.shortcut
108
+ }, shortcut)));
109
+ }
110
+ return /*#__PURE__*/React.createElement(Pressable, {
32
111
  "aria-label": ariaLabel,
33
112
  "aria-selected": isSelected,
34
- iconBefore: iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
35
- xcss: styles.icon
36
- }, iconBefore) : iconBefore,
37
113
  id: id,
38
114
  isDisabled: isDisabled,
39
- isSelected: isSelected,
40
115
  onClick: handleClick,
41
- role: "option"
42
- }, /*#__PURE__*/React.createElement(Inline, {
116
+ role: "option",
117
+ xcss: isDisabled ? disabledItemStyles : isSelected ? selectedItemStyles : itemStyles
118
+ }, wrappedIcon && /*#__PURE__*/React.createElement(Box, {
119
+ xcss: styles.iconContainer
120
+ }, wrappedIcon), /*#__PURE__*/React.createElement(Inline, {
43
121
  alignBlock: "center",
44
- spread: "space-between"
122
+ spread: "space-between",
123
+ xcss: styles.content
45
124
  }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
46
125
  as: "span",
47
126
  xcss: styles.shortcut
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
21
21
  import { fg } from '@atlaskit/platform-feature-flags/fg';
22
22
  import Layer from '../Layer';
23
23
  var packageName = "@atlaskit/editor-common";
24
- var packageVersion = "121.1.0";
24
+ var packageVersion = "121.1.1";
25
25
  var halfFocusRing = 1;
26
26
  var dropOffset = '0, 8';
27
27
  var fadeIn = keyframes({
@@ -17,7 +17,6 @@ import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
17
17
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
18
18
  import PanelRightIcon from '@atlaskit/icon/core/panel-right';
19
19
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
20
- import { fg } from '@atlaskit/platform-feature-flags/fg';
21
20
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
22
21
  import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
23
22
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -185,7 +184,7 @@ var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
185
184
  sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
186
185
 
187
186
  // Double click opens the link in a new tab
188
- window.open(fg('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url, '_blank');
187
+ window.open(destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url, '_blank');
189
188
  }
190
189
  };
191
190
  var handleClick = function handleClick(event) {
@@ -236,7 +235,7 @@ var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
236
235
  }, label)), isHovered && jsx(Anchor, {
237
236
  ref: hoverLinkButtonRef,
238
237
  xcss: linkStylesCommon,
239
- href: fg('platform_smartlink_xpc_url_wrapping') ? destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url : url,
238
+ href: destinationUrl !== null && destinationUrl !== void 0 ? destinationUrl : url,
240
239
  target: "_blank"
241
240
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- dynamic paddingBlock value based on experiment flags
242
241
  ,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "121.1.1",
3
+ "version": "121.1.2",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -84,7 +84,7 @@
84
84
  "@atlaskit/task-decision": "^21.9.0",
85
85
  "@atlaskit/teams-app-config": "^3.1.0",
86
86
  "@atlaskit/textfield": "^10.2.0",
87
- "@atlaskit/tmp-editor-statsig": "^179.0.0",
87
+ "@atlaskit/tmp-editor-statsig": "^180.0.0",
88
88
  "@atlaskit/tokens": "^16.11.0",
89
89
  "@atlaskit/tooltip": "^24.3.0",
90
90
  "@atlaskit/width-detector": "^7.2.0",
@@ -238,10 +238,6 @@
238
238
  "people-teams_migrate-user-profile-card": {
239
239
  "type": "boolean"
240
240
  },
241
- "platform_smartlink_xpc_url_wrapping": {
242
- "type": "boolean",
243
- "referenceOnly": true
244
- },
245
241
  "platform_editor_ai_selection_local_ids": {
246
242
  "type": "boolean"
247
243
  },