@atlaskit/editor-toolbar 1.7.3 → 1.8.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.
Files changed (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/ui/ToolbarDropdownItem.js +11 -7
  3. package/dist/cjs/ui/ToolbarMenuContainer.js +7 -5
  4. package/dist/es2019/ui/ToolbarDropdownItem.js +9 -5
  5. package/dist/es2019/ui/ToolbarMenuContainer.js +6 -5
  6. package/dist/esm/ui/ToolbarDropdownItem.js +11 -7
  7. package/dist/esm/ui/ToolbarMenuContainer.js +5 -4
  8. package/dist/types/entry-points/toolbar-dropdown-item.d.ts +1 -0
  9. package/dist/types/ui/ToolbarDropdownItem.d.ts +4 -1
  10. package/dist/types/ui/ToolbarMenuContainer.d.ts +1 -1
  11. package/dist/types-ts4.5/entry-points/toolbar-dropdown-item.d.ts +1 -0
  12. package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts +4 -1
  13. package/dist/types-ts4.5/ui/ToolbarMenuContainer.d.ts +1 -1
  14. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 1.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`1c86d46da6101`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1c86d46da6101) -
8
+ Address layout column alignment follow-up review feedback
9
+
3
10
  ## 1.7.3
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/ui/ToolbarDropdownItem.js CHANGED
@@ -20,8 +20,8 @@ var _compiled = require("@atlaskit/primitives/compiled");
20
20
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
21
21
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
22
22
  var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
