@atlaskit/reactions 22.2.3 → 22.2.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 (137) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/MockReactionsClient.js +2 -1
  3. package/dist/cjs/components/Counter/Counter.js +13 -11
  4. package/dist/cjs/components/Counter/styles.js +10 -7
  5. package/dist/cjs/components/Reaction/styles.js +2 -1
  6. package/dist/cjs/components/ReactionPicker/ReactionPicker.js +11 -4
  7. package/dist/cjs/components/ShowMore/ShowMore.js +1 -1
  8. package/dist/cjs/hooks/index.js +3 -3
  9. package/dist/cjs/hooks/useCloseManager.js +47 -0
  10. package/dist/cjs/i18n/cs.js +14 -13
  11. package/dist/cjs/i18n/da.js +14 -13
  12. package/dist/cjs/i18n/de.js +14 -13
  13. package/dist/cjs/i18n/en.js +15 -14
  14. package/dist/cjs/i18n/en_GB.js +15 -14
  15. package/dist/cjs/i18n/en_ZZ.js +15 -14
  16. package/dist/cjs/i18n/es.js +14 -13
  17. package/dist/cjs/i18n/fi.js +14 -13
  18. package/dist/cjs/i18n/fr.js +14 -13
  19. package/dist/cjs/i18n/hu.js +14 -13
  20. package/dist/cjs/i18n/it.js +14 -13
  21. package/dist/cjs/i18n/ja.js +14 -13
  22. package/dist/cjs/i18n/ko.js +14 -13
  23. package/dist/cjs/i18n/nb.js +14 -13
  24. package/dist/cjs/i18n/nl.js +14 -13
  25. package/dist/cjs/i18n/pl.js +14 -13
  26. package/dist/cjs/i18n/pt_BR.js +14 -13
  27. package/dist/cjs/i18n/ru.js +14 -13
  28. package/dist/cjs/i18n/sv.js +14 -13
  29. package/dist/cjs/i18n/th.js +14 -13
  30. package/dist/cjs/i18n/tr.js +14 -13
  31. package/dist/cjs/i18n/uk.js +14 -13
  32. package/dist/cjs/i18n/vi.js +14 -13
  33. package/dist/cjs/i18n/zh.js +14 -13
  34. package/dist/cjs/i18n/zh_TW.js +14 -13
  35. package/dist/cjs/version.json +1 -1
  36. package/dist/es2019/MockReactionsClient.js +3 -1
  37. package/dist/es2019/components/Counter/Counter.js +14 -10
  38. package/dist/es2019/components/Counter/styles.js +6 -4
  39. package/dist/es2019/components/Reaction/styles.js +2 -1
  40. package/dist/es2019/components/ReactionPicker/ReactionPicker.js +9 -3
  41. package/dist/es2019/components/ShowMore/ShowMore.js +1 -1
  42. package/dist/es2019/hooks/index.js +1 -1
  43. package/dist/es2019/hooks/useCloseManager.js +42 -0
  44. package/dist/es2019/i18n/cs.js +14 -13
  45. package/dist/es2019/i18n/da.js +14 -13
  46. package/dist/es2019/i18n/de.js +14 -13
  47. package/dist/es2019/i18n/en.js +15 -14
  48. package/dist/es2019/i18n/en_GB.js +15 -14
  49. package/dist/es2019/i18n/en_ZZ.js +15 -14
  50. package/dist/es2019/i18n/es.js +14 -13
  51. package/dist/es2019/i18n/fi.js +14 -13
  52. package/dist/es2019/i18n/fr.js +14 -13
  53. package/dist/es2019/i18n/hu.js +14 -13
  54. package/dist/es2019/i18n/it.js +14 -13
  55. package/dist/es2019/i18n/ja.js +14 -13
  56. package/dist/es2019/i18n/ko.js +14 -13
  57. package/dist/es2019/i18n/nb.js +14 -13
  58. package/dist/es2019/i18n/nl.js +14 -13
  59. package/dist/es2019/i18n/pl.js +14 -13
  60. package/dist/es2019/i18n/pt_BR.js +14 -13
  61. package/dist/es2019/i18n/ru.js +14 -13
  62. package/dist/es2019/i18n/sv.js +14 -13
  63. package/dist/es2019/i18n/th.js +14 -13
  64. package/dist/es2019/i18n/tr.js +14 -13
  65. package/dist/es2019/i18n/uk.js +14 -13
  66. package/dist/es2019/i18n/vi.js +14 -13
  67. package/dist/es2019/i18n/zh.js +14 -13
  68. package/dist/es2019/i18n/zh_TW.js +14 -13
  69. package/dist/es2019/version.json +1 -1
  70. package/dist/esm/MockReactionsClient.js +3 -1
  71. package/dist/esm/components/Counter/Counter.js +14 -10
  72. package/dist/esm/components/Counter/styles.js +6 -4
  73. package/dist/esm/components/Reaction/styles.js +2 -1
  74. package/dist/esm/components/ReactionPicker/ReactionPicker.js +9 -3
  75. package/dist/esm/components/ShowMore/ShowMore.js +1 -1
  76. package/dist/esm/hooks/index.js +1 -1
  77. package/dist/esm/hooks/useCloseManager.js +42 -0
  78. package/dist/esm/i18n/cs.js +14 -13
  79. package/dist/esm/i18n/da.js +14 -13
  80. package/dist/esm/i18n/de.js +14 -13
  81. package/dist/esm/i18n/en.js +15 -14
  82. package/dist/esm/i18n/en_GB.js +15 -14
  83. package/dist/esm/i18n/en_ZZ.js +15 -14
  84. package/dist/esm/i18n/es.js +14 -13
  85. package/dist/esm/i18n/fi.js +14 -13
  86. package/dist/esm/i18n/fr.js +14 -13
  87. package/dist/esm/i18n/hu.js +14 -13
  88. package/dist/esm/i18n/it.js +14 -13
  89. package/dist/esm/i18n/ja.js +14 -13
  90. package/dist/esm/i18n/ko.js +14 -13
  91. package/dist/esm/i18n/nb.js +14 -13
  92. package/dist/esm/i18n/nl.js +14 -13
  93. package/dist/esm/i18n/pl.js +14 -13
  94. package/dist/esm/i18n/pt_BR.js +14 -13
  95. package/dist/esm/i18n/ru.js +14 -13
  96. package/dist/esm/i18n/sv.js +14 -13
  97. package/dist/esm/i18n/th.js +14 -13
  98. package/dist/esm/i18n/tr.js +14 -13
  99. package/dist/esm/i18n/uk.js +14 -13
  100. package/dist/esm/i18n/vi.js +14 -13
  101. package/dist/esm/i18n/zh.js +14 -13
  102. package/dist/esm/i18n/zh_TW.js +14 -13
  103. package/dist/esm/version.json +1 -1
  104. package/dist/types/components/Counter/styles.d.ts +2 -1
  105. package/dist/types/components/ReactionPicker/ReactionPicker.d.ts +4 -0
  106. package/dist/types/hooks/index.d.ts +1 -1
  107. package/dist/types/hooks/useCloseManager.d.ts +9 -0
  108. package/dist/types/i18n/cs.d.ts +13 -13
  109. package/dist/types/i18n/da.d.ts +13 -13
  110. package/dist/types/i18n/de.d.ts +13 -13
  111. package/dist/types/i18n/en.d.ts +14 -14
  112. package/dist/types/i18n/en_GB.d.ts +14 -14
  113. package/dist/types/i18n/en_ZZ.d.ts +14 -14
  114. package/dist/types/i18n/es.d.ts +13 -13
  115. package/dist/types/i18n/fi.d.ts +13 -13
  116. package/dist/types/i18n/fr.d.ts +13 -13
  117. package/dist/types/i18n/hu.d.ts +13 -13
  118. package/dist/types/i18n/it.d.ts +13 -13
  119. package/dist/types/i18n/ja.d.ts +13 -13
  120. package/dist/types/i18n/ko.d.ts +13 -13
  121. package/dist/types/i18n/nb.d.ts +13 -13
  122. package/dist/types/i18n/nl.d.ts +13 -13
  123. package/dist/types/i18n/pl.d.ts +13 -13
  124. package/dist/types/i18n/pt_BR.d.ts +13 -13
  125. package/dist/types/i18n/ru.d.ts +13 -13
  126. package/dist/types/i18n/sv.d.ts +13 -13
  127. package/dist/types/i18n/th.d.ts +13 -13
  128. package/dist/types/i18n/tr.d.ts +13 -13
  129. package/dist/types/i18n/uk.d.ts +13 -13
  130. package/dist/types/i18n/vi.d.ts +13 -13
  131. package/dist/types/i18n/zh.d.ts +13 -13
  132. package/dist/types/i18n/zh_TW.d.ts +13 -13
  133. package/package.json +6 -7
  134. package/dist/cjs/hooks/useClickAway.js +0 -36
  135. package/dist/es2019/hooks/useClickAway.js +0 -28
  136. package/dist/esm/hooks/useClickAway.js +0 -31
  137. package/dist/types/hooks/useClickAway.d.ts +0 -10
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ /* prettier-ignore */
7
8
  /**
8
9
  * NOTE:
9
10
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
12
13
  */
