@atlaskit/avatar 21.15.4 → 21.16.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 (8) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/Avatar.js +2 -2
  3. package/dist/cjs/AvatarImage.js +2 -1
  4. package/dist/es2019/Avatar.js +2 -2
  5. package/dist/es2019/AvatarImage.js +2 -1
  6. package/dist/esm/Avatar.js +2 -2
  7. package/dist/esm/AvatarImage.js +2 -1
  8. package/package.json +5 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 21.16.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#155193](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155193)
8
+ [`823ac616e85a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/823ac616e85a9) -
9
+ adding data-ssr-placeholder-ignored attribute for VC calculation
10
+
11
+ ### Patch Changes
12
+
13
+ - [#154751](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154751)
14
+ [`002c8762275d8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/002c8762275d8) -
15
+ Fix focus styles overriding custom border styles when focus is not visible.
16
+ - Updated dependencies
17
+
18
+ ## 21.15.5
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 21.15.4
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/Avatar.js CHANGED
@@ -30,7 +30,7 @@ var _templateObject;
30
30
  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; }
31
31
  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; }
32
32
  var packageName = "@atlaskit/avatar";
33
- var packageVersion = "21.15.4";
33
+ var packageVersion = "21.16.0";
34
34
  var getTestId = function getTestId(testId, children) {
35
35
  return !children ? {
36
36
  'data-testid': "".concat(testId, "--inner")
@@ -51,7 +51,7 @@ var getStyles = function getStyles(css, _ref) {
51
51
  isInteractive = _ref.isInteractive,
52
52
  isDisabled = _ref.isDisabled;
53
53
  return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
54
- css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :hover {\n &::after {\n background-color: ".concat("var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(", _constants.ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n }\n "))
54
+ css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus-visible {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :hover {\n &::after {\n background-color: ".concat("var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(", _constants.ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n }\n "))
55
55
  );
56
56
  };
57
57
 
package/dist/cjs/AvatarImage.js CHANGED
@@ -118,7 +118,8 @@ var AvatarImage = function AvatarImage(_ref3) {
118
118
  return setHasImageErrored(true);
119
119
  },
120
120
  "aria-hidden": isHidden,
121
- "data-vc": testId ? "".concat(testId, "--image") : 'avatar-image'
121
+ "data-vc": testId ? "".concat(testId, "--image") : 'avatar-image',
122
+ "data-ssr-placeholder-ignored": true
122
123
  });
123
124
  };
124
125
  var _default = exports.default = AvatarImage;
package/dist/es2019/Avatar.js CHANGED
@@ -19,7 +19,7 @@ import { PresenceWrapper } from './Presence';
19
19
  import { StatusWrapper } from './Status';
20
20
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
21
21
  const packageName = "@atlaskit/avatar";
22
- const packageVersion = "21.15.4";
22
+ const packageVersion = "21.16.0";
23
23
  const getTestId = (testId, children) => !children ? {
24
24
  'data-testid': `${testId}--inner`
25
25
  } : {
@@ -81,7 +81,7 @@ css`
81
81
  width: 100%;
82
82
  }
83
83
 
84
- :focus {
84
+ :focus-visible {
85
85
  box-shadow: none;
86
86
  }
87
87
 
package/dist/es2019/AvatarImage.js CHANGED
@@ -105,7 +105,8 @@ const AvatarImage = ({
105
105
  },
106
106
  onError: () => setHasImageErrored(true),
107
107
  "aria-hidden": isHidden,
108
- "data-vc": testId ? `${testId}--image` : 'avatar-image'
108
+ "data-vc": testId ? `${testId}--image` : 'avatar-image',
109
+ "data-ssr-placeholder-ignored": true
109
110
  });
110
111
  };
111
112
  export default AvatarImage;
package/dist/esm/Avatar.js CHANGED
@@ -24,7 +24,7 @@ import { PresenceWrapper } from './Presence';
24
24
  import { StatusWrapper } from './Status';
25
25
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
26
26
  var packageName = "@atlaskit/avatar";
27
- var packageVersion = "21.15.4";
27
+ var packageVersion = "21.16.0";
28
28
  var getTestId = function getTestId(testId, children) {
29
29
  return !children ? {
30
30
  'data-testid': "".concat(testId, "--inner")
@@ -45,7 +45,7 @@ var getStyles = function getStyles(css, _ref) {
45
45
  isInteractive = _ref.isInteractive,
46
46
  isDisabled = _ref.isDisabled;
47
47
  return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
48
- css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :hover {\n &::after {\n background-color: ".concat("var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(", ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n }\n "))
48
+ css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t\talign-items: stretch;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tbox-sizing: content-box;\n\t\tcursor: inherit;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\toutline: none;\n\t\toverflow: hidden;\n\t\tposition: static;\n\t\ttransform: translateZ(0);\n\t\ttransition:\n\t\t\ttransform 200ms,\n\t\t\topacity 200ms;\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder: none;\n\t\tmargin: ", ";\n\t\tpadding: ", ";\n\n\t\t&::-moz-focus-inner {\n\t\t\tborder: 0;\n\t\t\tmargin: ", ";\n\t\t\tpadding: ", ";\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tinset: 0px;\n\n\t\t\t/* Added border-radius style to fix hover issue in safari */\n\t\t\tborder-radius: ", ";\n\t\t\tcontent: ' ';\n\t\t\topacity: 0;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 200ms;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:focus-visible {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", "\n\t"])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n cursor: pointer;\n\n :hover {\n &::after {\n background-color: ".concat("var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n &::after {\n background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n opacity: 1;\n }\n }\n\n :active {\n transform: scale(", ACTIVE_SCALE_FACTOR, ");\n }\n\n @media screen and (forced-colors: active) {\n &:focus-visible {\n outline: 1px solid\n }\n }\n "), isDisabled && "\n cursor: not-allowed;\n\n &::after {\n opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n pointer-events: none;\n background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n }\n "))
49
49
  );
50
50
  };
51
51
 
package/dist/esm/AvatarImage.js CHANGED
@@ -114,7 +114,8 @@ var AvatarImage = function AvatarImage(_ref3) {
114
114
  return setHasImageErrored(true);
115
115
  },
116
116
  "aria-hidden": isHidden,
117
- "data-vc": testId ? "".concat(testId, "--image") : 'avatar-image'
117
+ "data-vc": testId ? "".concat(testId, "--image") : 'avatar-image',
118
+ "data-ssr-placeholder-ignored": true
118
119
  });
119
120
  };
120
121
  export default AvatarImage;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "21.15.4",
3
+ "version": "21.16.0",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -41,12 +41,12 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@atlaskit/analytics-next": "^10.1.0",
44
- "@atlaskit/ds-lib": "^3.0.0",
44
+ "@atlaskit/ds-lib": "^3.1.0",
45
45
  "@atlaskit/focus-ring": "^1.6.0",
46
- "@atlaskit/icon": "^22.20.0",
46
+ "@atlaskit/icon": "^22.24.0",
47
47
  "@atlaskit/platform-feature-flags": "^0.3.0",
48
48
  "@atlaskit/primitives": "^12.2.0",
49
- "@atlaskit/theme": "^13.0.0",
49
+ "@atlaskit/theme": "^14.0.0",
50
50
  "@atlaskit/tokens": "^2.0.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@emotion/react": "^11.7.1",
@@ -57,6 +57,7 @@
57
57
  },
58
58
  "devDependencies": {
59
59
  "@af/accessibility-testing": "*",
60
+ "@af/integration-testing": "*",
60
61
  "@af/visual-regression": "*",
61
62
  "@atlaskit/ssr": "*",
62
63
  "@atlaskit/textfield": "^6.5.0",