@atlaskit/emoji 71.2.2 → 71.3.1

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/emoji
2
2
 
3
+ ## 71.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`26dff0be3275b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26dff0be3275b) -
8
+ Search for Atlassian emojis based on keywords
9
+
10
+ ## 71.3.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`e0513f0b5178e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0513f0b5178e) -
15
+ Drag and drop will still work with native file explorer overlap
16
+
3
17
  ## 71.2.2
4
18
 
5
19
  ### Patch Changes
@@ -376,6 +376,9 @@ var EmojiRepository = exports.default = /*#__PURE__*/function () {
376
376
  this.fullSearch.searchIndex = new _jsSearch.UnorderedSearchIndex();
377
377
  this.fullSearch.addIndex('name');
378
378
  this.fullSearch.addIndex('shortName');
379
+ if ((0, _expVal.expVal)(teamojiRefreshExperimentName, 'isEnabled', false)) {
380
+ this.fullSearch.addIndex('keywords');
381
+ }
379
382
  this.fullSearch.addDocuments(this.getAllSearchableEmojis());
380
383
  this.fullSearchReady = true;
381
384
  }
@@ -23,6 +23,10 @@ var dropzoneTestId = exports.dropzoneTestId = 'file-dropzone';
23
23
  var hasFilesInTransfer = function hasFilesInTransfer(dataTransfer) {
24
24
  return !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
25
25
  };
26
+ var isEventWithinElement = function isEventWithinElement(event, element) {
27
+ var rect = element.getBoundingClientRect();
28
+ return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
29
+ };
26
30
  var dropzone = null;
27
31
  var dropzoneActive = null;
28
32
  var previewImageStyles = null;
@@ -76,10 +80,40 @@ var FileChooser = function FileChooser(props) {
76
80
  }
77
81
  var suppressNativeFileDrop = function suppressNativeFileDrop(event) {
78
82
  if (!hasFilesInTransfer(event.dataTransfer)) {
79
- return;
83
+ return false;
80
84
  }
81
85
  event.preventDefault();
82
86
  event.stopPropagation();
87
+ return true;
88
+ };
89
+ var onWindowFileDrag = function onWindowFileDrag(event) {
90
+ if (!hasFilesInTransfer(event.dataTransfer)) {
91
+ return;
92
+ }
93
+ var isOverDropzone = isEventWithinElement(event, element);
94
+ if (isOverDropzone) {
95
+ suppressNativeFileDrop(event);
96
+ }
97
+ if (!isDropDisabled) {
98
+ setIsDragging(isOverDropzone);
99
+ }
100
+ };
101
+ var onWindowFileDragLeave = function onWindowFileDragLeave(event) {
102
+ if (!hasFilesInTransfer(event.dataTransfer) || event.relatedTarget) {
103
+ return;
104
+ }
105
+ setIsDragging(false);
106
+ };
107
+ var onWindowFileDrop = function onWindowFileDrop(event) {
108
+ if (!hasFilesInTransfer(event.dataTransfer) || !isEventWithinElement(event, element)) {
109
+ return;
110
+ }
111
+ suppressNativeFileDrop(event);
112
+ setIsDragging(false);
113
+ if (!isDropDisabled) {
114
+ var _event$dataTransfer$f, _event$dataTransfer;
115
+ handleFileDrop(Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []));
116
+ }
83
117
  };
84
118
 
