@atlaskit/editor-common 102.11.5 → 102.11.6
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 +9 -0
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +39 -254
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +1 -212
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/element-browser/components/ElementList/ElementList.js +33 -250
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 102.11.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#129445](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129445)
|
|
8
|
+
[`0eb9b03d34eff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0eb9b03d34eff) -
|
|
9
|
+
Cleans up feature flag that reduces padding in the element browser
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 102.11.5
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -9,7 +9,6 @@ exports.ElementItem = ElementItem;
|
|
|
9
9
|
exports.itemIcon = exports.default = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
13
|
var _react2 = require("@emotion/react");
|
|
15
14
|
var _reactVirtualized = require("react-virtualized");
|
|
@@ -25,20 +24,20 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
|
25
24
|
var _analytics = require("../../../analytics");
|
|
26
25
|
var _quickInsert = require("../../../quick-insert");
|
|
27
26
|
var _constants = require("../../constants");
|
|
28
|
-
var
|
|
27
|
+
var _useContainerWidth2 = _interopRequireDefault(require("../../hooks/use-container-width"));
|
|
29
28
|
var _useFocus = _interopRequireDefault(require("../../hooks/use-focus"));
|
|
30
29
|
var _types = require("../../types");
|
|
31
30
|
var _EmptyState = _interopRequireDefault(require("./EmptyState"));
|
|
32
31
|
var _utils = require("./utils");
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
33
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
35
34
|
/**
|
|
36
35
|
* @jsxRuntime classic
|
|
37
36
|
* @jsx jsx
|
|
38
37
|
*/
|
|
38
|
+
|
|
39
39
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
40
|
-
|
|
41
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
40
|
+
|
|
42
41
|
var ICON_HEIGHT = exports.ICON_HEIGHT = 40;
|
|
43
42
|
var ICON_WIDTH = exports.ICON_WIDTH = 40;
|
|
44
43
|
|
|
@@ -60,7 +59,7 @@ var itemIcon = exports.itemIcon = (0, _react2.css)({
|
|
|
60
59
|
height: "".concat(ICON_HEIGHT, "px")
|
|
61
60
|
}
|
|
62
61
|
});
|
|
63
|
-
function
|
|
62
|
+
function ElementList(_ref) {
|
|
64
63
|
var items = _ref.items,
|
|
65
64
|
mode = _ref.mode,
|
|
66
65
|
selectedItemIndex = _ref.selectedItemIndex,
|
|
@@ -74,8 +73,9 @@ function ElementListOld(_ref) {
|
|
|
74
73
|
searchTerm = _ref.searchTerm,
|
|
75
74
|
setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
|
|
76
75
|
setFocusedItemIndex = _ref.setFocusedItemIndex,
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
cache = _ref.cache,
|
|
77
|
+
onInsertItem = _ref.onInsertItem;
|
|
78
|
+
var _useContainerWidth = (0, _useContainerWidth2.default)(),
|
|
79
79
|
containerWidth = _useContainerWidth.containerWidth,
|
|
80
80
|
ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
|
|
81
81
|
var _useState = (0, _react.useState)(_constants.SCROLLBAR_WIDTH),
|
|
@@ -105,169 +105,6 @@ function ElementListOld(_ref) {
|
|
|
105
105
|
}
|
|
106
106
|
});
|
|
107
107
|
}, [createAnalyticsEvent]);
|
|
108
|
-
var cache = (0, _react.useMemo)(function () {
|
|
109
|
-
return new _CellMeasurer.CellMeasurerCache({
|
|
110
|
-
fixedWidth: true,
|
|
111
|
-
defaultHeight: 75,
|
|
112
|
-
minHeight: 75
|
|
113
|
-
});
|
|
114
|
-
}, []);
|
|
115
|
-
var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
|
|
116
|
-
var rowCount = Math.ceil(items.length / columnCount);
|
|
117
|
-
var rowHeight = function rowHeight(_ref2) {
|
|
118
|
-
var index = _ref2.index;
|
|
119
|
-
return cache.rowHeight({
|
|
120
|
-
index: index
|
|
121
|
-
}) <= 75 ? 75 : cache.rowHeight({
|
|
122
|
-
index: index
|
|
123
|
-
}) + _constants.ELEMENT_ITEM_PADDING * 2;
|
|
124
|
-
};
|
|
125
|
-
var cellRenderer = (0, _react.useMemo)(function () {
|
|
126
|
-
return function (_ref3) {
|
|
127
|
-
var columnIndex = _ref3.columnIndex,
|
|
128
|
-
key = _ref3.key,
|
|
129
|
-
parent = _ref3.parent,
|
|
130
|
-
rowIndex = _ref3.rowIndex,
|
|
131
|
-
style = _ref3.style;
|
|
132
|
-
var index = rowIndex * columnCount + columnIndex;
|
|
133
|
-
if (items[index] == null) {
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
return index > items.length - 1 ? null : (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
|
|
137
|
-
cache: cache,
|
|
138
|
-
key: key,
|
|
139
|
-
rowIndex: rowIndex,
|
|
140
|
-
columnIndex: columnIndex,
|
|
141
|
-
parent: parent
|
|
142
|
-
}, (0, _react2.jsx)("div", {
|
|
143
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
144
|
-
style: style,
|
|
145
|
-
key: key
|
|
146
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
|
|
147
|
-
,
|
|
148
|
-
className: "element-item-wrapper",
|
|
149
|
-
css: elementItemWrapper,
|
|
150
|
-
onKeyDown: function onKeyDown(e) {
|
|
151
|
-
if (e.key === 'Tab') {
|
|
152
|
-
if (e.shiftKey && index === 0) {
|
|
153
|
-
if (setFocusedCategoryIndex) {
|
|
154
|
-
if (!!selectedCategoryIndex) {
|
|
155
|
-
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
156
|
-
} else {
|
|
157
|
-
setFocusedCategoryIndex(0);
|
|
158
|
-
}
|
|
159
|
-
e.preventDefault();
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
// before focus jumps from elements list we need to rerender react-virtualized grid.
|
|
163
|
-
// Otherwise on the next render 'scrollToCell' will have same cached value
|
|
164
|
-
// and grid will not be scrolled to top.
|
|
165
|
-
// So Tab press on category will not work anymore due to invisible 1-t element.
|
|
166
|
-
else if (index === items.length - 2) {
|
|
167
|
-
setFocusedItemIndex(items.length - 1);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
}, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
|
|
172
|
-
inlineMode: !fullMode,
|
|
173
|
-
index: index,
|
|
174
|
-
item: items[index],
|
|
175
|
-
selected: selectedItemIndex === index,
|
|
176
|
-
focus: focusedItemIndex === index,
|
|
177
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
178
|
-
// Ignored via go/ees005
|
|
179
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
180
|
-
}, props))));
|
|
181
|
-
};
|
|
182
|
-
},
|
|
183
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
184
|
-
[cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
|
|
185
|
-
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
|
|
186
|
-
css: elementItemsWrapper,
|
|
187
|
-
"data-testid": "element-items",
|
|
188
|
-
id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
|
|
189
|
-
"aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
|
|
190
|
-
role: "tabpanel",
|
|
191
|
-
tabIndex: items.length === 0 ? 0 : undefined
|
|
192
|
-
}, !items.length ? emptyStateHandler ? emptyStateHandler({
|
|
193
|
-
mode: mode,
|
|
194
|
-
selectedCategory: selectedCategory,
|
|
195
|
-
searchTerm: searchTerm
|
|
196
|
-
}) : (0, _react2.jsx)(_EmptyState.default, {
|
|
197
|
-
onExternalLinkClick: onExternalLinkClick
|
|
198
|
-
}) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
|
|
199
|
-
disableWidth: true
|
|
200
|
-
}, function (_ref4) {
|
|
201
|
-
var height = _ref4.height;
|
|
202
|
-
return (0, _react2.jsx)(_reactVirtualized.Grid, (0, _extends2.default)({
|
|
203
|
-
cellRenderer: cellRenderer,
|
|
204
|
-
height: height,
|
|
205
|
-
width: containerWidth - _constants.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
206
|
-
/**
|
|
207
|
-
* Refresh Grid on WidthObserver value change.
|
|
208
|
-
* Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
|
|
209
|
-
* scroll position after updating the data. If new data has different number of cells, a re-render
|
|
210
|
-
* is forced to prevent the scroll position render bug.
|
|
211
|
-
*/,
|
|
212
|
-
key: containerWidth + items.length,
|
|
213
|
-
rowHeight: rowHeight,
|
|
214
|
-
rowCount: rowCount,
|
|
215
|
-
columnCount: columnCount,
|
|
216
|
-
columnWidth: columnWidth,
|
|
217
|
-
deferredMeasurementCache: cache
|
|
218
|
-
// Ignored via go/ees005
|
|
219
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
220
|
-
}, selectedItemIndex !== undefined && {
|
|
221
|
-
scrollToRow: Math.floor(selectedItemIndex / columnCount)
|
|
222
|
-
}));
|
|
223
|
-
}))));
|
|
224
|
-
}
|
|
225
|
-
function ElementListNew(_ref5) {
|
|
226
|
-
var items = _ref5.items,
|
|
227
|
-
mode = _ref5.mode,
|
|
228
|
-
selectedItemIndex = _ref5.selectedItemIndex,
|
|
229
|
-
focusedItemIndex = _ref5.focusedItemIndex,
|
|
230
|
-
columnCount = _ref5.columnCount,
|
|
231
|
-
setColumnCount = _ref5.setColumnCount,
|
|
232
|
-
createAnalyticsEvent = _ref5.createAnalyticsEvent,
|
|
233
|
-
emptyStateHandler = _ref5.emptyStateHandler,
|
|
234
|
-
selectedCategory = _ref5.selectedCategory,
|
|
235
|
-
selectedCategoryIndex = _ref5.selectedCategoryIndex,
|
|
236
|
-
searchTerm = _ref5.searchTerm,
|
|
237
|
-
setFocusedCategoryIndex = _ref5.setFocusedCategoryIndex,
|
|
238
|
-
setFocusedItemIndex = _ref5.setFocusedItemIndex,
|
|
239
|
-
cache = _ref5.cache,
|
|
240
|
-
onInsertItem = _ref5.onInsertItem;
|
|
241
|
-
var _useContainerWidth2 = (0, _useContainerWidth3.default)(),
|
|
242
|
-
containerWidth = _useContainerWidth2.containerWidth,
|
|
243
|
-
ContainerWidthMonitor = _useContainerWidth2.ContainerWidthMonitor;
|
|
244
|
-
var _useState3 = (0, _react.useState)(_constants.SCROLLBAR_WIDTH),
|
|
245
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
246
|
-
scrollbarWidth = _useState4[0],
|
|
247
|
-
setScrollbarWidth = _useState4[1];
|
|
248
|
-
var fullMode = mode === _types.Modes.full;
|
|
249
|
-
(0, _react.useEffect)(function () {
|
|
250
|
-
/**
|
|
251
|
-
* More of an optimization condition.
|
|
252
|
-
* Initially the containerWidths are reported 0 twice.
|
|
253
|
-
**/
|
|
254
|
-
if (fullMode && containerWidth > 0) {
|
|
255
|
-
setColumnCount((0, _utils.getColumnCount)(containerWidth));
|
|
256
|
-
var updatedScrollbarWidth = (0, _utils.getScrollbarWidth)();
|
|
257
|
-
if (updatedScrollbarWidth > 0) {
|
|
258
|
-
setScrollbarWidth(updatedScrollbarWidth);
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
|
-
}, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
|
|
262
|
-
var onExternalLinkClick = (0, _react.useCallback)(function () {
|
|
263
|
-
(0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
|
|
264
|
-
payload: {
|
|
265
|
-
action: _analytics.ACTION.VISITED,
|
|
266
|
-
actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
|
|
267
|
-
eventType: _analytics.EVENT_TYPE.TRACK
|
|
268
|
-
}
|
|
269
|
-
});
|
|
270
|
-
}, [createAnalyticsEvent]);
|
|
271
108
|
var listCache = (0, _react.useMemo)(function () {
|
|
272
109
|
return cache !== null && cache !== void 0 ? cache : new _CellMeasurer.CellMeasurerCache({
|
|
273
110
|
fixedWidth: true,
|
|
@@ -279,8 +116,8 @@ function ElementListNew(_ref5) {
|
|
|
279
116
|
// need to recalculate values if we have the same items, but they're reordered
|
|
280
117
|
listCache.clearAll();
|
|
281
118
|
}, [listCache, searchTerm]);
|
|
282
|
-
var rowHeight = function rowHeight(
|
|
283
|
-
var index =
|
|
119
|
+
var rowHeight = function rowHeight(_ref2) {
|
|
120
|
+
var index = _ref2.index;
|
|
284
121
|
return listCache.rowHeight({
|
|
285
122
|
index: index
|
|
286
123
|
});
|
|
@@ -300,8 +137,8 @@ function ElementListNew(_ref5) {
|
|
|
300
137
|
onExternalLinkClick: onExternalLinkClick
|
|
301
138
|
}) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
|
|
302
139
|
disableWidth: true
|
|
303
|
-
}, function (
|
|
304
|
-
var height =
|
|
140
|
+
}, function (_ref3) {
|
|
141
|
+
var height = _ref3.height;
|
|
305
142
|
return columnCount === 1 ? (0, _react2.jsx)(ElementListSingleColumn, {
|
|
306
143
|
cache: listCache,
|
|
307
144
|
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
@@ -346,11 +183,11 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
|
|
|
346
183
|
selectedCategoryIndex = props.selectedCategoryIndex,
|
|
347
184
|
selectedItemIndex = props.selectedItemIndex;
|
|
348
185
|
var rowRenderer = (0, _react.useMemo)(function () {
|
|
349
|
-
return function (
|
|
350
|
-
var index =
|
|
351
|
-
key =
|
|
352
|
-
style =
|
|
353
|
-
parent =
|
|
186
|
+
return function (_ref4) {
|
|
187
|
+
var index = _ref4.index,
|
|
188
|
+
key = _ref4.key,
|
|
189
|
+
style = _ref4.style,
|
|
190
|
+
parent = _ref4.parent;
|
|
354
191
|
return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
|
|
355
192
|
key: key,
|
|
356
193
|
cache: cache,
|
|
@@ -431,12 +268,12 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
|
|
|
431
268
|
var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
|
|
432
269
|
var rowCount = Math.ceil(items.length / columnCount);
|
|
433
270
|
var cellRenderer = (0, _react.useMemo)(function () {
|
|
434
|
-
return function (
|
|
435
|
-
var columnIndex =
|
|
436
|
-
key =
|
|
437
|
-
parent =
|
|
438
|
-
rowIndex =
|
|
439
|
-
style =
|
|
271
|
+
return function (_ref5) {
|
|
272
|
+
var columnIndex = _ref5.columnIndex,
|
|
273
|
+
key = _ref5.key,
|
|
274
|
+
parent = _ref5.parent,
|
|
275
|
+
rowIndex = _ref5.rowIndex,
|
|
276
|
+
style = _ref5.style;
|
|
440
277
|
var index = rowIndex * columnCount + columnIndex;
|
|
441
278
|
if (items[index] == null) {
|
|
442
279
|
return;
|
|
@@ -513,14 +350,14 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
|
|
|
513
350
|
};
|
|
514
351
|
var MemoizedElementItem = /*#__PURE__*/(0, _react.memo)(ElementItem);
|
|
515
352
|
MemoizedElementItem.displayName = 'MemoizedElementItem';
|
|
516
|
-
function ElementItem(
|
|
517
|
-
var inlineMode =
|
|
518
|
-
selected =
|
|
519
|
-
item =
|
|
520
|
-
index =
|
|
521
|
-
onInsertItem =
|
|
522
|
-
focus =
|
|
523
|
-
setFocusedItemIndex =
|
|
353
|
+
function ElementItem(_ref6) {
|
|
354
|
+
var inlineMode = _ref6.inlineMode,
|
|
355
|
+
selected = _ref6.selected,
|
|
356
|
+
item = _ref6.item,
|
|
357
|
+
index = _ref6.index,
|
|
358
|
+
onInsertItem = _ref6.onInsertItem,
|
|
359
|
+
focus = _ref6.focus,
|
|
360
|
+
setFocusedItemIndex = _ref6.setFocusedItemIndex;
|
|
524
361
|
var ref = (0, _useFocus.default)(focus);
|
|
525
362
|
|
|
526
363
|
/**
|
|
@@ -588,17 +425,17 @@ function ElementItem(_ref10) {
|
|
|
588
425
|
var itemStyleOverrides = {
|
|
589
426
|
alignItems: 'flex-start'
|
|
590
427
|
};
|
|
591
|
-
var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (
|
|
592
|
-
var icon =
|
|
428
|
+
var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref7) {
|
|
429
|
+
var icon = _ref7.icon;
|
|
593
430
|
return (0, _react2.jsx)("div", {
|
|
594
431
|
css: [itemIcon, itemIconStyle]
|
|
595
432
|
}, icon ? icon() : (0, _react2.jsx)(_quickInsert.IconFallback, null));
|
|
596
433
|
});
|
|
597
|
-
var ItemContent = /*#__PURE__*/(0, _react.memo)(function (
|
|
598
|
-
var title =
|
|
599
|
-
description =
|
|
600
|
-
keyshortcut =
|
|
601
|
-
isDisabled =
|
|
434
|
+
var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref8) {
|
|
435
|
+
var title = _ref8.title,
|
|
436
|
+
description = _ref8.description,
|
|
437
|
+
keyshortcut = _ref8.keyshortcut,
|
|
438
|
+
isDisabled = _ref8.isDisabled;
|
|
602
439
|
if ((0, _platformFeatureFlags.fg)('platform_editor_typography_ugc')) {
|
|
603
440
|
return (
|
|
604
441
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -767,58 +604,6 @@ var itemIconStyle = (0, _react2.css)({
|
|
|
767
604
|
objectFit: 'cover'
|
|
768
605
|
}
|
|
769
606
|
});
|
|
770
|
-
function ElementList(_ref13) {
|
|
771
|
-
var items = _ref13.items,
|
|
772
|
-
mode = _ref13.mode,
|
|
773
|
-
selectedItemIndex = _ref13.selectedItemIndex,
|
|
774
|
-
focusedItemIndex = _ref13.focusedItemIndex,
|
|
775
|
-
columnCount = _ref13.columnCount,
|
|
776
|
-
setColumnCount = _ref13.setColumnCount,
|
|
777
|
-
createAnalyticsEvent = _ref13.createAnalyticsEvent,
|
|
778
|
-
emptyStateHandler = _ref13.emptyStateHandler,
|
|
779
|
-
selectedCategory = _ref13.selectedCategory,
|
|
780
|
-
selectedCategoryIndex = _ref13.selectedCategoryIndex,
|
|
781
|
-
searchTerm = _ref13.searchTerm,
|
|
782
|
-
setFocusedCategoryIndex = _ref13.setFocusedCategoryIndex,
|
|
783
|
-
setFocusedItemIndex = _ref13.setFocusedItemIndex,
|
|
784
|
-
props = (0, _objectWithoutProperties2.default)(_ref13, _excluded2);
|
|
785
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_element_browser_padding')) {
|
|
786
|
-
return (0, _react2.jsx)(ElementListNew, (0, _extends2.default)({
|
|
787
|
-
items: items,
|
|
788
|
-
mode: mode,
|
|
789
|
-
selectedItemIndex: selectedItemIndex,
|
|
790
|
-
focusedItemIndex: focusedItemIndex,
|
|
791
|
-
columnCount: columnCount,
|
|
792
|
-
setColumnCount: setColumnCount,
|
|
793
|
-
createAnalyticsEvent: createAnalyticsEvent,
|
|
794
|
-
emptyStateHandler: emptyStateHandler,
|
|
795
|
-
selectedCategory: selectedCategory,
|
|
796
|
-
selectedCategoryIndex: selectedCategoryIndex,
|
|
797
|
-
searchTerm: searchTerm,
|
|
798
|
-
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
799
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
800
|
-
// Ignored via go/ees005
|
|
801
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
802
|
-
}, props));
|
|
803
|
-
}
|
|
804
|
-
return (0, _react2.jsx)(ElementListOld, (0, _extends2.default)({
|
|
805
|
-
items: items,
|
|
806
|
-
mode: mode,
|
|
807
|
-
selectedItemIndex: selectedItemIndex,
|
|
808
|
-
focusedItemIndex: focusedItemIndex,
|
|
809
|
-
columnCount: columnCount,
|
|
810
|
-
setColumnCount: setColumnCount,
|
|
811
|
-
createAnalyticsEvent: createAnalyticsEvent,
|
|
812
|
-
emptyStateHandler: emptyStateHandler,
|
|
813
|
-
selectedCategory: selectedCategory,
|
|
814
|
-
selectedCategoryIndex: selectedCategoryIndex,
|
|
815
|
-
searchTerm: searchTerm,
|
|
816
|
-
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
817
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
818
|
-
// Ignored via go/ees005
|
|
819
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
820
|
-
}, props));
|
|
821
|
-
}
|
|
822
607
|
var MemoizedElementListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _withAnalyticsContext.default)({
|
|
823
608
|
component: 'ElementList'
|
|
824
609
|
})(ElementList));
|
|
@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
17
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
18
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
19
19
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
20
|
-
var packageVersion = "102.11.
|
|
20
|
+
var packageVersion = "102.11.6";
|
|
21
21
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
22
22
|
// Remove URL as it has UGC
|
|
23
23
|
// Ignored via go/ees007
|
|
@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
23
23
|
* @jsx jsx
|
|
24
24
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
25
25
|
var packageName = "@atlaskit/editor-common";
|
|
26
|
-
var packageVersion = "102.11.
|
|
26
|
+
var packageVersion = "102.11.6";
|
|
27
27
|
var halfFocusRing = 1;
|
|
28
28
|
var dropOffset = '0, 8';
|
|
29
29
|
// Ignored via go/ees005
|
|
@@ -46,165 +46,7 @@ export const itemIcon = css({
|
|
|
46
46
|
height: `${ICON_HEIGHT}px`
|
|
47
47
|
}
|
|
48
48
|
});
|
|
49
|
-
function
|
|
50
|
-
items,
|
|
51
|
-
mode,
|
|
52
|
-
selectedItemIndex,
|
|
53
|
-
focusedItemIndex,
|
|
54
|
-
columnCount,
|
|
55
|
-
setColumnCount,
|
|
56
|
-
createAnalyticsEvent,
|
|
57
|
-
emptyStateHandler,
|
|
58
|
-
selectedCategory,
|
|
59
|
-
selectedCategoryIndex,
|
|
60
|
-
searchTerm,
|
|
61
|
-
setFocusedCategoryIndex,
|
|
62
|
-
setFocusedItemIndex,
|
|
63
|
-
...props
|
|
64
|
-
}) {
|
|
65
|
-
const {
|
|
66
|
-
containerWidth,
|
|
67
|
-
ContainerWidthMonitor
|
|
68
|
-
} = useContainerWidth();
|
|
69
|
-
const [scrollbarWidth, setScrollbarWidth] = useState(SCROLLBAR_WIDTH);
|
|
70
|
-
const fullMode = mode === Modes.full;
|
|
71
|
-
useEffect(() => {
|
|
72
|
-
/**
|
|
73
|
-
* More of an optimization condition.
|
|
74
|
-
* Initially the containerWidths are reported 0 twice.
|
|
75
|
-
**/
|
|
76
|
-
if (fullMode && containerWidth > 0) {
|
|
77
|
-
setColumnCount(getColumnCount(containerWidth));
|
|
78
|
-
const updatedScrollbarWidth = getScrollbarWidth();
|
|
79
|
-
if (updatedScrollbarWidth > 0) {
|
|
80
|
-
setScrollbarWidth(updatedScrollbarWidth);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
|
|
84
|
-
const onExternalLinkClick = useCallback(() => {
|
|
85
|
-
fireAnalyticsEvent(createAnalyticsEvent)({
|
|
86
|
-
payload: {
|
|
87
|
-
action: ACTION.VISITED,
|
|
88
|
-
actionSubject: ACTION_SUBJECT.SMART_LINK,
|
|
89
|
-
eventType: EVENT_TYPE.TRACK
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
}, [createAnalyticsEvent]);
|
|
93
|
-
const cache = useMemo(() => {
|
|
94
|
-
return new CellMeasurerCache({
|
|
95
|
-
fixedWidth: true,
|
|
96
|
-
defaultHeight: 75,
|
|
97
|
-
minHeight: 75
|
|
98
|
-
});
|
|
99
|
-
}, []);
|
|
100
|
-
const columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
|
|
101
|
-
const rowCount = Math.ceil(items.length / columnCount);
|
|
102
|
-
const rowHeight = ({
|
|
103
|
-
index
|
|
104
|
-
}) => cache.rowHeight({
|
|
105
|
-
index
|
|
106
|
-
}) <= 75 ? 75 : cache.rowHeight({
|
|
107
|
-
index
|
|
108
|
-
}) + ELEMENT_ITEM_PADDING * 2;
|
|
109
|
-
const cellRenderer = useMemo(() => ({
|
|
110
|
-
columnIndex,
|
|
111
|
-
key,
|
|
112
|
-
parent,
|
|
113
|
-
rowIndex,
|
|
114
|
-
style
|
|
115
|
-
}) => {
|
|
116
|
-
const index = rowIndex * columnCount + columnIndex;
|
|
117
|
-
if (items[index] == null) {
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
return index > items.length - 1 ? null : jsx(CellMeasurer, {
|
|
121
|
-
cache: cache,
|
|
122
|
-
key: key,
|
|
123
|
-
rowIndex: rowIndex,
|
|
124
|
-
columnIndex: columnIndex,
|
|
125
|
-
parent: parent
|
|
126
|
-
}, jsx("div", {
|
|
127
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
128
|
-
style: style,
|
|
129
|
-
key: key
|
|
130
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
|
|
131
|
-
,
|
|
132
|
-
className: "element-item-wrapper",
|
|
133
|
-
css: elementItemWrapper,
|
|
134
|
-
onKeyDown: e => {
|
|
135
|
-
if (e.key === 'Tab') {
|
|
136
|
-
if (e.shiftKey && index === 0) {
|
|
137
|
-
if (setFocusedCategoryIndex) {
|
|
138
|
-
if (!!selectedCategoryIndex) {
|
|
139
|
-
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
140
|
-
} else {
|
|
141
|
-
setFocusedCategoryIndex(0);
|
|
142
|
-
}
|
|
143
|
-
e.preventDefault();
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
// before focus jumps from elements list we need to rerender react-virtualized grid.
|
|
147
|
-
// Otherwise on the next render 'scrollToCell' will have same cached value
|
|
148
|
-
// and grid will not be scrolled to top.
|
|
149
|
-
// So Tab press on category will not work anymore due to invisible 1-t element.
|
|
150
|
-
else if (index === items.length - 2) {
|
|
151
|
-
setFocusedItemIndex(items.length - 1);
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
}, jsx(MemoizedElementItem, _extends({
|
|
156
|
-
inlineMode: !fullMode,
|
|
157
|
-
index: index,
|
|
158
|
-
item: items[index],
|
|
159
|
-
selected: selectedItemIndex === index,
|
|
160
|
-
focus: focusedItemIndex === index,
|
|
161
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
162
|
-
// Ignored via go/ees005
|
|
163
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
164
|
-
}, props))));
|
|
165
|
-
},
|
|
166
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
167
|
-
[cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
|
|
168
|
-
return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
|
|
169
|
-
css: elementItemsWrapper,
|
|
170
|
-
"data-testid": "element-items",
|
|
171
|
-
id: selectedCategory ? `browse-category-${selectedCategory}-tab` : 'browse-category-tab',
|
|
172
|
-
"aria-labelledby": selectedCategory ? `browse-category--${selectedCategory}-button` : 'browse-category-button',
|
|
173
|
-
role: "tabpanel",
|
|
174
|
-
tabIndex: items.length === 0 ? 0 : undefined
|
|
175
|
-
}, !items.length ? emptyStateHandler ? emptyStateHandler({
|
|
176
|
-
mode,
|
|
177
|
-
selectedCategory,
|
|
178
|
-
searchTerm
|
|
179
|
-
}) : jsx(EmptyState, {
|
|
180
|
-
onExternalLinkClick: onExternalLinkClick
|
|
181
|
-
}) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
182
|
-
disableWidth: true
|
|
183
|
-
}, ({
|
|
184
|
-
height
|
|
185
|
-
}) => jsx(Grid, _extends({
|
|
186
|
-
cellRenderer: cellRenderer,
|
|
187
|
-
height: height,
|
|
188
|
-
width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
189
|
-
/**
|
|
190
|
-
* Refresh Grid on WidthObserver value change.
|
|
191
|
-
* Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
|
|
192
|
-
* scroll position after updating the data. If new data has different number of cells, a re-render
|
|
193
|
-
* is forced to prevent the scroll position render bug.
|
|
194
|
-
*/,
|
|
195
|
-
key: containerWidth + items.length,
|
|
196
|
-
rowHeight: rowHeight,
|
|
197
|
-
rowCount: rowCount,
|
|
198
|
-
columnCount: columnCount,
|
|
199
|
-
columnWidth: columnWidth,
|
|
200
|
-
deferredMeasurementCache: cache
|
|
201
|
-
// Ignored via go/ees005
|
|
202
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
203
|
-
}, selectedItemIndex !== undefined && {
|
|
204
|
-
scrollToRow: Math.floor(selectedItemIndex / columnCount)
|
|
205
|
-
}))))));
|
|
206
|
-
}
|
|
207
|
-
function ElementListNew({
|
|
49
|
+
function ElementList({
|
|
208
50
|
items,
|
|
209
51
|
mode,
|
|
210
52
|
selectedItemIndex,
|
|
@@ -753,59 +595,6 @@ const itemIconStyle = css({
|
|
|
753
595
|
objectFit: 'cover'
|
|
754
596
|
}
|
|
755
597
|
});
|
|
756
|
-
function ElementList({
|
|
757
|
-
items,
|
|
758
|
-
mode,
|
|
759
|
-
selectedItemIndex,
|
|
760
|
-
focusedItemIndex,
|
|
761
|
-
columnCount,
|
|
762
|
-
setColumnCount,
|
|
763
|
-
createAnalyticsEvent,
|
|
764
|
-
emptyStateHandler,
|
|
765
|
-
selectedCategory,
|
|
766
|
-
selectedCategoryIndex,
|
|
767
|
-
searchTerm,
|
|
768
|
-
setFocusedCategoryIndex,
|
|
769
|
-
setFocusedItemIndex,
|
|
770
|
-
...props
|
|
771
|
-
}) {
|
|
772
|
-
if (fg('platform_editor_reduce_element_browser_padding')) {
|
|
773
|
-
return jsx(ElementListNew, _extends({
|
|
774
|
-
items: items,
|
|
775
|
-
mode: mode,
|
|
776
|
-
selectedItemIndex: selectedItemIndex,
|
|
777
|
-
focusedItemIndex: focusedItemIndex,
|
|
778
|
-
columnCount: columnCount,
|
|
779
|
-
setColumnCount: setColumnCount,
|
|
780
|
-
createAnalyticsEvent: createAnalyticsEvent,
|
|
781
|
-
emptyStateHandler: emptyStateHandler,
|
|
782
|
-
selectedCategory: selectedCategory,
|
|
783
|
-
selectedCategoryIndex: selectedCategoryIndex,
|
|
784
|
-
searchTerm: searchTerm,
|
|
785
|
-
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
786
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
787
|
-
// Ignored via go/ees005
|
|
788
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
789
|
-
}, props));
|
|
790
|
-
}
|
|
791
|
-
return jsx(ElementListOld, _extends({
|
|
792
|
-
items: items,
|
|
793
|
-
mode: mode,
|
|
794
|
-
selectedItemIndex: selectedItemIndex,
|
|
795
|
-
focusedItemIndex: focusedItemIndex,
|
|
796
|
-
columnCount: columnCount,
|
|
797
|
-
setColumnCount: setColumnCount,
|
|
798
|
-
createAnalyticsEvent: createAnalyticsEvent,
|
|
799
|
-
emptyStateHandler: emptyStateHandler,
|
|
800
|
-
selectedCategory: selectedCategory,
|
|
801
|
-
selectedCategoryIndex: selectedCategoryIndex,
|
|
802
|
-
searchTerm: searchTerm,
|
|
803
|
-
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
804
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
805
|
-
// Ignored via go/ees005
|
|
806
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
807
|
-
}, props));
|
|
808
|
-
}
|
|
809
598
|
const MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
|
|
810
599
|
component: 'ElementList'
|
|
811
600
|
})(ElementList));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { isFedRamp } from './environment';
|
|
2
2
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
3
3
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
4
|
-
const packageVersion = "102.11.
|
|
4
|
+
const packageVersion = "102.11.6";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// Ignored via go/ees007
|
|
@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
|
|
|
13
13
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
14
14
|
import Layer from '../Layer';
|
|
15
15
|
const packageName = "@atlaskit/editor-common";
|
|
16
|
-
const packageVersion = "102.11.
|
|
16
|
+
const packageVersion = "102.11.6";
|
|
17
17
|
const halfFocusRing = 1;
|
|
18
18
|
const dropOffset = '0, 8';
|
|
19
19
|
// Ignored via go/ees005
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "columnCount", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"],
|
|
5
|
-
_excluded2 = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "columnCount", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"];
|
|
6
3
|
/**
|
|
7
4
|
* @jsxRuntime classic
|
|
8
5
|
* @jsx jsx
|
|
@@ -50,7 +47,7 @@ export var itemIcon = css({
|
|
|
50
47
|
height: "".concat(ICON_HEIGHT, "px")
|
|
51
48
|
}
|
|
52
49
|
});
|
|
53
|
-
function
|
|
50
|
+
function ElementList(_ref) {
|
|
54
51
|
var items = _ref.items,
|
|
55
52
|
mode = _ref.mode,
|
|
56
53
|
selectedItemIndex = _ref.selectedItemIndex,
|
|
@@ -64,7 +61,8 @@ function ElementListOld(_ref) {
|
|
|
64
61
|
searchTerm = _ref.searchTerm,
|
|
65
62
|
setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
|
|
66
63
|
setFocusedItemIndex = _ref.setFocusedItemIndex,
|
|
67
|
-
|
|
64
|
+
cache = _ref.cache,
|
|
65
|
+
onInsertItem = _ref.onInsertItem;
|
|
68
66
|
var _useContainerWidth = useContainerWidth(),
|
|
69
67
|
containerWidth = _useContainerWidth.containerWidth,
|
|
70
68
|
ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
|
|
@@ -95,169 +93,6 @@ function ElementListOld(_ref) {
|
|
|
95
93
|
}
|
|
96
94
|
});
|
|
97
95
|
}, [createAnalyticsEvent]);
|
|
98
|
-
var cache = useMemo(function () {
|
|
99
|
-
return new CellMeasurerCache({
|
|
100
|
-
fixedWidth: true,
|
|
101
|
-
defaultHeight: 75,
|
|
102
|
-
minHeight: 75
|
|
103
|
-
});
|
|
104
|
-
}, []);
|
|
105
|
-
var columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
|
|
106
|
-
var rowCount = Math.ceil(items.length / columnCount);
|
|
107
|
-
var rowHeight = function rowHeight(_ref2) {
|
|
108
|
-
var index = _ref2.index;
|
|
109
|
-
return cache.rowHeight({
|
|
110
|
-
index: index
|
|
111
|
-
}) <= 75 ? 75 : cache.rowHeight({
|
|
112
|
-
index: index
|
|
113
|
-
}) + ELEMENT_ITEM_PADDING * 2;
|
|
114
|
-
};
|
|
115
|
-
var cellRenderer = useMemo(function () {
|
|
116
|
-
return function (_ref3) {
|
|
117
|
-
var columnIndex = _ref3.columnIndex,
|
|
118
|
-
key = _ref3.key,
|
|
119
|
-
parent = _ref3.parent,
|
|
120
|
-
rowIndex = _ref3.rowIndex,
|
|
121
|
-
style = _ref3.style;
|
|
122
|
-
var index = rowIndex * columnCount + columnIndex;
|
|
123
|
-
if (items[index] == null) {
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
return index > items.length - 1 ? null : jsx(CellMeasurer, {
|
|
127
|
-
cache: cache,
|
|
128
|
-
key: key,
|
|
129
|
-
rowIndex: rowIndex,
|
|
130
|
-
columnIndex: columnIndex,
|
|
131
|
-
parent: parent
|
|
132
|
-
}, jsx("div", {
|
|
133
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
134
|
-
style: style,
|
|
135
|
-
key: key
|
|
136
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
|
|
137
|
-
,
|
|
138
|
-
className: "element-item-wrapper",
|
|
139
|
-
css: elementItemWrapper,
|
|
140
|
-
onKeyDown: function onKeyDown(e) {
|
|
141
|
-
if (e.key === 'Tab') {
|
|
142
|
-
if (e.shiftKey && index === 0) {
|
|
143
|
-
if (setFocusedCategoryIndex) {
|
|
144
|
-
if (!!selectedCategoryIndex) {
|
|
145
|
-
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
146
|
-
} else {
|
|
147
|
-
setFocusedCategoryIndex(0);
|
|
148
|
-
}
|
|
149
|
-
e.preventDefault();
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
// before focus jumps from elements list we need to rerender react-virtualized grid.
|
|
153
|
-
// Otherwise on the next render 'scrollToCell' will have same cached value
|
|
154
|
-
// and grid will not be scrolled to top.
|
|
155
|
-
// So Tab press on category will not work anymore due to invisible 1-t element.
|
|
156
|
-
else if (index === items.length - 2) {
|
|
157
|
-
setFocusedItemIndex(items.length - 1);
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}, jsx(MemoizedElementItem, _extends({
|
|
162
|
-
inlineMode: !fullMode,
|
|
163
|
-
index: index,
|
|
164
|
-
item: items[index],
|
|
165
|
-
selected: selectedItemIndex === index,
|
|
166
|
-
focus: focusedItemIndex === index,
|
|
167
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
168
|
-
// Ignored via go/ees005
|
|
169
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
170
|
-
}, props))));
|
|
171
|
-
};
|
|
172
|
-
},
|
|
173
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
174
|
-
[cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
|
|
175
|
-
return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
|
|
176
|
-
css: elementItemsWrapper,
|
|
177
|
-
"data-testid": "element-items",
|
|
178
|
-
id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
|
|
179
|
-
"aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
|
|
180
|
-
role: "tabpanel",
|
|
181
|
-
tabIndex: items.length === 0 ? 0 : undefined
|
|
182
|
-
}, !items.length ? emptyStateHandler ? emptyStateHandler({
|
|
183
|
-
mode: mode,
|
|
184
|
-
selectedCategory: selectedCategory,
|
|
185
|
-
searchTerm: searchTerm
|
|
186
|
-
}) : jsx(EmptyState, {
|
|
187
|
-
onExternalLinkClick: onExternalLinkClick
|
|
188
|
-
}) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
189
|
-
disableWidth: true
|
|
190
|
-
}, function (_ref4) {
|
|
191
|
-
var height = _ref4.height;
|
|
192
|
-
return jsx(Grid, _extends({
|
|
193
|
-
cellRenderer: cellRenderer,
|
|
194
|
-
height: height,
|
|
195
|
-
width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
196
|
-
/**
|
|
197
|
-
* Refresh Grid on WidthObserver value change.
|
|
198
|
-
* Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
|
|
199
|
-
* scroll position after updating the data. If new data has different number of cells, a re-render
|
|
200
|
-
* is forced to prevent the scroll position render bug.
|
|
201
|
-
*/,
|
|
202
|
-
key: containerWidth + items.length,
|
|
203
|
-
rowHeight: rowHeight,
|
|
204
|
-
rowCount: rowCount,
|
|
205
|
-
columnCount: columnCount,
|
|
206
|
-
columnWidth: columnWidth,
|
|
207
|
-
deferredMeasurementCache: cache
|
|
208
|
-
// Ignored via go/ees005
|
|
209
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
210
|
-
}, selectedItemIndex !== undefined && {
|
|
211
|
-
scrollToRow: Math.floor(selectedItemIndex / columnCount)
|
|
212
|
-
}));
|
|
213
|
-
}))));
|
|
214
|
-
}
|
|
215
|
-
function ElementListNew(_ref5) {
|
|
216
|
-
var items = _ref5.items,
|
|
217
|
-
mode = _ref5.mode,
|
|
218
|
-
selectedItemIndex = _ref5.selectedItemIndex,
|
|
219
|
-
focusedItemIndex = _ref5.focusedItemIndex,
|
|
220
|
-
columnCount = _ref5.columnCount,
|
|
221
|
-
setColumnCount = _ref5.setColumnCount,
|
|
222
|
-
createAnalyticsEvent = _ref5.createAnalyticsEvent,
|
|
223
|
-
emptyStateHandler = _ref5.emptyStateHandler,
|
|
224
|
-
selectedCategory = _ref5.selectedCategory,
|
|
225
|
-
selectedCategoryIndex = _ref5.selectedCategoryIndex,
|
|
226
|
-
searchTerm = _ref5.searchTerm,
|
|
227
|
-
setFocusedCategoryIndex = _ref5.setFocusedCategoryIndex,
|
|
228
|
-
setFocusedItemIndex = _ref5.setFocusedItemIndex,
|
|
229
|
-
cache = _ref5.cache,
|
|
230
|
-
onInsertItem = _ref5.onInsertItem;
|
|
231
|
-
var _useContainerWidth2 = useContainerWidth(),
|
|
232
|
-
containerWidth = _useContainerWidth2.containerWidth,
|
|
233
|
-
ContainerWidthMonitor = _useContainerWidth2.ContainerWidthMonitor;
|
|
234
|
-
var _useState3 = useState(SCROLLBAR_WIDTH),
|
|
235
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
236
|
-
scrollbarWidth = _useState4[0],
|
|
237
|
-
setScrollbarWidth = _useState4[1];
|
|
238
|
-
var fullMode = mode === Modes.full;
|
|
239
|
-
useEffect(function () {
|
|
240
|
-
/**
|
|
241
|
-
* More of an optimization condition.
|
|
242
|
-
* Initially the containerWidths are reported 0 twice.
|
|
243
|
-
**/
|
|
244
|
-
if (fullMode && containerWidth > 0) {
|
|
245
|
-
setColumnCount(getColumnCount(containerWidth));
|
|
246
|
-
var updatedScrollbarWidth = getScrollbarWidth();
|
|
247
|
-
if (updatedScrollbarWidth > 0) {
|
|
248
|
-
setScrollbarWidth(updatedScrollbarWidth);
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
|
|
252
|
-
var onExternalLinkClick = useCallback(function () {
|
|
253
|
-
fireAnalyticsEvent(createAnalyticsEvent)({
|
|
254
|
-
payload: {
|
|
255
|
-
action: ACTION.VISITED,
|
|
256
|
-
actionSubject: ACTION_SUBJECT.SMART_LINK,
|
|
257
|
-
eventType: EVENT_TYPE.TRACK
|
|
258
|
-
}
|
|
259
|
-
});
|
|
260
|
-
}, [createAnalyticsEvent]);
|
|
261
96
|
var listCache = useMemo(function () {
|
|
262
97
|
return cache !== null && cache !== void 0 ? cache : new CellMeasurerCache({
|
|
263
98
|
fixedWidth: true,
|
|
@@ -269,8 +104,8 @@ function ElementListNew(_ref5) {
|
|
|
269
104
|
// need to recalculate values if we have the same items, but they're reordered
|
|
270
105
|
listCache.clearAll();
|
|
271
106
|
}, [listCache, searchTerm]);
|
|
272
|
-
var rowHeight = function rowHeight(
|
|
273
|
-
var index =
|
|
107
|
+
var rowHeight = function rowHeight(_ref2) {
|
|
108
|
+
var index = _ref2.index;
|
|
274
109
|
return listCache.rowHeight({
|
|
275
110
|
index: index
|
|
276
111
|
});
|
|
@@ -290,8 +125,8 @@ function ElementListNew(_ref5) {
|
|
|
290
125
|
onExternalLinkClick: onExternalLinkClick
|
|
291
126
|
}) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
292
127
|
disableWidth: true
|
|
293
|
-
}, function (
|
|
294
|
-
var height =
|
|
128
|
+
}, function (_ref3) {
|
|
129
|
+
var height = _ref3.height;
|
|
295
130
|
return columnCount === 1 ? jsx(ElementListSingleColumn, {
|
|
296
131
|
cache: listCache,
|
|
297
132
|
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
@@ -336,11 +171,11 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
|
|
|
336
171
|
selectedCategoryIndex = props.selectedCategoryIndex,
|
|
337
172
|
selectedItemIndex = props.selectedItemIndex;
|
|
338
173
|
var rowRenderer = useMemo(function () {
|
|
339
|
-
return function (
|
|
340
|
-
var index =
|
|
341
|
-
key =
|
|
342
|
-
style =
|
|
343
|
-
parent =
|
|
174
|
+
return function (_ref4) {
|
|
175
|
+
var index = _ref4.index,
|
|
176
|
+
key = _ref4.key,
|
|
177
|
+
style = _ref4.style,
|
|
178
|
+
parent = _ref4.parent;
|
|
344
179
|
return jsx(CellMeasurer, {
|
|
345
180
|
key: key,
|
|
346
181
|
cache: cache,
|
|
@@ -421,12 +256,12 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
|
|
|
421
256
|
var columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
|
|
422
257
|
var rowCount = Math.ceil(items.length / columnCount);
|
|
423
258
|
var cellRenderer = useMemo(function () {
|
|
424
|
-
return function (
|
|
425
|
-
var columnIndex =
|
|
426
|
-
key =
|
|
427
|
-
parent =
|
|
428
|
-
rowIndex =
|
|
429
|
-
style =
|
|
259
|
+
return function (_ref5) {
|
|
260
|
+
var columnIndex = _ref5.columnIndex,
|
|
261
|
+
key = _ref5.key,
|
|
262
|
+
parent = _ref5.parent,
|
|
263
|
+
rowIndex = _ref5.rowIndex,
|
|
264
|
+
style = _ref5.style;
|
|
430
265
|
var index = rowIndex * columnCount + columnIndex;
|
|
431
266
|
if (items[index] == null) {
|
|
432
267
|
return;
|
|
@@ -503,14 +338,14 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
|
|
|
503
338
|
};
|
|
504
339
|
var MemoizedElementItem = /*#__PURE__*/memo(ElementItem);
|
|
505
340
|
MemoizedElementItem.displayName = 'MemoizedElementItem';
|
|
506
|
-
export function ElementItem(
|
|
507
|
-
var inlineMode =
|
|
508
|
-
selected =
|
|
509
|
-
item =
|
|
510
|
-
index =
|
|
511
|
-
onInsertItem =
|
|
512
|
-
focus =
|
|
513
|
-
setFocusedItemIndex =
|
|
341
|
+
export function ElementItem(_ref6) {
|
|
342
|
+
var inlineMode = _ref6.inlineMode,
|
|
343
|
+
selected = _ref6.selected,
|
|
344
|
+
item = _ref6.item,
|
|
345
|
+
index = _ref6.index,
|
|
346
|
+
onInsertItem = _ref6.onInsertItem,
|
|
347
|
+
focus = _ref6.focus,
|
|
348
|
+
setFocusedItemIndex = _ref6.setFocusedItemIndex;
|
|
514
349
|
var ref = useFocus(focus);
|
|
515
350
|
|
|
516
351
|
/**
|
|
@@ -578,17 +413,17 @@ export function ElementItem(_ref10) {
|
|
|
578
413
|
var itemStyleOverrides = {
|
|
579
414
|
alignItems: 'flex-start'
|
|
580
415
|
};
|
|
581
|
-
var ElementBefore = /*#__PURE__*/memo(function (
|
|
582
|
-
var icon =
|
|
416
|
+
var ElementBefore = /*#__PURE__*/memo(function (_ref7) {
|
|
417
|
+
var icon = _ref7.icon;
|
|
583
418
|
return jsx("div", {
|
|
584
419
|
css: [itemIcon, itemIconStyle]
|
|
585
420
|
}, icon ? icon() : jsx(IconFallback, null));
|
|
586
421
|
});
|
|
587
|
-
var ItemContent = /*#__PURE__*/memo(function (
|
|
588
|
-
var title =
|
|
589
|
-
description =
|
|
590
|
-
keyshortcut =
|
|
591
|
-
isDisabled =
|
|
422
|
+
var ItemContent = /*#__PURE__*/memo(function (_ref8) {
|
|
423
|
+
var title = _ref8.title,
|
|
424
|
+
description = _ref8.description,
|
|
425
|
+
keyshortcut = _ref8.keyshortcut,
|
|
426
|
+
isDisabled = _ref8.isDisabled;
|
|
592
427
|
if (fg('platform_editor_typography_ugc')) {
|
|
593
428
|
return (
|
|
594
429
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -757,58 +592,6 @@ var itemIconStyle = css({
|
|
|
757
592
|
objectFit: 'cover'
|
|
758
593
|
}
|
|
759
594
|
});
|
|
760
|
-
function ElementList(_ref13) {
|
|
761
|
-
var items = _ref13.items,
|
|
762
|
-
mode = _ref13.mode,
|
|
763
|
-
selectedItemIndex = _ref13.selectedItemIndex,
|
|
764
|
-
focusedItemIndex = _ref13.focusedItemIndex,
|
|
765
|
-
columnCount = _ref13.columnCount,
|
|
766
|
-
setColumnCount = _ref13.setColumnCount,
|
|
767
|
-
createAnalyticsEvent = _ref13.createAnalyticsEvent,
|
|
768
|
-
emptyStateHandler = _ref13.emptyStateHandler,
|
|
769
|
-
selectedCategory = _ref13.selectedCategory,
|
|
770
|
-
selectedCategoryIndex = _ref13.selectedCategoryIndex,
|
|
771
|
-
searchTerm = _ref13.searchTerm,
|
|
772
|
-
setFocusedCategoryIndex = _ref13.setFocusedCategoryIndex,
|
|
773
|
-
setFocusedItemIndex = _ref13.setFocusedItemIndex,
|
|
774
|
-
props = _objectWithoutProperties(_ref13, _excluded2);
|
|
775
|
-
if (fg('platform_editor_reduce_element_browser_padding')) {
|
|
776
|
-
return jsx(ElementListNew, _extends({
|
|
777
|
-
items: items,
|
|
778
|
-
mode: mode,
|
|
779
|
-
selectedItemIndex: selectedItemIndex,
|
|
780
|
-
focusedItemIndex: focusedItemIndex,
|
|
781
|
-
columnCount: columnCount,
|
|
782
|
-
setColumnCount: setColumnCount,
|
|
783
|
-
createAnalyticsEvent: createAnalyticsEvent,
|
|
784
|
-
emptyStateHandler: emptyStateHandler,
|
|
785
|
-
selectedCategory: selectedCategory,
|
|
786
|
-
selectedCategoryIndex: selectedCategoryIndex,
|
|
787
|
-
searchTerm: searchTerm,
|
|
788
|
-
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
789
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
790
|
-
// Ignored via go/ees005
|
|
791
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
792
|
-
}, props));
|
|
793
|
-
}
|
|
794
|
-
return jsx(ElementListOld, _extends({
|
|
795
|
-
items: items,
|
|
796
|
-
mode: mode,
|
|
797
|
-
selectedItemIndex: selectedItemIndex,
|
|
798
|
-
focusedItemIndex: focusedItemIndex,
|
|
799
|
-
columnCount: columnCount,
|
|
800
|
-
setColumnCount: setColumnCount,
|
|
801
|
-
createAnalyticsEvent: createAnalyticsEvent,
|
|
802
|
-
emptyStateHandler: emptyStateHandler,
|
|
803
|
-
selectedCategory: selectedCategory,
|
|
804
|
-
selectedCategoryIndex: selectedCategoryIndex,
|
|
805
|
-
searchTerm: searchTerm,
|
|
806
|
-
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
807
|
-
setFocusedItemIndex: setFocusedItemIndex
|
|
808
|
-
// Ignored via go/ees005
|
|
809
|
-
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
810
|
-
}, props));
|
|
811
|
-
}
|
|
812
595
|
var MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
|
|
813
596
|
component: 'ElementList'
|
|
814
597
|
})(ElementList));
|
|
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
import { isFedRamp } from './environment';
|
|
8
8
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
9
9
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
10
|
-
var packageVersion = "102.11.
|
|
10
|
+
var packageVersion = "102.11.6";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// Ignored via go/ees007
|
|
@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
|
|
|
20
20
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
21
21
|
import Layer from '../Layer';
|
|
22
22
|
var packageName = "@atlaskit/editor-common";
|
|
23
|
-
var packageVersion = "102.11.
|
|
23
|
+
var packageVersion = "102.11.6";
|
|
24
24
|
var halfFocusRing = 1;
|
|
25
25
|
var dropOffset = '0, 8';
|
|
26
26
|
// Ignored via go/ees005
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "102.11.
|
|
3
|
+
"version": "102.11.6",
|
|
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/"
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
"@atlaskit/emoji": "^69.0.0",
|
|
138
138
|
"@atlaskit/icon": "^25.0.0",
|
|
139
139
|
"@atlaskit/icon-object": "^7.0.0",
|
|
140
|
-
"@atlaskit/link-datasource": "^4.
|
|
140
|
+
"@atlaskit/link-datasource": "^4.1.0",
|
|
141
141
|
"@atlaskit/link-picker": "^3.0.0",
|
|
142
142
|
"@atlaskit/media-card": "^79.0.0",
|
|
143
143
|
"@atlaskit/media-client": "^32.0.0",
|
|
@@ -271,9 +271,6 @@
|
|
|
271
271
|
"platform-visual-refresh-icons": {
|
|
272
272
|
"type": "boolean"
|
|
273
273
|
},
|
|
274
|
-
"platform_editor_reduce_element_browser_padding": {
|
|
275
|
-
"type": "boolean"
|
|
276
|
-
},
|
|
277
274
|
"platform_editor_use_nested_table_pm_nodes": {
|
|
278
275
|
"type": "boolean"
|
|
279
276
|
},
|