@atlaskit/avatar-group 12.10.7 → 12.10.9

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 (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/components/avatar-group-top-layer.js +40 -43
  3. package/dist/es2019/components/avatar-group-top-layer.js +30 -31
  4. package/dist/esm/components/avatar-group-top-layer.js +40 -43
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 12.10.9
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.10.8
10
+
11
+ ### Patch Changes
12
+
13
+ - [`021a645c6f39a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/021a645c6f39a) -
14
+ Update internal top-layer adopter code paths behind `platform-dst-top-layer`.
15
+ - Updated dependencies
16
+
3
17
  ## 12.10.7
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/components/avatar-group-top-layer.js CHANGED
@@ -14,9 +14,13 @@ var _keycodes = require("@atlaskit/ds-lib/keycodes");
14
14
  var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
15
15
  var _menu = require("@atlaskit/menu");
16
16
  var _animations = require("@atlaskit/top-layer/animations");
17
+ var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
17
18
  var _placementMap = require("@atlaskit/top-layer/placement-map");
18
- var _popup = require("@atlaskit/top-layer/popup");
19
+ var _popover = require("@atlaskit/top-layer/popover");
20
+ var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
21
+ var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
19
22
  var _useArrowNavigation = require("@atlaskit/top-layer/use-arrow-navigation");
23
+ var _usePopoverId = require("@atlaskit/top-layer/use-popover-id");
20
24
  var _avatarGroupItem = _interopRequireDefault(require("./avatar-group-item"));
21
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); }
22
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; }
@@ -82,8 +86,16 @@ function MoreDropdownTopLayer(_ref) {
82
86
  var _reason = _ref2.reason;
83
87
  onClose();
84
88
  }, [onClose]);
89
+ var triggerRef = (0, _react.useRef)(null);
90
+ var popoverRef = (0, _react.useRef)(null);
85
91
  var menuRef = (0, _react.useRef)(null);
86
92
  var overflowMenuTestId = testId ? "".concat(testId, "--overflow-menu") : undefined;
93
+ var popoverId = (0, _usePopoverId.usePopoverId)();
94
+ (0, _useAnchorPosition.useAnchorPosition)({
95
+ anchorRef: triggerRef,
96
+ popoverRef: popoverRef,
97
+ placement: topLayerPlacement
98
+ });
87
99
 
88
100
  // Arrow key navigation inside the open menu
89
101
  (0, _useArrowNavigation.useArrowNavigation)({
@@ -115,53 +127,38 @@ function MoreDropdownTopLayer(_ref) {
115
127
  }
116
128
  });
117
129
  }, [isFocused, isOpen, handleTriggerClicked]);
118
- return /*#__PURE__*/_react.default.createElement(_popup.Popup, {
119
- placement: topLayerPlacement,
120
- onClose: handleOnClose,
121
- testId: overflowMenuTestId
122
- }, /*#__PURE__*/_react.default.createElement(_popup.Popup.TriggerFunction, null, function (_ref3) {
123
- var ref = _ref3.ref,
124
- ariaAttributes = _ref3.ariaAttributes;
125
- return (
126
- /*#__PURE__*/
127
- // Workaround: wrapping span to track trigger focus for ArrowDown-to-open.
128
- //
129
- // The `useFocus` hook needs onFocus/onBlur on the trigger element,
130
- // but we cannot thread those through the renderMoreButton → MoreIndicator
131
- // prop plumbing without changing those APIs (onFocus/onBlur would need
132
- // to go into MoreIndicator's `buttonProps`, but renderMoreButton does not
133
- // expose that).
134
- //
135
- // Using `display: contents` so the span does not affect layout — the
136
- // button renders as if the span were not there. Focus events from the
137
- // button bubble up to this span, allowing useFocus to track state.
138
- //
139
- // If MoreIndicator's API is refactored to accept focus handlers via
140
- // buttonProps, this wrapper can be removed.
141
- _react.default.createElement("span", {
142
- ref: triggerWrapperRef,
143
- onFocus: triggerFocusBind.onFocus,
144
- onBlur: triggerFocusBind.onBlur
145
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
146
- ,
147
- style: {
148
- display: 'contents'
149
- }
150
- }, renderMoreButton({
151
- ref: ref,
152
- 'aria-controls': isOpen ? ariaAttributes['aria-controls'] : undefined,
153
- 'aria-expanded': isOpen,
154
- 'aria-haspopup': true,
155
- onClick: handleTriggerClicked
156
- }))
157
- );
158
- }), /*#__PURE__*/_react.default.createElement(_popup.Popup.Content, {
130
+ var triggerAria = (0, _getAriaForTrigger.getAriaForTrigger)({
131
+ role: 'menu',
132
+ isOpen: isOpen,
133
+ popoverId: popoverId
134
+ });
135
+ var setTriggerRef = (0, _react.useCallback)(function (node) {
136
+ triggerRef.current = node;
137
+ }, []);
138
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
139
+ ref: triggerWrapperRef,
140
+ onFocus: triggerFocusBind.onFocus,
141
+ onBlur: triggerFocusBind.onBlur
142
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
143
+ ,
144
+ style: {
145
+ display: 'contents'
146
+ }
147
+ }, renderMoreButton(_objectSpread(_objectSpread({
148
+ ref: setTriggerRef
149
+ }, triggerAria), {}, {
150
+ onClick: handleTriggerClicked
151
+ }))), /*#__PURE__*/_react.default.createElement(_popover.Popover, {
152
+ ref: popoverRef,
153
+ id: popoverId,
159
154
  role: "menu",
160
155
  label: "avatar group",
161
156
  isOpen: isOpen,
157
+ onClose: handleOnClose,
162
158
  animate: animation,
159
+ placement: topLayerPlacement,
163
160
  testId: overflowMenuTestId ? "".concat(overflowMenuTestId, "--content") : undefined
164
- }, /*#__PURE__*/_react.default.createElement(_popup.Popup.Surface, null, /*#__PURE__*/_react.default.createElement("div", {
161
+ }, /*#__PURE__*/_react.default.createElement(_popoverSurface.PopoverSurface, null, /*#__PURE__*/_react.default.createElement("div", {
165
162
  ref: menuRef
166
163
  }, /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, {
167
164
  minWidth: 250,
package/dist/es2019/components/avatar-group-top-layer.js CHANGED
@@ -5,9 +5,13 @@ import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
5
5
  import useFocus from '@atlaskit/ds-lib/use-focus-event';
6
6
  import { MenuGroup, Section } from '@atlaskit/menu';
7
7
  import { slideAndFade } from '@atlaskit/top-layer/animations';
8
+ import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
8
9
  import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
9
- import { Popup } from '@atlaskit/top-layer/popup';
10
+ import { Popover } from '@atlaskit/top-layer/popover';
11
+ import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
12
+ import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
10
13
  import { useArrowNavigation } from '@atlaskit/top-layer/use-arrow-navigation';
14
+ import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
11
15
  import AvatarGroupItem from './avatar-group-item';
12
16
  const animation = slideAndFade();
13
17
  const topLayerPlacement = fromLegacyPlacement({
@@ -69,8 +73,16 @@ export function MoreDropdownTopLayer({
69
73
  }) => {
70
74
  onClose();
71
75
  }, [onClose]);
76
+ const triggerRef = useRef(null);
77
+ const popoverRef = useRef(null);
72
78
  const menuRef = useRef(null);
73
79
  const overflowMenuTestId = testId ? `${testId}--overflow-menu` : undefined;
80
+ const popoverId = usePopoverId();
81
+ useAnchorPosition({
82
+ anchorRef: triggerRef,
83
+ popoverRef,
84
+ placement: topLayerPlacement
85
+ });
74
86
 
75
87
  // Arrow key navigation inside the open menu
76
88
  useArrowNavigation({
@@ -103,30 +115,15 @@ export function MoreDropdownTopLayer({
103
115
  }
104
116
  });
105
117
  }, [isFocused, isOpen, handleTriggerClicked]);
106
- return /*#__PURE__*/React.createElement(Popup, {
107
- placement: topLayerPlacement,
108
- onClose: handleOnClose,
109
- testId: overflowMenuTestId
110
- }, /*#__PURE__*/React.createElement(Popup.TriggerFunction, null, ({
111
- ref,
112
- ariaAttributes
113
- }) =>
114
- /*#__PURE__*/
115
- // Workaround: wrapping span to track trigger focus for ArrowDown-to-open.
116
- //
117
- // The `useFocus` hook needs onFocus/onBlur on the trigger element,
118
- // but we cannot thread those through the renderMoreButton → MoreIndicator
119
- // prop plumbing without changing those APIs (onFocus/onBlur would need
120
- // to go into MoreIndicator's `buttonProps`, but renderMoreButton does not
121
- // expose that).
122
- //
123
- // Using `display: contents` so the span does not affect layout — the
124
- // button renders as if the span were not there. Focus events from the
125
- // button bubble up to this span, allowing useFocus to track state.
126
- //
127
- // If MoreIndicator's API is refactored to accept focus handlers via
128
- // buttonProps, this wrapper can be removed.
129
- React.createElement("span", {
118
+ const triggerAria = getAriaForTrigger({
119
+ role: 'menu',
120
+ isOpen,
121
+ popoverId
122
+ });
123
+ const setTriggerRef = useCallback(node => {
124
+ triggerRef.current = node;
125
+ }, []);
126
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
130
127
  ref: triggerWrapperRef,
131
128
  onFocus: triggerFocusBind.onFocus,
132
129
  onBlur: triggerFocusBind.onBlur
@@ -136,18 +133,20 @@ export function MoreDropdownTopLayer({
136
133
  display: 'contents'
137
134
  }
138
135
  }, renderMoreButton({
139
- ref,
140
- 'aria-controls': isOpen ? ariaAttributes['aria-controls'] : undefined,
141
- 'aria-expanded': isOpen,
142
- 'aria-haspopup': true,
136
+ ref: setTriggerRef,
137
+ ...triggerAria,
143
138
  onClick: handleTriggerClicked
144
- }))), /*#__PURE__*/React.createElement(Popup.Content, {
139
+ })), /*#__PURE__*/React.createElement(Popover, {
140
+ ref: popoverRef,
141
+ id: popoverId,
145
142
  role: "menu",
146
143
  label: "avatar group",
147
144
  isOpen: isOpen,
145
+ onClose: handleOnClose,
148
146
  animate: animation,
147
+ placement: topLayerPlacement,
149
148
  testId: overflowMenuTestId ? `${overflowMenuTestId}--content` : undefined
150
- }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
149
+ }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
151
150
  ref: menuRef
152
151
  }, /*#__PURE__*/React.createElement(MenuGroup, {
153
152
  minWidth: 250,
package/dist/esm/components/avatar-group-top-layer.js CHANGED
@@ -8,9 +8,13 @@ import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
8
8
  import useFocus from '@atlaskit/ds-lib/use-focus-event';
9
9
  import { MenuGroup, Section } from '@atlaskit/menu';
10
10
  import { slideAndFade } from '@atlaskit/top-layer/animations';
11
+ import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
11
12
  import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
12
- import { Popup } from '@atlaskit/top-layer/popup';
13
+ import { Popover } from '@atlaskit/top-layer/popover';
14
+ import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
15
+ import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
13
16
  import { useArrowNavigation } from '@atlaskit/top-layer/use-arrow-navigation';
17
+ import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
14
18
  import AvatarGroupItem from './avatar-group-item';
15
19
  var animation = slideAndFade();
16
20
  var topLayerPlacement = fromLegacyPlacement({
@@ -73,8 +77,16 @@ export function MoreDropdownTopLayer(_ref) {
73
77
  var _reason = _ref2.reason;
74
78
  onClose();
75
79
  }, [onClose]);
80
+ var triggerRef = useRef(null);
81
+ var popoverRef = useRef(null);
76
82
  var menuRef = useRef(null);
77
83
  var overflowMenuTestId = testId ? "".concat(testId, "--overflow-menu") : undefined;
84
+ var popoverId = usePopoverId();
85
+ useAnchorPosition({
86
+ anchorRef: triggerRef,
87
+ popoverRef: popoverRef,
88
+ placement: topLayerPlacement
89
+ });
78
90
 
79
91
  // Arrow key navigation inside the open menu
80
92
  useArrowNavigation({
@@ -106,53 +118,38 @@ export function MoreDropdownTopLayer(_ref) {
106
118
  }
107
119
  });
108
120
  }, [isFocused, isOpen, handleTriggerClicked]);
109
- return /*#__PURE__*/React.createElement(Popup, {
110
- placement: topLayerPlacement,
111
- onClose: handleOnClose,
112
- testId: overflowMenuTestId
113
- }, /*#__PURE__*/React.createElement(Popup.TriggerFunction, null, function (_ref3) {
114
- var ref = _ref3.ref,
115
- ariaAttributes = _ref3.ariaAttributes;
116
- return (
117
- /*#__PURE__*/
118
- // Workaround: wrapping span to track trigger focus for ArrowDown-to-open.
119
- //
120
- // The `useFocus` hook needs onFocus/onBlur on the trigger element,
121
- // but we cannot thread those through the renderMoreButton → MoreIndicator
122
- // prop plumbing without changing those APIs (onFocus/onBlur would need
123
- // to go into MoreIndicator's `buttonProps`, but renderMoreButton does not
124
- // expose that).
125
- //
126
- // Using `display: contents` so the span does not affect layout — the
127
- // button renders as if the span were not there. Focus events from the
128
- // button bubble up to this span, allowing useFocus to track state.
129
- //
130
- // If MoreIndicator's API is refactored to accept focus handlers via
131
- // buttonProps, this wrapper can be removed.
132
- React.createElement("span", {
133
- ref: triggerWrapperRef,
134
- onFocus: triggerFocusBind.onFocus,
135
- onBlur: triggerFocusBind.onBlur
136
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
137
- ,
138
- style: {
139
- display: 'contents'
140
- }
141
- }, renderMoreButton({
142
- ref: ref,
143
- 'aria-controls': isOpen ? ariaAttributes['aria-controls'] : undefined,
144
- 'aria-expanded': isOpen,
145
- 'aria-haspopup': true,
146
- onClick: handleTriggerClicked
147
- }))
148
- );
149
- }), /*#__PURE__*/React.createElement(Popup.Content, {
121
+ var triggerAria = getAriaForTrigger({
122
+ role: 'menu',
123
+ isOpen: isOpen,
124
+ popoverId: popoverId
125
+ });
126
+ var setTriggerRef = useCallback(function (node) {
127
+ triggerRef.current = node;
128
+ }, []);
129
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
130
+ ref: triggerWrapperRef,
131
+ onFocus: triggerFocusBind.onFocus,
132
+ onBlur: triggerFocusBind.onBlur
133
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- display: contents is a layout-neutral wrapper; it cannot affect visual output.
134
+ ,
135
+ style: {
136
+ display: 'contents'
137
+ }
138
+ }, renderMoreButton(_objectSpread(_objectSpread({
139
+ ref: setTriggerRef
140
+ }, triggerAria), {}, {
141
+ onClick: handleTriggerClicked
142
+ }))), /*#__PURE__*/React.createElement(Popover, {
143
+ ref: popoverRef,
144
+ id: popoverId,
150
145
  role: "menu",
151
146
  label: "avatar group",
152
147
  isOpen: isOpen,
148
+ onClose: handleOnClose,
153
149
  animate: animation,
150
+ placement: topLayerPlacement,
154
151
  testId: overflowMenuTestId ? "".concat(overflowMenuTestId, "--content") : undefined
155
- }, /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
152
+ }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
156
153
  ref: menuRef
157
154
  }, /*#__PURE__*/React.createElement(MenuGroup, {
158
155
  minWidth: 250,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "12.10.7",
3
+ "version": "12.10.9",
4
4
  "description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -38,9 +38,9 @@
38
38
  "@atlaskit/motion": "^6.2.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
40
  "@atlaskit/popup": "^4.23.0",
41
- "@atlaskit/tokens": "^13.1.0",
41
+ "@atlaskit/tokens": "^13.3.0",
42
42
  "@atlaskit/tooltip": "^22.6.0",
43
- "@atlaskit/top-layer": "^0.13.0",
43
+ "@atlaskit/top-layer": "^0.15.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@compiled/react": "^0.20.0",
46
46
  "bind-event-listener": "^3.0.0"
@@ -52,7 +52,7 @@
52
52
  "@af/accessibility-testing": "workspace:^",
53
53
  "@af/integration-testing": "workspace:^",
54
54
  "@af/visual-regression": "workspace:^",
55
- "@atlaskit/analytics-next": "^11.2.0",
55
+ "@atlaskit/analytics-next": "^11.3.0",
56
56
  "@atlaskit/button": "^23.11.0",
57
57
  "@atlaskit/docs": "^11.8.0",
58
58
  "@atlaskit/form": "^15.5.0",