@atlaskit/emoji 69.11.1 → 69.12.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 (11) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css +8 -2
  3. package/dist/cjs/components/picker/EmojiPickerComponent.js +57 -0
  4. package/dist/cjs/util/analytics/analytics.js +1 -1
  5. package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css +8 -2
  6. package/dist/es2019/components/picker/EmojiPickerComponent.js +53 -0
  7. package/dist/es2019/util/analytics/analytics.js +1 -1
  8. package/dist/esm/components/picker/EmojiPickerComponent.compiled.css +8 -2
  9. package/dist/esm/components/picker/EmojiPickerComponent.js +57 -0
  10. package/dist/esm/util/analytics/analytics.js +1 -1
  11. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/emoji
2
2
 
3
+ ## 69.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`084196ae38ba0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/084196ae38ba0) -
8
+ Fix noninteractive element interactions in emoji picker
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 69.11.1
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css CHANGED
@@ -1,12 +1,17 @@
1
1
 
2
2
  ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
3
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
3
+ ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16jlkb7n{flex-grow:1}
4
+ ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
5
+ ._18m915vq{overflow-y:hidden}
4
6
  ._1bah1yb4{justify-content:space-between}
5
7
  ._1bsb10mj{width:var(--_gsvyy7)}
6
8
  ._1e0c1txw{display:flex}
9
+ ._1o9zkb7n{flex-shrink:1}
10
+ ._1reo15vq{overflow-x:hidden}
7
11
  ._1tke1pna{min-height:420px}
8
12
  ._1tke5x59{min-height:340px}
9
13
  ._1tkegx0z{min-height:260px}
14
+ ._1tkeidpf{min-height:0}
10
15
  ._1ul910mj{min-width:var(--_gsvyy7)}
11
16
  ._2lx21bp4{flex-direction:column}
12
17
  ._4t3i1ckg{height:455px}
@@ -17,4 +22,5 @@
17
22
  ._4t3ivixp{height:349px}
18
23
  ._4t3ixt2k{height:509px}
19
24
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
20
- ._c71l1y6z{max-height:calc(80vh - 86px)}
25
+ ._c71l1y6z{max-height:calc(80vh - 86px)}
26
+ ._i0dlf1ug{flex-basis:0%}
package/dist/cjs/components/picker/EmojiPickerComponent.js CHANGED
@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
15
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
18
  var _reactDom = require("react-dom");
18
19
  var _reactIntlNext = require("react-intl-next");
19
20
  var _EmojiRepository = require("../../api/EmojiRepository");
@@ -41,6 +42,7 @@ var emojiPickerWidth = 350;
41
42
  var emojiPickerMinHeight = 260;
42
43
  var heightOffset = 80;
43
44
  var emojiPicker = null;
45
+ var emojiPickerWrapper = null;
44
46
  var withPreviewHeight = {
45
47
  small: "_4t3ivixp _1tkegx0z",
46
48
  medium: "_4t3i2300 _1tke5x59",
@@ -492,6 +494,61 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
492
494
  };
493
495
  }, [emojiProvider, onProviderChange]);
494
496
  var showPreview = selectedEmoji && !uploading;