23
- var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "tabIndex", "href", "target", "rel", "title"],
24
- _excluded2 = ["onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
23
+ var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "tabIndex", "href", "target", "rel", "title", "itemRole"],
24
+ _excluded2 = ["onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel", "role"];
25
25
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
26
26
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
27
27
  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) { (0, _defineProperty2.default)(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; }
@@ -47,9 +47,10 @@ var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function
47
47
  onMouseLeave = _ref.onMouseLeave,
48
48
  tabIndex = _ref.tabIndex,
49
49
  title = _ref.title,
50
- dataExtensionItemKey = _ref['data-extension-item-key'];
50
+ dataExtensionItemKey = _ref['data-extension-item-key'],
51
+ itemRole = _ref.itemRole;
51
52
  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
52
- role: (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) ? ariaPressed !== undefined && !ariaHasPopup ? 'menuitemradio' : 'menuitem' : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
53
+ role: (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) ? itemRole || 'menuitem' : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
53
54
  testId: testId,
54
55
  xcss: (0, _css.cx)(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
55
56
  onClick: onClick,
@@ -60,7 +61,7 @@ var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function
60
61
  tabIndex: tabIndex,
61
62
  "aria-haspopup": ariaHasPopup,
62
63
  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
63
- "aria-checked": (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && !ariaHasPopup ? ariaPressed : undefined
64
+ "aria-checked": (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') ? ariaPressed : undefined
64
65
  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
65
66
  ,
66
67
  "aria-pressed": (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) ? undefined : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
@@ -89,9 +90,10 @@ var CustomDropdownMenuItemAnchor = /*#__PURE__*/(0, _react.forwardRef)(function
89
90
  target = _ref2.target,
90
91
  rel = _ref2.rel,
91
92
  title = _ref2.title,
93
+ itemRole = _ref2.itemRole,
92
94
  dataAttributes = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
93
95
  return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, (0, _extends2.default)({
94
- role: (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) ? ariaPressed !== undefined && !ariaHasPopup ? 'menuitemradio' : 'menuitem' : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
96
+ role: (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) ? itemRole || 'menuitem' : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
95
97
  testId: testId,
96
98
  xcss: (0, _css.cx)(styles.toolbarDropdownItem, styles.anchor, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
97
99
  onClick: onClick,
@@ -102,7 +104,7 @@ var CustomDropdownMenuItemAnchor = /*#__PURE__*/(0, _react.forwardRef)(function
102
104
  tabIndex: tabIndex,
103
105
  "aria-haspopup": ariaHasPopup,
104
106
  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
105
- "aria-checked": (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && !ariaHasPopup ? ariaPressed : undefined
107
+ "aria-checked": (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) && (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') ? ariaPressed : undefined
106
108
  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
107
109
  ,
108
110
  "aria-pressed": (0, _expValEquals.expValEquals)('platform_editor_layout_column_menu', 'isEnabled', true) ? undefined : (0, _expValEquals.expValEquals)('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
@@ -139,6 +141,7 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
139
141
  href = _ref3.href,
140
142
  target = _ref3.target,
141
143
  rel = _ref3.rel,
144
+ role = _ref3.role,
142
145
  dataAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
143
146
  var parentContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)();
144
147
  var injectedElemAfter = function () {
@@ -173,6 +176,7 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
173
176
  "aria-haspopup": hasNestedDropdownMenu,
174
177
  "aria-pressed": isSelected,
175
178
  "aria-keyshortcuts": ariaKeyshortcuts,
179
+ itemRole: role,
176
180
  ref: triggerRef,
177
181
  href: href,
178
182
  target: target,
package/dist/cjs/ui/ToolbarMenuContainer.js CHANGED
@@ -1,15 +1,16 @@
1
1
  /* ToolbarMenuContainer.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.ToolbarMenuContainer = void 0;
9
9
  require("./ToolbarMenuContainer.compiled.css");
10
10
  var _runtime = require("@compiled/react/runtime");
11
- var _react = _interopRequireDefault(require("react"));
11
+ var _react = _interopRequireWildcard(require("react"));
12
12
  var _compiled = require("@atlaskit/primitives/compiled");
13
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
13
14
  var styles = {
14
15
  container: "_2rko12b0 _bfhk1bhr _16qs130s"
15
16
  };
@@ -18,11 +19,12 @@ var styles = {
18
19
  *
19
20
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
20
21
  */
21
- var ToolbarMenuContainer = exports.ToolbarMenuContainer = function ToolbarMenuContainer(_ref) {
22
+ var ToolbarMenuContainer = exports.ToolbarMenuContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
22
23
  var children = _ref.children;
23
24
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
24
25
  xcss: styles.container,
25
26
  "data-toolbar-component": "menu",
26
- role: "menu"
27
+ role: "menu",
28
+ ref: ref
27
29
  }, children);
28
- };
30
+ });
package/dist/es2019/ui/ToolbarDropdownItem.js CHANGED
@@ -32,9 +32,10 @@ const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
32
32
  onMouseLeave,
33
33
  tabIndex,
34
34
  title,
35
- 'data-extension-item-key': dataExtensionItemKey
35
+ 'data-extension-item-key': dataExtensionItemKey,
36
+ itemRole
36
37
  }, ref) => /*#__PURE__*/React.createElement(Pressable, {
37
- role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? ariaPressed !== undefined && !ariaHasPopup ? 'menuitemradio' : 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
38
+ role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? itemRole || 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
38
39
  testId: testId,
39
40
  xcss: cx(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
40
41
  onClick: onClick,
@@ -45,7 +46,7 @@ const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
45
46
  tabIndex: tabIndex,
46
47
  "aria-haspopup": ariaHasPopup,
47
48
  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
48
- "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && !ariaHasPopup ? ariaPressed : undefined
49
+ "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') ? ariaPressed : undefined
49
50
  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
50
51
  ,
51
52
  "aria-pressed": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? undefined : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
@@ -73,9 +74,10 @@ const CustomDropdownMenuItemAnchor = /*#__PURE__*/forwardRef(({
73
74
  target,
74
75
  rel,
75
76
  title,
77
+ itemRole,
76
78
  ...dataAttributes
77
79
  }, ref) => /*#__PURE__*/React.createElement(Anchor, _extends({
78
- role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? ariaPressed !== undefined && !ariaHasPopup ? 'menuitemradio' : 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
80
+ role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? itemRole || 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
79
81
  testId: testId,
80
82
  xcss: cx(styles.toolbarDropdownItem, styles.anchor, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
81
83
  onClick: onClick,
@@ -86,7 +88,7 @@ const CustomDropdownMenuItemAnchor = /*#__PURE__*/forwardRef(({
86
88
  tabIndex: tabIndex,
87
89
  "aria-haspopup": ariaHasPopup,
88
90
  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
89
- "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && !ariaHasPopup ? ariaPressed : undefined
91
+ "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') ? ariaPressed : undefined
90
92
  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
91
93
  ,
92
94
  "aria-pressed": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? undefined : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
@@ -121,6 +123,7 @@ export const ToolbarDropdownItem = ({
121
123
  href,
122
124
  target,
123
125
  rel,
126
+ role,
124
127
  ...dataAttributes
125
128
  }) => {
126
129
  const parentContext = useToolbarDropdownMenu();
@@ -157,6 +160,7 @@ export const ToolbarDropdownItem = ({
157
160
  "aria-haspopup": hasNestedDropdownMenu,
158
161
  "aria-pressed": isSelected,
159
162
  "aria-keyshortcuts": ariaKeyshortcuts,
163
+ itemRole: role,
160
164
  ref: triggerRef,
161
165
  href: href,
162
166
  target: target,
package/dist/es2019/ui/ToolbarMenuContainer.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* ToolbarMenuContainer.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./ToolbarMenuContainer.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
- import React from 'react';
4
+ import React, { forwardRef } from 'react';
5
5
  import { Box } from '@atlaskit/primitives/compiled';
6
6
  const styles = {
7
7
  container: "_2rko12b0 _bfhk1bhr _16qs130s"
@@ -11,12 +11,13 @@ const styles = {
11
11
  *
12
12
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
13
13
  */
14
- export const ToolbarMenuContainer = ({
14
+ export const ToolbarMenuContainer = /*#__PURE__*/forwardRef(({
15
15
  children
16
- }) => {
16
+ }, ref) => {
17
17
  return /*#__PURE__*/React.createElement(Box, {
18
18
  xcss: styles.container,
19
19
  "data-toolbar-component": "menu",
20
- role: "menu"
20
+ role: "menu",
21
+ ref: ref
21
22
  }, children);
22
- };
23
+ });
package/dist/esm/ui/ToolbarDropdownItem.js CHANGED
@@ -2,8 +2,8 @@
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _extends from "@babel/runtime/helpers/extends";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "tabIndex", "href", "target", "rel", "title"],
6
- _excluded2 = ["onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
5
+ var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "tabIndex", "href", "target", "rel", "title", "itemRole"],
6
+ _excluded2 = ["onClick", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel", "role"];
7
7
  import "./ToolbarDropdownItem.compiled.css";
8
8
  import { ax, ix } from "@compiled/react/runtime";
9
9
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -38,9 +38,10 @@ var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref)
38
38
  onMouseLeave = _ref.onMouseLeave,
39
39
  tabIndex = _ref.tabIndex,
40
40
  title = _ref.title,
41
- dataExtensionItemKey = _ref['data-extension-item-key'];
41
+ dataExtensionItemKey = _ref['data-extension-item-key'],
42
+ itemRole = _ref.itemRole;
42
43
  return /*#__PURE__*/React.createElement(Pressable, {
43
- role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? ariaPressed !== undefined && !ariaHasPopup ? 'menuitemradio' : 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
44
+ role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? itemRole || 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
44
45
  testId: testId,
45
46
  xcss: cx(styles.toolbarDropdownItem, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
46
47
  onClick: onClick,
@@ -51,7 +52,7 @@ var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref)
51
52
  tabIndex: tabIndex,
52
53
  "aria-haspopup": ariaHasPopup,
53
54
  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
54
- "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && !ariaHasPopup ? ariaPressed : undefined
55
+ "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') ? ariaPressed : undefined
55
56
  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
56
57
  ,
57
58
  "aria-pressed": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? undefined : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
@@ -80,9 +81,10 @@ var CustomDropdownMenuItemAnchor = /*#__PURE__*/forwardRef(function (_ref2, ref)
80
81
  target = _ref2.target,
81
82
  rel = _ref2.rel,
82
83
  title = _ref2.title,
84
+ itemRole = _ref2.itemRole,
83
85
  dataAttributes = _objectWithoutProperties(_ref2, _excluded);
84
86
  return /*#__PURE__*/React.createElement(Anchor, _extends({
85
- role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? ariaPressed !== undefined && !ariaHasPopup ? 'menuitemradio' : 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
87
+ role: expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? itemRole || 'menuitem' : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? 'menuitem' : undefined,
86
88
  testId: testId,
87
89
  xcss: cx(styles.toolbarDropdownItem, styles.anchor, ariaDisabled ? styles.disabled : ariaPressed ? styles.selected : styles.enabled),
88
90
  onClick: onClick,
@@ -93,7 +95,7 @@ var CustomDropdownMenuItemAnchor = /*#__PURE__*/forwardRef(function (_ref2, ref)
93
95
  tabIndex: tabIndex,
94
96
  "aria-haspopup": ariaHasPopup,
95
97
  "aria-expanded": ariaHasPopup ? ariaPressed ? true : false : undefined,
96
- "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && !ariaHasPopup ? ariaPressed : undefined
98
+ "aria-checked": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) && (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') ? ariaPressed : undefined
97
99
  // platform_editor_enghealth_a11y_jan_fixes: menuitem roles cannot have aria-pressed attribute
98
100
  ,
99
101
  "aria-pressed": expValEquals('platform_editor_layout_column_menu', 'isEnabled', true) ? undefined : expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? undefined : ariaPressed,
@@ -130,6 +132,7 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
130
132
  href = _ref3.href,
131
133
  target = _ref3.target,
132
134
  rel = _ref3.rel,
135
+ role = _ref3.role,
133
136
  dataAttributes = _objectWithoutProperties(_ref3, _excluded2);
134
137
  var parentContext = useToolbarDropdownMenu();
135
138
  var injectedElemAfter = function () {
@@ -164,6 +167,7 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
164
167
  "aria-haspopup": hasNestedDropdownMenu,
165
168
  "aria-pressed": isSelected,
166
169
  "aria-keyshortcuts": ariaKeyshortcuts,
170
+ itemRole: role,
167
171
  ref: triggerRef,
168
172
  href: href,
169
173
  target: target,
package/dist/esm/ui/ToolbarMenuContainer.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* ToolbarMenuContainer.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./ToolbarMenuContainer.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
- import React from 'react';
4
+ import React, { forwardRef } from 'react';
5
5
  import { Box } from '@atlaskit/primitives/compiled';
6
6
  var styles = {
7
7
  container: "_2rko12b0 _bfhk1bhr _16qs130s"
@@ -11,11 +11,12 @@ var styles = {
11
11
  *
12
12
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
13
13
  */
14
- export var ToolbarMenuContainer = function ToolbarMenuContainer(_ref) {
14
+ export var ToolbarMenuContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
15
15
  var children = _ref.children;
16
16
  return /*#__PURE__*/React.createElement(Box, {
17
17
  xcss: styles.container,
18
18
  "data-toolbar-component": "menu",
19
- role: "menu"
19
+ role: "menu",
20
+ ref: ref
20
21
  }, children);
21
- };
22
+ });
package/dist/types/entry-points/toolbar-dropdown-item.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { ToolbarDropdownItem } from '../ui/ToolbarDropdownItem';
2
+ export type { ToolbarDropdownItemRole } from '../ui/ToolbarDropdownItem';
package/dist/types/ui/ToolbarDropdownItem.d.ts CHANGED
@@ -9,12 +9,14 @@ export type ToolbarDropdownItemInteractionProps = {
9
9
  onMouseEnter?: React.MouseEventHandler;
10
10
  onMouseLeave?: React.MouseEventHandler;
11
11
  };
12
+ export type ToolbarDropdownItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
12
13
  export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & ToolbarDropdownItemInteractionProps & {
13
14
  'aria-disabled'?: boolean;
14
15
  'aria-haspopup'?: boolean;
15
16
  'aria-keyshortcuts'?: string;
16
17
  'aria-pressed'?: boolean;
17
18
  'data-extension-item-key'?: string;
19
+ itemRole?: ToolbarDropdownItemRole;
18
20
  title?: string;
19
21
  };
20
22
  type ToolbarDropdownItemProps = ToolbarDropdownItemInteractionProps & {
@@ -29,6 +31,7 @@ type ToolbarDropdownItemProps = ToolbarDropdownItemInteractionProps & {
29
31
  isSelected?: boolean;
30
32
  onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
31
33
  rel?: string;
34
+ role?: ToolbarDropdownItemRole;
32
35
  shouldTitleWrap?: boolean;
33
36
  target?: string;
34
37
  testId?: string;
@@ -36,5 +39,5 @@ type ToolbarDropdownItemProps = ToolbarDropdownItemInteractionProps & {
36
39
  title?: string;
37
40
  triggerRef?: Ref<HTMLButtonElement>;
38
41
  } & DataAttributes;
39
- export declare const ToolbarDropdownItem: ({ onClick, onBlur, onFocus, onMouseEnter, onMouseLeave, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
42
+ export declare const ToolbarDropdownItem: ({ onClick, onBlur, onFocus, onMouseEnter, onMouseLeave, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, role, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
40
43
  export {};
package/dist/types/ui/ToolbarMenuContainer.d.ts CHANGED
@@ -12,5 +12,5 @@ type ToolbarMenuContainerProps = {
12
12
  *
13
13
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
14
14
  */
15
- export declare const ToolbarMenuContainer: ({ children, }: ToolbarMenuContainerProps) => React.JSX.Element;
15
+ export declare const ToolbarMenuContainer: React.ForwardRefExoticComponent<ToolbarMenuContainerProps & React.RefAttributes<HTMLDivElement>>;
16
16
  export {};
package/dist/types-ts4.5/entry-points/toolbar-dropdown-item.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { ToolbarDropdownItem } from '../ui/ToolbarDropdownItem';
2
+ export type { ToolbarDropdownItemRole } from '../ui/ToolbarDropdownItem';
package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts CHANGED
@@ -9,12 +9,14 @@ export type ToolbarDropdownItemInteractionProps = {
9
9
  onMouseEnter?: React.MouseEventHandler;
10
10
  onMouseLeave?: React.MouseEventHandler;
11
11
  };
12
+ export type ToolbarDropdownItemRole = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
12
13
  export type CustomDropdownMenuItemButtonProps = CustomItemComponentProps & ToolbarDropdownItemInteractionProps & {
13
14
  'aria-disabled'?: boolean;
14
15
  'aria-haspopup'?: boolean;
15
16
  'aria-keyshortcuts'?: string;
16
17
  'aria-pressed'?: boolean;
17
18
  'data-extension-item-key'?: string;
19
+ itemRole?: ToolbarDropdownItemRole;
18
20
  title?: string;
19
21
  };
20
22
  type ToolbarDropdownItemProps = ToolbarDropdownItemInteractionProps & {
@@ -29,6 +31,7 @@ type ToolbarDropdownItemProps = ToolbarDropdownItemInteractionProps & {
29
31
  isSelected?: boolean;
30
32
  onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
31
33
  rel?: string;
34
+ role?: ToolbarDropdownItemRole;
32
35
  shouldTitleWrap?: boolean;
33
36
  target?: string;
34
37
  testId?: string;
@@ -36,5 +39,5 @@ type ToolbarDropdownItemProps = ToolbarDropdownItemInteractionProps & {
36
39
  title?: string;
37
40
  triggerRef?: Ref<HTMLButtonElement>;
38
41
  } & DataAttributes;
39
- export declare const ToolbarDropdownItem: ({ onClick, onBlur, onFocus, onMouseEnter, onMouseLeave, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
42
+ export declare const ToolbarDropdownItem: ({ onClick, onBlur, onFocus, onMouseEnter, onMouseLeave, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, role, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
40
43
  export {};
package/dist/types-ts4.5/ui/ToolbarMenuContainer.d.ts CHANGED
@@ -12,5 +12,5 @@ type ToolbarMenuContainerProps = {
12
12
  *
13
13
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
14
14
  */
15
- export declare const ToolbarMenuContainer: ({ children, }: ToolbarMenuContainerProps) => React.JSX.Element;
15
+ export declare const ToolbarMenuContainer: React.ForwardRefExoticComponent<ToolbarMenuContainerProps & React.RefAttributes<HTMLDivElement>>;
16
16
  export {};
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "1.7.3",
6
+ "version": "1.8.0",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "react-compiler": {
@@ -50,6 +50,7 @@
50
50
  },
51
51
  "devDependencies": {
52
52
  "@atlassian/react-compiler-gating": "workspace:^",
53
+ "@atlassian/testing-library": "^0.6.0",
53
54
  "@testing-library/react": "^16.3.0",
54
55
  "react": "^18.2.0",
55
56
  "react-dom": "^18.2.0",