@atlaskit/avatar-group 12.5.0 → 12.5.2
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 +17 -0
- package/dist/cjs/components/internal/components/focus-manager-context.js +19 -0
- package/dist/cjs/components/internal/components/focus-manager.js +10 -15
- package/dist/cjs/components/internal/components/popup-avatar-group.js +2 -2
- package/dist/cjs/components/internal/hooks/use-register-item-with-focus-manager.js +2 -2
- package/dist/cjs/components/more-indicator.compiled.css +2 -2
- package/dist/cjs/components/more-indicator.js +2 -2
- package/dist/es2019/components/internal/components/focus-manager-context.js +12 -0
- package/dist/es2019/components/internal/components/focus-manager.js +9 -14
- package/dist/es2019/components/internal/components/popup-avatar-group.js +1 -1
- package/dist/es2019/components/internal/hooks/use-register-item-with-focus-manager.js +1 -1
- package/dist/es2019/components/more-indicator.compiled.css +2 -2
- package/dist/es2019/components/more-indicator.js +2 -2
- package/dist/esm/components/internal/components/focus-manager-context.js +12 -0
- package/dist/esm/components/internal/components/focus-manager.js +9 -14
- package/dist/esm/components/internal/components/popup-avatar-group.js +1 -1
- package/dist/esm/components/internal/hooks/use-register-item-with-focus-manager.js +1 -1
- package/dist/esm/components/more-indicator.compiled.css +2 -2
- package/dist/esm/components/more-indicator.js +2 -2
- package/dist/types/components/internal/components/focus-manager-context.d.ts +12 -0
- package/dist/types/components/internal/components/focus-manager.d.ts +6 -13
- package/dist/types-ts4.5/components/internal/components/focus-manager-context.d.ts +12 -0
- package/dist/types-ts4.5/components/internal/components/focus-manager.d.ts +6 -13
- package/package.json +13 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/avatar-group
|
|
2
2
|
|
|
3
|
+
## 12.5.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
|
|
8
|
+
Enrol all Design System UI packages into the React Compiler with platform gating via
|
|
9
|
+
isReactCompilerActivePlatform.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 12.5.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`22bf79dbdcdca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22bf79dbdcdca) -
|
|
17
|
+
Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 12.5.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.FocusManagerContext = void 0;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
10
|
+
/**
|
|
11
|
+
* Context provider which maintains the list of focusable elements and a method to
|
|
12
|
+
* register new menu items.
|
|
13
|
+
* This list drives the keyboard navgation of the menu.
|
|
14
|
+
*
|
|
15
|
+
*/
|
|
16
|
+
var FocusManagerContext = exports.FocusManagerContext = /*#__PURE__*/(0, _react.createContext)({
|
|
17
|
+
menuItemRefs: [],
|
|
18
|
+
registerRef: _noop.default
|
|
19
|
+
});
|
|
@@ -5,27 +5,22 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default =
|
|
8
|
+
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _bindEventListener = require("bind-event-listener");
|
|
11
|
-
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
12
11
|
var _handleFocus = _interopRequireDefault(require("../utiles/handle-focus"));
|
|
12
|
+
var _focusManagerContext = require("./focus-manager-context");
|
|
13
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); }
|
|
14
|
+
// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
|
|
15
|
+
// Remove links that the component does not have (such as usage). If there are no links remove them all.
|
|
14
16
|
/**
|
|
17
|
+
* __Focus manager__
|
|
15
18
|
*
|
|
19
|
+
* A focus manager {description}.
|
|
16
20
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*/
|
|
22
|
-
var FocusManagerContext = exports.FocusManagerContext = /*#__PURE__*/(0, _react.createContext)({
|
|
23
|
-
menuItemRefs: [],
|
|
24
|
-
registerRef: _noop.default
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Focus manager logic
|
|
21
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
22
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
23
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
29
24
|
*/
|
|
30
25
|
var FocusManager = function FocusManager(_ref) {
|
|
31
26
|
var children = _ref.children;
|
|
@@ -54,7 +49,7 @@ var FocusManager = function FocusManager(_ref) {
|
|
|
54
49
|
menuItemRefs: menuItemRefs.current,
|
|
55
50
|
registerRef: registerRef
|
|
56
51
|
};
|
|
57
|
-
return /*#__PURE__*/_react.default.createElement(FocusManagerContext.Provider, {
|
|
52
|
+
return /*#__PURE__*/_react.default.createElement(_focusManagerContext.FocusManagerContext.Provider, {
|
|
58
53
|
value: contextValue
|
|
59
54
|
}, children);
|
|
60
55
|
};
|
|
@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _menu = require("@atlaskit/menu");
|
|
13
|
-
var
|
|
13
|
+
var _focusManagerContext = require("./focus-manager-context");
|
|
14
14
|
var _excluded = ["children", "isLoading", "maxHeight", "maxWidth", "minHeight", "minWidth", "onClick", "role", "setInitialFocusRef", "spacing", "testId"];
|
|
15
15
|
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); }
|
|
16
16
|
/**
|
|
@@ -31,7 +31,7 @@ var PopupAvatarGroup = function PopupAvatarGroup(_ref) {
|
|
|
31
31
|
spacing = _ref.spacing,
|
|
32
32
|
testId = _ref.testId,
|
|
33
33
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
34
|
-
var _useContext = (0, _react.useContext)(
|
|
34
|
+
var _useContext = (0, _react.useContext)(_focusManagerContext.FocusManagerContext),
|
|
35
35
|
menuItemRefs = _useContext.menuItemRefs;
|
|
36
36
|
(0, _react.useEffect)(function () {
|
|
37
37
|
setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(menuItemRefs[0]);
|
|
@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
var
|
|
8
|
+
var _focusManagerContext = require("../components/focus-manager-context");
|
|
9
9
|
// eslint-disable-next-line sort-imports
|
|
10
10
|
|
|
11
11
|
// The refs stored in the context are used to programatically
|
|
12
12
|
// control focus on a user navigates using the keyboard.
|
|
13
13
|
function useRegisterItemWithFocusManager() {
|
|
14
|
-
var _useContext = (0, _react.useContext)(
|
|
14
|
+
var _useContext = (0, _react.useContext)(_focusManagerContext.FocusManagerContext),
|
|
15
15
|
registerRef = _useContext.registerRef;
|
|
16
16
|
var itemRef = (0, _react.useRef)(null);
|
|
17
17
|
(0, _react.useEffect)(function () {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
._1bsbzwfg{width:2pc}
|
|
27
27
|
._1e0c1txw{display:flex}
|
|
28
28
|
._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
|
|
29
|
-
.
|
|
29
|
+
._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
|
|
30
30
|
._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
|
|
31
31
|
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
32
32
|
._1qu2glyw{outline-style:none}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
._128myh40:focus-visible{outline-width:2px}
|
|
58
58
|
._1ah3yh40:focus-visible{outline-offset:2px}
|
|
59
59
|
._1ejjglyw:focus-visible{box-shadow:none}
|
|
60
|
-
.
|
|
60
|
+
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
61
61
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
62
62
|
._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
|
|
63
63
|
._30l3i7uo:hover{color:var(--ds-text,#292a2e)}
|
|
@@ -17,10 +17,10 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
17
17
|
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); }
|
|
18
18
|
var boxShadowCssVar = '--avatar-box-shadow';
|
|
19
19
|
var styles = {
|
|
20
|
-
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw
|
|
20
|
+
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
|
|
21
21
|
circle: "_2rko1qll",
|
|
22
22
|
active: "_bfhk15s3 _16qsdfwd _syaz6x5g _t9ec1np6 _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
|
|
23
|
-
disabled: "_80om13gf
|
|
23
|
+
disabled: "_80om13gf _1peq2wxo _1hfkvuon",
|
|
24
24
|
hexagon: "_mkrz1k6g"
|
|
25
25
|
};
|
|
26
26
|
var widthHeightMap = {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
import __noop from '@atlaskit/ds-lib/noop';
|
|
3
|
+
/**
|
|
4
|
+
* Context provider which maintains the list of focusable elements and a method to
|
|
5
|
+
* register new menu items.
|
|
6
|
+
* This list drives the keyboard navgation of the menu.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
export const FocusManagerContext = /*#__PURE__*/createContext({
|
|
10
|
+
menuItemRefs: [],
|
|
11
|
+
registerRef: __noop
|
|
12
|
+
});
|
|
@@ -1,23 +1,18 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
|
2
2
|
import { bind } from 'bind-event-listener';
|
|
3
|
-
import __noop from '@atlaskit/ds-lib/noop';
|
|
4
3
|
import handleFocus from '../utiles/handle-focus';
|
|
4
|
+
import { FocusManagerContext } from './focus-manager-context';
|
|
5
5
|
|
|
6
|
+
// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
|
|
7
|
+
// Remove links that the component does not have (such as usage). If there are no links remove them all.
|
|
6
8
|
/**
|
|
9
|
+
* __Focus manager__
|
|
7
10
|
*
|
|
11
|
+
* A focus manager {description}.
|
|
8
12
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*/
|
|
14
|
-
export const FocusManagerContext = /*#__PURE__*/createContext({
|
|
15
|
-
menuItemRefs: [],
|
|
16
|
-
registerRef: __noop
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Focus manager logic
|
|
13
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
14
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
15
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
21
16
|
*/
|
|
22
17
|
const FocusManager = ({
|
|
23
18
|
children
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React, { useContext, useEffect } from 'react';
|
|
3
3
|
import { MenuGroup } from '@atlaskit/menu';
|
|
4
|
-
import { FocusManagerContext } from './focus-manager';
|
|
4
|
+
import { FocusManagerContext } from './focus-manager-context';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* It sets focus to the first avatar when popup is open.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// eslint-disable-next-line sort-imports
|
|
2
2
|
import { useContext, useEffect, useRef } from 'react';
|
|
3
|
-
import { FocusManagerContext } from '../components/focus-manager';
|
|
3
|
+
import { FocusManagerContext } from '../components/focus-manager-context';
|
|
4
4
|
|
|
5
5
|
// The refs stored in the context are used to programatically
|
|
6
6
|
// control focus on a user navigates using the keyboard.
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
._1bsbzwfg{width:2pc}
|
|
27
27
|
._1e0c1txw{display:flex}
|
|
28
28
|
._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
|
|
29
|
-
.
|
|
29
|
+
._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
|
|
30
30
|
._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
|
|
31
31
|
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
32
32
|
._1qu2glyw{outline-style:none}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
._128myh40:focus-visible{outline-width:2px}
|
|
58
58
|
._1ah3yh40:focus-visible{outline-offset:2px}
|
|
59
59
|
._1ejjglyw:focus-visible{box-shadow:none}
|
|
60
|
-
.
|
|
60
|
+
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
61
61
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
62
62
|
._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
|
|
63
63
|
._30l3i7uo:hover{color:var(--ds-text,#292a2e)}
|
|
@@ -7,10 +7,10 @@ import { forwardRef, useCallback } from 'react';
|
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
const boxShadowCssVar = '--avatar-box-shadow';
|
|
9
9
|
const styles = {
|
|
10
|
-
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw
|
|
10
|
+
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
|
|
11
11
|
circle: "_2rko1qll",
|
|
12
12
|
active: "_bfhk15s3 _16qsdfwd _syaz6x5g _t9ec1np6 _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
|
|
13
|
-
disabled: "_80om13gf
|
|
13
|
+
disabled: "_80om13gf _1peq2wxo _1hfkvuon",
|
|
14
14
|
hexagon: "_mkrz1k6g"
|
|
15
15
|
};
|
|
16
16
|
const widthHeightMap = {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createContext } from 'react';
|
|
2
|
+
import __noop from '@atlaskit/ds-lib/noop';
|
|
3
|
+
/**
|
|
4
|
+
* Context provider which maintains the list of focusable elements and a method to
|
|
5
|
+
* register new menu items.
|
|
6
|
+
* This list drives the keyboard navgation of the menu.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
export var FocusManagerContext = /*#__PURE__*/createContext({
|
|
10
|
+
menuItemRefs: [],
|
|
11
|
+
registerRef: __noop
|
|
12
|
+
});
|
|
@@ -1,23 +1,18 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useCallback, useEffect, useRef } from 'react';
|
|
2
2
|
import { bind } from 'bind-event-listener';
|
|
3
|
-
import __noop from '@atlaskit/ds-lib/noop';
|
|
4
3
|
import handleFocus from '../utiles/handle-focus';
|
|
4
|
+
import { FocusManagerContext } from './focus-manager-context';
|
|
5
5
|
|
|
6
|
+
// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
|
|
7
|
+
// Remove links that the component does not have (such as usage). If there are no links remove them all.
|
|
6
8
|
/**
|
|
9
|
+
* __Focus manager__
|
|
7
10
|
*
|
|
11
|
+
* A focus manager {description}.
|
|
8
12
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*/
|
|
14
|
-
export var FocusManagerContext = /*#__PURE__*/createContext({
|
|
15
|
-
menuItemRefs: [],
|
|
16
|
-
registerRef: __noop
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Focus manager logic
|
|
13
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
14
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
15
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
21
16
|
*/
|
|
22
17
|
var FocusManager = function FocusManager(_ref) {
|
|
23
18
|
var children = _ref.children;
|
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["children", "isLoading", "maxHeight", "maxWidth", "minHeight", "minWidth", "onClick", "role", "setInitialFocusRef", "spacing", "testId"];
|
|
4
4
|
import React, { useContext, useEffect } from 'react';
|
|
5
5
|
import { MenuGroup } from '@atlaskit/menu';
|
|
6
|
-
import { FocusManagerContext } from './focus-manager';
|
|
6
|
+
import { FocusManagerContext } from './focus-manager-context';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* It sets focus to the first avatar when popup is open.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// eslint-disable-next-line sort-imports
|
|
2
2
|
import { useContext, useEffect, useRef } from 'react';
|
|
3
|
-
import { FocusManagerContext } from '../components/focus-manager';
|
|
3
|
+
import { FocusManagerContext } from '../components/focus-manager-context';
|
|
4
4
|
|
|
5
5
|
// The refs stored in the context are used to programatically
|
|
6
6
|
// control focus on a user navigates using the keyboard.
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
._1bsbzwfg{width:2pc}
|
|
27
27
|
._1e0c1txw{display:flex}
|
|
28
28
|
._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
|
|
29
|
-
.
|
|
29
|
+
._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
|
|
30
30
|
._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
|
|
31
31
|
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
32
32
|
._1qu2glyw{outline-style:none}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
._128myh40:focus-visible{outline-width:2px}
|
|
58
58
|
._1ah3yh40:focus-visible{outline-offset:2px}
|
|
59
59
|
._1ejjglyw:focus-visible{box-shadow:none}
|
|
60
|
-
.
|
|
60
|
+
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
61
61
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
62
62
|
._30l36x5g:hover{color:var(--ds-text-selected,#1868db)}
|
|
63
63
|
._30l3i7uo:hover{color:var(--ds-text,#292a2e)}
|
|
@@ -8,10 +8,10 @@ import { forwardRef, useCallback } from 'react';
|
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
9
|
var boxShadowCssVar = '--avatar-box-shadow';
|
|
10
10
|
var styles = {
|
|
11
|
-
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw
|
|
11
|
+
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _1q8w1np6 _jlxit94y",
|
|
12
12
|
circle: "_2rko1qll",
|
|
13
13
|
active: "_bfhk15s3 _16qsdfwd _syaz6x5g _t9ec1np6 _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
|
|
14
|
-
disabled: "_80om13gf
|
|
14
|
+
disabled: "_80om13gf _1peq2wxo _1hfkvuon",
|
|
15
15
|
hexagon: "_mkrz1k6g"
|
|
16
16
|
};
|
|
17
17
|
var widthHeightMap = {
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type FocusableElement } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Context provider which maintains the list of focusable elements and a method to
|
|
5
|
+
* register new menu items.
|
|
6
|
+
* This list drives the keyboard navgation of the menu.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
export declare const FocusManagerContext: React.Context<{
|
|
10
|
+
menuItemRefs: FocusableElement[];
|
|
11
|
+
registerRef: (ref: FocusableElement) => void;
|
|
12
|
+
}>;
|
|
@@ -1,19 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { type FocusableElement } from '../../types';
|
|
1
|
+
import { type FC, type ReactNode } from 'react';
|
|
3
2
|
/**
|
|
3
|
+
* __Focus manager__
|
|
4
4
|
*
|
|
5
|
+
* A focus manager {description}.
|
|
5
6
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*/
|
|
11
|
-
export declare const FocusManagerContext: React.Context<{
|
|
12
|
-
menuItemRefs: FocusableElement[];
|
|
13
|
-
registerRef: (ref: FocusableElement) => void;
|
|
14
|
-
}>;
|
|
15
|
-
/**
|
|
16
|
-
* Focus manager logic
|
|
7
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
8
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
9
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
17
10
|
*/
|
|
18
11
|
declare const FocusManager: FC<{
|
|
19
12
|
children: ReactNode;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type FocusableElement } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Context provider which maintains the list of focusable elements and a method to
|
|
5
|
+
* register new menu items.
|
|
6
|
+
* This list drives the keyboard navgation of the menu.
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
export declare const FocusManagerContext: React.Context<{
|
|
10
|
+
menuItemRefs: FocusableElement[];
|
|
11
|
+
registerRef: (ref: FocusableElement) => void;
|
|
12
|
+
}>;
|
|
@@ -1,19 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { type FocusableElement } from '../../types';
|
|
1
|
+
import { type FC, type ReactNode } from 'react';
|
|
3
2
|
/**
|
|
3
|
+
* __Focus manager__
|
|
4
4
|
*
|
|
5
|
+
* A focus manager {description}.
|
|
5
6
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*/
|
|
11
|
-
export declare const FocusManagerContext: React.Context<{
|
|
12
|
-
menuItemRefs: FocusableElement[];
|
|
13
|
-
registerRef: (ref: FocusableElement) => void;
|
|
14
|
-
}>;
|
|
15
|
-
/**
|
|
16
|
-
* Focus manager logic
|
|
7
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
8
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
9
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
17
10
|
*/
|
|
18
11
|
declare const FocusManager: FC<{
|
|
19
12
|
children: ReactNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/avatar-group",
|
|
3
|
-
"version": "12.5.
|
|
3
|
+
"version": "12.5.2",
|
|
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/"
|
|
@@ -17,6 +17,13 @@
|
|
|
17
17
|
],
|
|
18
18
|
"atlaskit:src": "src/index.tsx",
|
|
19
19
|
"atlassian": {
|
|
20
|
+
"react-compiler": {
|
|
21
|
+
"enabled": true,
|
|
22
|
+
"gating": {
|
|
23
|
+
"source": "@atlassian/react-compiler-gating",
|
|
24
|
+
"importSpecifierName": "isReactCompilerActivePlatform"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
20
27
|
"team": "Design System Team",
|
|
21
28
|
"website": {
|
|
22
29
|
"name": "Avatar group",
|
|
@@ -30,9 +37,9 @@
|
|
|
30
37
|
"@atlaskit/menu": "^8.4.0",
|
|
31
38
|
"@atlaskit/motion": "^5.5.0",
|
|
32
39
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
33
|
-
"@atlaskit/popup": "^4.
|
|
40
|
+
"@atlaskit/popup": "^4.16.0",
|
|
34
41
|
"@atlaskit/tokens": "^11.4.0",
|
|
35
|
-
"@atlaskit/tooltip": "^21.
|
|
42
|
+
"@atlaskit/tooltip": "^21.1.0",
|
|
36
43
|
"@babel/runtime": "^7.0.0",
|
|
37
44
|
"@compiled/react": "^0.20.0",
|
|
38
45
|
"bind-event-listener": "^3.0.0"
|
|
@@ -48,12 +55,13 @@
|
|
|
48
55
|
"@atlaskit/button": "^23.10.0",
|
|
49
56
|
"@atlaskit/docs": "^11.7.0",
|
|
50
57
|
"@atlaskit/form": "^15.5.0",
|
|
51
|
-
"@atlaskit/icon": "^
|
|
58
|
+
"@atlaskit/icon": "^34.0.0",
|
|
52
59
|
"@atlaskit/link": "^3.3.0",
|
|
53
|
-
"@atlaskit/modal-dialog": "^14.
|
|
60
|
+
"@atlaskit/modal-dialog": "^14.14.0",
|
|
54
61
|
"@atlaskit/primitives": "^18.1.0",
|
|
55
62
|
"@atlaskit/section-message": "^8.12.0",
|
|
56
63
|
"@atlaskit/toggle": "^15.2.0",
|
|
64
|
+
"@atlassian/react-compiler-gating": "workspace:^",
|
|
57
65
|
"@atlassian/ssr-tests": "workspace:^",
|
|
58
66
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
59
67
|
"@testing-library/react": "^16.3.0",
|