@atlaskit/avatar-group 8.5.2 → 8.5.6

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 (9) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/components/more-indicator.js +6 -6
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/components/more-indicator.js +14 -13
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/components/more-indicator.js +6 -5
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/components/types.d.ts +5 -5
  9. package/package.json +11 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 8.5.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
8
+
9
+ ## 8.5.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
14
+ - Updated dependencies
15
+
16
+ ## 8.5.4
17
+
18
+ ### Patch Changes
19
+
20
+ - [`2b98dfda0a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b98dfda0a6) - Removes `@emotion/styled` in favour of `@emotion/core`.
21
+ - Updated dependencies
22
+
23
+ ## 8.5.3
24
+
25
+ ### Patch Changes
26
+
27
+ - [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
28
+
3
29
  ## 8.5.2
4
30
 
5
31
  ### Patch Changes
package/dist/cjs/components/more-indicator.js CHANGED
@@ -23,8 +23,6 @@ var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
23
23
 
24
24
  var _colors = require("@atlaskit/theme/colors");
25
25
 
26
- var _tokens = require("@atlaskit/tokens");
27
-
28
26
  var _templateObject, _templateObject2;
29
27
 
30
28
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -44,9 +42,9 @@ var getButtonStyles = function getButtonStyles(css, _ref) {
44
42
  var size = _ref.size,
45
43
  isActive = _ref.isActive;
46
44
  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
47
- var activeStyles = css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), (0, _tokens.token)('color.background.selected.resting', _colors.B50), _avatar.ACTIVE_SCALE_FACTOR, _avatar.BORDER_WIDTH, (0, _tokens.token)('color.text.selected', _colors.B300), (0, _tokens.token)('color.text.selected', _colors.B400)); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
45
+ var activeStyles = css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), "var(--ds-background-selected-resting, ".concat(_colors.B50, ")"), _avatar.ACTIVE_SCALE_FACTOR, _avatar.BORDER_WIDTH, "var(--ds-text-selected, ".concat(_colors.B300, ")"), "var(--ds-text-selected, ".concat(_colors.B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
48
46
 
49
- return css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), (0, _tokens.token)('color.text.highEmphasis', _colors.N500), (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20), FONT_SIZE[size], (0, _tokens.token)('color.background.subtleNeutral.hover', _colors.N30), (0, _tokens.token)('color.text.highEmphasis', _colors.N500), (0, _tokens.token)('color.background.subtleNeutral.hover', _colors.N30A), (0, _tokens.token)('color.background.subtleNeutral.pressed', _colors.B50), (0, _tokens.token)('color.text.highEmphasis', _colors.B400), isActive && activeStyles);
47
+ return css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")"), "var(--ds-background-subtleNeutral-resting, ".concat(_colors.N20, ")"), FONT_SIZE[size], "var(--ds-background-subtleNeutral-hover, ".concat(_colors.N30, ")"), "var(--ds-text-highEmphasis, ".concat(_colors.N500, ")"), "var(--ds-background-subtleNeutral-hover, ".concat(_colors.N30A, ")"), "var(--ds-background-subtleNeutral-pressed, ".concat(_colors.B50, ")"), "var(--ds-text-highEmphasis, ".concat(_colors.B400, ")"), isActive && activeStyles);
50
48
  };
51
49
 
52
50
  var MAX_DISPLAY_COUNT = 99;
@@ -54,7 +52,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
54
52
  var _ref2$appearance = _ref2.appearance,
55
53
  appearance = _ref2$appearance === void 0 ? 'circle' : _ref2$appearance,
56
54
  _ref2$borderColor = _ref2.borderColor,
57
- borderColor = _ref2$borderColor === void 0 ? (0, _tokens.token)('color.background.overlay', (0, _colors.background)()) : _ref2$borderColor,
55
+ borderColor = _ref2$borderColor === void 0 ? "var(--ds-background-overlay, ".concat((0, _colors.background)(), ")") : _ref2$borderColor,
58
56
  _ref2$size = _ref2.size,
59
57
  size = _ref2$size === void 0 ? 'medium' : _ref2$size,
60
58
  _ref2$count = _ref2.count,
@@ -89,7 +87,9 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
89
87
  return (0, _core.jsx)(_core.ClassNames, null, function (_ref4) {
90
88
  var css = _ref4.css,
91
89
  cx = _ref4.cx;
92
- return (0, _core.jsx)("button", (0, _extends2.default)({}, buttonProps, props, {
90
+ return (0, _core.jsx)("button", (0, _extends2.default)({
91
+ type: "submit"
92
+ }, buttonProps, props, {
93
93
  ref: ref,
94
94
  "data-testid": testId,
95
95
  "aria-controls": ariaControls,
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.2",
3
+ "version": "8.5.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/more-indicator.js CHANGED
@@ -5,7 +5,6 @@ import { forwardRef, useCallback } from 'react';
5
5
  import { ClassNames, jsx } from '@emotion/core';
6
6
  import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
7
7
  import { B300, B400, B50, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
8
- import { token } from '@atlaskit/tokens';
9
8
  const FONT_SIZE = {
10
9
  xsmall: 10,
11
10
  small: 10,
@@ -21,31 +20,31 @@ const getButtonStyles = (css, {
21
20
  }) => {
22
21
  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
23
22
  const activeStyles = css`
24
- background-color: ${token('color.background.selected.resting', B50)};
23
+ background-color: ${`var(--ds-background-selected-resting, ${B50})`};
25
24
  transform: scale(${ACTIVE_SCALE_FACTOR});
26
- box-shadow: 0 0 0 ${BORDER_WIDTH}px ${token('color.text.selected', B300)};
27
- color: ${token('color.text.selected', B400)};
25
+ box-shadow: 0 0 0 ${BORDER_WIDTH}px ${`var(--ds-text-selected, ${B300})`};
26
+ color: ${`var(--ds-text-selected, ${B400})`};
28
27
  `; // eslint-disable-next-line @repo/internal/react/no-css-string-literals
29
28
 
30
29
  return css`
31
- color: ${token('color.text.highEmphasis', N500)};
32
- background-color: ${token('color.background.subtleNeutral.resting', N20)};
30
+ color: ${`var(--ds-text-highEmphasis, ${N500})`};
31
+ background-color: ${`var(--ds-background-subtleNeutral-resting, ${N20})`};
33
32
  font-size: ${FONT_SIZE[size]}px;
34
33
  font-family: inherit;
35
34
  font-weight: 500;
36
35
 
37
36
  &:hover {
38
- background-color: ${token('color.background.subtleNeutral.hover', N30)};
39
- color: ${token('color.text.highEmphasis', N500)};
37
+ background-color: ${`var(--ds-background-subtleNeutral-hover, ${N30})`};
38
+ color: ${`var(--ds-text-highEmphasis, ${N500})`};
40
39
  &:after {
41
- background-color: ${token('color.background.subtleNeutral.hover', N30A)};
40
+ background-color: ${`var(--ds-background-subtleNeutral-hover, ${N30A})`};
42
41
  opacity: 1;
43
42
  }
44
43
  }
45
44
 
46
45
  &:active {
47
- background-color: ${token('color.background.subtleNeutral.pressed', B50)};
48
- color: ${token('color.text.highEmphasis', B400)};
46
+ background-color: ${`var(--ds-background-subtleNeutral-pressed, ${B50})`};
47
+ color: ${`var(--ds-text-highEmphasis, ${B400})`};
49
48
  &:after {
50
49
  background-color: transparent;
51
50
  }
@@ -58,7 +57,7 @@ const getButtonStyles = (css, {
58
57
  const MAX_DISPLAY_COUNT = 99;
59
58
  const MoreIndicator = /*#__PURE__*/forwardRef(({
60
59
  appearance = 'circle',
61
- borderColor = token('color.background.overlay', background()),
60
+ borderColor = `var(--ds-background-overlay, ${background()})`,
62
61
  size = 'medium',
63
62
  count = 0,
64
63
  testId,
@@ -91,7 +90,9 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
91
90
  }) => jsx(ClassNames, null, ({
92
91
  css,
93
92
  cx
94
- }) => jsx("button", _extends({}, buttonProps, props, {
93
+ }) => jsx("button", _extends({
94
+ type: "submit"
95
+ }, buttonProps, props, {
95
96
  ref: ref,
96
97
  "data-testid": testId,
97
98
  "aria-controls": ariaControls,
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.2",
3
+ "version": "8.5.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/more-indicator.js CHANGED
@@ -9,7 +9,6 @@ import { forwardRef, useCallback } from 'react';
9
9
  import { ClassNames, jsx } from '@emotion/core';
10
10
  import Avatar, { ACTIVE_SCALE_FACTOR, BORDER_WIDTH } from '@atlaskit/avatar';
11
11
  import { B300, B400, B50, background, N20, N30, N30A, N500 } from '@atlaskit/theme/colors';
12
- import { token } from '@atlaskit/tokens';
13
12
  var FONT_SIZE = {
14
13
  xsmall: 10,
15
14
  small: 10,
@@ -23,9 +22,9 @@ var getButtonStyles = function getButtonStyles(css, _ref) {
23
22
  var size = _ref.size,
24
23
  isActive = _ref.isActive;
25
24
  // eslint-disable-next-line @repo/internal/react/no-css-string-literals
26
- var activeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), token('color.background.selected.resting', B50), ACTIVE_SCALE_FACTOR, BORDER_WIDTH, token('color.text.selected', B300), token('color.text.selected', B400)); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
25
+ var activeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n transform: scale(", ");\n box-shadow: 0 0 0 ", "px ", ";\n color: ", ";\n "])), "var(--ds-background-selected-resting, ".concat(B50, ")"), ACTIVE_SCALE_FACTOR, BORDER_WIDTH, "var(--ds-text-selected, ".concat(B300, ")"), "var(--ds-text-selected, ".concat(B400, ")")); // eslint-disable-next-line @repo/internal/react/no-css-string-literals
27
26
 
28
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), token('color.text.highEmphasis', N500), token('color.background.subtleNeutral.resting', N20), FONT_SIZE[size], token('color.background.subtleNeutral.hover', N30), token('color.text.highEmphasis', N500), token('color.background.subtleNeutral.hover', N30A), token('color.background.subtleNeutral.pressed', B50), token('color.text.highEmphasis', B400), isActive && activeStyles);
27
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n background-color: ", ";\n font-size: ", "px;\n font-family: inherit;\n font-weight: 500;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: ", ";\n opacity: 1;\n }\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n &:after {\n background-color: transparent;\n }\n }\n\n ", "\n "])), "var(--ds-text-highEmphasis, ".concat(N500, ")"), "var(--ds-background-subtleNeutral-resting, ".concat(N20, ")"), FONT_SIZE[size], "var(--ds-background-subtleNeutral-hover, ".concat(N30, ")"), "var(--ds-text-highEmphasis, ".concat(N500, ")"), "var(--ds-background-subtleNeutral-hover, ".concat(N30A, ")"), "var(--ds-background-subtleNeutral-pressed, ".concat(B50, ")"), "var(--ds-text-highEmphasis, ".concat(B400, ")"), isActive && activeStyles);
29
28
  };
30
29
 
31
30
  var MAX_DISPLAY_COUNT = 99;
@@ -33,7 +32,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref2, ref) {
33
32
  var _ref2$appearance = _ref2.appearance,
34
33
  appearance = _ref2$appearance === void 0 ? 'circle' : _ref2$appearance,
35
34
  _ref2$borderColor = _ref2.borderColor,
36
- borderColor = _ref2$borderColor === void 0 ? token('color.background.overlay', background()) : _ref2$borderColor,
35
+ borderColor = _ref2$borderColor === void 0 ? "var(--ds-background-overlay, ".concat(background(), ")") : _ref2$borderColor,
37
36
  _ref2$size = _ref2.size,
38
37
  size = _ref2$size === void 0 ? 'medium' : _ref2$size,
39
38
  _ref2$count = _ref2.count,
@@ -69,7 +68,9 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref2, ref) {
69
68
  return jsx(ClassNames, null, function (_ref4) {
70
69
  var css = _ref4.css,
71
70
  cx = _ref4.cx;
72
- return jsx("button", _extends({}, buttonProps, props, {
71
+ return jsx("button", _extends({
72
+ type: "submit"
73
+ }, buttonProps, props, {
73
74
  ref: ref,
74
75
  "data-testid": testId,
75
76
  "aria-controls": ariaControls,
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.2",
3
+ "version": "8.5.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/types.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { ElementType, ReactNode } from 'react';
2
- import { Interpolation } from '@emotion/styled';
3
- import { AnalyticsEvent } from '@atlaskit/analytics-next';
4
- import { AvatarPropTypes } from '@atlaskit/avatar';
5
- import { AvatarGroupItemProps } from './avatar-group-item';
1
+ import type { ElementType, ReactNode } from 'react';
2
+ import type { Interpolation } from '@emotion/core';
3
+ import type { AnalyticsEvent } from '@atlaskit/analytics-next';
4
+ import type { AvatarPropTypes } from '@atlaskit/avatar';
5
+ import type { AvatarGroupItemProps } from './avatar-group-item';
6
6
  export declare type DeepRequired<T> = {
7
7
  [P in keyof T]-?: Required<T[P]>;
8
8
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "8.5.2",
3
+ "version": "8.5.6",
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,7 +17,6 @@
17
17
  "atlassian": {
18
18
  "team": "Design System Team",
19
19
  "deprecatedAutoEntryPoints": true,
20
- "inPublicMirror": true,
21
20
  "releaseModel": "scheduled",
22
21
  "website": {
23
22
  "name": "Avatar group"
@@ -25,10 +24,10 @@
25
24
  },
26
25
  "dependencies": {
27
26
  "@atlaskit/avatar": "^20.5.0",
28
- "@atlaskit/menu": "^1.1.0",
29
- "@atlaskit/popup": "^1.1.0",
27
+ "@atlaskit/menu": "^1.2.0",
28
+ "@atlaskit/popup": "^1.2.0",
30
29
  "@atlaskit/theme": "^12.0.0",
31
- "@atlaskit/tokens": "^0.2.0",
30
+ "@atlaskit/tokens": "^0.4.0",
32
31
  "@atlaskit/tooltip": "^17.5.0",
33
32
  "@babel/runtime": "^7.0.0",
34
33
  "@emotion/core": "^10.0.9"
@@ -40,11 +39,11 @@
40
39
  "@atlaskit/analytics-next": "^8.2.0",
41
40
  "@atlaskit/build-utils": "*",
42
41
  "@atlaskit/button": "^16.1.0",
43
- "@atlaskit/code": "^14.1.0",
42
+ "@atlaskit/code": "^14.3.0",
44
43
  "@atlaskit/docs": "*",
45
44
  "@atlaskit/field-base": "^15.0.0",
46
45
  "@atlaskit/icon": "^21.9.0",
47
- "@atlaskit/modal-dialog": "^12.0.0",
46
+ "@atlaskit/modal-dialog": "^12.2.0",
48
47
  "@atlaskit/section-message": "^6.1.0",
49
48
  "@atlaskit/ssr": "*",
50
49
  "@atlaskit/toggle": "^12.3.0",
@@ -53,7 +52,7 @@
53
52
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
54
53
  "@emotion/styled": "^10.0.7",
55
54
  "@testing-library/react": "^8.0.1",
56
- "lodash": "^4.17.15",
55
+ "lodash": "^4.17.21",
57
56
  "react-dom": "^16.8.0",
58
57
  "typescript": "3.9.6",
59
58
  "wait-for-expect": "^1.2.0"
@@ -72,7 +71,10 @@
72
71
  "ui-components": "lite-mode",
73
72
  "analytics": "analytics-next",
74
73
  "theming": "tokens",
75
- "deprecation": "no-deprecated-imports"
74
+ "deprecation": "no-deprecated-imports",
75
+ "styling": [
76
+ "emotion"
77
+ ]
76
78
  }
77
79
  },
78
80
  "homepage": "https://atlassian.design/components/avatar-group/",