13
14
  //Vietnamese (Vietnam)
14
15
  var _default = {
15
- 'fabric.reactions.add': 'Thêm tương tác',
16
- 'fabric.reactions.error.unexpected': 'Tính năng tương tác tạm thời không hỗ trợ',
17
- 'fabric.reactions.loading': 'Đang tải...',
18
- 'fabric.reactions.more.emojis': 'Biểu tượng cảm xúc khác',
19
- 'fabric.reactions.more.info': 'Xem thêm thông tin',
20
- 'fabric.reactions.other.reacted.users': '{count, plural, other {và {count} người khác}}',
21
- 'fabric.reactions.reactwithemoji': 'Bày tỏ biểu tượng cảm xúc {emoji}',
22
- 'reactions.dialog.close': 'Đóng',
23
- 'reactions.dialog.left.navigate': 'Sang trái',
24
- 'reactions.dialog.reactions.count': '{count, plural, other {{count,number} tương tác}}',
25
- 'reactions.dialog.right.navigate': 'Sang phải',
26
- 'reactions.dialog.viewall': 'Xem ai đã bày tỏ cảm xúc',
27
- 'reactions.dialog.viewall.tooltip': 'Xem tất cả tương tác của người dùng'
16
+ "fabric.reactions.add": "Thêm tương tác",
17
+ "fabric.reactions.error.unexpected": "Tính năng tương tác tạm thời không hỗ trợ",
18
+ "fabric.reactions.loading": "Đang tải...",
19
+ "fabric.reactions.more.emojis": "Biểu tượng cảm xúc khác",
20
+ "fabric.reactions.more.info": "Xem thêm thông tin",
21
+ "fabric.reactions.other.reacted.users": "{count, plural, other {và {count} người khác}}",
22
+ "fabric.reactions.reactwithemoji": "Bày tỏ biểu tượng cảm xúc {emoji}",
23
+ "reactions.dialog.close": "Đóng",
24
+ "reactions.dialog.left.navigate": "Sang trái",
25
+ "reactions.dialog.reactions.count": "{count, plural, other {{count,number} tương tác}}",
26
+ "reactions.dialog.right.navigate": "Sang phải",
27
+ "reactions.dialog.viewall": "Xem ai đã bày tỏ cảm xúc",
28
+ "reactions.dialog.viewall.tooltip": "Xem tất cả tương tác của người dùng"
28
29
  };