85
119
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -88,6 +122,14 @@ var FileChooser = function FileChooser(props) {
88
122
  element.addEventListener('dragover', suppressNativeFileDrop);
89
123
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
90
124
  element.addEventListener('drop', suppressNativeFileDrop);
125
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
126
+ window.addEventListener('dragenter', onWindowFileDrag, true);
127
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
128
+ window.addEventListener('dragover', onWindowFileDrag, true);
129
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
130
+ window.addEventListener('dragleave', onWindowFileDragLeave, true);
131
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
132
+ window.addEventListener('drop', onWindowFileDrop, true);
91
133
  var cleanupDropTarget = (0, _adapter.dropTargetForExternal)({
92
134
  element: element,
93
135
  canDrop: _file.containsFiles,
@@ -114,6 +156,10 @@ var FileChooser = function FileChooser(props) {
114
156
  element.removeEventListener('dragenter', suppressNativeFileDrop);
115
157
  element.removeEventListener('dragover', suppressNativeFileDrop);
116
158
  element.removeEventListener('drop', suppressNativeFileDrop);
159
+ window.removeEventListener('dragenter', onWindowFileDrag, true);
160
+ window.removeEventListener('dragover', onWindowFileDrag, true);
161
+ window.removeEventListener('dragleave', onWindowFileDragLeave, true);
162
+ window.removeEventListener('drop', onWindowFileDrop, true);
117
163
  cleanupDropTarget();
118
164
  };
119
165
  }, [isDropDisabled, handleFileDrop]);
@@ -135,6 +181,7 @@ var FileChooser = function FileChooser(props) {
135
181
  return /*#__PURE__*/_react.default.createElement("div", {
136
182
  ref: dropzoneRef,
137
183
  "data-testid": dropzoneTestId,
184
+ "data-dragging": isDragging ? 'true' : undefined,
138
185
  role: "region",
139
186
  "aria-label": label,
140
187
  className: (0, _runtime.ax)(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
@@ -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: "71.2.1"
23
+ packageVersion: "71.3.0"
24
24
  }, attributes)
25
25
  };
26
26
  };
@@ -302,6 +302,9 @@ export default class EmojiRepository {
302
302
  this.fullSearch.searchIndex = new UnorderedSearchIndex();
303
303
  this.fullSearch.addIndex('name');
304
304
  this.fullSearch.addIndex('shortName');
305
+ if (expVal(teamojiRefreshExperimentName, 'isEnabled', false)) {
306
+ this.fullSearch.addIndex('keywords');
307
+ }
305
308
  this.fullSearch.addDocuments(this.getAllSearchableEmojis());
306
309
  this.fullSearchReady = true;
307
310
  }
@@ -11,6 +11,10 @@ export const chooseFileButtonTestId = 'choose-file-button';
11
11
  export const fileUploadInputTestId = 'file-upload';
12
12
  export const dropzoneTestId = 'file-dropzone';
13
13
  const hasFilesInTransfer = dataTransfer => !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
14
+ const isEventWithinElement = (event, element) => {
15
+ const rect = element.getBoundingClientRect();
16
+ return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
17
+ };
14
18
  const dropzone = null;
15
19
  const dropzoneActive = null;
16
20
  const previewImageStyles = null;
@@ -61,10 +65,40 @@ const FileChooser = props => {
61
65
  }
62
66
  const suppressNativeFileDrop = event => {
63
67
  if (!hasFilesInTransfer(event.dataTransfer)) {
64
- return;
68
+ return false;
65
69
  }
66
70
  event.preventDefault();
67
71
  event.stopPropagation();
72
+ return true;
73
+ };
74
+ const onWindowFileDrag = event => {
75
+ if (!hasFilesInTransfer(event.dataTransfer)) {
76
+ return;
77
+ }
78
+ const isOverDropzone = isEventWithinElement(event, element);
79
+ if (isOverDropzone) {
80
+ suppressNativeFileDrop(event);
81
+ }
82
+ if (!isDropDisabled) {
83
+ setIsDragging(isOverDropzone);
84
+ }
85
+ };
86
+ const onWindowFileDragLeave = event => {
87
+ if (!hasFilesInTransfer(event.dataTransfer) || event.relatedTarget) {
88
+ return;
89
+ }
90
+ setIsDragging(false);
91
+ };
92
+ const onWindowFileDrop = event => {
93
+ if (!hasFilesInTransfer(event.dataTransfer) || !isEventWithinElement(event, element)) {
94
+ return;
95
+ }
96
+ suppressNativeFileDrop(event);
97
+ setIsDragging(false);
98
+ if (!isDropDisabled) {
99
+ var _event$dataTransfer$f, _event$dataTransfer;
100
+ handleFileDrop(Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []));
101
+ }
68
102
  };
69
103
 