497
+ if ((0, _platformFeatureFlags.fg)('platform_no_noninteractive_emojis_reactions')) {
498
+ return /*#__PURE__*/React.createElement("div", {
499
+ ref: onPickerRef,
500
+ "data-emoji-picker-container": true,
501
+ role: "dialog",
502
+ "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
503
+ "aria-modal": true,
504
+ className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
505
+ style: {
506
+ "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
507
+ "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
508
+ }
509
+ }, /*#__PURE__*/React.createElement("div", {
510
+ role: "presentation",
511
+ onKeyPress: suppressKeyPress,
512
+ onKeyUp: suppressKeyPress,
513
+ onKeyDown: suppressKeyPress,
514
+ className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
515
+ }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
516
+ activeCategoryId: activeCategory,
517
+ dynamicCategories: dynamicCategories,
518
+ disableCategories: disableCategories,
519
+ onCategorySelected: onCategorySelected
520
+ }), /*#__PURE__*/React.createElement(_EmojiPickerList.EmojiPickerVirtualListInternal, {
521
+ emojis: filteredEmojis,
522
+ currentUser: currentUser,
523
+ onEmojiSelected: recordUsageOnSelection,
524
+ onEmojiActive: onEmojiActive,
525
+ onEmojiDelete: onTriggerDelete,
526
+ onCategoryActivated: onCategoryActivated,
527
+ onSearch: onSearch,
528
+ query: query,
529
+ selectedTone: selectedTone,
530
+ loading: loading,
531
+ ref: emojiPickerList,
532
+ initialUploadName: query,
533
+ onToneSelected: onToneSelected,
534
+ onToneSelectorCancelled: onToneSelectorCancelled,
535
+ toneEmoji: toneEmoji,
536
+ uploading: uploading,
537
+ emojiToDelete: emojiToDelete,
538
+ uploadErrorMessage: formattedErrorMessage,
539
+ uploadEnabled: isUploadSupported && !uploading,
540
+ onUploadEmoji: onUploadEmoji,
541
+ onUploadCancelled: onUploadCancelled,
542
+ onDeleteEmoji: onDeleteEmoji,
543
+ onCloseDelete: onCloseDelete,
544
+ onFileChooserClicked: onFileChooserClicked,
545
+ onOpenUpload: onOpenUpload,
546
+ size: size,
547
+ activeCategoryId: activeCategory
548
+ }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
549
+ selectedEmoji: selectedEmoji
550
+ })));
551
+ }
495
552
  return /*#__PURE__*/React.createElement("div", {
496
553
  ref: onPickerRef,
497
554
  "data-emoji-picker-container": true,
package/dist/cjs/util/analytics/analytics.js CHANGED
@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
20
20
  actionSubjectId: actionSubjectId,
21
21
  attributes: _objectSpread({
22
22
  packageName: "@atlaskit/emoji",
23
- packageVersion: "69.11.0"
23
+ packageVersion: "0.0.0-development"
24
24
  }, attributes)
25
25
  };
26
26
  };
package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css CHANGED
@@ -1,12 +1,17 @@
1
1
 
2
2
  ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
3
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
3
+ ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16jlkb7n{flex-grow:1}
4
+ ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
5
+ ._18m915vq{overflow-y:hidden}
4
6
  ._1bah1yb4{justify-content:space-between}
5
7
  ._1bsb1edt{width:350px}
6
8
  ._1e0c1txw{display:flex}
9
+ ._1o9zkb7n{flex-shrink:1}
10
+ ._1reo15vq{overflow-x:hidden}
7
11
  ._1tke1pna{min-height:420px}
8
12
  ._1tke5x59{min-height:340px}
9
13
  ._1tkegx0z{min-height:260px}
14
+ ._1tkeidpf{min-height:0}
10
15
  ._1ul91edt{min-width:350px}
11
16
  ._2lx21bp4{flex-direction:column}
12
17
  ._4t3i1ckg{height:455px}
@@ -16,4 +21,5 @@
16
21
  ._4t3ivixp{height:349px}
17
22
  ._4t3ixt2k{height:509px}
18
23
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
19
- ._c71l1y6z{max-height:calc(80vh - 86px)}
24
+ ._c71l1y6z{max-height:calc(80vh - 86px)}
25
+ ._i0dlf1ug{flex-basis:0%}
package/dist/es2019/components/picker/EmojiPickerComponent.js CHANGED
@@ -3,6 +3,7 @@ import "./EmojiPickerComponent.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
7
8
  import { FormattedMessage, useIntl } from 'react-intl-next';
8
9
  import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -27,6 +28,7 @@ const emojiPickerWidth = 350;
27
28
  const emojiPickerMinHeight = 260;
28
29
  const heightOffset = 80;
29
30
  const emojiPicker = null;
31
+ const emojiPickerWrapper = null;
30
32
  const withPreviewHeight = {
31
33
  small: "_4t3ivixp _1tkegx0z",
32
34
  medium: "_4t3i2300 _1tke5x59",
@@ -430,6 +432,57 @@ const EmojiPickerComponent = ({
430
432
  };
431
433
  }, [emojiProvider, onProviderChange]);
432
434
  const showPreview = selectedEmoji && !uploading;