29
30
  exports.default = _default;
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ /* prettier-ignore */
7
8
  /**
8
9
  * NOTE:
9
10
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
12
13
  */
13
14
  //Chinese (Simplified)
14
15
  var _default = {
15
- 'fabric.reactions.add': '添加反应',
16
- 'fabric.reactions.error.unexpected': '反应暂时不可用',
17
- 'fabric.reactions.loading': '正在加载...',
18
- 'fabric.reactions.more.emojis': '更多表情',
19
- 'fabric.reactions.more.info': '更多信息',
20
- 'fabric.reactions.other.reacted.users': '{count, plural, other {以及其他 {count} 个人}}',
21
- 'fabric.reactions.reactwithemoji': '使用 {emoji} 表情回应',
22
- 'reactions.dialog.close': '关闭',
23
- 'reactions.dialog.left.navigate': '向左导航',
24
- 'reactions.dialog.reactions.count': '{count, plural, other {{count,number} 条反应}}',
25
- 'reactions.dialog.right.navigate': '向右导航',
26
- 'reactions.dialog.viewall': '查看哪些人已反应',
27
- 'reactions.dialog.viewall.tooltip': '查看所有用户反应'
16
+ "fabric.reactions.add": "添加反应",
17
+ "fabric.reactions.error.unexpected": "反应暂时不可用",
18
+ "fabric.reactions.loading": "正在加载...",
19
+ "fabric.reactions.more.emojis": "更多表情",
20
+ "fabric.reactions.more.info": "更多信息",
21
+ "fabric.reactions.other.reacted.users": "{count, plural, other {以及其他 {count} 个人}}",
22
+ "fabric.reactions.reactwithemoji": "使用 {emoji} 表情回应",
23
+ "reactions.dialog.close": "关闭",
24
+ "reactions.dialog.left.navigate": "向左导航",
25
+ "reactions.dialog.reactions.count": "{count, plural, other {{count,number} 条反应}}",
26
+ "reactions.dialog.right.navigate": "向右导航",
27
+ "reactions.dialog.viewall": "查看哪些人已反应",
28
+ "reactions.dialog.viewall.tooltip": "查看所有用户反应"
28
29
  };
29
30
  exports.default = _default;
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ /* prettier-ignore */
7
8
  /**
8
9
  * NOTE:
9
10
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
12
13
  */
13
14
  //Chinese (Traditional)
14
15
  var _default = {
15
- 'fabric.reactions.add': '新增反應',
16
- 'fabric.reactions.error.unexpected': '暫時無法使用回覆功能',
17
- 'fabric.reactions.loading': '正在載入...',
18
- 'fabric.reactions.more.emojis': '更多表情符號',
19
- 'fabric.reactions.more.info': '更多資訊',
20
- 'fabric.reactions.other.reacted.users': '{count, plural, other {還有其他 {count} 個}}',
21
- 'fabric.reactions.reactwithemoji': '使用 {emoji} 表情符號回應',
22
- 'reactions.dialog.close': '關閉',
23
- 'reactions.dialog.left.navigate': '左側導覽',
24
- 'reactions.dialog.reactions.count': '{count, plural, other {{count,number} 個回應}}',
25
- 'reactions.dialog.right.navigate': '右側導覽',
26
- 'reactions.dialog.viewall': '查看誰新增了回應',
27
- 'reactions.dialog.viewall.tooltip': '檢視所有使用者的回應'
16
+ "fabric.reactions.add": "新增反應",
17
+ "fabric.reactions.error.unexpected": "暫時無法使用回覆功能",
18
+ "fabric.reactions.loading": "正在載入...",
19
+ "fabric.reactions.more.emojis": "更多表情符號",
20
+ "fabric.reactions.more.info": "更多資訊",
21
+ "fabric.reactions.other.reacted.users": "{count, plural, other {還有其他 {count} 個}}",
22
+ "fabric.reactions.reactwithemoji": "使用 {emoji} 表情符號回應",
23
+ "reactions.dialog.close": "關閉",
24
+ "reactions.dialog.left.navigate": "左側導覽",
25
+ "reactions.dialog.reactions.count": "{count, plural, other {{count,number} 個回應}}",
26
+ "reactions.dialog.right.navigate": "右側導覽",
27
+ "reactions.dialog.viewall": "查看誰新增了回應",
28
+ "reactions.dialog.viewall.tooltip": "檢視所有使用者的回應"
28
29
  };