70
104
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -73,6 +107,14 @@ const FileChooser = props => {
73
107
  element.addEventListener('dragover', suppressNativeFileDrop);
74
108
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
75
109
  element.addEventListener('drop', suppressNativeFileDrop);
110
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
111
+ window.addEventListener('dragenter', onWindowFileDrag, true);
112
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
113
+ window.addEventListener('dragover', onWindowFileDrag, true);
114
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
115
+ window.addEventListener('dragleave', onWindowFileDragLeave, true);
116
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
117
+ window.addEventListener('drop', onWindowFileDrop, true);
76
118
  const cleanupDropTarget = dropTargetForExternal({
77
119
  element,
78
120
  canDrop: containsFiles,
@@ -98,6 +140,10 @@ const FileChooser = props => {
98
140
  element.removeEventListener('dragenter', suppressNativeFileDrop);
99
141
  element.removeEventListener('dragover', suppressNativeFileDrop);
100
142
  element.removeEventListener('drop', suppressNativeFileDrop);
143
+ window.removeEventListener('dragenter', onWindowFileDrag, true);
144
+ window.removeEventListener('dragover', onWindowFileDrag, true);
145
+ window.removeEventListener('dragleave', onWindowFileDragLeave, true);
146
+ window.removeEventListener('drop', onWindowFileDrop, true);
101
147
  cleanupDropTarget();
102
148
  };
103
149
  }, [isDropDisabled, handleFileDrop]);
@@ -119,6 +165,7 @@ const FileChooser = props => {
119
165
  return /*#__PURE__*/React.createElement("div", {
120
166
  ref: dropzoneRef,
121
167
  "data-testid": dropzoneTestId,
168
+ "data-dragging": isDragging ? 'true' : undefined,
122
169
  role: "region",
123
170
  "aria-label": label,
124
171
  className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
9
9
  actionSubjectId,
10
10
  attributes: {
11
11
  packageName: "@atlaskit/emoji",
12
- packageVersion: "71.2.1",
12
+ packageVersion: "71.3.0",
13
13
  ...attributes
14
14
  }
15
15
  });
@@ -369,6 +369,9 @@ var EmojiRepository = /*#__PURE__*/function () {
369
369
  this.fullSearch.searchIndex = new UnorderedSearchIndex();
370
370
  this.fullSearch.addIndex('name');
371
371
  this.fullSearch.addIndex('shortName');
372
+ if (expVal(teamojiRefreshExperimentName, 'isEnabled', false)) {
373
+ this.fullSearch.addIndex('keywords');
374
+ }
372
375
  this.fullSearch.addDocuments(this.getAllSearchableEmojis());
373
376
  this.fullSearchReady = true;
374
377
  }
@@ -14,6 +14,10 @@ export var dropzoneTestId = 'file-dropzone';
14
14
  var hasFilesInTransfer = function hasFilesInTransfer(dataTransfer) {
15
15
  return !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
16
16
  };
17
+ var isEventWithinElement = function isEventWithinElement(event, element) {
18
+ var rect = element.getBoundingClientRect();
19
+ return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
20
+ };
17
21
  var dropzone = null;
18
22
  var dropzoneActive = null;
19
23
  var previewImageStyles = null;
@@ -67,10 +71,40 @@ var FileChooser = function FileChooser(props) {
67
71
  }
68
72
  var suppressNativeFileDrop = function suppressNativeFileDrop(event) {
69
73
  if (!hasFilesInTransfer(event.dataTransfer)) {
70
- return;
74
+ return false;
71
75
  }
72
76
  event.preventDefault();
73
77
  event.stopPropagation();
78
+ return true;
79
+ };
80
+ var onWindowFileDrag = function onWindowFileDrag(event) {
81
+ if (!hasFilesInTransfer(event.dataTransfer)) {
82
+ return;
83
+ }
84
+ var isOverDropzone = isEventWithinElement(event, element);
85
+ if (isOverDropzone) {
86
+ suppressNativeFileDrop(event);
87
+ }
88
+ if (!isDropDisabled) {
89
+ setIsDragging(isOverDropzone);
90
+ }
91
+ };
92
+ var onWindowFileDragLeave = function onWindowFileDragLeave(event) {
93
+ if (!hasFilesInTransfer(event.dataTransfer) || event.relatedTarget) {
94
+ return;
95
+ }
96
+ setIsDragging(false);
97
+ };
98
+ var onWindowFileDrop = function onWindowFileDrop(event) {
99
+ if (!hasFilesInTransfer(event.dataTransfer) || !isEventWithinElement(event, element)) {
100
+ return;
101
+ }
102
+ suppressNativeFileDrop(event);
103
+ setIsDragging(false);
104
+ if (!isDropDisabled) {
105
+ var _event$dataTransfer$f, _event$dataTransfer;
106
+ handleFileDrop(Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []));
107
+ }
74
108
  };
75
109
 
76
110
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -79,6 +113,14 @@ var FileChooser = function FileChooser(props) {
79
113
  element.addEventListener('dragover', suppressNativeFileDrop);
80
114
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
81
115
  element.addEventListener('drop', suppressNativeFileDrop);
116
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
117
+ window.addEventListener('dragenter', onWindowFileDrag, true);
118
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
119
+ window.addEventListener('dragover', onWindowFileDrag, true);
120
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
121
+ window.addEventListener('dragleave', onWindowFileDragLeave, true);
122
+ // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
123
+ window.addEventListener('drop', onWindowFileDrop, true);
82
124
  var cleanupDropTarget = dropTargetForExternal({
83
125
  element: element,
84
126
  canDrop: containsFiles,
@@ -105,6 +147,10 @@ var FileChooser = function FileChooser(props) {
105
147
  element.removeEventListener('dragenter', suppressNativeFileDrop);
106
148
  element.removeEventListener('dragover', suppressNativeFileDrop);
107
149
  element.removeEventListener('drop', suppressNativeFileDrop);
150
+ window.removeEventListener('dragenter', onWindowFileDrag, true);
151
+ window.removeEventListener('dragover', onWindowFileDrag, true);
152
+ window.removeEventListener('dragleave', onWindowFileDragLeave, true);
153
+ window.removeEventListener('drop', onWindowFileDrop, true);
108
154
  cleanupDropTarget();
109
155
  };
110
156
  }, [isDropDisabled, handleFileDrop]);
@@ -126,6 +172,7 @@ var FileChooser = function FileChooser(props) {
126
172
  return /*#__PURE__*/React.createElement("div", {
127
173
  ref: dropzoneRef,
128
174
  "data-testid": dropzoneTestId,
175
+ "data-dragging": isDragging ? 'true' : undefined,
129
176
  role: "region",
130
177
  "aria-label": label,
131
178
  className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
@@ -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: "71.2.1"
17
+ packageVersion: "71.3.0"
18
18
  }, attributes)
19
19
  };
20
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/emoji",
3
- "version": "71.2.2",
3
+ "version": "71.3.1",
4
4
  "description": "Fabric emoji React components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"