@atlaskit/renderer 132.0.3 → 132.1.0
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 +21 -0
- package/dist/cjs/react/nodes/blockCard.js +15 -5
- package/dist/cjs/react/nodes/embedCard.js +8 -1
- package/dist/cjs/react/nodes/heading-anchor.js +29 -2
- package/dist/cjs/react/nodes/inlineCard.js +7 -0
- package/dist/cjs/react/nodes/tableNew.js +38 -1
- package/dist/cjs/react/utils/getCardClickHandler.js +8 -3
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/es2019/react/nodes/blockCard.js +12 -2
- package/dist/es2019/react/nodes/embedCard.js +8 -1
- package/dist/es2019/react/nodes/heading-anchor.js +28 -0
- package/dist/es2019/react/nodes/inlineCard.js +7 -0
- package/dist/es2019/react/nodes/tableNew.js +34 -1
- package/dist/es2019/react/utils/getCardClickHandler.js +8 -3
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/esm/react/nodes/blockCard.js +12 -2
- package/dist/esm/react/nodes/embedCard.js +8 -1
- package/dist/esm/react/nodes/heading-anchor.js +29 -2
- package/dist/esm/react/nodes/inlineCard.js +7 -0
- package/dist/esm/react/nodes/tableNew.js +38 -1
- package/dist/esm/react/utils/getCardClickHandler.js +8 -3
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/types/react/nodes/tableNew.d.ts +16 -0
- package/dist/types/react/utils/getCardClickHandler.d.ts +2 -1
- package/dist/types-ts4.5/react/nodes/tableNew.d.ts +16 -0
- package/dist/types-ts4.5/react/utils/getCardClickHandler.d.ts +2 -1
- package/package.json +8 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 132.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`3b2848cddfcb6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3b2848cddfcb6) -
|
|
8
|
+
[ux] update heading link focus logic
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- [`b108dbe3ff3fa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b108dbe3ff3fa) -
|
|
13
|
+
Return destination url from smart link onClick callback.
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 132.0.4
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [`d5787d7affb08`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d5787d7affb08) -
|
|
21
|
+
Avoid applying nested renderer table style overrides to tables that are already constrained by a
|
|
22
|
+
table context.
|
|
23
|
+
|
|
3
24
|
## 132.0.3
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -12,13 +12,14 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
12
12
|
var _fallback = require("./fallback");
|
|
13
13
|
var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
|
|
14
14
|
var _getCardClickHandler = require("../utils/getCardClickHandler");
|
|
15
|
+
var _utils = require("../../utils");
|
|
15
16
|
var _inlineCard = _interopRequireDefault(require("./inlineCard"));
|
|
16
17
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
17
18
|
var _linkDatasource = require("@atlaskit/link-datasource");
|
|
18
19
|
var _ssr = require("@atlaskit/smart-card/ssr");
|
|
19
20
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
21
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
21
|
-
var
|
|
22
|
+
var _utils2 = require("@atlaskit/editor-common/utils");
|
|
22
23
|
var _PortalContext = require("../../ui/Renderer/PortalContext");
|
|
23
24
|
var _consts = require("../../consts");
|
|
24
25
|
/**
|
|
@@ -66,7 +67,12 @@ function BlockCard(props) {
|
|
|
66
67
|
var portal = (0, _PortalContext.usePortal)(props);
|
|
67
68
|
var _ref = smartLinks || {},
|
|
68
69
|
actionOptions = _ref.actionOptions;
|
|
70
|
+
|
|
71
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
69
72
|
var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
|
|
73
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
74
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
75
|
+
var onConsumerClick = (0, _platformFeatureFlags.fg)('platform_smartlink_xpc_url_wrapping') ? (0, _utils.getEventHandler)(eventHandlers, 'smartCard') : onClick;
|
|
70
76
|
var platform = 'web';
|
|
71
77
|
var cardProps = {
|
|
72
78
|
url: url,
|
|
@@ -95,7 +101,7 @@ function BlockCard(props) {
|
|
|
95
101
|
var tableView = views.find(function (view) {
|
|
96
102
|
return view.type === 'table';
|
|
97
103
|
});
|
|
98
|
-
var shouldRenderDatasource = tableView && (0,
|
|
104
|
+
var shouldRenderDatasource = tableView && (0, _utils2.canRenderDatasource)(props.datasource.id);
|
|
99
105
|
if (shouldRenderDatasource) {
|
|
100
106
|
var _tableView$properties;
|
|
101
107
|
var columns = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
|
|
@@ -130,7 +136,9 @@ function BlockCard(props) {
|
|
|
130
136
|
onSetLinkTarget: onSetLinkTarget
|
|
131
137
|
// Ignored via go/ees005
|
|
132
138
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
133
|
-
}, cardProps
|
|
139
|
+
}, cardProps, {
|
|
140
|
+
onClick: onConsumerClick
|
|
141
|
+
}), (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
|
|
134
142
|
var width = _ref5.width;
|
|
135
143
|
var useStickySafeCentering = (0, _expValEquals.expValEquals)('platform_editor_flex_based_centering', 'isEnabled', true);
|
|
136
144
|
var useCenterWrapper = !isNodeNested && useStickySafeCentering;
|
|
@@ -140,7 +148,7 @@ function BlockCard(props) {
|
|
|
140
148
|
"data-local-id": localId,
|
|
141
149
|
style: {
|
|
142
150
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
143
|
-
width: isNodeNested ? '100%' : (0,
|
|
151
|
+
width: isNodeNested ? '100%' : (0, _utils2.calcBreakoutWidth)(layout, width)
|
|
144
152
|
}
|
|
145
153
|
}, (0, _react.jsx)(_linkDatasource.DatasourceTableView, {
|
|
146
154
|
datasourceId: datasource.id,
|
|
@@ -213,5 +221,7 @@ function BlockCard(props) {
|
|
|
213
221
|
onSetLinkTarget: onSetLinkTarget
|
|
214
222
|
// Ignored via go/ees005
|
|
215
223
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
216
|
-
}, cardProps
|
|
224
|
+
}, cardProps, {
|
|
225
|
+
onClick: onConsumerClick
|
|
226
|
+
}), cardComponent))));
|
|
217
227
|
}
|
|
@@ -23,6 +23,7 @@ var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable")
|
|
|
23
23
|
var _consts = require("../../consts");
|
|
24
24
|
var _style = require("../../ui/Renderer/style");
|
|
25
25
|
var _getCardClickHandler = require("../utils/getCardClickHandler");
|
|
26
|
+
var _utils = require("../../utils");
|
|
26
27
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
27
28
|
var _PortalContext = require("../../ui/Renderer/PortalContext");
|
|
28
29
|
var _blockCard = _interopRequireDefault(require("./blockCard"));
|
|
@@ -73,7 +74,11 @@ function EmbedCardInternal(props) {
|
|
|
73
74
|
onSetLinkTarget = props.onSetLinkTarget;
|
|
74
75
|
var portal = (0, _PortalContext.usePortal)(props);
|
|
75
76
|
var embedIframeRef = (0, _react2.useRef)(null);
|
|
77
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
76
78
|
var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
|
|
79
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
80
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
81
|
+
var onConsumerClick = (0, _platformFeatureFlags.fg)('platform_smartlink_xpc_url_wrapping') ? (0, _utils.getEventHandler)(eventHandlers, 'smartCard') : onClick;
|
|
77
82
|
var _ref = smartLinks || {},
|
|
78
83
|
actionOptions = _ref.actionOptions;
|
|
79
84
|
var platform = 'web';
|
|
@@ -210,7 +215,9 @@ function EmbedCardInternal(props) {
|
|
|
210
215
|
unsupportedComponent: _ui.UnsupportedBlock,
|
|
211
216
|
onSetLinkTarget: onSetLinkTarget
|
|
212
217
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
213
|
-
}, cardProps
|
|
218
|
+
}, cardProps, {
|
|
219
|
+
onClick: onConsumerClick
|
|
220
|
+
}), (0, _react.jsx)(_smartCard.EmbedResizeMessageListener, {
|
|
214
221
|
embedIframeRef: embedIframeRef,
|
|
215
222
|
onHeightUpdate: setLiveHeight
|
|
216
223
|
}, function () {
|
|
@@ -60,12 +60,24 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
60
60
|
tooltipMessage: '',
|
|
61
61
|
isClicked: false
|
|
62
62
|
});
|
|
63
|
+
// Stable reference for Tooltip content prop to avoid recreating on each render
|
|
64
|
+
(0, _defineProperty2.default)(_this, "renderTooltipContent", function (_ref) {
|
|
65
|
+
var update = _ref.update;
|
|
66
|
+
_this._tooltipUpdate = update;
|
|
67
|
+
return _this.state.tooltipMessage;
|
|
68
|
+
});
|
|
63
69
|
(0, _defineProperty2.default)(_this, "setTooltipState", function (message) {
|
|
64
70
|
var isClicked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
65
71
|
_this.setState({
|
|
66
72
|
// TODO: ED-14403 - investigate why this does not translate
|
|
67
73
|
tooltipMessage: _this.props.intl.formatMessage(message),
|
|
68
74
|
isClicked: isClicked
|
|
75
|
+
}, function () {
|
|
76
|
+
// Reposition tooltip after content change (replaces the key-based remount)
|
|
77
|
+
if ((0, _expValEquals.expValEquals)('a11y-fixes-week4-may-2026', 'isEnabled', true)) {
|
|
78
|
+
var _this$_tooltipUpdate, _this2;
|
|
79
|
+
(_this$_tooltipUpdate = (_this2 = _this)._tooltipUpdate) === null || _this$_tooltipUpdate === void 0 || _this$_tooltipUpdate.call(_this2);
|
|
80
|
+
}
|
|
69
81
|
});
|
|
70
82
|
});
|
|
71
83
|
(0, _defineProperty2.default)(_this, "getCopyAriaLabel", function () {
|
|
@@ -73,7 +85,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
73
85
|
return _this.props.intl.formatMessage(copyAriaLabel);
|
|
74
86
|
});
|
|
75
87
|
(0, _defineProperty2.default)(_this, "copyToClipboard", /*#__PURE__*/function () {
|
|
76
|
-
var
|
|
88
|
+
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
|
|
77
89
|
var copiedHeadingLinkToClipboard, failedToCopyHeadingLink, _t;
|
|
78
90
|
return _regenerator.default.wrap(function (_context) {
|
|
79
91
|
while (1) switch (_context.prev = _context.next) {
|
|
@@ -98,7 +110,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
98
110
|
}, _callee, null, [[1, 3]]);
|
|
99
111
|
}));
|
|
100
112
|
return function (_x) {
|
|
101
|
-
return
|
|
113
|
+
return _ref2.apply(this, arguments);
|
|
102
114
|
};
|
|
103
115
|
}());
|
|
104
116
|
(0, _defineProperty2.default)(_this, "resetMessage", function () {
|
|
@@ -146,6 +158,21 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
146
158
|
value: function render() {
|
|
147
159
|
var tooltipMessage = this.state.tooltipMessage;
|
|
148
160
|
if (tooltipMessage) {
|
|
161
|
+
if ((0, _expValEquals.expValEquals)('a11y-fixes-week4-may-2026', 'isEnabled', true)) {
|
|
162
|
+
// Fix for A11Y-30972: Use content as a function with update callback so
|
|
163
|
+
// the Tooltip repositions without unmounting (which caused focus loss).
|
|
164
|
+
// @see https://hello.jira.atlassian.cloud/browse/A11Y-30972
|
|
165
|
+
return (0, _react2.jsx)(_tooltip.default
|
|
166
|
+
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
167
|
+
, {
|
|
168
|
+
tag: CopyAnchorWrapperWithRef,
|
|
169
|
+
content: this.renderTooltipContent,
|
|
170
|
+
position: "top",
|
|
171
|
+
delay: 0,
|
|
172
|
+
isScreenReaderAnnouncementDisabled: (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? true : false
|
|
173
|
+
}, this.renderAnchorButton());
|
|
174
|
+
}
|
|
175
|
+
|
|
149
176
|
// We set the key to the message to ensure it remounts when the message
|
|
150
177
|
// changes, so that it correctly repositions.
|
|
151
178
|
// @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
|
|
@@ -26,6 +26,7 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
|
|
|
26
26
|
var _fallback = require("./fallback");
|
|
27
27
|
var _SmartCardStorage = require("../../ui/SmartCardStorage");
|
|
28
28
|
var _getCardClickHandler = require("../utils/getCardClickHandler");
|
|
29
|
+
var _utils2 = require("../../utils");
|
|
29
30
|
var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
|
|
30
31
|
var _PortalContext = require("../../ui/Renderer/PortalContext");
|
|
31
32
|
var _linkExtractors = require("@atlaskit/link-extractors");
|
|
@@ -174,7 +175,12 @@ var InlineCard = function InlineCard(props) {
|
|
|
174
175
|
isResolvedViewRendered = _useState2[0],
|
|
175
176
|
setIsResolvedViewRendered = _useState2[1];
|
|
176
177
|
var cardState = getSmartlinkState === null || getSmartlinkState === void 0 ? void 0 : getSmartlinkState()[url || ''];
|
|
178
|
+
|
|
179
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
177
180
|
var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
|
|
181
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
182
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
183
|
+
var onConsumerClick = (0, _platformFeatureFlags.fg)('platform_smartlink_xpc_url_wrapping') ? (0, _utils2.getEventHandler)(eventHandlers, 'smartCard') : onClick;
|
|
178
184
|
var cardProps = {
|
|
179
185
|
url: url,
|
|
180
186
|
data: data,
|
|
@@ -367,6 +373,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
367
373
|
// Ignored via go/ees005
|
|
368
374
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
369
375
|
}, cardProps, {
|
|
376
|
+
onClick: onConsumerClick,
|
|
370
377
|
onSetLinkTarget: onSetLinkTarget
|
|
371
378
|
}), (0, _react2.jsx)(MaybeOverlay, {
|
|
372
379
|
url: url || '',
|
|
@@ -224,6 +224,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
224
224
|
(0, _defineProperty2.default)(_this, "updatedLayout", 'custom');
|
|
225
225
|
(0, _defineProperty2.default)(_this, "containerRef", null);
|
|
226
226
|
(0, _defineProperty2.default)(_this, "_isInsideNestedRenderer", null);
|
|
227
|
+
(0, _defineProperty2.default)(_this, "_isInsideTableCell", null);
|
|
227
228
|
// Stores the last computed style values from render() for use by applyNestedRendererTableFix().
|
|
228
229
|
// This avoids reading from the DOM which can be stale when React removes properties between renders.
|
|
229
230
|
(0, _defineProperty2.default)(_this, "lastComputedStyle", {});
|
|
@@ -259,6 +260,10 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
259
260
|
* to the handleRef prop from the overflow shadow HOC.
|
|
260
261
|
*/
|
|
261
262
|
(0, _defineProperty2.default)(_this, "setContainerRef", function (el) {
|
|
263
|
+
if (_this.containerRef !== el) {
|
|
264
|
+
_this._isInsideNestedRenderer = null;
|
|
265
|
+
_this._isInsideTableCell = null;
|
|
266
|
+
}
|
|
262
267
|
_this.containerRef = el;
|
|
263
268
|
var handleRef = _this.props.handleRef;
|
|
264
269
|
if (typeof handleRef === 'function') {
|
|
@@ -374,6 +379,28 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
374
379
|
return false;
|
|
375
380
|
}
|
|
376
381
|
|
|
382
|
+
/**
|
|
383
|
+
* Checks if this table is inside a table cell in the DOM. The result is cached
|
|
384
|
+
* since a table's position in the DOM tree is stable after mount.
|
|
385
|
+
*/
|
|
386
|
+
}, {
|
|
387
|
+
key: "isInsideTableCell",
|
|
388
|
+
value: function isInsideTableCell() {
|
|
389
|
+
if (this._isInsideTableCell !== null) {
|
|
390
|
+
return this._isInsideTableCell;
|
|
391
|
+
}
|
|
392
|
+
if (!this.containerRef) {
|
|
393
|
+
return false;
|
|
394
|
+
}
|
|
395
|
+
this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
|
|
396
|
+
return this._isInsideTableCell;
|
|
397
|
+
}
|
|
398
|
+
}, {
|
|
399
|
+
key: "isInsideTableContext",
|
|
400
|
+
value: function isInsideTableContext() {
|
|
401
|
+
return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
|
|
402
|
+
}
|
|
403
|
+
|
|
377
404
|
/**
|
|
378
405
|
* For tables inside nested renderers (e.g. Include Page macro), the parent
|
|
379
406
|
* renderer's CSS override forces width:100%!important and left:0!important
|
|
@@ -381,6 +408,15 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
381
408
|
* style.setProperty with 'important' priority on inline styles beats
|
|
382
409
|
* stylesheet !important rules per the CSS cascade.
|
|
383
410
|
*
|
|
411
|
+
* Tables that are nested inside another table need to remain constrained by
|
|
412
|
+
* their table-cell context. Do not promote their width to inline !important,
|
|
413
|
+
* otherwise nested tables rendered through macros such as Excerpt Include can
|
|
414
|
+
* overflow and overlap adjacent cells.
|
|
415
|
+
*
|
|
416
|
+
* Top-level tables in nested renderers still preserve their saved width, but
|
|
417
|
+
* are capped to their containing block so wide tables do not escape constrained
|
|
418
|
+
* macro bodies such as Excerpt Include panels.
|
|
419
|
+
*
|
|
384
420
|
* Uses lastComputedStyle (populated during render) rather than reading from
|
|
385
421
|
* element.style, because React may remove properties from the DOM when their
|
|
386
422
|
* values transition to undefined between renders.
|
|
@@ -391,7 +427,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
391
427
|
if (!this.containerRef || !(0, _platformFeatureFlags.fg)('platform_nested_table_style_override')) {
|
|
392
428
|
return;
|
|
393
429
|
}
|
|
394
|
-
if (!this.isInsideNestedRenderer()) {
|
|
430
|
+
if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
|
|
395
431
|
return;
|
|
396
432
|
}
|
|
397
433
|
var _this$lastComputedSty = this.lastComputedStyle,
|
|
@@ -400,6 +436,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
400
436
|
marginLeft = _this$lastComputedSty.marginLeft;
|
|
401
437
|
var style = this.containerRef.style;
|
|
402
438
|
style.setProperty('width', width || 'auto', 'important');
|
|
439
|
+
style.setProperty('max-width', '100%', 'important');
|
|
403
440
|
style.setProperty('left', left || 'auto', 'important');
|
|
404
441
|
style.setProperty('margin-left', marginLeft || '0', 'important');
|
|
405
442
|
}
|
|
@@ -4,11 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getCardClickHandler = void 0;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
7
8
|
var _utils = require("../../utils");
|
|
8
|
-
var getCardClickHandler = exports.getCardClickHandler = function getCardClickHandler(eventHandlers, url
|
|
9
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
10
|
-
) {
|
|
9
|
+
var getCardClickHandler = exports.getCardClickHandler = function getCardClickHandler(eventHandlers, url) {
|
|
11
10
|
var handler = (0, _utils.getEventHandler)(eventHandlers, 'smartCard');
|
|
11
|
+
if ((0, _platformFeatureFlags.fg)('platform_smartlink_xpc_url_wrapping')) {
|
|
12
|
+
return handler ? function (e, data) {
|
|
13
|
+
var _ref, _data$destinationUrl;
|
|
14
|
+
return handler(e, (_ref = (_data$destinationUrl = data === null || data === void 0 ? void 0 : data.destinationUrl) !== null && _data$destinationUrl !== void 0 ? _data$destinationUrl : data === null || data === void 0 ? void 0 : data.url) !== null && _ref !== void 0 ? _ref : url);
|
|
15
|
+
} : undefined;
|
|
16
|
+
}
|
|
12
17
|
return handler ? function (e) {
|
|
13
18
|
return handler(e, url);
|
|
14
19
|
} : undefined;
|
|
@@ -72,7 +72,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
72
72
|
var TABLE_INFO_TIMEOUT = 10000;
|
|
73
73
|
var RENDER_EVENT_SAMPLE_RATE = 0.2;
|
|
74
74
|
var packageName = "@atlaskit/renderer";
|
|
75
|
-
var packageVersion = "132.0.
|
|
75
|
+
var packageVersion = "132.0.4";
|
|
76
76
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
77
77
|
containerName: 'ak-renderer-wrapper',
|
|
78
78
|
containerType: 'inline-size'
|
|
@@ -10,6 +10,7 @@ import { UnsupportedBlock, UnsupportedInline, WidthConsumer } from '@atlaskit/ed
|
|
|
10
10
|
import { CardErrorBoundary } from './fallback';
|
|
11
11
|
import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
|
|
12
12
|
import { getCardClickHandler } from '../utils/getCardClickHandler';
|
|
13
|
+
import { getEventHandler } from '../../utils';
|
|
13
14
|
import InlineCard from './inlineCard';
|
|
14
15
|
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
15
16
|
import { DatasourceTableView } from '@atlaskit/link-datasource';
|
|
@@ -61,7 +62,12 @@ export default function BlockCard(props) {
|
|
|
61
62
|
const {
|
|
62
63
|
actionOptions
|
|
63
64
|
} = smartLinks || {};
|
|
65
|
+
|
|
66
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
64
67
|
const onClick = getCardClickHandler(eventHandlers, url);
|
|
68
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
69
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
70
|
+
const onConsumerClick = fg('platform_smartlink_xpc_url_wrapping') ? getEventHandler(eventHandlers, 'smartCard') : onClick;
|
|
65
71
|
const platform = 'web';
|
|
66
72
|
const cardProps = {
|
|
67
73
|
url,
|
|
@@ -118,7 +124,9 @@ export default function BlockCard(props) {
|
|
|
118
124
|
onSetLinkTarget: onSetLinkTarget
|
|
119
125
|
// Ignored via go/ees005
|
|
120
126
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
121
|
-
}, cardProps
|
|
127
|
+
}, cardProps, {
|
|
128
|
+
onClick: onConsumerClick
|
|
129
|
+
}), jsx(WidthConsumer, null, ({
|
|
122
130
|
width
|
|
123
131
|
}) => {
|
|
124
132
|
const useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
|
|
@@ -202,5 +210,7 @@ export default function BlockCard(props) {
|
|
|
202
210
|
onSetLinkTarget: onSetLinkTarget
|
|
203
211
|
// Ignored via go/ees005
|
|
204
212
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
205
|
-
}, cardProps
|
|
213
|
+
}, cardProps, {
|
|
214
|
+
onClick: onConsumerClick
|
|
215
|
+
}), cardComponent))));
|
|
206
216
|
}
|
|
@@ -21,6 +21,7 @@ import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from
|
|
|
21
21
|
import { RendererCssClassName } from '../../consts';
|
|
22
22
|
import { FullPagePadding } from '../../ui/Renderer/style';
|
|
23
23
|
import { getCardClickHandler } from '../utils/getCardClickHandler';
|
|
24
|
+
import { getEventHandler } from '../../utils';
|
|
24
25
|
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
25
26
|
import { usePortal } from '../../ui/Renderer/PortalContext';
|
|
26
27
|
import BlockCard from './blockCard';
|
|
@@ -66,7 +67,11 @@ function EmbedCardInternal(props) {
|
|
|
66
67
|
} = props;
|
|
67
68
|
const portal = usePortal(props);
|
|
68
69
|
const embedIframeRef = useRef(null);
|
|
70
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
69
71
|
const onClick = getCardClickHandler(eventHandlers, url);
|
|
72
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
73
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
74
|
+
const onConsumerClick = fg('platform_smartlink_xpc_url_wrapping') ? getEventHandler(eventHandlers, 'smartCard') : onClick;
|
|
70
75
|
const {
|
|
71
76
|
actionOptions
|
|
72
77
|
} = smartLinks || {};
|
|
@@ -198,7 +203,9 @@ function EmbedCardInternal(props) {
|
|
|
198
203
|
unsupportedComponent: UnsupportedBlock,
|
|
199
204
|
onSetLinkTarget: onSetLinkTarget
|
|
200
205
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
201
|
-
}, cardProps
|
|
206
|
+
}, cardProps, {
|
|
207
|
+
onClick: onConsumerClick
|
|
208
|
+
}), jsx(EmbedResizeMessageListener, {
|
|
202
209
|
embedIframeRef: embedIframeRef,
|
|
203
210
|
onHeightUpdate: setLiveHeight
|
|
204
211
|
}, (() => {
|
|
@@ -43,11 +43,24 @@ class HeadingAnchor extends React.PureComponent {
|
|
|
43
43
|
tooltipMessage: '',
|
|
44
44
|
isClicked: false
|
|
45
45
|
});
|
|
46
|
+
// Stable reference for Tooltip content prop to avoid recreating on each render
|
|
47
|
+
_defineProperty(this, "renderTooltipContent", ({
|
|
48
|
+
update
|
|
49
|
+
}) => {
|
|
50
|
+
this._tooltipUpdate = update;
|
|
51
|
+
return this.state.tooltipMessage;
|
|
52
|
+
});
|
|
46
53
|
_defineProperty(this, "setTooltipState", (message, isClicked = false) => {
|
|
47
54
|
this.setState({
|
|
48
55
|
// TODO: ED-14403 - investigate why this does not translate
|
|
49
56
|
tooltipMessage: this.props.intl.formatMessage(message),
|
|
50
57
|
isClicked
|
|
58
|
+
}, () => {
|
|
59
|
+
// Reposition tooltip after content change (replaces the key-based remount)
|
|
60
|
+
if (expValEquals('a11y-fixes-week4-may-2026', 'isEnabled', true)) {
|
|
61
|
+
var _this$_tooltipUpdate;
|
|
62
|
+
(_this$_tooltipUpdate = this._tooltipUpdate) === null || _this$_tooltipUpdate === void 0 ? void 0 : _this$_tooltipUpdate.call(this);
|
|
63
|
+
}
|
|
51
64
|
});
|
|
52
65
|
});
|
|
53
66
|
_defineProperty(this, "getCopyAriaLabel", () => {
|
|
@@ -110,6 +123,21 @@ class HeadingAnchor extends React.PureComponent {
|
|
|
110
123
|
tooltipMessage
|
|
111
124
|
} = this.state;
|
|
112
125
|
if (tooltipMessage) {
|
|
126
|
+
if (expValEquals('a11y-fixes-week4-may-2026', 'isEnabled', true)) {
|
|
127
|
+
// Fix for A11Y-30972: Use content as a function with update callback so
|
|
128
|
+
// the Tooltip repositions without unmounting (which caused focus loss).
|
|
129
|
+
// @see https://hello.jira.atlassian.cloud/browse/A11Y-30972
|
|
130
|
+
return jsx(Tooltip
|
|
131
|
+
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
132
|
+
, {
|
|
133
|
+
tag: CopyAnchorWrapperWithRef,
|
|
134
|
+
content: this.renderTooltipContent,
|
|
135
|
+
position: "top",
|
|
136
|
+
delay: 0,
|
|
137
|
+
isScreenReaderAnnouncementDisabled: expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? true : false
|
|
138
|
+
}, this.renderAnchorButton());
|
|
139
|
+
}
|
|
140
|
+
|
|
113
141
|
// We set the key to the message to ensure it remounts when the message
|
|
114
142
|
// changes, so that it correctly repositions.
|
|
115
143
|
// @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
|
|
@@ -24,6 +24,7 @@ import { useProvider } from '@atlaskit/editor-common/provider-factory';
|
|
|
24
24
|
import { CardErrorBoundary } from './fallback';
|
|
25
25
|
import { withSmartCardStorage } from '../../ui/SmartCardStorage';
|
|
26
26
|
import { getCardClickHandler } from '../utils/getCardClickHandler';
|
|
27
|
+
import { getEventHandler } from '../../utils';
|
|
27
28
|
import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
|
|
28
29
|
import { usePortal } from '../../ui/Renderer/PortalContext';
|
|
29
30
|
import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
|
|
@@ -157,7 +158,12 @@ const InlineCard = props => {
|
|
|
157
158
|
} = (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value5 = cardContext.value) === null || _cardContext$value5 === void 0 ? void 0 : _cardContext$value5.store) || {};
|
|
158
159
|
const [isResolvedViewRendered, setIsResolvedViewRendered] = useState(false);
|
|
159
160
|
const cardState = getSmartlinkState === null || getSmartlinkState === void 0 ? void 0 : getSmartlinkState()[url || ''];
|
|
161
|
+
|
|
162
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
160
163
|
const onClick = getCardClickHandler(eventHandlers, url);
|
|
164
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
165
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
166
|
+
const onConsumerClick = fg('platform_smartlink_xpc_url_wrapping') ? getEventHandler(eventHandlers, 'smartCard') : onClick;
|
|
161
167
|
const cardProps = {
|
|
162
168
|
url,
|
|
163
169
|
data,
|
|
@@ -352,6 +358,7 @@ const InlineCard = props => {
|
|
|
352
358
|
// Ignored via go/ees005
|
|
353
359
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
354
360
|
}, cardProps, {
|
|
361
|
+
onClick: onConsumerClick,
|
|
355
362
|
onSetLinkTarget: onSetLinkTarget
|
|
356
363
|
}), jsx(MaybeOverlay, {
|
|
357
364
|
url: url || '',
|
|
@@ -188,6 +188,7 @@ export class TableContainer extends React.Component {
|
|
|
188
188
|
_defineProperty(this, "updatedLayout", 'custom');
|
|
189
189
|
_defineProperty(this, "containerRef", null);
|
|
190
190
|
_defineProperty(this, "_isInsideNestedRenderer", null);
|
|
191
|
+
_defineProperty(this, "_isInsideTableCell", null);
|
|
191
192
|
// Stores the last computed style values from render() for use by applyNestedRendererTableFix().
|
|
192
193
|
// This avoids reading from the DOM which can be stale when React removes properties between renders.
|
|
193
194
|
_defineProperty(this, "lastComputedStyle", {});
|
|
@@ -214,6 +215,10 @@ export class TableContainer extends React.Component {
|
|
|
214
215
|
* to the handleRef prop from the overflow shadow HOC.
|
|
215
216
|
*/
|
|
216
217
|
_defineProperty(this, "setContainerRef", el => {
|
|
218
|
+
if (this.containerRef !== el) {
|
|
219
|
+
this._isInsideNestedRenderer = null;
|
|
220
|
+
this._isInsideTableCell = null;
|
|
221
|
+
}
|
|
217
222
|
this.containerRef = el;
|
|
218
223
|
const {
|
|
219
224
|
handleRef
|
|
@@ -328,6 +333,24 @@ export class TableContainer extends React.Component {
|
|
|
328
333
|
return false;
|
|
329
334
|
}
|
|
330
335
|
|
|
336
|
+
/**
|
|
337
|
+
* Checks if this table is inside a table cell in the DOM. The result is cached
|
|
338
|
+
* since a table's position in the DOM tree is stable after mount.
|
|
339
|
+
*/
|
|
340
|
+
isInsideTableCell() {
|
|
341
|
+
if (this._isInsideTableCell !== null) {
|
|
342
|
+
return this._isInsideTableCell;
|
|
343
|
+
}
|
|
344
|
+
if (!this.containerRef) {
|
|
345
|
+
return false;
|
|
346
|
+
}
|
|
347
|
+
this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
|
|
348
|
+
return this._isInsideTableCell;
|
|
349
|
+
}
|
|
350
|
+
isInsideTableContext() {
|
|
351
|
+
return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
|
|
352
|
+
}
|
|
353
|
+
|
|
331
354
|
/**
|
|
332
355
|
* For tables inside nested renderers (e.g. Include Page macro), the parent
|
|
333
356
|
* renderer's CSS override forces width:100%!important and left:0!important
|
|
@@ -335,6 +358,15 @@ export class TableContainer extends React.Component {
|
|
|
335
358
|
* style.setProperty with 'important' priority on inline styles beats
|
|
336
359
|
* stylesheet !important rules per the CSS cascade.
|
|
337
360
|
*
|
|
361
|
+
* Tables that are nested inside another table need to remain constrained by
|
|
362
|
+
* their table-cell context. Do not promote their width to inline !important,
|
|
363
|
+
* otherwise nested tables rendered through macros such as Excerpt Include can
|
|
364
|
+
* overflow and overlap adjacent cells.
|
|
365
|
+
*
|
|
366
|
+
* Top-level tables in nested renderers still preserve their saved width, but
|
|
367
|
+
* are capped to their containing block so wide tables do not escape constrained
|
|
368
|
+
* macro bodies such as Excerpt Include panels.
|
|
369
|
+
*
|
|
338
370
|
* Uses lastComputedStyle (populated during render) rather than reading from
|
|
339
371
|
* element.style, because React may remove properties from the DOM when their
|
|
340
372
|
* values transition to undefined between renders.
|
|
@@ -343,7 +375,7 @@ export class TableContainer extends React.Component {
|
|
|
343
375
|
if (!this.containerRef || !fg('platform_nested_table_style_override')) {
|
|
344
376
|
return;
|
|
345
377
|
}
|
|
346
|
-
if (!this.isInsideNestedRenderer()) {
|
|
378
|
+
if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
|
|
347
379
|
return;
|
|
348
380
|
}
|
|
349
381
|
const {
|
|
@@ -353,6 +385,7 @@ export class TableContainer extends React.Component {
|
|
|
353
385
|
} = this.lastComputedStyle;
|
|
354
386
|
const style = this.containerRef.style;
|
|
355
387
|
style.setProperty('width', width || 'auto', 'important');
|
|
388
|
+
style.setProperty('max-width', '100%', 'important');
|
|
356
389
|
style.setProperty('left', left || 'auto', 'important');
|
|
357
390
|
style.setProperty('margin-left', marginLeft || '0', 'important');
|
|
358
391
|
}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
1
2
|
import { getEventHandler } from '../../utils';
|
|
2
|
-
export const getCardClickHandler = (eventHandlers, url
|
|
3
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4
|
-
) => {
|
|
3
|
+
export const getCardClickHandler = (eventHandlers, url) => {
|
|
5
4
|
const handler = getEventHandler(eventHandlers, 'smartCard');
|
|
5
|
+
if (fg('platform_smartlink_xpc_url_wrapping')) {
|
|
6
|
+
return handler ? (e, data) => {
|
|
7
|
+
var _ref, _data$destinationUrl;
|
|
8
|
+
return handler(e, (_ref = (_data$destinationUrl = data === null || data === void 0 ? void 0 : data.destinationUrl) !== null && _data$destinationUrl !== void 0 ? _data$destinationUrl : data === null || data === void 0 ? void 0 : data.url) !== null && _ref !== void 0 ? _ref : url);
|
|
9
|
+
} : undefined;
|
|
10
|
+
}
|
|
6
11
|
return handler ? e => handler(e, url) : undefined;
|
|
7
12
|
};
|
|
@@ -58,7 +58,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
58
58
|
const TABLE_INFO_TIMEOUT = 10000;
|
|
59
59
|
const RENDER_EVENT_SAMPLE_RATE = 0.2;
|
|
60
60
|
const packageName = "@atlaskit/renderer";
|
|
61
|
-
const packageVersion = "132.0.
|
|
61
|
+
const packageVersion = "132.0.4";
|
|
62
62
|
const setAsQueryContainerStyles = css({
|
|
63
63
|
containerName: 'ak-renderer-wrapper',
|
|
64
64
|
containerType: 'inline-size'
|
|
@@ -10,6 +10,7 @@ import { UnsupportedBlock, UnsupportedInline, WidthConsumer } from '@atlaskit/ed
|
|
|
10
10
|
import { CardErrorBoundary } from './fallback';
|
|
11
11
|
import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
|
|
12
12
|
import { getCardClickHandler } from '../utils/getCardClickHandler';
|
|
13
|
+
import { getEventHandler } from '../../utils';
|
|
13
14
|
import InlineCard from './inlineCard';
|
|
14
15
|
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
15
16
|
import { DatasourceTableView } from '@atlaskit/link-datasource';
|
|
@@ -58,7 +59,12 @@ export default function BlockCard(props) {
|
|
|
58
59
|
var portal = usePortal(props);
|
|
59
60
|
var _ref = smartLinks || {},
|
|
60
61
|
actionOptions = _ref.actionOptions;
|
|
62
|
+
|
|
63
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
61
64
|
var onClick = getCardClickHandler(eventHandlers, url);
|
|
65
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
66
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
67
|
+
var onConsumerClick = fg('platform_smartlink_xpc_url_wrapping') ? getEventHandler(eventHandlers, 'smartCard') : onClick;
|
|
62
68
|
var platform = 'web';
|
|
63
69
|
var cardProps = {
|
|
64
70
|
url: url,
|
|
@@ -122,7 +128,9 @@ export default function BlockCard(props) {
|
|
|
122
128
|
onSetLinkTarget: onSetLinkTarget
|
|
123
129
|
// Ignored via go/ees005
|
|
124
130
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
125
|
-
}, cardProps
|
|
131
|
+
}, cardProps, {
|
|
132
|
+
onClick: onConsumerClick
|
|
133
|
+
}), jsx(WidthConsumer, null, function (_ref5) {
|
|
126
134
|
var width = _ref5.width;
|
|
127
135
|
var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
|
|
128
136
|
var useCenterWrapper = !isNodeNested && useStickySafeCentering;
|
|
@@ -205,5 +213,7 @@ export default function BlockCard(props) {
|
|
|
205
213
|
onSetLinkTarget: onSetLinkTarget
|
|
206
214
|
// Ignored via go/ees005
|
|
207
215
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
208
|
-
}, cardProps
|
|
216
|
+
}, cardProps, {
|
|
217
|
+
onClick: onConsumerClick
|
|
218
|
+
}), cardComponent))));
|
|
209
219
|
}
|
|
@@ -22,6 +22,7 @@ import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from
|
|
|
22
22
|
import { RendererCssClassName } from '../../consts';
|
|
23
23
|
import { FullPagePadding } from '../../ui/Renderer/style';
|
|
24
24
|
import { getCardClickHandler } from '../utils/getCardClickHandler';
|
|
25
|
+
import { getEventHandler } from '../../utils';
|
|
25
26
|
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
26
27
|
import { usePortal } from '../../ui/Renderer/PortalContext';
|
|
27
28
|
import BlockCard from './blockCard';
|
|
@@ -65,7 +66,11 @@ function EmbedCardInternal(props) {
|
|
|
65
66
|
onSetLinkTarget = props.onSetLinkTarget;
|
|
66
67
|
var portal = usePortal(props);
|
|
67
68
|
var embedIframeRef = useRef(null);
|
|
69
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
68
70
|
var onClick = getCardClickHandler(eventHandlers, url);
|
|
71
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
72
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
73
|
+
var onConsumerClick = fg('platform_smartlink_xpc_url_wrapping') ? getEventHandler(eventHandlers, 'smartCard') : onClick;
|
|
69
74
|
var _ref = smartLinks || {},
|
|
70
75
|
actionOptions = _ref.actionOptions;
|
|
71
76
|
var platform = 'web';
|
|
@@ -202,7 +207,9 @@ function EmbedCardInternal(props) {
|
|
|
202
207
|
unsupportedComponent: UnsupportedBlock,
|
|
203
208
|
onSetLinkTarget: onSetLinkTarget
|
|
204
209
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
205
|
-
}, cardProps
|
|
210
|
+
}, cardProps, {
|
|
211
|
+
onClick: onConsumerClick
|
|
212
|
+
}), jsx(EmbedResizeMessageListener, {
|
|
206
213
|
embedIframeRef: embedIframeRef,
|
|
207
214
|
onHeightUpdate: setLiveHeight
|
|
208
215
|
}, function () {
|
|
@@ -54,12 +54,24 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
54
54
|
tooltipMessage: '',
|
|
55
55
|
isClicked: false
|
|
56
56
|
});
|
|
57
|
+
// Stable reference for Tooltip content prop to avoid recreating on each render
|
|
58
|
+
_defineProperty(_this, "renderTooltipContent", function (_ref) {
|
|
59
|
+
var update = _ref.update;
|
|
60
|
+
_this._tooltipUpdate = update;
|
|
61
|
+
return _this.state.tooltipMessage;
|
|
62
|
+
});
|
|
57
63
|
_defineProperty(_this, "setTooltipState", function (message) {
|
|
58
64
|
var isClicked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
59
65
|
_this.setState({
|
|
60
66
|
// TODO: ED-14403 - investigate why this does not translate
|
|
61
67
|
tooltipMessage: _this.props.intl.formatMessage(message),
|
|
62
68
|
isClicked: isClicked
|
|
69
|
+
}, function () {
|
|
70
|
+
// Reposition tooltip after content change (replaces the key-based remount)
|
|
71
|
+
if (expValEquals('a11y-fixes-week4-may-2026', 'isEnabled', true)) {
|
|
72
|
+
var _this$_tooltipUpdate, _this2;
|
|
73
|
+
(_this$_tooltipUpdate = (_this2 = _this)._tooltipUpdate) === null || _this$_tooltipUpdate === void 0 || _this$_tooltipUpdate.call(_this2);
|
|
74
|
+
}
|
|
63
75
|
});
|
|
64
76
|
});
|
|
65
77
|
_defineProperty(_this, "getCopyAriaLabel", function () {
|
|
@@ -67,7 +79,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
67
79
|
return _this.props.intl.formatMessage(copyAriaLabel);
|
|
68
80
|
});
|
|
69
81
|
_defineProperty(_this, "copyToClipboard", /*#__PURE__*/function () {
|
|
70
|
-
var
|
|
82
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
|
|
71
83
|
var copiedHeadingLinkToClipboard, failedToCopyHeadingLink, _t;
|
|
72
84
|
return _regeneratorRuntime.wrap(function (_context) {
|
|
73
85
|
while (1) switch (_context.prev = _context.next) {
|
|
@@ -92,7 +104,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
92
104
|
}, _callee, null, [[1, 3]]);
|
|
93
105
|
}));
|
|
94
106
|
return function (_x) {
|
|
95
|
-
return
|
|
107
|
+
return _ref2.apply(this, arguments);
|
|
96
108
|
};
|
|
97
109
|
}());
|
|
98
110
|
_defineProperty(_this, "resetMessage", function () {
|
|
@@ -140,6 +152,21 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
140
152
|
value: function render() {
|
|
141
153
|
var tooltipMessage = this.state.tooltipMessage;
|
|
142
154
|
if (tooltipMessage) {
|
|
155
|
+
if (expValEquals('a11y-fixes-week4-may-2026', 'isEnabled', true)) {
|
|
156
|
+
// Fix for A11Y-30972: Use content as a function with update callback so
|
|
157
|
+
// the Tooltip repositions without unmounting (which caused focus loss).
|
|
158
|
+
// @see https://hello.jira.atlassian.cloud/browse/A11Y-30972
|
|
159
|
+
return jsx(Tooltip
|
|
160
|
+
// @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
|
|
161
|
+
, {
|
|
162
|
+
tag: CopyAnchorWrapperWithRef,
|
|
163
|
+
content: this.renderTooltipContent,
|
|
164
|
+
position: "top",
|
|
165
|
+
delay: 0,
|
|
166
|
+
isScreenReaderAnnouncementDisabled: expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? true : false
|
|
167
|
+
}, this.renderAnchorButton());
|
|
168
|
+
}
|
|
169
|
+
|
|
143
170
|
// We set the key to the message to ensure it remounts when the message
|
|
144
171
|
// changes, so that it correctly repositions.
|
|
145
172
|
// @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
|
|
@@ -25,6 +25,7 @@ import { useProvider } from '@atlaskit/editor-common/provider-factory';
|
|
|
25
25
|
import { CardErrorBoundary } from './fallback';
|
|
26
26
|
import { withSmartCardStorage } from '../../ui/SmartCardStorage';
|
|
27
27
|
import { getCardClickHandler } from '../utils/getCardClickHandler';
|
|
28
|
+
import { getEventHandler } from '../../utils';
|
|
28
29
|
import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
|
|
29
30
|
import { usePortal } from '../../ui/Renderer/PortalContext';
|
|
30
31
|
import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
|
|
@@ -165,7 +166,12 @@ var InlineCard = function InlineCard(props) {
|
|
|
165
166
|
isResolvedViewRendered = _useState2[0],
|
|
166
167
|
setIsResolvedViewRendered = _useState2[1];
|
|
167
168
|
var cardState = getSmartlinkState === null || getSmartlinkState === void 0 ? void 0 : getSmartlinkState()[url || ''];
|
|
169
|
+
|
|
170
|
+
// Card/CardSSR's onClick — (e, { destinationUrl?, url? })
|
|
168
171
|
var onClick = getCardClickHandler(eventHandlers, url);
|
|
172
|
+
// SmartCardEventClickHandler — (e, url?) => void — for CardErrorBoundary.
|
|
173
|
+
// When the gate is off, fall back to the old behaviour (pass the same onClick as Card).
|
|
174
|
+
var onConsumerClick = fg('platform_smartlink_xpc_url_wrapping') ? getEventHandler(eventHandlers, 'smartCard') : onClick;
|
|
169
175
|
var cardProps = {
|
|
170
176
|
url: url,
|
|
171
177
|
data: data,
|
|
@@ -358,6 +364,7 @@ var InlineCard = function InlineCard(props) {
|
|
|
358
364
|
// Ignored via go/ees005
|
|
359
365
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
360
366
|
}, cardProps, {
|
|
367
|
+
onClick: onConsumerClick,
|
|
361
368
|
onSetLinkTarget: onSetLinkTarget
|
|
362
369
|
}), jsx(MaybeOverlay, {
|
|
363
370
|
url: url || '',
|
|
@@ -218,6 +218,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
218
218
|
_defineProperty(_this, "updatedLayout", 'custom');
|
|
219
219
|
_defineProperty(_this, "containerRef", null);
|
|
220
220
|
_defineProperty(_this, "_isInsideNestedRenderer", null);
|
|
221
|
+
_defineProperty(_this, "_isInsideTableCell", null);
|
|
221
222
|
// Stores the last computed style values from render() for use by applyNestedRendererTableFix().
|
|
222
223
|
// This avoids reading from the DOM which can be stale when React removes properties between renders.
|
|
223
224
|
_defineProperty(_this, "lastComputedStyle", {});
|
|
@@ -253,6 +254,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
253
254
|
* to the handleRef prop from the overflow shadow HOC.
|
|
254
255
|
*/
|
|
255
256
|
_defineProperty(_this, "setContainerRef", function (el) {
|
|
257
|
+
if (_this.containerRef !== el) {
|
|
258
|
+
_this._isInsideNestedRenderer = null;
|
|
259
|
+
_this._isInsideTableCell = null;
|
|
260
|
+
}
|
|
256
261
|
_this.containerRef = el;
|
|
257
262
|
var handleRef = _this.props.handleRef;
|
|
258
263
|
if (typeof handleRef === 'function') {
|
|
@@ -368,6 +373,28 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
368
373
|
return false;
|
|
369
374
|
}
|
|
370
375
|
|
|
376
|
+
/**
|
|
377
|
+
* Checks if this table is inside a table cell in the DOM. The result is cached
|
|
378
|
+
* since a table's position in the DOM tree is stable after mount.
|
|
379
|
+
*/
|
|
380
|
+
}, {
|
|
381
|
+
key: "isInsideTableCell",
|
|
382
|
+
value: function isInsideTableCell() {
|
|
383
|
+
if (this._isInsideTableCell !== null) {
|
|
384
|
+
return this._isInsideTableCell;
|
|
385
|
+
}
|
|
386
|
+
if (!this.containerRef) {
|
|
387
|
+
return false;
|
|
388
|
+
}
|
|
389
|
+
this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
|
|
390
|
+
return this._isInsideTableCell;
|
|
391
|
+
}
|
|
392
|
+
}, {
|
|
393
|
+
key: "isInsideTableContext",
|
|
394
|
+
value: function isInsideTableContext() {
|
|
395
|
+
return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
|
|
396
|
+
}
|
|
397
|
+
|
|
371
398
|
/**
|
|
372
399
|
* For tables inside nested renderers (e.g. Include Page macro), the parent
|
|
373
400
|
* renderer's CSS override forces width:100%!important and left:0!important
|
|
@@ -375,6 +402,15 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
375
402
|
* style.setProperty with 'important' priority on inline styles beats
|
|
376
403
|
* stylesheet !important rules per the CSS cascade.
|
|
377
404
|
*
|
|
405
|
+
* Tables that are nested inside another table need to remain constrained by
|
|
406
|
+
* their table-cell context. Do not promote their width to inline !important,
|
|
407
|
+
* otherwise nested tables rendered through macros such as Excerpt Include can
|
|
408
|
+
* overflow and overlap adjacent cells.
|
|
409
|
+
*
|
|
410
|
+
* Top-level tables in nested renderers still preserve their saved width, but
|
|
411
|
+
* are capped to their containing block so wide tables do not escape constrained
|
|
412
|
+
* macro bodies such as Excerpt Include panels.
|
|
413
|
+
*
|
|
378
414
|
* Uses lastComputedStyle (populated during render) rather than reading from
|
|
379
415
|
* element.style, because React may remove properties from the DOM when their
|
|
380
416
|
* values transition to undefined between renders.
|
|
@@ -385,7 +421,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
385
421
|
if (!this.containerRef || !fg('platform_nested_table_style_override')) {
|
|
386
422
|
return;
|
|
387
423
|
}
|
|
388
|
-
if (!this.isInsideNestedRenderer()) {
|
|
424
|
+
if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
|
|
389
425
|
return;
|
|
390
426
|
}
|
|
391
427
|
var _this$lastComputedSty = this.lastComputedStyle,
|
|
@@ -394,6 +430,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
394
430
|
marginLeft = _this$lastComputedSty.marginLeft;
|
|
395
431
|
var style = this.containerRef.style;
|
|
396
432
|
style.setProperty('width', width || 'auto', 'important');
|
|
433
|
+
style.setProperty('max-width', '100%', 'important');
|
|
397
434
|
style.setProperty('left', left || 'auto', 'important');
|
|
398
435
|
style.setProperty('margin-left', marginLeft || '0', 'important');
|
|
399
436
|
}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
1
2
|
import { getEventHandler } from '../../utils';
|
|
2
|
-
export var getCardClickHandler = function getCardClickHandler(eventHandlers, url
|
|
3
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4
|
-
) {
|
|
3
|
+
export var getCardClickHandler = function getCardClickHandler(eventHandlers, url) {
|
|
5
4
|
var handler = getEventHandler(eventHandlers, 'smartCard');
|
|
5
|
+
if (fg('platform_smartlink_xpc_url_wrapping')) {
|
|
6
|
+
return handler ? function (e, data) {
|
|
7
|
+
var _ref, _data$destinationUrl;
|
|
8
|
+
return handler(e, (_ref = (_data$destinationUrl = data === null || data === void 0 ? void 0 : data.destinationUrl) !== null && _data$destinationUrl !== void 0 ? _data$destinationUrl : data === null || data === void 0 ? void 0 : data.url) !== null && _ref !== void 0 ? _ref : url);
|
|
9
|
+
} : undefined;
|
|
10
|
+
}
|
|
6
11
|
return handler ? function (e) {
|
|
7
12
|
return handler(e, url);
|
|
8
13
|
} : undefined;
|
|
@@ -63,7 +63,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
63
63
|
var TABLE_INFO_TIMEOUT = 10000;
|
|
64
64
|
var RENDER_EVENT_SAMPLE_RATE = 0.2;
|
|
65
65
|
var packageName = "@atlaskit/renderer";
|
|
66
|
-
var packageVersion = "132.0.
|
|
66
|
+
var packageVersion = "132.0.4";
|
|
67
67
|
var setAsQueryContainerStyles = css({
|
|
68
68
|
containerName: 'ak-renderer-wrapper',
|
|
69
69
|
containerType: 'inline-size'
|
|
@@ -69,6 +69,7 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
|
|
|
69
69
|
updatedLayout: TableLayout | 'custom';
|
|
70
70
|
private containerRef;
|
|
71
71
|
private _isInsideNestedRenderer;
|
|
72
|
+
private _isInsideTableCell;
|
|
72
73
|
private lastComputedStyle;
|
|
73
74
|
private resizeObserver;
|
|
74
75
|
private applyResizerChange;
|
|
@@ -78,6 +79,12 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
|
|
|
78
79
|
* The result is cached since a table's position in the DOM tree is stable after mount.
|
|
79
80
|
*/
|
|
80
81
|
private isInsideNestedRenderer;
|
|
82
|
+
/**
|
|
83
|
+
* Checks if this table is inside a table cell in the DOM. The result is cached
|
|
84
|
+
* since a table's position in the DOM tree is stable after mount.
|
|
85
|
+
*/
|
|
86
|
+
private isInsideTableCell;
|
|
87
|
+
private isInsideTableContext;
|
|
81
88
|
/**
|
|
82
89
|
* For tables inside nested renderers (e.g. Include Page macro), the parent
|
|
83
90
|
* renderer's CSS override forces width:100%!important and left:0!important
|
|
@@ -85,6 +92,15 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
|
|
|
85
92
|
* style.setProperty with 'important' priority on inline styles beats
|
|
86
93
|
* stylesheet !important rules per the CSS cascade.
|
|
87
94
|
*
|
|
95
|
+
* Tables that are nested inside another table need to remain constrained by
|
|
96
|
+
* their table-cell context. Do not promote their width to inline !important,
|
|
97
|
+
* otherwise nested tables rendered through macros such as Excerpt Include can
|
|
98
|
+
* overflow and overlap adjacent cells.
|
|
99
|
+
*
|
|
100
|
+
* Top-level tables in nested renderers still preserve their saved width, but
|
|
101
|
+
* are capped to their containing block so wide tables do not escape constrained
|
|
102
|
+
* macro bodies such as Excerpt Include panels.
|
|
103
|
+
*
|
|
88
104
|
* Uses lastComputedStyle (populated during render) rather than reading from
|
|
89
105
|
* element.style, because React may remove properties from the DOM when their
|
|
90
106
|
* values transition to undefined between renders.
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import type { EventHandlers } from '@atlaskit/editor-common/ui';
|
|
2
|
-
|
|
2
|
+
import type { CardProps } from '@atlaskit/smart-card';
|
|
3
|
+
export declare const getCardClickHandler: (eventHandlers?: EventHandlers, url?: string) => CardProps["onClick"] | undefined;
|
|
@@ -69,6 +69,7 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
|
|
|
69
69
|
updatedLayout: TableLayout | 'custom';
|
|
70
70
|
private containerRef;
|
|
71
71
|
private _isInsideNestedRenderer;
|
|
72
|
+
private _isInsideTableCell;
|
|
72
73
|
private lastComputedStyle;
|
|
73
74
|
private resizeObserver;
|
|
74
75
|
private applyResizerChange;
|
|
@@ -78,6 +79,12 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
|
|
|
78
79
|
* The result is cached since a table's position in the DOM tree is stable after mount.
|
|
79
80
|
*/
|
|
80
81
|
private isInsideNestedRenderer;
|
|
82
|
+
/**
|
|
83
|
+
* Checks if this table is inside a table cell in the DOM. The result is cached
|
|
84
|
+
* since a table's position in the DOM tree is stable after mount.
|
|
85
|
+
*/
|
|
86
|
+
private isInsideTableCell;
|
|
87
|
+
private isInsideTableContext;
|
|
81
88
|
/**
|
|
82
89
|
* For tables inside nested renderers (e.g. Include Page macro), the parent
|
|
83
90
|
* renderer's CSS override forces width:100%!important and left:0!important
|
|
@@ -85,6 +92,15 @@ export declare class TableContainer extends React.Component<TableProps & Overflo
|
|
|
85
92
|
* style.setProperty with 'important' priority on inline styles beats
|
|
86
93
|
* stylesheet !important rules per the CSS cascade.
|
|
87
94
|
*
|
|
95
|
+
* Tables that are nested inside another table need to remain constrained by
|
|
96
|
+
* their table-cell context. Do not promote their width to inline !important,
|
|
97
|
+
* otherwise nested tables rendered through macros such as Excerpt Include can
|
|
98
|
+
* overflow and overlap adjacent cells.
|
|
99
|
+
*
|
|
100
|
+
* Top-level tables in nested renderers still preserve their saved width, but
|
|
101
|
+
* are capped to their containing block so wide tables do not escape constrained
|
|
102
|
+
* macro bodies such as Excerpt Include panels.
|
|
103
|
+
*
|
|
88
104
|
* Uses lastComputedStyle (populated during render) rather than reading from
|
|
89
105
|
* element.style, because React may remove properties from the DOM when their
|
|
90
106
|
* values transition to undefined between renders.
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import type { EventHandlers } from '@atlaskit/editor-common/ui';
|
|
2
|
-
|
|
2
|
+
import type { CardProps } from '@atlaskit/smart-card';
|
|
3
|
+
export declare const getCardClickHandler: (eventHandlers?: EventHandlers, url?: string) => CardProps["onClick"] | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "132.0
|
|
3
|
+
"version": "132.1.0",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -62,11 +62,11 @@
|
|
|
62
62
|
"@atlaskit/platform-feature-flags-react": "^0.5.0",
|
|
63
63
|
"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
|
|
64
64
|
"@atlaskit/react-ufo": "^6.7.0",
|
|
65
|
-
"@atlaskit/smart-card": "^44.
|
|
65
|
+
"@atlaskit/smart-card": "^44.24.0",
|
|
66
66
|
"@atlaskit/status": "^4.1.0",
|
|
67
67
|
"@atlaskit/task-decision": "^20.1.0",
|
|
68
68
|
"@atlaskit/theme": "^25.0.0",
|
|
69
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
69
|
+
"@atlaskit/tmp-editor-statsig": "^91.0.0",
|
|
70
70
|
"@atlaskit/tokens": "^13.3.0",
|
|
71
71
|
"@atlaskit/tooltip": "^22.6.0",
|
|
72
72
|
"@atlaskit/visually-hidden": "^3.1.0",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"@atlaskit/profilecard": "^25.8.0",
|
|
105
105
|
"@atlaskit/side-nav-items": "^1.13.0",
|
|
106
106
|
"@atlaskit/util-data-test": "^18.6.0",
|
|
107
|
-
"@atlassian/a11y-jest-testing": "^0.
|
|
107
|
+
"@atlassian/a11y-jest-testing": "^0.12.0",
|
|
108
108
|
"@atlassian/a11y-playwright-testing": "^0.10.0",
|
|
109
109
|
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
110
110
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
@@ -254,6 +254,10 @@
|
|
|
254
254
|
"platform-dst-lozenge-tag-badge-visual-uplifts": {
|
|
255
255
|
"type": "boolean"
|
|
256
256
|
},
|
|
257
|
+
"platform_smartlink_xpc_url_wrapping": {
|
|
258
|
+
"type": "boolean",
|
|
259
|
+
"referenceOnly": true
|
|
260
|
+
},
|
|
257
261
|
"platform_nested_table_style_override": {
|
|
258
262
|
"type": "boolean"
|
|
259
263
|
}
|