@atlaskit/editor-common 78.17.2 → 78.18.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 +6 -0
- package/dist/cjs/element-browser/components/CategoryList.js +6 -2
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +10 -6
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +82 -20
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/element-browser/components/CategoryList.js +6 -2
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +10 -6
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +81 -99
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/element-browser/components/CategoryList.js +6 -2
- package/dist/esm/element-browser/components/ElementList/ElementList.js +10 -6
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +81 -20
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 78.18.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#71857](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71857) [`bd0fdd102253`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bd0fdd102253) - Added correct role for Browse tablist, added aria-selected toggle, added functionality for aria-controls, added tabpanel and functionality for that
|
|
8
|
+
|
|
3
9
|
## 78.17.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -54,7 +54,6 @@ function CategoryListItem(_ref2) {
|
|
|
54
54
|
var ref = (0, _useFocus.default)(focus);
|
|
55
55
|
var onClick = (0, _react.useCallback)(function () {
|
|
56
56
|
onSelectCategory(category);
|
|
57
|
-
|
|
58
57
|
/**
|
|
59
58
|
* When user double clicks on same category, focus on first item.
|
|
60
59
|
*/
|
|
@@ -94,13 +93,18 @@ function CategoryListItem(_ref2) {
|
|
|
94
93
|
}, rest);
|
|
95
94
|
}, [category.name, selectedCategory]);
|
|
96
95
|
return (0, _react2.jsx)("div", {
|
|
97
|
-
css: buttonWrapper
|
|
96
|
+
css: buttonWrapper,
|
|
97
|
+
role: "presentation"
|
|
98
98
|
}, (0, _react2.jsx)(_customThemeButton.default, {
|
|
99
99
|
appearance: "subtle",
|
|
100
100
|
isSelected: selectedCategory === category.name,
|
|
101
101
|
onClick: onClick,
|
|
102
102
|
onFocus: onFocus,
|
|
103
103
|
theme: getTheme,
|
|
104
|
+
role: "tab",
|
|
105
|
+
"aria-selected": selectedCategory === category.name ? 'true' : 'false',
|
|
106
|
+
"aria-controls": "browse-category-".concat(category.name, "-tab"),
|
|
107
|
+
id: "browse-category--".concat(category.name, "-button"),
|
|
104
108
|
ref: ref,
|
|
105
109
|
testId: "element-browser-category-item"
|
|
106
110
|
}, category.title));
|
|
@@ -114,16 +114,20 @@ function ElementList(_ref) {
|
|
|
114
114
|
}, props)));
|
|
115
115
|
};
|
|
116
116
|
}, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
|
|
117
|
-
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null),
|
|
117
|
+
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
|
|
118
|
+
css: elementItemsWrapper,
|
|
119
|
+
"data-testid": "element-items",
|
|
120
|
+
id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
|
|
121
|
+
"aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
|
|
122
|
+
role: "tabpanel",
|
|
123
|
+
tabIndex: items.length === 0 ? 0 : undefined
|
|
124
|
+
}, !items.length ? emptyStateHandler ? emptyStateHandler({
|
|
118
125
|
mode: mode,
|
|
119
126
|
selectedCategory: selectedCategory,
|
|
120
127
|
searchTerm: searchTerm
|
|
121
128
|
}) : (0, _react2.jsx)(_EmptyState.default, {
|
|
122
129
|
onExternalLinkClick: onExternalLinkClick
|
|
123
|
-
}) : (0, _react2.jsx)(
|
|
124
|
-
css: elementItemsWrapper,
|
|
125
|
-
"data-testid": "element-items"
|
|
126
|
-
}, (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
|
|
130
|
+
}) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
|
|
127
131
|
disableWidth: true
|
|
128
132
|
}, function (_ref3) {
|
|
129
133
|
var height = _ref3.height;
|
|
@@ -269,7 +273,7 @@ var elementItemWrapper = (0, _react2.css)({
|
|
|
269
273
|
button: {
|
|
270
274
|
height: '75px',
|
|
271
275
|
alignItems: 'flex-start',
|
|
272
|
-
padding: "var(--ds-space-150, 12px)"
|
|
276
|
+
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 11px")
|
|
273
277
|
}
|
|
274
278
|
}
|
|
275
279
|
});
|
|
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
12
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
12
|
var _react2 = require("@emotion/react");
|
|
14
13
|
var _reactIntlNext = require("react-intl-next");
|
|
@@ -21,25 +20,83 @@ var _ViewMore = require("../ViewMore");
|
|
|
21
20
|
var _CategoryList = _interopRequireDefault(require("./CategoryList"));
|
|
22
21
|
var _ElementList = _interopRequireDefault(require("./ElementList/ElementList"));
|
|
23
22
|
var _ElementSearch = _interopRequireDefault(require("./ElementSearch"));
|
|
24
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
25
|
-
/** @jsx jsx */
|
|
26
23
|
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); }
|
|
27
24
|
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 && Object.prototype.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; }
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var
|
|
41
|
-
|
|
42
|
-
|
|
25
|
+
/** @jsx jsx */
|
|
26
|
+
|
|
27
|
+
var wrapper = (0, _react2.css)({
|
|
28
|
+
width: '100%',
|
|
29
|
+
maxHeight: 'inherit',
|
|
30
|
+
overflow: 'hidden'
|
|
31
|
+
});
|
|
32
|
+
var baseBrowserContainerStyles = (0, _react2.css)({
|
|
33
|
+
display: 'flex',
|
|
34
|
+
height: '100%',
|
|
35
|
+
minHeight: '-webkit-fill-available'
|
|
36
|
+
});
|
|
37
|
+
var mobileElementBrowserContainer = (0, _react2.css)(baseBrowserContainerStyles, {
|
|
38
|
+
flexDirection: 'column'
|
|
39
|
+
});
|
|
40
|
+
var elementBrowserContainer = (0, _react2.css)(baseBrowserContainerStyles, {
|
|
41
|
+
flexDirection: 'row'
|
|
42
|
+
});
|
|
43
|
+
var baseSidebarStyles = (0, _react2.css)({
|
|
44
|
+
display: 'flex',
|
|
45
|
+
flexDirection: 'column',
|
|
46
|
+
overflowX: 'auto',
|
|
47
|
+
overflowY: 'hidden'
|
|
48
|
+
});
|
|
49
|
+
var mobileSideBar = (0, _react2.css)(baseSidebarStyles, {
|
|
50
|
+
flex: "0 0 ".concat(_constants.INLINE_SIDEBAR_HEIGHT),
|
|
51
|
+
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-150, 12px)")
|
|
52
|
+
});
|
|
53
|
+
var mobileSideBarShowCategories = (0, _react2.css)({
|
|
54
|
+
flex: '0 0 auto'
|
|
55
|
+
});
|
|
56
|
+
var sideBar = (0, _react2.css)(baseSidebarStyles, {
|
|
57
|
+
flex: "0 0 'auto'"
|
|
58
|
+
});
|
|
59
|
+
var sideBarShowCategories = (0, _react2.css)(baseSidebarStyles, {
|
|
60
|
+
flex: "0 0 ".concat(_constants.SIDEBAR_WIDTH)
|
|
61
|
+
});
|
|
62
|
+
var sidebarHeading = (0, _react2.css)({
|
|
63
|
+
flex: "0 0 ".concat(_constants.SIDEBAR_HEADING_WRAPPER_HEIGHT),
|
|
64
|
+
display: 'inline-flex',
|
|
65
|
+
alignItems: 'center',
|
|
66
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
67
|
+
fontWeight: 700
|
|
68
|
+
});
|
|
69
|
+
var mobileMainContent = (0, _react2.css)({
|
|
70
|
+
flex: '1 1 auto',
|
|
71
|
+
display: 'flex',
|
|
72
|
+
flexDirection: 'column',
|
|
73
|
+
overflowY: 'auto',
|
|
74
|
+
height: '100%'
|
|
75
|
+
});
|
|
76
|
+
var mainContent = (0, _react2.css)(mobileMainContent, {
|
|
77
|
+
marginLeft: "var(--ds-space-200, 16px)",
|
|
78
|
+
height: 'auto'
|
|
79
|
+
});
|
|
80
|
+
var searchContainer = (0, _react2.css)({
|
|
81
|
+
paddingBottom: "var(--ds-space-200, 16px)"
|
|
82
|
+
});
|
|
83
|
+
var mobileCategoryListWrapper = (0, _react2.css)({
|
|
84
|
+
display: 'flex',
|
|
85
|
+
overflowX: 'auto',
|
|
86
|
+
padding: "var(--ds-space-200, 8px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"),
|
|
87
|
+
minHeight: "".concat(_constants.GRID_SIZE * 4, "px"),
|
|
88
|
+
overflow: '-moz-scrollbars-none',
|
|
89
|
+
'::-webkit-scrollbar': {
|
|
90
|
+
display: 'none'
|
|
91
|
+
},
|
|
92
|
+
scrollbarWidth: 'none',
|
|
93
|
+
MsOverflowStyle: 'none'
|
|
94
|
+
});
|
|
95
|
+
var categoryListWrapper = (0, _react2.css)(mobileCategoryListWrapper, {
|
|
96
|
+
padding: 0,
|
|
97
|
+
marginTop: "var(--ds-space-200, 24px)",
|
|
98
|
+
flexDirection: 'column'
|
|
99
|
+
});
|
|
43
100
|
function StatelessElementBrowser(props) {
|
|
44
101
|
var items = props.items,
|
|
45
102
|
onSelectItem = props.onSelectItem,
|
|
@@ -225,12 +282,15 @@ function DesktopBrowser(_ref2) {
|
|
|
225
282
|
css: showCategories ? sideBarShowCategories : sideBar
|
|
226
283
|
}, (0, _react2.jsx)("h2", {
|
|
227
284
|
css: sidebarHeading,
|
|
228
|
-
"data-testid": "sidebar-heading"
|
|
285
|
+
"data-testid": "sidebar-heading",
|
|
286
|
+
id: "sidebar-heading"
|
|
229
287
|
}, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
|
|
230
288
|
id: "fabric.editor.elementbrowser.sidebar.heading",
|
|
231
289
|
defaultMessage: "Browse",
|
|
232
290
|
description: "Sidebar heading"
|
|
233
291
|
})), (0, _react2.jsx)("nav", {
|
|
292
|
+
role: "tablist",
|
|
293
|
+
"aria-labelledby": "sidebar-heading",
|
|
234
294
|
css: categoryListWrapper
|
|
235
295
|
}, (0, _react2.jsx)(_CategoryList.default, {
|
|
236
296
|
categories: categories,
|
|
@@ -241,7 +301,9 @@ function DesktopBrowser(_ref2) {
|
|
|
241
301
|
css: mainContent,
|
|
242
302
|
onKeyDown: onKeyDown,
|
|
243
303
|
"data-testid": "main-content"
|
|
244
|
-
}, showSearch &&
|
|
304
|
+
}, showSearch &&
|
|
305
|
+
// eslint-disable-next-line
|
|
306
|
+
(0, _react2.jsx)("div", {
|
|
245
307
|
css: searchContainer
|
|
246
308
|
}, (0, _react2.jsx)(_ElementSearch.default, {
|
|
247
309
|
onSearch: onSearch,
|
|
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
16
16
|
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 && Object.prototype.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; }
|
|
17
17
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
18
18
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
19
|
-
var packageVersion = "78.
|
|
19
|
+
var packageVersion = "78.18.0";
|
|
20
20
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
21
21
|
// Remove URL as it has UGC
|
|
22
22
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
22
22
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
23
23
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
|
|
24
24
|
var packageName = "@atlaskit/editor-common";
|
|
25
|
-
var packageVersion = "78.
|
|
25
|
+
var packageVersion = "78.18.0";
|
|
26
26
|
var halfFocusRing = 1;
|
|
27
27
|
var dropOffset = '0, 8';
|
|
28
28
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -34,7 +34,6 @@ function CategoryListItem({
|
|
|
34
34
|
const ref = useFocus(focus);
|
|
35
35
|
const onClick = useCallback(() => {
|
|
36
36
|
onSelectCategory(category);
|
|
37
|
-
|
|
38
37
|
/**
|
|
39
38
|
* When user double clicks on same category, focus on first item.
|
|
40
39
|
*/
|
|
@@ -78,13 +77,18 @@ function CategoryListItem({
|
|
|
78
77
|
};
|
|
79
78
|
}, [category.name, selectedCategory]);
|
|
80
79
|
return jsx("div", {
|
|
81
|
-
css: buttonWrapper
|
|
80
|
+
css: buttonWrapper,
|
|
81
|
+
role: "presentation"
|
|
82
82
|
}, jsx(Button, {
|
|
83
83
|
appearance: "subtle",
|
|
84
84
|
isSelected: selectedCategory === category.name,
|
|
85
85
|
onClick: onClick,
|
|
86
86
|
onFocus: onFocus,
|
|
87
87
|
theme: getTheme,
|
|
88
|
+
role: "tab",
|
|
89
|
+
"aria-selected": selectedCategory === category.name ? 'true' : 'false',
|
|
90
|
+
"aria-controls": `browse-category-${category.name}-tab`,
|
|
91
|
+
id: `browse-category--${category.name}-button`,
|
|
88
92
|
ref: ref,
|
|
89
93
|
testId: "element-browser-category-item"
|
|
90
94
|
}, category.title));
|
|
@@ -98,16 +98,20 @@ function ElementList({
|
|
|
98
98
|
focus: focusedItemIndex === index
|
|
99
99
|
}, props)));
|
|
100
100
|
}, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
|
|
101
|
-
return jsx(Fragment, null, jsx(ContainerWidthMonitor, null),
|
|
101
|
+
return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
|
|
102
|
+
css: elementItemsWrapper,
|
|
103
|
+
"data-testid": "element-items",
|
|
104
|
+
id: selectedCategory ? `browse-category-${selectedCategory}-tab` : 'browse-category-tab',
|
|
105
|
+
"aria-labelledby": selectedCategory ? `browse-category--${selectedCategory}-button` : 'browse-category-button',
|
|
106
|
+
role: "tabpanel",
|
|
107
|
+
tabIndex: items.length === 0 ? 0 : undefined
|
|
108
|
+
}, !items.length ? emptyStateHandler ? emptyStateHandler({
|
|
102
109
|
mode,
|
|
103
110
|
selectedCategory,
|
|
104
111
|
searchTerm
|
|
105
112
|
}) : jsx(EmptyState, {
|
|
106
113
|
onExternalLinkClick: onExternalLinkClick
|
|
107
|
-
}) : jsx(
|
|
108
|
-
css: elementItemsWrapper,
|
|
109
|
-
"data-testid": "element-items"
|
|
110
|
-
}, jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
114
|
+
}) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
111
115
|
disableWidth: true
|
|
112
116
|
}, ({
|
|
113
117
|
height
|
|
@@ -253,7 +257,7 @@ const elementItemWrapper = css({
|
|
|
253
257
|
button: {
|
|
254
258
|
height: '75px',
|
|
255
259
|
alignItems: 'flex-start',
|
|
256
|
-
padding: "var(--ds-space-150, 12px)"
|
|
260
|
+
padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 11px`
|
|
257
261
|
}
|
|
258
262
|
}
|
|
259
263
|
});
|
|
@@ -5,109 +5,86 @@ import { css, jsx } from '@emotion/react';
|
|
|
5
5
|
import { FormattedMessage } from 'react-intl-next';
|
|
6
6
|
import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
7
7
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
8
|
-
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT,
|
|
8
|
+
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
|
|
9
9
|
import useContainerWidth from '../hooks/use-container-width';
|
|
10
10
|
import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
|
|
11
11
|
import { ViewMore } from '../ViewMore';
|
|
12
12
|
import CategoryList from './CategoryList';
|
|
13
13
|
import ElementList from './ElementList/ElementList';
|
|
14
14
|
import ElementSearch from './ElementSearch';
|
|
15
|
-
const wrapper = css
|
|
16
|
-
width: 100
|
|
17
|
-
|
|
18
|
-
overflow: hidden
|
|
19
|
-
|
|
20
|
-
const baseBrowserContainerStyles = css
|
|
21
|
-
display: flex
|
|
22
|
-
height: 100
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
${
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
flex: 0 0 ${
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
const searchContainer = css`
|
|
89
|
-
padding-bottom: ${GRID_SIZE * 2}px;
|
|
90
|
-
`;
|
|
91
|
-
const mobileCategoryListWrapper = css`
|
|
92
|
-
display: flex;
|
|
93
|
-
overflow-x: auto;
|
|
94
|
-
|
|
95
|
-
padding: ${GRID_SIZE}px 0 ${GRID_SIZE * 2}px 0;
|
|
96
|
-
min-height: ${GRID_SIZE * 4}px;
|
|
97
|
-
|
|
98
|
-
overflow: -moz-scrollbars-none;
|
|
99
|
-
::-webkit-scrollbar {
|
|
100
|
-
display: none;
|
|
101
|
-
}
|
|
102
|
-
scrollbar-width: none;
|
|
103
|
-
-ms-overflow-style: none;
|
|
104
|
-
`;
|
|
105
|
-
const categoryListWrapper = css`
|
|
106
|
-
${mobileCategoryListWrapper}
|
|
107
|
-
padding: 0;
|
|
108
|
-
margin-top: ${GRID_SIZE * 3}px;
|
|
109
|
-
flex-direction: column;
|
|
110
|
-
`;
|
|
15
|
+
const wrapper = css({
|
|
16
|
+
width: '100%',
|
|
17
|
+
maxHeight: 'inherit',
|
|
18
|
+
overflow: 'hidden'
|
|
19
|
+
});
|
|
20
|
+
const baseBrowserContainerStyles = css({
|
|
21
|
+
display: 'flex',
|
|
22
|
+
height: '100%',
|
|
23
|
+
minHeight: '-webkit-fill-available'
|
|
24
|
+
});
|
|
25
|
+
const mobileElementBrowserContainer = css(baseBrowserContainerStyles, {
|
|
26
|
+
flexDirection: 'column'
|
|
27
|
+
});
|
|
28
|
+
const elementBrowserContainer = css(baseBrowserContainerStyles, {
|
|
29
|
+
flexDirection: 'row'
|
|
30
|
+
});
|
|
31
|
+
const baseSidebarStyles = css({
|
|
32
|
+
display: 'flex',
|
|
33
|
+
flexDirection: 'column',
|
|
34
|
+
overflowX: 'auto',
|
|
35
|
+
overflowY: 'hidden'
|
|
36
|
+
});
|
|
37
|
+
const mobileSideBar = css(baseSidebarStyles, {
|
|
38
|
+
flex: `0 0 ${INLINE_SIDEBAR_HEIGHT}`,
|
|
39
|
+
padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-150, 12px)"}`
|
|
40
|
+
});
|
|
41
|
+
const mobileSideBarShowCategories = css({
|
|
42
|
+
flex: '0 0 auto'
|
|
43
|
+
});
|
|
44
|
+
const sideBar = css(baseSidebarStyles, {
|
|
45
|
+
flex: "0 0 'auto'"
|
|
46
|
+
});
|
|
47
|
+
const sideBarShowCategories = css(baseSidebarStyles, {
|
|
48
|
+
flex: `0 0 ${SIDEBAR_WIDTH}`
|
|
49
|
+
});
|
|
50
|
+
const sidebarHeading = css({
|
|
51
|
+
flex: `0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT}`,
|
|
52
|
+
display: 'inline-flex',
|
|
53
|
+
alignItems: 'center',
|
|
54
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
55
|
+
fontWeight: 700
|
|
56
|
+
});
|
|
57
|
+
const mobileMainContent = css({
|
|
58
|
+
flex: '1 1 auto',
|
|
59
|
+
display: 'flex',
|
|
60
|
+
flexDirection: 'column',
|
|
61
|
+
overflowY: 'auto',
|
|
62
|
+
height: '100%'
|
|
63
|
+
});
|
|
64
|
+
const mainContent = css(mobileMainContent, {
|
|
65
|
+
marginLeft: "var(--ds-space-200, 16px)",
|
|
66
|
+
height: 'auto'
|
|
67
|
+
});
|
|
68
|
+
const searchContainer = css({
|
|
69
|
+
paddingBottom: "var(--ds-space-200, 16px)"
|
|
70
|
+
});
|
|
71
|
+
const mobileCategoryListWrapper = css({
|
|
72
|
+
display: 'flex',
|
|
73
|
+
overflowX: 'auto',
|
|
74
|
+
padding: `${"var(--ds-space-200, 8px)"} 0 ${"var(--ds-space-200, 16px)"} 0`,
|
|
75
|
+
minHeight: `${GRID_SIZE * 4}px`,
|
|
76
|
+
overflow: '-moz-scrollbars-none',
|
|
77
|
+
'::-webkit-scrollbar': {
|
|
78
|
+
display: 'none'
|
|
79
|
+
},
|
|
80
|
+
scrollbarWidth: 'none',
|
|
81
|
+
MsOverflowStyle: 'none'
|
|
82
|
+
});
|
|
83
|
+
const categoryListWrapper = css(mobileCategoryListWrapper, {
|
|
84
|
+
padding: 0,
|
|
85
|
+
marginTop: "var(--ds-space-200, 24px)",
|
|
86
|
+
flexDirection: 'column'
|
|
87
|
+
});
|
|
111
88
|
function StatelessElementBrowser(props) {
|
|
112
89
|
const {
|
|
113
90
|
items,
|
|
@@ -296,12 +273,15 @@ function DesktopBrowser({
|
|
|
296
273
|
css: showCategories ? sideBarShowCategories : sideBar
|
|
297
274
|
}, jsx("h2", {
|
|
298
275
|
css: sidebarHeading,
|
|
299
|
-
"data-testid": "sidebar-heading"
|
|
276
|
+
"data-testid": "sidebar-heading",
|
|
277
|
+
id: "sidebar-heading"
|
|
300
278
|
}, jsx(FormattedMessage, {
|
|
301
279
|
id: "fabric.editor.elementbrowser.sidebar.heading",
|
|
302
280
|
defaultMessage: "Browse",
|
|
303
281
|
description: "Sidebar heading"
|
|
304
282
|
})), jsx("nav", {
|
|
283
|
+
role: "tablist",
|
|
284
|
+
"aria-labelledby": "sidebar-heading",
|
|
305
285
|
css: categoryListWrapper
|
|
306
286
|
}, jsx(CategoryList, {
|
|
307
287
|
categories: categories,
|
|
@@ -312,7 +292,9 @@ function DesktopBrowser({
|
|
|
312
292
|
css: mainContent,
|
|
313
293
|
onKeyDown: onKeyDown,
|
|
314
294
|
"data-testid": "main-content"
|
|
315
|
-
}, showSearch &&
|
|
295
|
+
}, showSearch &&
|
|
296
|
+
// eslint-disable-next-line
|
|
297
|
+
jsx("div", {
|
|
316
298
|
css: searchContainer
|
|
317
299
|
}, jsx(ElementSearch, {
|
|
318
300
|
onSearch: onSearch,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
2
2
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
3
|
-
const packageVersion = "78.
|
|
3
|
+
const packageVersion = "78.18.0";
|
|
4
4
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
5
5
|
// Remove URL as it has UGC
|
|
6
6
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
7
7
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
8
8
|
import Layer from '../Layer';
|
|
9
9
|
const packageName = "@atlaskit/editor-common";
|
|
10
|
-
const packageVersion = "78.
|
|
10
|
+
const packageVersion = "78.18.0";
|
|
11
11
|
const halfFocusRing = 1;
|
|
12
12
|
const dropOffset = '0, 8';
|
|
13
13
|
class DropList extends Component {
|
|
@@ -45,7 +45,6 @@ function CategoryListItem(_ref2) {
|
|
|
45
45
|
var ref = useFocus(focus);
|
|
46
46
|
var onClick = useCallback(function () {
|
|
47
47
|
onSelectCategory(category);
|
|
48
|
-
|
|
49
48
|
/**
|
|
50
49
|
* When user double clicks on same category, focus on first item.
|
|
51
50
|
*/
|
|
@@ -85,13 +84,18 @@ function CategoryListItem(_ref2) {
|
|
|
85
84
|
}, rest);
|
|
86
85
|
}, [category.name, selectedCategory]);
|
|
87
86
|
return jsx("div", {
|
|
88
|
-
css: buttonWrapper
|
|
87
|
+
css: buttonWrapper,
|
|
88
|
+
role: "presentation"
|
|
89
89
|
}, jsx(Button, {
|
|
90
90
|
appearance: "subtle",
|
|
91
91
|
isSelected: selectedCategory === category.name,
|
|
92
92
|
onClick: onClick,
|
|
93
93
|
onFocus: onFocus,
|
|
94
94
|
theme: getTheme,
|
|
95
|
+
role: "tab",
|
|
96
|
+
"aria-selected": selectedCategory === category.name ? 'true' : 'false',
|
|
97
|
+
"aria-controls": "browse-category-".concat(category.name, "-tab"),
|
|
98
|
+
id: "browse-category--".concat(category.name, "-button"),
|
|
95
99
|
ref: ref,
|
|
96
100
|
testId: "element-browser-category-item"
|
|
97
101
|
}, category.title));
|
|
@@ -103,16 +103,20 @@ function ElementList(_ref) {
|
|
|
103
103
|
}, props)));
|
|
104
104
|
};
|
|
105
105
|
}, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
|
|
106
|
-
return jsx(Fragment, null, jsx(ContainerWidthMonitor, null),
|
|
106
|
+
return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
|
|
107
|
+
css: elementItemsWrapper,
|
|
108
|
+
"data-testid": "element-items",
|
|
109
|
+
id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
|
|
110
|
+
"aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
|
|
111
|
+
role: "tabpanel",
|
|
112
|
+
tabIndex: items.length === 0 ? 0 : undefined
|
|
113
|
+
}, !items.length ? emptyStateHandler ? emptyStateHandler({
|
|
107
114
|
mode: mode,
|
|
108
115
|
selectedCategory: selectedCategory,
|
|
109
116
|
searchTerm: searchTerm
|
|
110
117
|
}) : jsx(EmptyState, {
|
|
111
118
|
onExternalLinkClick: onExternalLinkClick
|
|
112
|
-
}) : jsx(
|
|
113
|
-
css: elementItemsWrapper,
|
|
114
|
-
"data-testid": "element-items"
|
|
115
|
-
}, jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
119
|
+
}) : jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
|
|
116
120
|
disableWidth: true
|
|
117
121
|
}, function (_ref3) {
|
|
118
122
|
var height = _ref3.height;
|
|
@@ -258,7 +262,7 @@ var elementItemWrapper = css({
|
|
|
258
262
|
button: {
|
|
259
263
|
height: '75px',
|
|
260
264
|
alignItems: 'flex-start',
|
|
261
|
-
padding: "var(--ds-space-150, 12px)"
|
|
265
|
+
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 11px")
|
|
262
266
|
}
|
|
263
267
|
}
|
|
264
268
|
});
|
|
@@ -1,35 +1,91 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
4
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
5
3
|
/** @jsx jsx */
|
|
6
4
|
import React, { memo, useCallback, useEffect, useState } from 'react';
|
|
7
5
|
import { css, jsx } from '@emotion/react';
|
|
8
6
|
import { FormattedMessage } from 'react-intl-next';
|
|
9
7
|
import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
10
8
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
11
|
-
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT,
|
|
9
|
+
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
|
|
12
10
|
import useContainerWidth from '../hooks/use-container-width';
|
|
13
11
|
import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
|
|
14
12
|
import { ViewMore } from '../ViewMore';
|
|
15
13
|
import CategoryList from './CategoryList';
|
|
16
14
|
import ElementList from './ElementList/ElementList';
|
|
17
15
|
import ElementSearch from './ElementSearch';
|
|
18
|
-
var wrapper = css(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var
|
|
32
|
-
|
|
16
|
+
var wrapper = css({
|
|
17
|
+
width: '100%',
|
|
18
|
+
maxHeight: 'inherit',
|
|
19
|
+
overflow: 'hidden'
|
|
20
|
+
});
|
|
21
|
+
var baseBrowserContainerStyles = css({
|
|
22
|
+
display: 'flex',
|
|
23
|
+
height: '100%',
|
|
24
|
+
minHeight: '-webkit-fill-available'
|
|
25
|
+
});
|
|
26
|
+
var mobileElementBrowserContainer = css(baseBrowserContainerStyles, {
|
|
27
|
+
flexDirection: 'column'
|
|
28
|
+
});
|
|
29
|
+
var elementBrowserContainer = css(baseBrowserContainerStyles, {
|
|
30
|
+
flexDirection: 'row'
|
|
31
|
+
});
|
|
32
|
+
var baseSidebarStyles = css({
|
|
33
|
+
display: 'flex',
|
|
34
|
+
flexDirection: 'column',
|
|
35
|
+
overflowX: 'auto',
|
|
36
|
+
overflowY: 'hidden'
|
|
37
|
+
});
|
|
38
|
+
var mobileSideBar = css(baseSidebarStyles, {
|
|
39
|
+
flex: "0 0 ".concat(INLINE_SIDEBAR_HEIGHT),
|
|
40
|
+
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 0 ", "var(--ds-space-150, 12px)")
|
|
41
|
+
});
|
|
42
|
+
var mobileSideBarShowCategories = css({
|
|
43
|
+
flex: '0 0 auto'
|
|
44
|
+
});
|
|
45
|
+
var sideBar = css(baseSidebarStyles, {
|
|
46
|
+
flex: "0 0 'auto'"
|
|
47
|
+
});
|
|
48
|
+
var sideBarShowCategories = css(baseSidebarStyles, {
|
|
49
|
+
flex: "0 0 ".concat(SIDEBAR_WIDTH)
|
|
50
|
+
});
|
|
51
|
+
var sidebarHeading = css({
|
|
52
|
+
flex: "0 0 ".concat(SIDEBAR_HEADING_WRAPPER_HEIGHT),
|
|
53
|
+
display: 'inline-flex',
|
|
54
|
+
alignItems: 'center',
|
|
55
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
56
|
+
fontWeight: 700
|
|
57
|
+
});
|
|
58
|
+
var mobileMainContent = css({
|
|
59
|
+
flex: '1 1 auto',
|
|
60
|
+
display: 'flex',
|
|
61
|
+
flexDirection: 'column',
|
|
62
|
+
overflowY: 'auto',
|
|
63
|
+
height: '100%'
|
|
64
|
+
});
|
|
65
|
+
var mainContent = css(mobileMainContent, {
|
|
66
|
+
marginLeft: "var(--ds-space-200, 16px)",
|
|
67
|
+
height: 'auto'
|
|
68
|
+
});
|
|
69
|
+
var searchContainer = css({
|
|
70
|
+
paddingBottom: "var(--ds-space-200, 16px)"
|
|
71
|
+
});
|
|
72
|
+
var mobileCategoryListWrapper = css({
|
|
73
|
+
display: 'flex',
|
|
74
|
+
overflowX: 'auto',
|
|
75
|
+
padding: "var(--ds-space-200, 8px)".concat(" 0 ", "var(--ds-space-200, 16px)", " 0"),
|
|
76
|
+
minHeight: "".concat(GRID_SIZE * 4, "px"),
|
|
77
|
+
overflow: '-moz-scrollbars-none',
|
|
78
|
+
'::-webkit-scrollbar': {
|
|
79
|
+
display: 'none'
|
|
80
|
+
},
|
|
81
|
+
scrollbarWidth: 'none',
|
|
82
|
+
MsOverflowStyle: 'none'
|
|
83
|
+
});
|
|
84
|
+
var categoryListWrapper = css(mobileCategoryListWrapper, {
|
|
85
|
+
padding: 0,
|
|
86
|
+
marginTop: "var(--ds-space-200, 24px)",
|
|
87
|
+
flexDirection: 'column'
|
|
88
|
+
});
|
|
33
89
|
function StatelessElementBrowser(props) {
|
|
34
90
|
var items = props.items,
|
|
35
91
|
onSelectItem = props.onSelectItem,
|
|
@@ -215,12 +271,15 @@ function DesktopBrowser(_ref2) {
|
|
|
215
271
|
css: showCategories ? sideBarShowCategories : sideBar
|
|
216
272
|
}, jsx("h2", {
|
|
217
273
|
css: sidebarHeading,
|
|
218
|
-
"data-testid": "sidebar-heading"
|
|
274
|
+
"data-testid": "sidebar-heading",
|
|
275
|
+
id: "sidebar-heading"
|
|
219
276
|
}, jsx(FormattedMessage, {
|
|
220
277
|
id: "fabric.editor.elementbrowser.sidebar.heading",
|
|
221
278
|
defaultMessage: "Browse",
|
|
222
279
|
description: "Sidebar heading"
|
|
223
280
|
})), jsx("nav", {
|
|
281
|
+
role: "tablist",
|
|
282
|
+
"aria-labelledby": "sidebar-heading",
|
|
224
283
|
css: categoryListWrapper
|
|
225
284
|
}, jsx(CategoryList, {
|
|
226
285
|
categories: categories,
|
|
@@ -231,7 +290,9 @@ function DesktopBrowser(_ref2) {
|
|
|
231
290
|
css: mainContent,
|
|
232
291
|
onKeyDown: onKeyDown,
|
|
233
292
|
"data-testid": "main-content"
|
|
234
|
-
}, showSearch &&
|
|
293
|
+
}, showSearch &&
|
|
294
|
+
// eslint-disable-next-line
|
|
295
|
+
jsx("div", {
|
|
235
296
|
css: searchContainer
|
|
236
297
|
}, jsx(ElementSearch, {
|
|
237
298
|
onSearch: onSearch,
|
|
@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
8
8
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
9
|
-
var packageVersion = "78.
|
|
9
|
+
var packageVersion = "78.18.0";
|
|
10
10
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
11
11
|
// Remove URL as it has UGC
|
|
12
12
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
17
17
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
18
18
|
import Layer from '../Layer';
|
|
19
19
|
var packageName = "@atlaskit/editor-common";
|
|
20
|
-
var packageVersion = "78.
|
|
20
|
+
var packageVersion = "78.18.0";
|
|
21
21
|
var halfFocusRing = 1;
|
|
22
22
|
var dropOffset = '0, 8';
|
|
23
23
|
var DropList = /*#__PURE__*/function (_Component) {
|
package/package.json
CHANGED