29
30
  exports.default = _default;
@@ -1,4 +1,4 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "22.2.3"
3
+ "version": "22.2.5"
4
4
  }
@@ -24,8 +24,10 @@ const getReactionKey = (containerAri, ari) => {
24
24
  };
25
25
  const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon'), getUser('bsmith', 'Bob Smith'), getUser('jdoe', 'Jane Doe'), getUser('mhomes', 'Mary Homes'), getUser('ckent', 'Clark Kent')];
26
26
  export const simpleMockData = {
27
- [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]
27
+ [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 33, false), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
28
+ ]
28
29
  };
30
+
29
31
  const extendedMockData = {
30
32
  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true, true), getReactionSummary(':thumbsup:', 999, false, true), getReactionSummary(':astonished:', 9, false, true), getReactionSummary(':heart:', 99, false, true), getReactionSummary(':thinking:', 10, false, true), getReactionSummary(':clap:', 99, false, true), getReactionSummary(':thumbsdown:', 2, false, true), getReactionSummary(':bulb:', 16, false, true), getReactionSummary(':star:', 9999, false, true), getReactionSummary(':green_heart:', 9, false, true), getReactionSummary(':blue_heart:', 8392, false, true), getReactionSummary(':broken_heart:', 1, false, true), getReactionSummary(':grinning:', 10601, false, true), getReactionSummary(':slight_smile:', 99, false, true)]
31
33
  };
@@ -1,9 +1,9 @@
1
1
  /** @jsx jsx */
2
- import React from 'react';
2
+ import React, { useEffect, useMemo, useRef } from 'react';
3
3
  import { jsx, css } from '@emotion/react';
4
4
  import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
5
5
  // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
6
- import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
6
+
7
7
  import { utils } from '../../shared';
8
8
  import * as styles from './styles';
9
9
 
@@ -42,17 +42,21 @@ export const Counter = ({
42
42
  return utils.formatLargeNumber(value);
43
43
  }
44
44
  };
45
- const previousValue = usePreviousValue(value);
45
+ const lastValue = useRef();
46
46
  const label = getLabel(value);
47
- const increase = previousValue ? previousValue < value : false;
47
+ useEffect(() => {
48
+ lastValue.current = value;
49
+ }, [value]);
50
+ const isIncreasing = useMemo(() => {
51
+ return lastValue.current ? lastValue.current < value : false;
52
+ }, [value]);
48
53
  return jsx("div", {
49
54
  className: className,
50
55
  "data-testid": RENDER_COMPONENT_WRAPPER,
51
- css: [styles.countStyle, {
52
- width: label.length * 7
53
- }]
56
+ css: styles.countStyle
54
57
  }, jsx(ExitingPersistence, null, jsx(SlideIn, {
55
- enterFrom: increase ? 'bottom' : 'top',
58
+ enterFrom: isIncreasing ? 'top' : 'bottom',
59
+ exitTo: isIncreasing ? 'top' : 'bottom',
56
60
  key: value,
57
61
  duration: animationDuration
58
62
  }, (motion, direction) => {
@@ -63,9 +67,9 @@ export const Counter = ({
63
67
  })],
64
68
  className: motion.className,
65
69
  "data-testid": RENDER_COUNTER_TESTID
66
- }, jsx("div", {
70
+ }, jsx("span", {
67
71
  "data-testid": RENDER_LABEL_TESTID,
68
- css: highlight && styles.highlightStyle,
72
+ css: highlight ? [styles.counterLabelStyle, styles.highlightStyle] : styles.counterLabelStyle,
69
73
  key: value
70
74
  }, label));
71
75
  })));
@@ -9,11 +9,13 @@ export const countStyle = css({
9
9
  padding: '4px 8px 4px 0',
10
10
  lineHeight: '14px'
11
11
  });
12
- export const highlightStyle = css({
13
- color: `var(--ds-text-selected, ${B400})`,
14
- fontWeight: 600
15
- });
16
12
  export const containerStyle = css({
17
13
  display: 'flex',
18
14
  flexDirection: 'column'
15
+ });
16
+ export const highlightStyle = css({
17
+ color: `var(--ds-text-selected, ${B400})`
18
+ });
19
+ export const counterLabelStyle = css({
20
+ fontVariantNumeric: 'tabular-nums'
19
21
  });
@@ -41,7 +41,8 @@ export const reactionStyle = css({
41
41
  transitionDuration: '0s, 0.2s',
42
42
  // disabling browser focus outline
43
43
  outline: 'none'
44
- }
44
+ },
45
+ overflow: 'hidden'
45
46
  });
