@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 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), !items.length ? emptyStateHandler ? emptyStateHandler({
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)("div", {
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
- var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n max-height: inherit;\n overflow: hidden;\n"])));
29
- var baseBrowserContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 100%;\n /** Needed for Safari to work with current css.\n * 100% heights wont work and\n * will default to auto if one of the containers doesn't have a specified height in pixels.\n * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n */\n\n /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n /* stylelint-disable-next-line */\n min-height: -webkit-fill-available;\n"])));
30
- var mobileElementBrowserContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n flex-direction: column;\n"])), baseBrowserContainerStyles);
31
- var elementBrowserContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n flex-direction: row;\n"])), baseBrowserContainerStyles);
32
- var baseSidebarStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n\n overflow-x: auto;\n overflow-y: hidden;\n"])));
33
- var mobileSideBar = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n flex: 0 0 ", ";\n padding: ", " ", " 0\n ", ";\n"])), baseSidebarStyles, _constants.INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
34
- var mobileSideBarShowCategories = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 auto;\n"])));
35
- var sideBar = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n flex: 0 0 'auto';\n"])), baseSidebarStyles);
36
- var sideBarShowCategories = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n ", ";\n flex: 0 0 ", ";\n"])), baseSidebarStyles, _constants.SIDEBAR_WIDTH);
37
- var sidebarHeading = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 ", ";\n display: inline-flex;\n align-items: center;\n padding-left: ", ";\n font-weight: 700;\n"])), _constants.SIDEBAR_HEADING_WRAPPER_HEIGHT, _constants.SIDEBAR_HEADING_PADDING_LEFT);
38
- var mobileMainContent = (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 1 auto;\n\n display: flex;\n flex-direction: column;\n\n overflow-y: auto;\n height: 100%;\n"])));
39
- var mainContent = (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n margin-left: ", "px;\n // Needed for safari\n height: auto;\n"])), mobileMainContent, _constants.GRID_SIZE * 2);
40
- var searchContainer = (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: ", "px;\n"])), _constants.GRID_SIZE * 2);
41
- var mobileCategoryListWrapper = (0, _react2.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n overflow-x: auto;\n\n padding: ", "px 0 ", "px 0;\n min-height: ", "px;\n\n overflow: -moz-scrollbars-none;\n ::-webkit-scrollbar {\n display: none;\n }\n scrollbar-width: none;\n -ms-overflow-style: none;\n"])), _constants.GRID_SIZE, _constants.GRID_SIZE * 2, _constants.GRID_SIZE * 4);
42
- var categoryListWrapper = (0, _react2.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n padding: 0;\n margin-top: ", "px;\n flex-direction: column;\n"])), mobileCategoryListWrapper, _constants.GRID_SIZE * 3);
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 && (0, _react2.jsx)("div", {
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.17.2";
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.17.2";
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), !items.length ? emptyStateHandler ? emptyStateHandler({
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("div", {
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, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
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
- max-height: inherit;
18
- overflow: hidden;
19
- `;
20
- const baseBrowserContainerStyles = css`
21
- display: flex;
22
- height: 100%;
23
- /** Needed for Safari to work with current css.
24
- * 100% heights wont work and
25
- * will default to auto if one of the containers doesn't have a specified height in pixels.
26
- * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.
27
- */
28
-
29
- /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
30
-
31
- /* stylelint-disable-next-line */
32
- min-height: -webkit-fill-available;
33
- `;
34
- const mobileElementBrowserContainer = css`
35
- ${baseBrowserContainerStyles};
36
- flex-direction: column;
37
- `;
38
- const elementBrowserContainer = css`
39
- ${baseBrowserContainerStyles};
40
- flex-direction: row;
41
- `;
42
- const baseSidebarStyles = css`
43
- display: flex;
44
- flex-direction: column;
45
-
46
- overflow-x: auto;
47
- overflow-y: hidden;
48
- `;
49
- const mobileSideBar = css`
50
- ${baseSidebarStyles};
51
- flex: 0 0 ${INLINE_SIDEBAR_HEIGHT};
52
- padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0
53
- ${"var(--ds-space-150, 12px)"};
54
- `;
55
- const mobileSideBarShowCategories = css`
56
- flex: 0 0 auto;
57
- `;
58
- const sideBar = css`
59
- ${baseSidebarStyles};
60
- flex: 0 0 'auto';
61
- `;
62
- const sideBarShowCategories = css`
63
- ${baseSidebarStyles};
64
- flex: 0 0 ${SIDEBAR_WIDTH};
65
- `;
66
- const sidebarHeading = css`
67
- flex: 0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT};
68
- display: inline-flex;
69
- align-items: center;
70
- padding-left: ${SIDEBAR_HEADING_PADDING_LEFT};
71
- font-weight: 700;
72
- `;
73
- const mobileMainContent = css`
74
- flex: 1 1 auto;
75
-
76
- display: flex;
77
- flex-direction: column;
78
-
79
- overflow-y: auto;
80
- height: 100%;
81
- `;
82
- const mainContent = css`
83
- ${mobileMainContent}
84
- margin-left: ${GRID_SIZE * 2}px;
85
- // Needed for safari
86
- height: auto;
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 && jsx("div", {
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.17.2";
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.17.2";
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), !items.length ? emptyStateHandler ? emptyStateHandler({
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("div", {
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, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
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(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n max-height: inherit;\n overflow: hidden;\n"])));
19
- var baseBrowserContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n height: 100%;\n /** Needed for Safari to work with current css.\n * 100% heights wont work and\n * will default to auto if one of the containers doesn't have a specified height in pixels.\n * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n */\n\n /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n /* stylelint-disable-next-line */\n min-height: -webkit-fill-available;\n"])));
20
- var mobileElementBrowserContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n flex-direction: column;\n"])), baseBrowserContainerStyles);
21
- var elementBrowserContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n flex-direction: row;\n"])), baseBrowserContainerStyles);
22
- var baseSidebarStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n\n overflow-x: auto;\n overflow-y: hidden;\n"])));
23
- var mobileSideBar = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", ";\n flex: 0 0 ", ";\n padding: ", " ", " 0\n ", ";\n"])), baseSidebarStyles, INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
24
- var mobileSideBarShowCategories = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n flex: 0 0 auto;\n"])));
25
- var sideBar = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", ";\n flex: 0 0 'auto';\n"])), baseSidebarStyles);
26
- var sideBarShowCategories = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", ";\n flex: 0 0 ", ";\n"])), baseSidebarStyles, SIDEBAR_WIDTH);
27
- var sidebarHeading = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n flex: 0 0 ", ";\n display: inline-flex;\n align-items: center;\n padding-left: ", ";\n font-weight: 700;\n"])), SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT);
28
- var mobileMainContent = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n flex: 1 1 auto;\n\n display: flex;\n flex-direction: column;\n\n overflow-y: auto;\n height: 100%;\n"])));
29
- var mainContent = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n ", "\n margin-left: ", "px;\n // Needed for safari\n height: auto;\n"])), mobileMainContent, GRID_SIZE * 2);
30
- var searchContainer = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding-bottom: ", "px;\n"])), GRID_SIZE * 2);
31
- var mobileCategoryListWrapper = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n\n padding: ", "px 0 ", "px 0;\n min-height: ", "px;\n\n overflow: -moz-scrollbars-none;\n ::-webkit-scrollbar {\n display: none;\n }\n scrollbar-width: none;\n -ms-overflow-style: none;\n"])), GRID_SIZE, GRID_SIZE * 2, GRID_SIZE * 4);
32
- var categoryListWrapper = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n ", "\n padding: 0;\n margin-top: ", "px;\n flex-direction: column;\n"])), mobileCategoryListWrapper, GRID_SIZE * 3);
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 && jsx("div", {
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.17.2";
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.17.2";
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "78.17.2",
3
+ "version": "78.18.0",
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/"