435
+ if (fg('platform_no_noninteractive_emojis_reactions')) {
436
+ return /*#__PURE__*/React.createElement("div", {
437
+ ref: onPickerRef,
438
+ "data-emoji-picker-container": true,
439
+ role: "dialog",
440
+ "aria-label": formatMessage(messages.emojiPickerTitle),
441
+ "aria-modal": true,
442
+ className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
443
+ }, /*#__PURE__*/React.createElement("div", {
444
+ role: "presentation",
445
+ onKeyPress: suppressKeyPress,
446
+ onKeyUp: suppressKeyPress,
447
+ onKeyDown: suppressKeyPress,
448
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
449
+ }, /*#__PURE__*/React.createElement(CategorySelector, {
450
+ activeCategoryId: activeCategory,
451
+ dynamicCategories: dynamicCategories,
452
+ disableCategories: disableCategories,
453
+ onCategorySelected: onCategorySelected
454
+ }), /*#__PURE__*/React.createElement(EmojiPickerList, {
455
+ emojis: filteredEmojis,
456
+ currentUser: currentUser,
457
+ onEmojiSelected: recordUsageOnSelection,
458
+ onEmojiActive: onEmojiActive,
459
+ onEmojiDelete: onTriggerDelete,
460
+ onCategoryActivated: onCategoryActivated,
461
+ onSearch: onSearch,
462
+ query: query,
463
+ selectedTone: selectedTone,
464
+ loading: loading,
465
+ ref: emojiPickerList,
466
+ initialUploadName: query,
467
+ onToneSelected: onToneSelected,
468
+ onToneSelectorCancelled: onToneSelectorCancelled,
469
+ toneEmoji: toneEmoji,
470
+ uploading: uploading,
471
+ emojiToDelete: emojiToDelete,
472
+ uploadErrorMessage: formattedErrorMessage,
473
+ uploadEnabled: isUploadSupported && !uploading,
474
+ onUploadEmoji: onUploadEmoji,
475
+ onUploadCancelled: onUploadCancelled,
476
+ onDeleteEmoji: onDeleteEmoji,
477
+ onCloseDelete: onCloseDelete,
478
+ onFileChooserClicked: onFileChooserClicked,
479
+ onOpenUpload: onOpenUpload,
480
+ size: size,
481
+ activeCategoryId: activeCategory
482
+ }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
483
+ selectedEmoji: selectedEmoji
484
+ })));
485
+ }
433
486
  return /*#__PURE__*/React.createElement("div", {
434
487
  ref: onPickerRef,
435
488
  "data-emoji-picker-container": true,
package/dist/es2019/util/analytics/analytics.js CHANGED
@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
9
9
  actionSubjectId,
10
10
  attributes: {
11
11
  packageName: "@atlaskit/emoji",
12
- packageVersion: "69.11.0",
12
+ packageVersion: "0.0.0-development",
13
13
  ...attributes
14
14
  }
15
15
  });
package/dist/esm/components/picker/EmojiPickerComponent.compiled.css CHANGED
@@ -1,12 +1,17 @@
1
1
 
2
2
  ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
3
- ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
3
+ ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16jlkb7n{flex-grow:1}
4
+ ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
5
+ ._18m915vq{overflow-y:hidden}
4
6
  ._1bah1yb4{justify-content:space-between}
5
7
  ._1bsb10mj{width:var(--_gsvyy7)}
6
8
  ._1e0c1txw{display:flex}
9
+ ._1o9zkb7n{flex-shrink:1}
10
+ ._1reo15vq{overflow-x:hidden}
7
11
  ._1tke1pna{min-height:420px}
8
12
  ._1tke5x59{min-height:340px}
9
13
  ._1tkegx0z{min-height:260px}
14
+ ._1tkeidpf{min-height:0}
10
15
  ._1ul910mj{min-width:var(--_gsvyy7)}
11
16
  ._2lx21bp4{flex-direction:column}
12
17
  ._4t3i1ckg{height:455px}
@@ -17,4 +22,5 @@
17
22
  ._4t3ivixp{height:349px}
18
23
  ._4t3ixt2k{height:509px}
19
24
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
20
- ._c71l1y6z{max-height:calc(80vh - 86px)}
25
+ ._c71l1y6z{max-height:calc(80vh - 86px)}
26
+ ._i0dlf1ug{flex-basis:0%}
package/dist/esm/components/picker/EmojiPickerComponent.js CHANGED
@@ -8,6 +8,7 @@ import { ax, ix } from "@compiled/react/runtime";
8
8
  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; }
9
9
  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) { _defineProperty(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; }
10
10
  import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
12
13
  import { FormattedMessage, useIntl } from 'react-intl-next';
13
14
  import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -32,6 +33,7 @@ var emojiPickerWidth = 350;
32
33
  var emojiPickerMinHeight = 260;
33
34
  var heightOffset = 80;
34
35
  var emojiPicker = null;
36
+ var emojiPickerWrapper = null;
35
37
  var withPreviewHeight = {
36
38
  small: "_4t3ivixp _1tkegx0z",
37
39
  medium: "_4t3i2300 _1tke5x59",
@@ -483,6 +485,61 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
483
485
  };
484
486
  }, [emojiProvider, onProviderChange]);