46
47
  export const reactedStyle = css({
47
48
  backgroundColor: `var(--ds-background-selected, ${B50})`,
@@ -9,7 +9,7 @@ import { Selector } from '../Selector';
9
9
  import { Trigger } from '../Trigger';
10
10
  import { UFO } from '../../analytics';
11
11
  import { i18n } from '../../shared';
12
- import { useClickAway } from '../../hooks';
12
+ import { useCloseManager } from '../../hooks';
13
13
  import * as styles from './styles';
14
14
 
15
15
  /**
@@ -17,6 +17,11 @@ import * as styles from './styles';
17
17
  */
18
18
  export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
19
19
 
20
+ /**
21
+ * Test id for ReactionPicker panel div
22
+ */
23
+ export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
24
+
20
25
  /**
21
26
  * Emoji Picker Controller Id for Accessibility Labels
22
27
  */
@@ -88,10 +93,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
88
93
  /**
89
94
  * Custom hook triggers when user clicks outside the reactions picker
90
95
  */
91
- useClickAway(wrapperRef, () => {
96
+ useCloseManager(wrapperRef, () => {
92
97
  onCancel();
93
98
  close();
94
- }, 'click', true, settings.isOpen);
99
+ }, true, settings.isOpen);
95
100
 
96
101
  /**
97
102
  * Event callback when the picker is closed
@@ -194,6 +199,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
194
199
  updatePopper.current = update;
195
200
  return jsx(Fragment, null, settings.isOpen && jsx("div", {
196
201
  id: PICKER_CONTROL_ID,
202
+ "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
197
203
  style: {
198
204
  zIndex: layers.layer(),
199
205
  ...style
@@ -36,7 +36,7 @@ export const ShowMore = ({
36
36
  "aria-label": i18n.messages.moreEmoji.defaultMessage,
37
37
  type: "button",
38
38
  style: style.button,
39
- onMouseDown: onClick,
39
+ onClick: onClick,
40
40
  "data-testid": RENDER_SHOWMORE_TESTID
41
41
  }, jsx(EditorMoreIcon, {
42
42
  label: "More"
@@ -1 +1 @@
1
- export { useClickAway } from './useClickAway';
1
+ export { useCloseManager } from './useCloseManager';
@@ -0,0 +1,42 @@
1
+ import { useEffect } from 'react';
2
+
3
+ /**
4
+ * Custom hook to detect when user action is outside given container ref or press escape key
5
+ * @param ref ref object to an html element
6
+ * @param callback event callback when detected a click outside the ref object or escape key is pressed
7
+ * @param useCapture (Optional) use capture phase of event. @default false
8
+ * @param enabled (Optional) enable/disable the outside click or escape key press handler. @default true
9
+ */
10
+ export function useCloseManager(ref, callback, useCapture = false, enabled = true) {
11
+ useEffect(() => {
12
+ if (!enabled) {
13
+ return;
14
+ }
15
+
16
+ /**
17
+ * Alert if clicked on outside of element
18
+ */
19
+ function handleClickOutside(event) {
20
+ if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
21
+ callback();
22
+ }
23
+ }
24
+ function handleKeydown(event) {
25
+ const {
26
+ key
27
+ } = event;
28
+ if (key === 'Escape' || key === 'Esc') {
29
+ callback();
30
+ }
31
+ }
32
+
33
+ // Bind the event listener
34
+ document.addEventListener('click', handleClickOutside, useCapture);
35
+ document.addEventListener('keydown', handleKeydown);
36
+ return () => {
37
+ // Unbind the event listener on clean up
38
+ document.removeEventListener('click', handleClickOutside, useCapture);
39
+ document.removeEventListener('keydown', handleKeydown);
40
+ };
41
+ }, [ref, callback, useCapture, enabled]);
42
+ }
@@ -1,3 +1,4 @@
1
+ /* prettier-ignore */
1
2
  /**
2
3
  * NOTE:
3
4
  *
@@ -6,17 +7,17 @@
6
7
  */
7
8
  //Czech
8
9
  export default {
9
- 'fabric.reactions.add': 'Přidat reakci',
10
- 'fabric.reactions.error.unexpected': 'Reakce jsou dočasně nedostupné.',
11
- 'fabric.reactions.loading': 'Načítání...',
12
- 'fabric.reactions.more.emojis': 'Více smajlíků',
13
- 'fabric.reactions.more.info': 'Další informace',
14
- 'fabric.reactions.other.reacted.users': '{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}',
15
- 'fabric.reactions.reactwithemoji': 'Reagovat pomocí smajlíku {emoji}',
16
- 'reactions.dialog.close': 'Zavřít',
17
- 'reactions.dialog.left.navigate': 'Navigace doleva',
18
- 'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}',
19
- 'reactions.dialog.right.navigate': 'Navigace doprava',
20
- 'reactions.dialog.viewall': 'Podívejte se, kdo reagoval',
21
- 'reactions.dialog.viewall.tooltip': 'Zobrazit všechny reakce uživatelů'
10
+ "fabric.reactions.add": "Přidat reakci",
11
+ "fabric.reactions.error.unexpected": "Reakce jsou dočasně nedostupné.",
12
+ "fabric.reactions.loading": "Načítání...",
13
+ "fabric.reactions.more.emojis": "Více smajlíků",
14
+ "fabric.reactions.more.info": "Další informace",
15
+ "fabric.reactions.other.reacted.users": "{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}",
16
+ "fabric.reactions.reactwithemoji": "Reagovat pomocí smajlíku {emoji}",
17
+ "reactions.dialog.close": "Zavřít",
18
+ "reactions.dialog.left.navigate": "Navigace doleva",
19
+ "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}",
20
+ "reactions.dialog.right.navigate": "Navigace doprava",
21
+ "reactions.dialog.viewall": "Podívejte se, kdo reagoval",
22
+ "reactions.dialog.viewall.tooltip": "Zobrazit všechny reakce uživatelů"
22
23
  };
@@ -1,3 +1,4 @@
1
+ /* prettier-ignore */
1
2
  /**
2
3
  * NOTE:
3
4
  *
@@ -6,17 +7,17 @@
6
7
  */
7
8
  //Danish (Denmark)
8
9
  export default {
9
- 'fabric.reactions.add': 'Tilføj reaktion',
10
- 'fabric.reactions.error.unexpected': 'Reaktioner er midlertidigt utilgængelige',
11
- 'fabric.reactions.loading': 'Indlæser ...',
12
- 'fabric.reactions.more.emojis': 'Flere emojis',
13
- 'fabric.reactions.more.info': 'Flere oplysninger',
14
- 'fabric.reactions.other.reacted.users': '{count, plural, one {og én anden} other {og {count} andre}}',
15
- 'fabric.reactions.reactwithemoji': 'Reager med emojien {emoji}',
16
- 'reactions.dialog.close': 'Luk',
17
- 'reactions.dialog.left.navigate': 'Navigation til venstre',
18
- 'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}',
19
- 'reactions.dialog.right.navigate': 'Navigation til højre',
20
- 'reactions.dialog.viewall': 'Se, hvem der har reageret',
21
- 'reactions.dialog.viewall.tooltip': 'Se alle brugerreaktioner'
10
+ "fabric.reactions.add": "Tilføj reaktion",
11
+ "fabric.reactions.error.unexpected": "Reaktioner er midlertidigt utilgængelige",
12
+ "fabric.reactions.loading": "Indlæser ...",
13
+ "fabric.reactions.more.emojis": "Flere emojis",
14
+ "fabric.reactions.more.info": "Flere oplysninger",
15
+ "fabric.reactions.other.reacted.users": "{count, plural, one {og én anden} other {og {count} andre}}",
16
+ "fabric.reactions.reactwithemoji": "Reager med emojien {emoji}",
17
+ "reactions.dialog.close": "Luk",
18
+ "reactions.dialog.left.navigate": "Navigation til venstre",
19
+ "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}",
20
+ "reactions.dialog.right.navigate": "Navigation til højre",
21
+ "reactions.dialog.viewall": "Se, hvem der har reageret",
22
+ "reactions.dialog.viewall.tooltip": "Se alle brugerreaktioner"
22
23
  };
@@ -1,3 +1,4 @@
1
+ /* prettier-ignore */
1
2
  /**
2
3
  * NOTE:
3
4
  *
@@ -6,17 +7,17 @@
6
7
  */
7
8
  //German (Germany)
8
9
  export default {
9
- 'fabric.reactions.add': 'Reaktion hinzufügen',
10
- 'fabric.reactions.error.unexpected': 'Reaktionen sind vorübergehend nicht verfügbar.',
11
- 'fabric.reactions.loading': 'Wird geladen...',
12
- 'fabric.reactions.more.emojis': 'Mehr Emojis',
13
- 'fabric.reactions.more.info': 'Weitere Informationen',
14
- 'fabric.reactions.other.reacted.users': '{count, plural, one {und ein weiterer} other {und {count} weitere}}',
15
- 'fabric.reactions.reactwithemoji': 'Mit {emoji}-Emoji reagieren',
16
- 'reactions.dialog.close': 'Schließen',
17
- 'reactions.dialog.left.navigate': 'Nach links navigieren',
18
- 'reactions.dialog.reactions.count': '{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}',
19
- 'reactions.dialog.right.navigate': 'Nach rechts navigieren',
20
- 'reactions.dialog.viewall': 'Reaktionen ansehen',
21
- 'reactions.dialog.viewall.tooltip': 'Alle Benutzerreaktionen anzeigen'
10
+ "fabric.reactions.add": "Reaktion hinzufügen",
11
+ "fabric.reactions.error.unexpected": "Reaktionen sind vorübergehend nicht verfügbar.",
12
+ "fabric.reactions.loading": "Wird geladen...",
13
+ "fabric.reactions.more.emojis": "Mehr Emojis",
14
+ "fabric.reactions.more.info": "Weitere Informationen",
15
+ "fabric.reactions.other.reacted.users": "{count, plural, one {und ein weiterer} other {und {count} weitere}}",
16
+ "fabric.reactions.reactwithemoji": "Mit {emoji}-Emoji reagieren",
17
+ "reactions.dialog.close": "Schließen",
18
+ "reactions.dialog.left.navigate": "Nach links navigieren",
19
+ "reactions.dialog.reactions.count": "{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}",
20
+ "reactions.dialog.right.navigate": "Nach rechts navigieren",
21
+ "reactions.dialog.viewall": "Reaktionen ansehen",
22
+ "reactions.dialog.viewall.tooltip": "Alle Benutzerreaktionen anzeigen"
22
23
  };
@@ -1,3 +1,4 @@
1
+ /* prettier-ignore */
1
2
  /**
2
3
  * NOTE:
3
4
  *
@@ -6,18 +7,18 @@
6
7
  */
7
8
  //
8
9
  export default {
9
- 'fabric.reactions.add': 'Add reaction',
10
- 'fabric.reactions.error.unexpected': 'Reactions are temporarily unavailable',
11
- 'fabric.reactions.loading': 'Loading...',
12
- 'fabric.reactions.more.emojis': 'More emojis',
13
- 'fabric.reactions.more.info': 'More info',
14
- 'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
15
- 'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
16
- 'reactions.dialog.close': 'Close',
17
- 'reactions.dialog.emoji.name': '{emojiName}',
18
- 'reactions.dialog.left.navigate': 'Left Navigate',
19
- 'reactions.dialog.reactions.count': '{count, plural, one {# reaction} other {# reactions} }',
20
- 'reactions.dialog.right.navigate': 'Right Navigate',
21
- 'reactions.dialog.viewall': 'See who reacted',
22
- 'reactions.dialog.viewall.tooltip': 'View all user reactions'
10
+ "fabric.reactions.add": "Add reaction",
11
+ "fabric.reactions.error.unexpected": "Reactions are temporarily unavailable",
12
+ "fabric.reactions.loading": "Loading...",
13
+ "fabric.reactions.more.emojis": "More emojis",
14
+ "fabric.reactions.more.info": "More info",
15
+ "fabric.reactions.other.reacted.users": "{count, plural, one {and one other} other {and {count} others}}",
16
+ "fabric.reactions.reactwithemoji": "React with {emoji} emoji",
17
+ "reactions.dialog.close": "Close",
18
+ "reactions.dialog.emoji.name": "{emojiName}",
19
+ "reactions.dialog.left.navigate": "Left Navigate",
20
+ "reactions.dialog.reactions.count": "{count, plural, one {# reaction} other {# reactions} }",
21
+ "reactions.dialog.right.navigate": "Right Navigate",
22
+ "reactions.dialog.viewall": "See who reacted",
23
+ "reactions.dialog.viewall.tooltip": "View all user reactions"
23
24
  };
@@ -1,3 +1,4 @@
1
+ /* prettier-ignore */
1
2
  /**
2
3
  * NOTE:
3
4
  *
@@ -6,18 +7,18 @@
6
7
  */
7
8
  //English (United Kingdom)
8
9
  export default {
9
- 'fabric.reactions.add': 'Add reaction',
10
- 'fabric.reactions.error.unexpected': 'Reactions are temporarily unavailable',
11
- 'fabric.reactions.loading': 'Loading...',
12
- 'fabric.reactions.more.emojis': 'More emojis',
13
- 'fabric.reactions.more.info': 'More info',
14
- 'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
15
- 'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
16
- 'reactions.dialog.close': 'Close',
17
- 'reactions.dialog.emoji.name': '{emojiName}',
18
- 'reactions.dialog.left.navigate': 'Left Navigate',
19
- 'reactions.dialog.reactions.count': '{count, plural, one {# reaction} other {# reactions} }',
20
- 'reactions.dialog.right.navigate': 'Right Navigate',
21
- 'reactions.dialog.viewall': 'See who reacted',
22
- 'reactions.dialog.viewall.tooltip': 'View all user reactions'
10
+ "fabric.reactions.add": "Add reaction",
11
+ "fabric.reactions.error.unexpected": "Reactions are temporarily unavailable",
12
+ "fabric.reactions.loading": "Loading...",
13
+ "fabric.reactions.more.emojis": "More emojis",
14
+ "fabric.reactions.more.info": "More info",
15
+ "fabric.reactions.other.reacted.users": "{count, plural, one {and one other} other {and {count} others}}",
16
+ "fabric.reactions.reactwithemoji": "React with {emoji} emoji",
17
+ "reactions.dialog.close": "Close",
18
+ "reactions.dialog.emoji.name": "{emojiName}",
19
+ "reactions.dialog.left.navigate": "Left Navigate",
20
+ "reactions.dialog.reactions.count": "{count, plural, one {# reaction} other {# reactions} }",
21
+ "reactions.dialog.right.navigate": "Right Navigate",
22
+ "reactions.dialog.viewall": "See who reacted",
23
+ "reactions.dialog.viewall.tooltip": "View all user reactions"
23
24
  };
@@ -1,3 +1,4 @@
1
+ /* prettier-ignore */
1
2
  /**
2
3
  * NOTE:
3
4
  *
@@ -6,18 +7,18 @@
6
7
  */
7
8
  //
8
9
  export default {
9
- 'fabric.reactions.add': '⁣⁢Add reaction⁡‌؜؜⁡‍⁠⁡⁠⁣⁤',
10
- 'fabric.reactions.error.unexpected': '⁣⁢Reactions are temporarily unavailable⁡‍‍؜‍⁡‌؜؜؜؜‍⁠‍⁣⁤',
11
- 'fabric.reactions.loading': '⁣⁢Loading...⁡؜؜؜‌⁣⁤',
12
- 'fabric.reactions.more.emojis': '⁣⁢More emojis‌‍⁠⁠‍؜‍⁡⁠⁡؜‌⁠⁣⁤',
13
- 'fabric.reactions.more.info': '⁣⁢More info؜؜؜‍⁠‍؜⁠؜⁠؜⁡⁣⁤',
14
- 'fabric.reactions.other.reacted.users': '{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}',
15
- 'fabric.reactions.reactwithemoji': '⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤',
16
- 'reactions.dialog.close': '⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤',
17
- 'reactions.dialog.emoji.name': '⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤',
18
- 'reactions.dialog.left.navigate': '⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤',
19
- 'reactions.dialog.reactions.count': '⁣⁢{reactionsCountFormatted} reactions‌‍‌‍⁠‍⁣⁤',
20
- 'reactions.dialog.right.navigate': '⁣⁢Right Navigate⁠؜؜⁠‌‌⁡‍‍⁠⁠⁣⁤',
21
- 'reactions.dialog.viewall': '⁣⁢See who reacted؜؜⁡‍‍‍⁣⁤',
22
- 'reactions.dialog.viewall.tooltip': '⁣⁢View all user reactions⁡‌؜؜⁡⁡‌‍؜؜⁣⁤'
10
+ "fabric.reactions.add": "⁣⁢Add reaction⁡‌؜؜⁡‍⁠⁡⁠⁣⁤",
11
+ "fabric.reactions.error.unexpected": "⁣⁢Reactions are temporarily unavailable⁡‍‍؜‍⁡‌؜؜؜؜‍⁠‍⁣⁤",
12
+ "fabric.reactions.loading": "⁣⁢Loading...⁡؜؜؜‌⁣⁤",
13
+ "fabric.reactions.more.emojis": "⁣⁢More emojis‌‍⁠⁠‍؜‍⁡⁠⁡؜‌⁠⁣⁤",
14
+ "fabric.reactions.more.info": "⁣⁢More info؜؜؜‍⁠‍؜⁠؜⁠؜⁡⁣⁤",
15
+ "fabric.reactions.other.reacted.users": "{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}",
16
+ "fabric.reactions.reactwithemoji": "⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤",
17
+ "reactions.dialog.close": "⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤",
18
+ "reactions.dialog.emoji.name": "⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤",
19
+ "reactions.dialog.left.navigate": "⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤",
20
+ "reactions.dialog.reactions.count": "{count, plural, one {⁣⁢{count,number} reaction‌‍‍⁡‍‌⁡⁠‌‍⁠⁣⁤} other {⁣⁢{count,number} reactions‌‍‍⁡‍‌⁡⁠‌‍⁠⁣⁤}}",
21
+ "reactions.dialog.right.navigate": "⁣⁢Right Navigate⁠؜؜⁠‌‌⁡‍‍⁠⁠⁣⁤",
22
+ "reactions.dialog.viewall": "⁣⁢See who reacted؜؜⁡‍‍‍⁣⁤",
23
+ "reactions.dialog.viewall.tooltip": "⁣⁢View all user reactions⁡‌؜؜⁡⁡‌‍؜؜⁣⁤"
23
24
  };
@@ -1,3 +1,4 @@
1
+ /* prettier-ignore */
1
2
  /**
2
3
  * NOTE:
3
4
  *
@@ -6,17 +7,17 @@
6
7
  */
7
8
  //Spanish (International)
8
9
  export default {
9
- 'fabric.reactions.add': 'Añadir reacción',
10
- 'fabric.reactions.error.unexpected': 'Las reacciones no están disponibles temporalmente',
11
- 'fabric.reactions.loading': 'Cargando...',
12
- 'fabric.reactions.more.emojis': 'Más emojis',
13
- 'fabric.reactions.more.info': 'Más información',
14
- 'fabric.reactions.other.reacted.users': '{count, plural, one {y 1 más} other {y {count} más}}',
15
- 'fabric.reactions.reactwithemoji': 'Reaccionar con el emoticono {emoji}',
16
- 'reactions.dialog.close': 'Cerrar',
17
- 'reactions.dialog.left.navigate': 'Desplazarse hacia la izquierda',
18
- 'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reacción} other {{count,number} reacciones}}',
19
- 'reactions.dialog.right.navigate': 'Desplazarse hacia la derecha',
20
- 'reactions.dialog.viewall': 'Ver quién ha reaccionado',
21
- 'reactions.dialog.viewall.tooltip': 'Ver todas las reacciones de los usuarios'
10
+ "fabric.reactions.add": "Añadir reacción",
11
+ "fabric.reactions.error.unexpected": "Las reacciones no están disponibles temporalmente",
12
+ "fabric.reactions.loading": "Cargando...",
13
+ "fabric.reactions.more.emojis": "Más emojis",
14
+ "fabric.reactions.more.info": "Más información",
15
+ "fabric.reactions.other.reacted.users": "{count, plural, one {y 1 más} other {y {count} más}}",
16
+ "fabric.reactions.reactwithemoji": "Reaccionar con el emoticono {emoji}",
17
+ "reactions.dialog.close": "Cerrar",
18
+ "reactions.dialog.left.navigate": "Desplazarse hacia la izquierda",
19
+ "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reacción} other {{count,number} reacciones}}",
20
+ "reactions.dialog.right.navigate": "Desplazarse hacia la derecha",
21
+ "reactions.dialog.viewall": "Ver quién ha reaccionado",
22
+ "reactions.dialog.viewall.tooltip": "Ver todas las reacciones de los usuarios"
22
23
  };