@atlaskit/reactions 22.7.1 → 22.7.3

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 (117) hide show
  1. package/CHANGELOG.md +1185 -1179
  2. package/afm-cc/tsconfig.json +3 -0
  3. package/dist/cjs/analytics/index.js +1 -1
  4. package/dist/cjs/components/Counter/Counter.js +18 -4
  5. package/dist/cjs/components/Counter/styles.js +8 -0
  6. package/dist/cjs/components/EmojiButton/EmojiButton.js +21 -5
  7. package/dist/cjs/components/FlashAnimation/FlashAnimation.js +6 -1
  8. package/dist/cjs/components/FlashAnimation/styles.js +8 -0
  9. package/dist/cjs/components/Reaction/Reaction.js +45 -8
  10. package/dist/cjs/components/Reaction/styles.js +12 -0
  11. package/dist/cjs/components/ReactionDialog/ReactionView.js +40 -28
  12. package/dist/cjs/components/ReactionDialog/ReactionsDialog.js +2 -0
  13. package/dist/cjs/components/ReactionDialog/ReactionsList.js +6 -1
  14. package/dist/cjs/components/ReactionDialog/styles.js +40 -1
  15. package/dist/cjs/components/ReactionParticleEffect/ReactionParticleEffect.js +20 -12
  16. package/dist/cjs/components/ReactionParticleEffect/styles.js +9 -0
  17. package/dist/cjs/components/ReactionPicker/ReactionPicker.js +19 -10
  18. package/dist/cjs/components/ReactionPicker/styles.js +13 -0
  19. package/dist/cjs/components/ReactionTooltip/ReactionTooltip.js +6 -1
  20. package/dist/cjs/components/ReactionTooltip/styles.js +12 -0
  21. package/dist/cjs/components/Reactions/Reactions.js +57 -44
  22. package/dist/cjs/components/Reactions/styles.js +7 -0
  23. package/dist/cjs/components/Selector/Selector.js +60 -31
  24. package/dist/cjs/components/Selector/styles.js +13 -20
  25. package/dist/cjs/components/ShowMore/ShowMore.js +14 -31
  26. package/dist/cjs/components/ShowMore/index.js +0 -6
  27. package/dist/cjs/components/Trigger/Trigger.js +6 -1
  28. package/dist/cjs/components/Trigger/styles.js +3 -1
  29. package/dist/es2019/analytics/index.js +1 -1
  30. package/dist/es2019/components/Counter/Counter.js +17 -4
  31. package/dist/es2019/components/Counter/styles.js +8 -0
  32. package/dist/es2019/components/EmojiButton/EmojiButton.js +20 -5
  33. package/dist/es2019/components/FlashAnimation/FlashAnimation.js +5 -1
  34. package/dist/es2019/components/FlashAnimation/styles.js +8 -0
  35. package/dist/es2019/components/Reaction/Reaction.js +45 -9
  36. package/dist/es2019/components/Reaction/styles.js +12 -0
  37. package/dist/es2019/components/ReactionDialog/ReactionView.js +39 -28
  38. package/dist/es2019/components/ReactionDialog/ReactionsDialog.js +1 -0
  39. package/dist/es2019/components/ReactionDialog/ReactionsList.js +5 -1
  40. package/dist/es2019/components/ReactionDialog/styles.js +40 -1
  41. package/dist/es2019/components/ReactionParticleEffect/ReactionParticleEffect.js +15 -9
  42. package/dist/es2019/components/ReactionParticleEffect/styles.js +9 -0
  43. package/dist/es2019/components/ReactionPicker/ReactionPicker.js +19 -9
  44. package/dist/es2019/components/ReactionPicker/styles.js +13 -0
  45. package/dist/es2019/components/ReactionTooltip/ReactionTooltip.js +5 -1
  46. package/dist/es2019/components/ReactionTooltip/styles.js +12 -0
  47. package/dist/es2019/components/Reactions/Reactions.js +55 -43
  48. package/dist/es2019/components/Reactions/styles.js +7 -0
  49. package/dist/es2019/components/Selector/Selector.js +55 -24
  50. package/dist/es2019/components/Selector/styles.js +12 -16
  51. package/dist/es2019/components/ShowMore/ShowMore.js +10 -25
  52. package/dist/es2019/components/ShowMore/index.js +1 -1
  53. package/dist/es2019/components/Trigger/Trigger.js +5 -1
  54. package/dist/es2019/components/Trigger/styles.js +5 -0
  55. package/dist/esm/analytics/index.js +1 -1
  56. package/dist/esm/components/Counter/Counter.js +17 -4
  57. package/dist/esm/components/Counter/styles.js +8 -0
  58. package/dist/esm/components/EmojiButton/EmojiButton.js +20 -5
  59. package/dist/esm/components/FlashAnimation/FlashAnimation.js +5 -1
  60. package/dist/esm/components/FlashAnimation/styles.js +8 -0
  61. package/dist/esm/components/Reaction/Reaction.js +45 -9
  62. package/dist/esm/components/Reaction/styles.js +12 -0
  63. package/dist/esm/components/ReactionDialog/ReactionView.js +39 -28
  64. package/dist/esm/components/ReactionDialog/ReactionsDialog.js +1 -0
  65. package/dist/esm/components/ReactionDialog/ReactionsList.js +5 -1
  66. package/dist/esm/components/ReactionDialog/styles.js +40 -1
  67. package/dist/esm/components/ReactionParticleEffect/ReactionParticleEffect.js +19 -12
  68. package/dist/esm/components/ReactionParticleEffect/styles.js +9 -0
  69. package/dist/esm/components/ReactionPicker/ReactionPicker.js +19 -9
  70. package/dist/esm/components/ReactionPicker/styles.js +13 -0
  71. package/dist/esm/components/ReactionTooltip/ReactionTooltip.js +5 -1
  72. package/dist/esm/components/ReactionTooltip/styles.js +12 -0
  73. package/dist/esm/components/Reactions/Reactions.js +56 -44
  74. package/dist/esm/components/Reactions/styles.js +7 -0
  75. package/dist/esm/components/Selector/Selector.js +61 -33
  76. package/dist/esm/components/Selector/styles.js +13 -19
  77. package/dist/esm/components/ShowMore/ShowMore.js +11 -28
  78. package/dist/esm/components/ShowMore/index.js +1 -1
  79. package/dist/esm/components/Trigger/Trigger.js +5 -1
  80. package/dist/esm/components/Trigger/styles.js +3 -0
  81. package/dist/types/components/EmojiButton/EmojiButton.d.ts +1 -1
  82. package/dist/types/components/Reaction/Reaction.d.ts +1 -5
  83. package/dist/types/components/ReactionDialog/ReactionView.d.ts +1 -1
  84. package/dist/types/components/ReactionTooltip/index.d.ts +1 -1
  85. package/dist/types/components/Selector/styles.d.ts +0 -7
  86. package/dist/types/components/ShowMore/ShowMore.d.ts +3 -21
  87. package/dist/types/components/ShowMore/index.d.ts +1 -1
  88. package/dist/types/containers/index.d.ts +1 -1
  89. package/dist/types/hooks/useFocusTrap.d.ts +1 -1
  90. package/dist/types-ts4.5/components/EmojiButton/EmojiButton.d.ts +1 -1
  91. package/dist/types-ts4.5/components/Reaction/Reaction.d.ts +1 -5
  92. package/dist/types-ts4.5/components/ReactionDialog/ReactionView.d.ts +1 -1
  93. package/dist/types-ts4.5/components/ReactionTooltip/index.d.ts +1 -1
  94. package/dist/types-ts4.5/components/Selector/styles.d.ts +0 -7
  95. package/dist/types-ts4.5/components/ShowMore/ShowMore.d.ts +3 -21
  96. package/dist/types-ts4.5/components/ShowMore/index.d.ts +1 -1
  97. package/dist/types-ts4.5/containers/index.d.ts +1 -1
  98. package/dist/types-ts4.5/hooks/useFocusTrap.d.ts +1 -1
  99. package/docs/0-intro.tsx +42 -48
  100. package/docs/1-connected-reaction-picker.tsx +25 -25
  101. package/docs/2-connected-reactions-view.tsx +25 -25
  102. package/docs/3-reactions-store.tsx +29 -30
  103. package/docs/4-reaction-service-client.tsx +5 -5
  104. package/docs/5-graphql-support.tsx +24 -26
  105. package/local-config-example.ts +3 -3
  106. package/package.json +109 -110
  107. package/report.api.md +241 -273
  108. package/dist/cjs/components/EmojiButton/styles.js +0 -23
  109. package/dist/cjs/components/ShowMore/styles.js +0 -36
  110. package/dist/es2019/components/EmojiButton/styles.js +0 -16
  111. package/dist/es2019/components/ShowMore/styles.js +0 -29
  112. package/dist/esm/components/EmojiButton/styles.js +0 -16
  113. package/dist/esm/components/ShowMore/styles.js +0 -29
  114. package/dist/types/components/EmojiButton/styles.d.ts +0 -1
  115. package/dist/types/components/ShowMore/styles.d.ts +0 -3
  116. package/dist/types-ts4.5/components/EmojiButton/styles.d.ts +0 -1
  117. package/dist/types-ts4.5/components/ShowMore/styles.d.ts +0 -3
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.emojiButtonStyle = void 0;
7
- var _react = require("@emotion/react");
8
- /** @jsx jsx */
9
-
10
- var emojiButtonStyle = exports.emojiButtonStyle = (0, _react.css)({
11
- outline: 'none',
12
- display: 'flex',
13
- backgroundColor: 'transparent',
14
- border: 0,
15
- borderRadius: '5px',
16
- cursor: 'pointer',
17
- margin: '0',
18
- padding: "10px ".concat("var(--ds-space-100, 8px)"),
19
- '&:hover > span': {
20
- transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
21
- transform: 'scale(1.33)'
22
- }
23
- });
@@ -1,36 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.separatorStyle = exports.moreEmojiContainerStyle = exports.moreButtonStyle = void 0;
7
- var _react = require("@emotion/react");
8
- var _constants = require("@atlaskit/theme/constants");
9
- var _colors = require("@atlaskit/theme/colors");
10
- /** @jsx jsx */
11
-
12
- var moreEmojiContainerStyle = exports.moreEmojiContainerStyle = (0, _react.css)({
13
- display: 'flex'
14
- });
15
- var moreButtonStyle = exports.moreButtonStyle = (0, _react.css)({
16
- opacity: 0,
17
- outline: 'none',
18
- backgroundColor: 'transparent',
19
- border: 0,
20
- borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
21
- cursor: 'pointer',
22
- margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " 0"),
23
- padding: "var(--ds-space-050, 4px)",
24
- width: '38px',
25
- verticalAlign: 'top',
26
- '&:hover': {
27
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
28
- }
29
- });
30
- var separatorStyle = exports.separatorStyle = (0, _react.css)({
31
- backgroundColor: "var(--ds-border, ".concat(_colors.N30A, ")"),
32
- margin: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)"),
33
- width: '1px',
34
- height: '60%',
35
- display: 'inline-block'
36
- });
@@ -1,16 +0,0 @@
1
- /** @jsx jsx */
2
- import { css } from '@emotion/react';
3
- export const emojiButtonStyle = css({
4
- outline: 'none',
5
- display: 'flex',
6
- backgroundColor: 'transparent',
7
- border: 0,
8
- borderRadius: '5px',
9
- cursor: 'pointer',
10
- margin: '0',
11
- padding: `10px ${"var(--ds-space-100, 8px)"}`,
12
- '&:hover > span': {
13
- transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
14
- transform: 'scale(1.33)'
15
- }
16
- });
@@ -1,29 +0,0 @@
1
- /** @jsx jsx */
2
- import { css } from '@emotion/react';
3
- import { borderRadius } from '@atlaskit/theme/constants';
4
- import { N30A } from '@atlaskit/theme/colors';
5
- export const moreEmojiContainerStyle = css({
6
- display: 'flex'
7
- });
8
- export const moreButtonStyle = css({
9
- opacity: 0,
10
- outline: 'none',
11
- backgroundColor: 'transparent',
12
- border: 0,
13
- borderRadius: `${borderRadius()}px`,
14
- cursor: 'pointer',
15
- margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0`,
16
- padding: "var(--ds-space-050, 4px)",
17
- width: '38px',
18
- verticalAlign: 'top',
19
- '&:hover': {
20
- backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
21
- }
22
- });
23
- export const separatorStyle = css({
24
- backgroundColor: `var(--ds-border, ${N30A})`,
25
- margin: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`,
26
- width: '1px',
27
- height: '60%',
28
- display: 'inline-block'
29
- });
@@ -1,16 +0,0 @@
1
- /** @jsx jsx */
2
- import { css } from '@emotion/react';
3
- export var emojiButtonStyle = css({
4
- outline: 'none',
5
- display: 'flex',
6
- backgroundColor: 'transparent',
7
- border: 0,
8
- borderRadius: '5px',
9
- cursor: 'pointer',
10
- margin: '0',
11
- padding: "10px ".concat("var(--ds-space-100, 8px)"),
12
- '&:hover > span': {
13
- transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
14
- transform: 'scale(1.33)'
15
- }
16
- });
@@ -1,29 +0,0 @@
1
- /** @jsx jsx */
2
- import { css } from '@emotion/react';
3
- import { borderRadius } from '@atlaskit/theme/constants';
4
- import { N30A } from '@atlaskit/theme/colors';
5
- export var moreEmojiContainerStyle = css({
6
- display: 'flex'
7
- });
8
- export var moreButtonStyle = css({
9
- opacity: 0,
10
- outline: 'none',
11
- backgroundColor: 'transparent',
12
- border: 0,
13
- borderRadius: "".concat(borderRadius(), "px"),
14
- cursor: 'pointer',
15
- margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " 0"),
16
- padding: "var(--ds-space-050, 4px)",
17
- width: '38px',
18
- verticalAlign: 'top',
19
- '&:hover': {
20
- backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
21
- }
22
- });
23
- export var separatorStyle = css({
24
- backgroundColor: "var(--ds-border, ".concat(N30A, ")"),
25
- margin: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)"),
26
- width: '1px',
27
- height: '60%',
28
- display: 'inline-block'
29
- });
@@ -1 +0,0 @@
1
- export declare const emojiButtonStyle: import("@emotion/react").SerializedStyles;
@@ -1,3 +0,0 @@
1
- export declare const moreEmojiContainerStyle: import("@emotion/react").SerializedStyles;
2
- export declare const moreButtonStyle: import("@emotion/react").SerializedStyles;
3
- export declare const separatorStyle: import("@emotion/react").SerializedStyles;
@@ -1 +0,0 @@
1
- export declare const emojiButtonStyle: import("@emotion/react").SerializedStyles;
@@ -1,3 +0,0 @@
1
- export declare const moreEmojiContainerStyle: import("@emotion/react").SerializedStyles;
2
- export declare const moreButtonStyle: import("@emotion/react").SerializedStyles;
3
- export declare const separatorStyle: import("@emotion/react").SerializedStyles;