@atlaskit/avatar-group 8.5.1 → 8.5.5

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 +15 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 8.5.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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.
8
+ - Updated dependencies
9
+
10
+ ## 8.5.4
11
+
12
+ ### Patch Changes
13
+
14
+ - [`2b98dfda0a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b98dfda0a6) - Removes `@emotion/styled` in favour of `@emotion/core`.
15
+ - Updated dependencies
16
+
17
+ ## 8.5.3
18
+
19
+ ### Patch Changes
20
+
21
+ - [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
22
+
23
+ ## 8.5.2
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies
28
+
3
29
  ## 8.5.1
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.1",
3
+ "version": "8.5.5",
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.1",
3
+ "version": "8.5.5",
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.1",
3
+ "version": "8.5.5",
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.1",
3
+ "version": "8.5.5",
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/"
@@ -24,12 +24,12 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/avatar": "^20.4.0",
28
- "@atlaskit/menu": "^1.1.0",
27
+ "@atlaskit/avatar": "^20.5.0",
28
+ "@atlaskit/menu": "^1.2.0",
29
29
  "@atlaskit/popup": "^1.1.0",
30
- "@atlaskit/theme": "^11.5.0",
31
- "@atlaskit/tokens": "^0.2.0",
32
- "@atlaskit/tooltip": "^17.4.0",
30
+ "@atlaskit/theme": "^12.0.0",
31
+ "@atlaskit/tokens": "^0.4.0",
32
+ "@atlaskit/tooltip": "^17.5.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/core": "^10.0.9"
35
35
  },
@@ -40,14 +40,14 @@
40
40
  "@atlaskit/analytics-next": "^8.2.0",
41
41
  "@atlaskit/build-utils": "*",
42
42
  "@atlaskit/button": "^16.1.0",
43
- "@atlaskit/code": "^14.1.0",
43
+ "@atlaskit/code": "^14.3.0",
44
44
  "@atlaskit/docs": "*",
45
45
  "@atlaskit/field-base": "^15.0.0",
46
- "@atlaskit/icon": "^21.8.0",
47
- "@atlaskit/modal-dialog": "^12.0.0",
46
+ "@atlaskit/icon": "^21.9.0",
47
+ "@atlaskit/modal-dialog": "^12.2.0",
48
48
  "@atlaskit/section-message": "^6.1.0",
49
49
  "@atlaskit/ssr": "*",
50
- "@atlaskit/toggle": "^12.1.0",
50
+ "@atlaskit/toggle": "^12.3.0",
51
51
  "@atlaskit/visual-regression": "*",
52
52
  "@atlaskit/webdriver-runner": "*",
53
53
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -72,9 +72,12 @@
72
72
  "ui-components": "lite-mode",
73
73
  "analytics": "analytics-next",
74
74
  "theming": "tokens",
75
- "deprecation": "no-deprecated-imports"
75
+ "deprecation": "no-deprecated-imports",
76
+ "styling": [
77
+ "emotion"
78
+ ]
76
79
  }
77
80
  },
78
81
  "homepage": "https://atlassian.design/components/avatar-group/",
79
82
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
80
- }
83
+ }