@atlaskit/editor-plugin-type-ahead 17.1.8 → 17.1.10

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 (6) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/InputQuery.js +37 -3
  3. package/dist/es2019/ui/InputQuery.js +36 -2
  4. package/dist/esm/ui/InputQuery.js +36 -2
  5. package/dist/types/ui/InputQuery.d.ts +1 -0
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 17.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 17.1.9
10
+
11
+ ### Patch Changes
12
+
13
+ - [`f4992ab3be7d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f4992ab3be7d5) -
14
+ Focus attached typeahead queries before the next animation frame behind the
15
+ `platform_editor_typeahead_early_focus` experiment.
16
+ - Updated dependencies
17
+
3
18
  ## 17.1.8
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/ui/InputQuery.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.InputQuery = void 0;
8
+ exports.scheduleFocusAfterAttachment = exports.InputQuery = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _react2 = require("@emotion/react");
@@ -15,6 +15,7 @@ var _browser = require("@atlaskit/editor-common/browser");
15
15
  var _typeAhead = require("@atlaskit/editor-common/type-ahead");
16
16
  var _ui = require("@atlaskit/editor-common/ui");
17
17
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
18
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
18
19
  var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
19
20
  var _constants = require("../pm-plugins/constants");
20
21
  var _utils = require("../pm-plugins/utils");
@@ -72,6 +73,35 @@ var getAriaLabel = function getAriaLabel(triggerPrefix, _intl) {
72
73
  return _typeAhead.typeAheadListMessages.quickInsertInputLabel;
73
74
  }
74
75
  };
76
+ var scheduleFocusAfterAttachment = exports.scheduleFocusAfterAttachment = function scheduleFocusAfterAttachment(queryRef, focusQuery) {
77
+ var animationFrameId;
78
+ var cancelled = false;
79
+ var focus = function focus() {
80
+ if (!cancelled) {
81
+ focusQuery();
82
+ }
83
+ };
84
+
85
+ // React can render the decoration before ProseMirror attaches it. The microtask runs after that
86
+ // synchronous attachment, while the animation frame remains a fallback for asynchronous mounts.
87
+ window.queueMicrotask(function () {
88
+ var _queryRef$current;
89
+ if (cancelled) {
90
+ return;
91
+ }
92
+ if ((_queryRef$current = queryRef.current) !== null && _queryRef$current !== void 0 && _queryRef$current.isConnected) {
93
+ focus();
94
+ return;
95
+ }
96
+ animationFrameId = requestAnimationFrame(focus);
97
+ });
98
+ return function () {
99
+ cancelled = true;
100
+ if (animationFrameId !== undefined) {
101
+ cancelAnimationFrame(animationFrameId);
102
+ }
103
+ };
104
+ };
75
105
  var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function (_ref) {
76
106
  var _ref2;
77
107
  var activeDescendantId = _ref.activeDescendantId,
@@ -387,7 +417,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
387
417
  // Ignored via go/ees005
388
418
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
389
419
  setQuery(hasReopenQuery ? reopenQuery : null);
390
- requestAnimationFrame(function () {
420
+ var focusQuery = function focusQuery() {
391
421
  if (!(ref !== null && ref !== void 0 && ref.current)) {
392
422
  return;
393
423
  }
@@ -402,7 +432,11 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
402
432
  }
403
433
  ref.current.focus();
404
434
  setInFocus(true);
405
- });
435
+ };
436
+ if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_typeahead_early_focus')) {
437
+ return scheduleFocusAfterAttachment(ref, focusQuery);
438
+ }
439
+ requestAnimationFrame(focusQuery);
406
440
  }
407
441
  }, [forceFocus, reopenQuery]);
408
442
  var assistiveHintID = _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
package/dist/es2019/ui/InputQuery.js CHANGED
@@ -12,6 +12,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
12
12
  import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
13
13
  import { AssistiveText } from '@atlaskit/editor-common/ui';
14
14
  import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
15
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
15
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
16
17
  import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
17
18
  import { getPluginState } from '../pm-plugins/utils';
@@ -61,6 +62,35 @@ const getAriaLabel = (triggerPrefix, _intl) => {
61
62
  return typeAheadListMessages.quickInsertInputLabel;
62
63
  }
63
64
  };
65
+ export const scheduleFocusAfterAttachment = (queryRef, focusQuery) => {
66
+ let animationFrameId;
67
+ let cancelled = false;
68
+ const focus = () => {
69
+ if (!cancelled) {
70
+ focusQuery();
71
+ }
72
+ };
73
+
74
+ // React can render the decoration before ProseMirror attaches it. The microtask runs after that
75
+ // synchronous attachment, while the animation frame remains a fallback for asynchronous mounts.
76
+ window.queueMicrotask(() => {
77
+ var _queryRef$current;
78
+ if (cancelled) {
79
+ return;
80
+ }
81
+ if ((_queryRef$current = queryRef.current) !== null && _queryRef$current !== void 0 && _queryRef$current.isConnected) {
82
+ focus();
83
+ return;
84
+ }
85
+ animationFrameId = requestAnimationFrame(focus);
86
+ });
87
+ return () => {
88
+ cancelled = true;
89
+ if (animationFrameId !== undefined) {
90
+ cancelAnimationFrame(animationFrameId);
91
+ }
92
+ };
93
+ };
64
94
  export const InputQuery = /*#__PURE__*/React.memo(({
65
95
  activeDescendantId,
66
96
  triggerQueryPrefix,
@@ -381,7 +411,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
381
411
  // Ignored via go/ees005
382
412
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
383
413
  setQuery(hasReopenQuery ? reopenQuery : null);
384
- requestAnimationFrame(() => {
414
+ const focusQuery = () => {
385
415
  if (!(ref !== null && ref !== void 0 && ref.current)) {
386
416
  return;
387
417
  }
@@ -396,7 +426,11 @@ export const InputQuery = /*#__PURE__*/React.memo(({
396
426
  }
397
427
  ref.current.focus();
398
428
  setInFocus(true);
399
- });
429
+ };
430
+ if (isExperimentEnabled('platform_editor_typeahead_early_focus')) {
431
+ return scheduleFocusAfterAttachment(ref, focusQuery);
432
+ }
433
+ requestAnimationFrame(focusQuery);
400
434
  }
401
435
  }, [forceFocus, reopenQuery]);
402
436
  const assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
package/dist/esm/ui/InputQuery.js CHANGED
@@ -13,6 +13,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
13
13
  import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
14
14
  import { AssistiveText } from '@atlaskit/editor-common/ui';
15
15
  import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
16
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
16
17
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
17
18
  import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
18
19
  import { getPluginState } from '../pm-plugins/utils';
@@ -62,6 +63,35 @@ var getAriaLabel = function getAriaLabel(triggerPrefix, _intl) {
62
63
  return typeAheadListMessages.quickInsertInputLabel;
63
64
  }
64
65
  };
66
+ export var scheduleFocusAfterAttachment = function scheduleFocusAfterAttachment(queryRef, focusQuery) {
67
+ var animationFrameId;
68
+ var cancelled = false;
69
+ var focus = function focus() {
70
+ if (!cancelled) {
71
+ focusQuery();
72
+ }
73
+ };
74
+
75
+ // React can render the decoration before ProseMirror attaches it. The microtask runs after that
76
+ // synchronous attachment, while the animation frame remains a fallback for asynchronous mounts.
77
+ window.queueMicrotask(function () {
78
+ var _queryRef$current;
79
+ if (cancelled) {
80
+ return;
81
+ }
82
+ if ((_queryRef$current = queryRef.current) !== null && _queryRef$current !== void 0 && _queryRef$current.isConnected) {
83
+ focus();
84
+ return;
85
+ }
86
+ animationFrameId = requestAnimationFrame(focus);
87
+ });
88
+ return function () {
89
+ cancelled = true;
90
+ if (animationFrameId !== undefined) {
91
+ cancelAnimationFrame(animationFrameId);
92
+ }
93
+ };
94
+ };
65
95
  export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
66
96
  var _ref2;
67
97
  var activeDescendantId = _ref.activeDescendantId,
@@ -377,7 +407,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
377
407
  // Ignored via go/ees005
378
408
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
379
409
  setQuery(hasReopenQuery ? reopenQuery : null);
380
- requestAnimationFrame(function () {
410
+ var focusQuery = function focusQuery() {
381
411
  if (!(ref !== null && ref !== void 0 && ref.current)) {
382
412
  return;
383
413
  }
@@ -392,7 +422,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
392
422
  }
393
423
  ref.current.focus();
394
424
  setInFocus(true);
395
- });
425
+ };
426
+ if (isExperimentEnabled('platform_editor_typeahead_early_focus')) {
427
+ return scheduleFocusAfterAttachment(ref, focusQuery);
428
+ }
429
+ requestAnimationFrame(focusQuery);
396
430
  }
397
431
  }, [forceFocus, reopenQuery]);
398
432
  var assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
package/dist/types/ui/InputQuery.d.ts CHANGED
@@ -8,6 +8,7 @@ import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
8
8
  import type { TypeAheadItem } from '@atlaskit/editor-common/types';
9
9
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
10
10
  import { CloseSelectionOptions } from '../pm-plugins/constants';
11
+ export declare const scheduleFocusAfterAttachment: (queryRef: React.RefObject<HTMLElement>, focusQuery: () => void) => (() => void);
11
12
  type InputQueryProps = {
12
13
  activeDescendantId?: string;
13
14
  cancel: (props: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "17.1.8",
3
+ "version": "17.1.10",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -41,7 +41,7 @@
41
41
  "@atlaskit/primitives": "^22.5.0",
42
42
  "@atlaskit/prosemirror-history": "^1.2.0",
43
43
  "@atlaskit/prosemirror-input-rules": "^4.1.0",
44
- "@atlaskit/tmp-editor-statsig": "^174.0.0",
44
+ "@atlaskit/tmp-editor-statsig": "^176.0.0",
45
45
  "@atlaskit/tokens": "^16.11.0",
46
46
  "@atlaskit/visually-hidden": "^4.4.0",
47
47
  "@babel/runtime": "^7.0.0",
@@ -53,7 +53,7 @@
53
53
  "w3c-keyname": "^2.1.8"
54
54
  },
55
55
  "peerDependencies": {
56
- "@atlaskit/editor-common": "^120.13.0",
56
+ "@atlaskit/editor-common": "^120.16.0",
57
57
  "react": "^18.2.0 || ^19.2.0",
58
58
  "react-dom": "^18.2.0 || ^19.2.0",
59
59
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"