@atlaskit/avatar-group 11.1.3 → 11.1.4

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 (10) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/more-indicator.compiled.css +71 -15
  3. package/dist/cjs/components/more-indicator.js +41 -41
  4. package/dist/es2019/components/more-indicator.compiled.css +71 -15
  5. package/dist/es2019/components/more-indicator.js +36 -30
  6. package/dist/esm/components/more-indicator.compiled.css +71 -15
  7. package/dist/esm/components/more-indicator.js +41 -41
  8. package/dist/types/components/more-indicator.d.ts +5 -2
  9. package/dist/types-ts4.5/components/more-indicator.d.ts +5 -2
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/avatar-group
2
2
 
3
+ ## 11.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#114591](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114591)
8
+ [`e0ea3e42506fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e0ea3e42506fb) -
9
+ Internal refactor to the "more indicator". Fixes the focus state of the "more indicator" button.
10
+
3
11
  ## 11.1.3
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/more-indicator.compiled.css CHANGED
@@ -1,15 +1,71 @@
1
-
2
- ._16hgfg4m._16hgfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
3
- ._16hgm7j4._16hgm7j4{background-color:var(--ds-background-neutral,#091e420f)}
4
- ._1g4l1np6._1g4l1np6{transform:scale(.9)}
5
- ._1w901fxt._1w901fxt{color:var(--ds-text,#172b4d)}
6
- ._1w90aqb7._1w90aqb7{color:var(--ds-text-selected,#0c66e4)}
7
- ._c6d7glyw._c6d7glyw:after{display:none}
8
- ._so1edux9._so1edux9{box-shadow:var(--_10k2j09)}
9
- ._1fh11fxt._1fh11fxt:hover{color:var(--ds-text,#172b4d)}
10
- ._1fh1aqb7._1fh1aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
11
- ._u1mb15ej._u1mb15ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
12
- ._u1mbi1yw._u1mbi1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}._10fu19ru._10fu19ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
13
- ._10fuip91._10fuip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
14
- ._1l5a1fxt._1l5a1fxt:active{color:var(--ds-text,#172b4d)}
15
- ._1l5aaqb7._1l5aaqb7:active{color:var(--ds-text-selected,#0c66e4)}
1
+ ._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
+ ._14mj1crf:after{border-radius:9pt}
5
+ ._14mj1l7b:after{border-radius:3px}
6
+ ._14mji2wt:after{border-radius:6px}
7
+ ._14mjyh40:after{border-radius:2px}
8
+ ._19itglyw{border:none}
9
+ ._2rko1crf{border-radius:9pt}
10
+ ._2rko1l7b{border-radius:3px}
11
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
12
+ ._2rkoi2wt{border-radius:6px}
13
+ ._2rkoyh40{border-radius:2px}
14
+ ._v564ieh6{transition:transform .2s,opacity .2s}
15
+ ._12ji1r31{outline-color:currentColor}
16
+ ._12y31o36{outline-width:medium}
17
+ ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
18
+ ._16qsqz53{box-shadow:0 0 0 var(--ds-border-width-outline,2px) var(--ds-border-selected,#0c66e4)}
19
+ ._18m915vq{overflow-y:hidden}
20
+ ._18u0v77o{margin-left:var(--ds-space-025,2px)}
21
+ ._19bvze3t{padding-left:var(--ds-space-0,0)}
22
+ ._19pkv77o{margin-top:var(--ds-space-025,2px)}
23
+ ._1bah1h6o{justify-content:center}
24
+ ._1bsb16xz{width:6pc}
25
+ ._1bsb1qr7{width:8pc}
26
+ ._1bsb1tcg{width:24px}
27
+ ._1bsb1ylp{width:40px}
28
+ ._1bsb7vkz{width:1pc}
29
+ ._1bsbzwfg{width:2pc}
30
+ ._1e0c1txw{display:flex}
31
+ ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
32
+ ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
33
+ ._1qu2glyw{outline-style:none}
34
+ ._1reo15vq{overflow-x:hidden}
35
+ ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
36
+ ._2lx21bp4{flex-direction:column}
37
+ ._4cvr1fhb{align-items:stretch}
38
+ ._4t3i16xz{height:6pc}
39
+ ._4t3i1qr7{height:8pc}
40
+ ._4t3i1tcg{height:24px}
41
+ ._4t3i1ylp{height:40px}
42
+ ._4t3i7vkz{height:1pc}
43
+ ._4t3izwfg{height:2pc}
44
+ ._80om13gf{cursor:not-allowed}
45
+ ._80omtlke{cursor:pointer}
46
+ ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
47
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
48
+ ._ca0qze3t{padding-top:var(--ds-space-0,0)}
49
+ ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
50
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
51
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
52
+ ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
53
+ ._t9ec1aqe{transform:translateZ(0)}
54
+ ._t9ec1np6{transform:scale(.9)}
55
+ ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
56
+ ._vchh1ntv{box-sizing:content-box}
57
+ ._128myh40:focus-visible{outline-width:2px}
58
+ ._1ah3yh40:focus-visible{outline-offset:2px}
59
+ ._1ejjglyw:focus-visible{box-shadow:none}
60
+ ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
61
+ ._ra3xnqa1:focus-visible{outline-style:solid}
62
+ ._30l31fxt:hover{color:var(--ds-text,#172b4d)}
63
+ ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
64
+ ._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
65
+ ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
66
+ ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
67
+ ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
68
+ ._1q8w1np6:active{transform:scale(.9)}
69
+ ._9h8h1fxt:active{color:var(--ds-text,#172b4d)}
70
+ ._9h8haqb7:active{color:var(--ds-text-selected,#0c66e4)}
71
+ @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/cjs/components/more-indicator.js CHANGED
@@ -12,21 +12,40 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
- var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
15
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
- var _excluded = ["testId", "className", "ref"];
19
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
- var buttonSizes = {
22
- small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
23
- medium: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
24
- large: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
25
- xlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
26
- xxlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
19
+ var boxShadowCssVar = '--avatar-box-shadow';
20
+ var styles = {
21
+ root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhkm7j4 _syaz1fxt _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr315ej _30l31fxt _1di6ip91 _9h8h1fxt _1q8w1np6 _jlxit94y",
22
+ circle: "_2rko1q5u",
23
+ active: "_bfhkfg4m _16qsqz53 _syazaqb7 _t9ec1np6 _irr3i1yw _30l3aqb7 _1di619ru _9h8haqb7",
24
+ disabled: "_80om13gf _1peqs237 _1hfkvuon"
25
+ };
26
+ var widthHeightMap = {
27
+ xsmall: "_1bsb7vkz _4t3i7vkz",
28
+ small: "_1bsb1tcg _4t3i1tcg",
29
+ medium: "_1bsbzwfg _4t3izwfg",
30
+ large: "_1bsb1ylp _4t3i1ylp",
31
+ xlarge: "_1bsb16xz _4t3i16xz",
32
+ xxlarge: "_1bsb1qr7 _4t3i1qr7"
33
+ };
34
+ var borderRadiusMap = {
35
+ xsmall: "_2rkoyh40 _14mjyh40",
36
+ small: "_2rkoyh40 _14mjyh40",
37
+ medium: "_2rko1l7b _14mj1l7b",
38
+ large: "_2rko1l7b _14mj1l7b",
39
+ xlarge: "_2rkoi2wt _14mji2wt",
40
+ xxlarge: "_2rko1crf _14mj1crf"
41
+ };
42
+ var fontMap = {
43
+ small: "_11c81vlj",
44
+ medium: "_11c81vlj",
45
+ large: "_11c8qk37",
46
+ xlarge: "_11c81doa",
47
+ xxlarge: "_11c81doa"
27
48
  };
28
- var buttonActiveStyles = null;
29
- var buttonStyles = null;
30
49
  var MAX_DISPLAY_COUNT = 99;
31
50
  var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
32
51
  var _ref$appearance = _ref.appearance,
@@ -53,37 +72,18 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
53
72
  },
54
73
  // eslint-disable-next-line react-hooks/exhaustive-deps
55
74
  [buttonProps.onClick, onClick]);
56
- return /*#__PURE__*/React.createElement(_avatar.default, {
57
- appearance: appearance,
58
- size: size,
59
- borderColor: borderColor,
75
+ return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
76
+ type: "submit"
77
+ }, buttonProps, {
78
+ onClick: onClickHander,
60
79
  ref: ref,
61
- onClick: onClickHander
62
- }, function (_ref2) {
63
- var _ = _ref2.testId,
64
- className = _ref2.className,
65
- ref = _ref2.ref,
66
- props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
67
- return /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
68
- type: "submit"
69
- }, buttonProps, props, {
70
- ref: ref,
71
- "data-testid": testId,
72
- "aria-controls": ariaControls,
73
- "aria-expanded": ariaExpanded,
74
- "aria-haspopup": ariaHaspopup
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
76
- ,
77
-
78
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
79
- className: (0, _runtime.ax)(["_16hgm7j4 _1w901fxt _u1mb15ej _1fh11fxt _10fuip91 _1l5a1fxt _c6d7glyw", isActive && "_16hgfg4m _so1edux9 _1w90aqb7 _1g4l1np6 _u1mbi1yw _1fh1aqb7 _10fu19ru _1l5aaqb7", className]),
80
- style: {
81
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
82
- font: buttonSizes[size],
83
- "--_10k2j09": (0, _runtime.ix)("0 0 0 ".concat("var(--ds-border-width-outline, 2px)", " ", "var(--ds-border-selected, #0C66E4)"))
84
- }
85
- }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
86
- });
80
+ "data-testid": testId,
81
+ "aria-controls": ariaControls,
82
+ "aria-expanded": ariaExpanded,
83
+ "aria-haspopup": ariaHaspopup,
84
+ style: (0, _defineProperty2.default)({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
85
+ className: (0, _runtime.ax)([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
86
+ }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
87
87
  });
88
88
  MoreIndicator.displayName = 'MoreIndicator';
89
89
 
package/dist/es2019/components/more-indicator.compiled.css CHANGED
@@ -1,15 +1,71 @@
1
-
2
- ._16hgfg4m._16hgfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
3
- ._16hgm7j4._16hgm7j4{background-color:var(--ds-background-neutral,#091e420f)}
4
- ._1g4l1np6._1g4l1np6{transform:scale(.9)}
5
- ._1w901fxt._1w901fxt{color:var(--ds-text,#172b4d)}
6
- ._1w90aqb7._1w90aqb7{color:var(--ds-text-selected,#0c66e4)}
7
- ._c6d7glyw._c6d7glyw:after{display:none}
8
- ._so1eqz53._so1eqz53{box-shadow:0 0 0 var(--ds-border-width-outline,2px) var(--ds-border-selected,#0c66e4)}
9
- ._1fh11fxt._1fh11fxt:hover{color:var(--ds-text,#172b4d)}
10
- ._1fh1aqb7._1fh1aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
11
- ._u1mb15ej._u1mb15ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
12
- ._u1mbi1yw._u1mbi1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}._10fu19ru._10fu19ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
13
- ._10fuip91._10fuip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
14
- ._1l5a1fxt._1l5a1fxt:active{color:var(--ds-text,#172b4d)}
15
- ._1l5aaqb7._1l5aaqb7:active{color:var(--ds-text-selected,#0c66e4)}
1
+ ._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
+ ._14mj1crf:after{border-radius:9pt}
5
+ ._14mj1l7b:after{border-radius:3px}
6
+ ._14mji2wt:after{border-radius:6px}
7
+ ._14mjyh40:after{border-radius:2px}
8
+ ._19itglyw{border:none}
9
+ ._2rko1crf{border-radius:9pt}
10
+ ._2rko1l7b{border-radius:3px}
11
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
12
+ ._2rkoi2wt{border-radius:6px}
13
+ ._2rkoyh40{border-radius:2px}
14
+ ._v564ieh6{transition:transform .2s,opacity .2s}
15
+ ._12ji1r31{outline-color:currentColor}
16
+ ._12y31o36{outline-width:medium}
17
+ ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
18
+ ._16qsqz53{box-shadow:0 0 0 var(--ds-border-width-outline,2px) var(--ds-border-selected,#0c66e4)}
19
+ ._18m915vq{overflow-y:hidden}
20
+ ._18u0v77o{margin-left:var(--ds-space-025,2px)}
21
+ ._19bvze3t{padding-left:var(--ds-space-0,0)}
22
+ ._19pkv77o{margin-top:var(--ds-space-025,2px)}
23
+ ._1bah1h6o{justify-content:center}
24
+ ._1bsb16xz{width:6pc}
25
+ ._1bsb1qr7{width:8pc}
26
+ ._1bsb1tcg{width:24px}
27
+ ._1bsb1ylp{width:40px}
28
+ ._1bsb7vkz{width:1pc}
29
+ ._1bsbzwfg{width:2pc}
30
+ ._1e0c1txw{display:flex}
31
+ ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
32
+ ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
33
+ ._1qu2glyw{outline-style:none}
34
+ ._1reo15vq{overflow-x:hidden}
35
+ ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
36
+ ._2lx21bp4{flex-direction:column}
37
+ ._4cvr1fhb{align-items:stretch}
38
+ ._4t3i16xz{height:6pc}
39
+ ._4t3i1qr7{height:8pc}
40
+ ._4t3i1tcg{height:24px}
41
+ ._4t3i1ylp{height:40px}
42
+ ._4t3i7vkz{height:1pc}
43
+ ._4t3izwfg{height:2pc}
44
+ ._80om13gf{cursor:not-allowed}
45
+ ._80omtlke{cursor:pointer}
46
+ ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
47
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
48
+ ._ca0qze3t{padding-top:var(--ds-space-0,0)}
49
+ ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
50
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
51
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
52
+ ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
53
+ ._t9ec1aqe{transform:translateZ(0)}
54
+ ._t9ec1np6{transform:scale(.9)}
55
+ ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
56
+ ._vchh1ntv{box-sizing:content-box}
57
+ ._128myh40:focus-visible{outline-width:2px}
58
+ ._1ah3yh40:focus-visible{outline-offset:2px}
59
+ ._1ejjglyw:focus-visible{box-shadow:none}
60
+ ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
61
+ ._ra3xnqa1:focus-visible{outline-style:solid}
62
+ ._30l31fxt:hover{color:var(--ds-text,#172b4d)}
63
+ ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
64
+ ._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
65
+ ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
66
+ ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
67
+ ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
68
+ ._1q8w1np6:active{transform:scale(.9)}
69
+ ._9h8h1fxt:active{color:var(--ds-text,#172b4d)}
70
+ ._9h8haqb7:active{color:var(--ds-text-selected,#0c66e4)}
71
+ @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/es2019/components/more-indicator.js CHANGED
@@ -4,17 +4,37 @@ import "./more-indicator.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef, useCallback } from 'react';
7
- import Avatar from '@atlaskit/avatar';
8
7
  import { fg } from '@atlaskit/platform-feature-flags';
9
- const buttonSizes = {
10
- small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
11
- medium: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
12
- large: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
13
- xlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
14
- xxlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
8
+ const boxShadowCssVar = '--avatar-box-shadow';
9
+ const styles = {
10
+ root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhkm7j4 _syaz1fxt _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr315ej _30l31fxt _1di6ip91 _9h8h1fxt _1q8w1np6 _jlxit94y",
11
+ circle: "_2rko1q5u",
12
+ active: "_bfhkfg4m _16qsqz53 _syazaqb7 _t9ec1np6 _irr3i1yw _30l3aqb7 _1di619ru _9h8haqb7",
13
+ disabled: "_80om13gf _1peqs237 _1hfkvuon"
14
+ };
15
+ const widthHeightMap = {
16
+ xsmall: "_1bsb7vkz _4t3i7vkz",
17
+ small: "_1bsb1tcg _4t3i1tcg",
18
+ medium: "_1bsbzwfg _4t3izwfg",
19
+ large: "_1bsb1ylp _4t3i1ylp",
20
+ xlarge: "_1bsb16xz _4t3i16xz",
21
+ xxlarge: "_1bsb1qr7 _4t3i1qr7"
22
+ };
23
+ const borderRadiusMap = {
24
+ xsmall: "_2rkoyh40 _14mjyh40",
25
+ small: "_2rkoyh40 _14mjyh40",
26
+ medium: "_2rko1l7b _14mj1l7b",
27
+ large: "_2rko1l7b _14mj1l7b",
28
+ xlarge: "_2rkoi2wt _14mji2wt",
29
+ xxlarge: "_2rko1crf _14mj1crf"
30
+ };
31
+ const fontMap = {
32
+ small: "_11c81vlj",
33
+ medium: "_11c81vlj",
34
+ large: "_11c8qk37",
35
+ xlarge: "_11c81doa",
36
+ xxlarge: "_11c81doa"
15
37
  };
16
- const buttonActiveStyles = null;
17
- const buttonStyles = null;
18
38
  const MAX_DISPLAY_COUNT = 99;
19
39
  const MoreIndicator = /*#__PURE__*/forwardRef(({
20
40
  appearance = 'circle',
@@ -38,34 +58,20 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
38
58
  },
39
59
  // eslint-disable-next-line react-hooks/exhaustive-deps
40
60
  [buttonProps.onClick, onClick]);
41
- return /*#__PURE__*/React.createElement(Avatar, {
42
- appearance: appearance,
43
- size: size,
44
- borderColor: borderColor,
45
- ref: ref,
46
- onClick: onClickHander
47
- }, ({
48
- testId: _,
49
- className,
50
- ref,
51
- ...props
52
- }) => /*#__PURE__*/React.createElement("button", _extends({
61
+ return /*#__PURE__*/React.createElement("button", _extends({
53
62
  type: "submit"
54
- }, buttonProps, props, {
63
+ }, buttonProps, {
64
+ onClick: onClickHander,
55
65
  ref: ref,
56
66
  "data-testid": testId,
57
67
  "aria-controls": ariaControls,
58
68
  "aria-expanded": ariaExpanded,
59
- "aria-haspopup": ariaHaspopup
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
61
- ,
69
+ "aria-haspopup": ariaHaspopup,
62
70
  style: {
63
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
64
- font: buttonSizes[size]
71
+ [boxShadowCssVar]: `0 0 0 2px ${borderColor}`
65
72
  },
66
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
67
- className: ax(["_16hgm7j4 _1w901fxt _u1mb15ej _1fh11fxt _10fuip91 _1l5a1fxt _c6d7glyw", isActive && "_16hgfg4m _so1eqz53 _1w90aqb7 _1g4l1np6 _u1mbi1yw _1fh1aqb7 _10fu19ru _1l5aaqb7", className])
68
- }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count));
73
+ className: ax([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
74
+ }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
69
75
  });
70
76
  MoreIndicator.displayName = 'MoreIndicator';
71
77
 
package/dist/esm/components/more-indicator.compiled.css CHANGED
@@ -1,15 +1,71 @@
1
-
2
- ._16hgfg4m._16hgfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
3
- ._16hgm7j4._16hgm7j4{background-color:var(--ds-background-neutral,#091e420f)}
4
- ._1g4l1np6._1g4l1np6{transform:scale(.9)}
5
- ._1w901fxt._1w901fxt{color:var(--ds-text,#172b4d)}
6
- ._1w90aqb7._1w90aqb7{color:var(--ds-text-selected,#0c66e4)}
7
- ._c6d7glyw._c6d7glyw:after{display:none}
8
- ._so1edux9._so1edux9{box-shadow:var(--_10k2j09)}
9
- ._1fh11fxt._1fh11fxt:hover{color:var(--ds-text,#172b4d)}
10
- ._1fh1aqb7._1fh1aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
11
- ._u1mb15ej._u1mb15ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
12
- ._u1mbi1yw._u1mbi1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}._10fu19ru._10fu19ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
13
- ._10fuip91._10fuip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
14
- ._1l5a1fxt._1l5a1fxt:active{color:var(--ds-text,#172b4d)}
15
- ._1l5aaqb7._1l5aaqb7:active{color:var(--ds-text-selected,#0c66e4)}
1
+ ._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
4
+ ._14mj1crf:after{border-radius:9pt}
5
+ ._14mj1l7b:after{border-radius:3px}
6
+ ._14mji2wt:after{border-radius:6px}
7
+ ._14mjyh40:after{border-radius:2px}
8
+ ._19itglyw{border:none}
9
+ ._2rko1crf{border-radius:9pt}
10
+ ._2rko1l7b{border-radius:3px}
11
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
12
+ ._2rkoi2wt{border-radius:6px}
13
+ ._2rkoyh40{border-radius:2px}
14
+ ._v564ieh6{transition:transform .2s,opacity .2s}
15
+ ._12ji1r31{outline-color:currentColor}
16
+ ._12y31o36{outline-width:medium}
17
+ ._16qs1nhn{box-shadow:var(--avatar-box-shadow)}
18
+ ._16qsqz53{box-shadow:0 0 0 var(--ds-border-width-outline,2px) var(--ds-border-selected,#0c66e4)}
19
+ ._18m915vq{overflow-y:hidden}
20
+ ._18u0v77o{margin-left:var(--ds-space-025,2px)}
21
+ ._19bvze3t{padding-left:var(--ds-space-0,0)}
22
+ ._19pkv77o{margin-top:var(--ds-space-025,2px)}
23
+ ._1bah1h6o{justify-content:center}
24
+ ._1bsb16xz{width:6pc}
25
+ ._1bsb1qr7{width:8pc}
26
+ ._1bsb1tcg{width:24px}
27
+ ._1bsb1ylp{width:40px}
28
+ ._1bsb7vkz{width:1pc}
29
+ ._1bsbzwfg{width:2pc}
30
+ ._1e0c1txw{display:flex}
31
+ ._1hfkvuon:after{background-color:var(--ds-surface,#fff)}
32
+ ._1peqs237:after{opacity:var(--ds-opacity-disabled,.7)}
33
+ ._1qu2glyw{outline-style:none}
34
+ ._1reo15vq{overflow-x:hidden}
35
+ ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
36
+ ._2lx21bp4{flex-direction:column}
37
+ ._4cvr1fhb{align-items:stretch}
38
+ ._4t3i16xz{height:6pc}
39
+ ._4t3i1qr7{height:8pc}
40
+ ._4t3i1tcg{height:24px}
41
+ ._4t3i1ylp{height:40px}
42
+ ._4t3i7vkz{height:1pc}
43
+ ._4t3izwfg{height:2pc}
44
+ ._80om13gf{cursor:not-allowed}
45
+ ._80omtlke{cursor:pointer}
46
+ ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
47
+ ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
48
+ ._ca0qze3t{padding-top:var(--ds-space-0,0)}
49
+ ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
50
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
51
+ ._syaz1fxt{color:var(--ds-text,#172b4d)}
52
+ ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
53
+ ._t9ec1aqe{transform:translateZ(0)}
54
+ ._t9ec1np6{transform:scale(.9)}
55
+ ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
56
+ ._vchh1ntv{box-sizing:content-box}
57
+ ._128myh40:focus-visible{outline-width:2px}
58
+ ._1ah3yh40:focus-visible{outline-offset:2px}
59
+ ._1ejjglyw:focus-visible{box-shadow:none}
60
+ ._mizu194a:focus-visible{outline-color:var(--ds-border-focused,#2684ff)}
61
+ ._ra3xnqa1:focus-visible{outline-style:solid}
62
+ ._30l31fxt:hover{color:var(--ds-text,#172b4d)}
63
+ ._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}
64
+ ._irr315ej:hover{background-color:var(--ds-background-neutral-hovered,#091e4224)}
65
+ ._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
66
+ ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
67
+ ._1di6ip91:active{background-color:var(--ds-background-neutral-pressed,#091e424f)}
68
+ ._1q8w1np6:active{transform:scale(.9)}
69
+ ._9h8h1fxt:active{color:var(--ds-text,#172b4d)}
70
+ ._9h8haqb7:active{color:var(--ds-text-selected,#0c66e4)}
71
+ @media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
package/dist/esm/components/more-indicator.js CHANGED
@@ -1,22 +1,41 @@
1
1
  /* more-indicator.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["testId", "className", "ref"];
3
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
4
  import "./more-indicator.compiled.css";
6
5
  import * as React from 'react';
7
6
  import { ax, ix } from "@compiled/react/runtime";
8
7
  import { forwardRef, useCallback } from 'react';
9
- import Avatar from '@atlaskit/avatar';
10
8
  import { fg } from '@atlaskit/platform-feature-flags';
11
- var buttonSizes = {
12
- small: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
13
- medium: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
14
- large: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
15
- xlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
16
- xxlarge: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
9
+ var boxShadowCssVar = '--avatar-box-shadow';
10
+ var styles = {
11
+ root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhkm7j4 _syaz1fxt _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr315ej _30l31fxt _1di6ip91 _9h8h1fxt _1q8w1np6 _jlxit94y",
12
+ circle: "_2rko1q5u",
13
+ active: "_bfhkfg4m _16qsqz53 _syazaqb7 _t9ec1np6 _irr3i1yw _30l3aqb7 _1di619ru _9h8haqb7",
14
+ disabled: "_80om13gf _1peqs237 _1hfkvuon"
15
+ };
16
+ var widthHeightMap = {
17
+ xsmall: "_1bsb7vkz _4t3i7vkz",
18
+ small: "_1bsb1tcg _4t3i1tcg",
19
+ medium: "_1bsbzwfg _4t3izwfg",
20
+ large: "_1bsb1ylp _4t3i1ylp",
21
+ xlarge: "_1bsb16xz _4t3i16xz",
22
+ xxlarge: "_1bsb1qr7 _4t3i1qr7"
23
+ };
24
+ var borderRadiusMap = {
25
+ xsmall: "_2rkoyh40 _14mjyh40",
26
+ small: "_2rkoyh40 _14mjyh40",
27
+ medium: "_2rko1l7b _14mj1l7b",
28
+ large: "_2rko1l7b _14mj1l7b",
29
+ xlarge: "_2rkoi2wt _14mji2wt",
30
+ xxlarge: "_2rko1crf _14mj1crf"
31
+ };
32
+ var fontMap = {
33
+ small: "_11c81vlj",
34
+ medium: "_11c81vlj",
35
+ large: "_11c8qk37",
36
+ xlarge: "_11c81doa",
37
+ xxlarge: "_11c81doa"
17
38
  };
18
- var buttonActiveStyles = null;
19
- var buttonStyles = null;
20
39
  var MAX_DISPLAY_COUNT = 99;
21
40
  var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
22
41
  var _ref$appearance = _ref.appearance,
@@ -43,37 +62,18 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
43
62
  },
44
63
  // eslint-disable-next-line react-hooks/exhaustive-deps
45
64
  [buttonProps.onClick, onClick]);
46
- return /*#__PURE__*/React.createElement(Avatar, {
47
- appearance: appearance,
48
- size: size,
49
- borderColor: borderColor,
65
+ return /*#__PURE__*/React.createElement("button", _extends({
66
+ type: "submit"
67
+ }, buttonProps, {
68
+ onClick: onClickHander,
50
69
  ref: ref,
51
- onClick: onClickHander
52
- }, function (_ref2) {
53
- var _ = _ref2.testId,
54
- className = _ref2.className,
55
- ref = _ref2.ref,
56
- props = _objectWithoutProperties(_ref2, _excluded);
57
- return /*#__PURE__*/React.createElement("button", _extends({
58
- type: "submit"
59
- }, buttonProps, props, {
60
- ref: ref,
61
- "data-testid": testId,
62
- "aria-controls": ariaControls,
63
- "aria-expanded": ariaExpanded,
64
- "aria-haspopup": ariaHaspopup
65
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
66
- ,
67
-
68
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
69
- className: ax(["_16hgm7j4 _1w901fxt _u1mb15ej _1fh11fxt _10fuip91 _1l5a1fxt _c6d7glyw", isActive && "_16hgfg4m _so1edux9 _1w90aqb7 _1g4l1np6 _u1mbi1yw _1fh1aqb7 _10fu19ru _1l5aaqb7", className]),
70
- style: {
71
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
72
- font: buttonSizes[size],
73
- "--_10k2j09": ix("0 0 0 ".concat("var(--ds-border-width-outline, 2px)", " ", "var(--ds-border-selected, #0C66E4)"))
74
- }
75
- }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
76
- });
70
+ "data-testid": testId,
71
+ "aria-controls": ariaControls,
72
+ "aria-expanded": ariaExpanded,
73
+ "aria-haspopup": ariaHaspopup,
74
+ style: _defineProperty({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
75
+ className: ax([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
76
+ }), "+", count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count);
77
77
  });
78
78
  MoreIndicator.displayName = 'MoreIndicator';
79
79
 
package/dist/types/components/more-indicator.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { type AvatarClickEventHandler, type AvatarPropTypes } from '@atlaskit/avatar';
2
+ import { type AppearanceType, type AvatarClickEventHandler } from '@atlaskit/avatar';
3
3
  import { type AvatarGroupSize } from './types';
4
- export interface MoreIndicatorProps extends AvatarPropTypes {
4
+ export interface MoreIndicatorProps {
5
5
  count: number;
6
6
  'aria-controls'?: string;
7
7
  'aria-expanded'?: boolean;
@@ -10,6 +10,9 @@ export interface MoreIndicatorProps extends AvatarPropTypes {
10
10
  onClick: AvatarClickEventHandler;
11
11
  isActive: boolean;
12
12
  size: AvatarGroupSize;
13
+ appearance?: AppearanceType;
14
+ borderColor?: string;
15
+ testId?: string;
13
16
  }
14
17
  declare const MoreIndicator: import("react").ForwardRefExoticComponent<MoreIndicatorProps & import("react").RefAttributes<HTMLButtonElement>>;
15
18
  export default MoreIndicator;
package/dist/types-ts4.5/components/more-indicator.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { type AvatarClickEventHandler, type AvatarPropTypes } from '@atlaskit/avatar';
2
+ import { type AppearanceType, type AvatarClickEventHandler } from '@atlaskit/avatar';
3
3
  import { type AvatarGroupSize } from './types';
4
- export interface MoreIndicatorProps extends AvatarPropTypes {
4
+ export interface MoreIndicatorProps {
5
5
  count: number;
6
6
  'aria-controls'?: string;
7
7
  'aria-expanded'?: boolean;
@@ -10,6 +10,9 @@ export interface MoreIndicatorProps extends AvatarPropTypes {
10
10
  onClick: AvatarClickEventHandler;
11
11
  isActive: boolean;
12
12
  size: AvatarGroupSize;
13
+ appearance?: AppearanceType;
14
+ borderColor?: string;
15
+ testId?: string;
13
16
  }
14
17
  declare const MoreIndicator: import("react").ForwardRefExoticComponent<MoreIndicatorProps & import("react").RefAttributes<HTMLButtonElement>>;
15
18
  export default MoreIndicator;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar-group",
3
- "version": "11.1.3",
3
+ "version": "11.1.4",
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/"