485
487
  var showPreview = selectedEmoji && !uploading;
488
+ if (fg('platform_no_noninteractive_emojis_reactions')) {
489
+ return /*#__PURE__*/React.createElement("div", {
490
+ ref: onPickerRef,
491
+ "data-emoji-picker-container": true,
492
+ role: "dialog",
493
+ "aria-label": formatMessage(messages.emojiPickerTitle),
494
+ "aria-modal": true,
495
+ className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
496
+ style: {
497
+ "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
498
+ "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
499
+ }
500
+ }, /*#__PURE__*/React.createElement("div", {
501
+ role: "presentation",
502
+ onKeyPress: suppressKeyPress,
503
+ onKeyUp: suppressKeyPress,
504
+ onKeyDown: suppressKeyPress,
505
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
506
+ }, /*#__PURE__*/React.createElement(CategorySelector, {
507
+ activeCategoryId: activeCategory,
508
+ dynamicCategories: dynamicCategories,
509
+ disableCategories: disableCategories,
510
+ onCategorySelected: onCategorySelected
511
+ }), /*#__PURE__*/React.createElement(EmojiPickerList, {
512
+ emojis: filteredEmojis,
513
+ currentUser: currentUser,
514
+ onEmojiSelected: recordUsageOnSelection,
515
+ onEmojiActive: onEmojiActive,
516
+ onEmojiDelete: onTriggerDelete,
517
+ onCategoryActivated: onCategoryActivated,
518
+ onSearch: onSearch,
519
+ query: query,
520
+ selectedTone: selectedTone,
521
+ loading: loading,
522
+ ref: emojiPickerList,
523
+ initialUploadName: query,
524
+ onToneSelected: onToneSelected,
525
+ onToneSelectorCancelled: onToneSelectorCancelled,
526
+ toneEmoji: toneEmoji,
527
+ uploading: uploading,
528
+ emojiToDelete: emojiToDelete,
529
+ uploadErrorMessage: formattedErrorMessage,
530
+ uploadEnabled: isUploadSupported && !uploading,
531
+ onUploadEmoji: onUploadEmoji,
532
+ onUploadCancelled: onUploadCancelled,
533
+ onDeleteEmoji: onDeleteEmoji,
534
+ onCloseDelete: onCloseDelete,
535
+ onFileChooserClicked: onFileChooserClicked,
536
+ onOpenUpload: onOpenUpload,
537
+ size: size,
538
+ activeCategoryId: activeCategory
539
+ }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
540
+ selectedEmoji: selectedEmoji
541
+ })));
542
+ }
486
543
  return /*#__PURE__*/React.createElement("div", {
487
544
  ref: onPickerRef,
488
545
  "data-emoji-picker-container": true,
package/dist/esm/util/analytics/analytics.js CHANGED
@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
14
14
  actionSubjectId: actionSubjectId,
15
15
  attributes: _objectSpread({
16
16
  packageName: "@atlaskit/emoji",
17
- packageVersion: "69.11.0"
17
+ packageVersion: "0.0.0-development"
18
18
  }, attributes)
19
19
  };
20
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/emoji",
3
- "version": "69.11.1",
3
+ "version": "69.12.0",
4
4
  "description": "Fabric emoji React components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
49
49
  "@atlaskit/primitives": "^18.1.0",
50
50
  "@atlaskit/spinner": "^19.1.0",
51
51
  "@atlaskit/textfield": "^8.3.0",
52
- "@atlaskit/tmp-editor-statsig": "^56.0.0",
52
+ "@atlaskit/tmp-editor-statsig": "^56.1.0",
53
53
  "@atlaskit/tokens": "^12.0.0",
54
54
  "@atlaskit/tooltip": "^21.1.0",
55
55
  "@atlaskit/ufo": "^0.4.0",
@@ -130,6 +130,9 @@
130
130
  },
131
131
  "platform_change_emoji_button_label": {
132
132
  "type": "boolean"
133
+ },
134
+ "platform_no_noninteractive_emojis_reactions": {
135
+ "type": "boolean"
133
136
  }
134
137
  },
135
138
  "scripts": {