@atlaskit/editor-plugin-block-type 9.0.1 → 9.0.2

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 +9 -0
  2. package/dist/cjs/ui/HeadingBlockMenuItem.js +8 -2
  3. package/dist/cjs/ui/ParagraphBlockMenuItem.js +8 -2
  4. package/dist/cjs/ui/QuoteBlockMenuItem.js +8 -2
  5. package/dist/es2019/ui/HeadingBlockMenuItem.js +8 -2
  6. package/dist/es2019/ui/ParagraphBlockMenuItem.js +8 -2
  7. package/dist/es2019/ui/QuoteBlockMenuItem.js +8 -2
  8. package/dist/esm/ui/HeadingBlockMenuItem.js +8 -2
  9. package/dist/esm/ui/ParagraphBlockMenuItem.js +8 -2
  10. package/dist/esm/ui/QuoteBlockMenuItem.js +8 -2
  11. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-block-type
2
2
 
3
+ ## 9.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`51d46145cda56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51d46145cda56) -
8
+ Adds additional attributes to Element Converted event and fires the event for the empty line
9
+ transforms
10
+ - Updated dependencies
11
+
3
12
  ## 9.0.1
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/HeadingBlockMenuItem.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.createHeadingBlockMenuItem = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
11
  var _messages = require("@atlaskit/editor-common/messages");
11
12
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
13
  var _state = require("@atlaskit/editor-prosemirror/state");
@@ -34,13 +35,18 @@ var HeadingBlockMenuItem = function HeadingBlockMenuItem(_ref) {
34
35
  var isHeading = isTextSelection && currentBlockType && HeadingBlockTypes.includes(currentBlockType);
35
36
  var currentHeadingLevel = isHeading ? currentBlockType.level : undefined;
36
37
  var isSelected = isHeading && currentHeadingLevel === level;
37
- var handleClick = function handleClick() {
38
+ var handleClick = function handleClick(event) {
38
39
  if (!selection) {
39
40
  return;
40
41
  }
41
42
  if (!isSelected) {
42
43
  var _api$blockMenu;
43
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("heading".concat(level)));
44
+ var inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE;
45
+ var triggeredFrom = _analytics.INPUT_METHOD.BLOCK_MENU;
46
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("heading".concat(level), {
47
+ inputMethod: inputMethod,
48
+ triggeredFrom: triggeredFrom
49
+ }));
44
50
  }
45
51
  };
46
52
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
package/dist/cjs/ui/ParagraphBlockMenuItem.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.createParagraphBlockMenuItem = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
11
  var _messages = require("@atlaskit/editor-common/messages");
11
12
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
13
  var _state = require("@atlaskit/editor-prosemirror/state");
@@ -23,13 +24,18 @@ var ParagraphBlockMenuItem = function ParagraphBlockMenuItem(_ref) {
23
24
  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
24
25
  var isTextSelection = selection instanceof _state.TextSelection;
25
26
  var isParagraph = isTextSelection && currentBlockType && currentBlockType === _consts.NORMAL_TEXT && !bulletListActive && !orderedListActive;
26
- var handleClick = function handleClick() {
27
+ var handleClick = function handleClick(event) {
27
28
  if (!selection) {
28
29
  return;
29
30
  }
30
31
  if (!isParagraph) {
31
32
  var _api$blockMenu;
32
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("paragraph"));
33
+ var inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE;
34
+ var triggeredFrom = _analytics.INPUT_METHOD.BLOCK_MENU;
35
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("paragraph", {
36
+ inputMethod: inputMethod,
37
+ triggeredFrom: triggeredFrom
38
+ }));
33
39
  }
34
40
  };
35
41
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
package/dist/cjs/ui/QuoteBlockMenuItem.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.createQuoteBlockMenuItem = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
11
  var _messages = require("@atlaskit/editor-common/messages");
11
12
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
13
  var _editorToolbar = require("@atlaskit/editor-toolbar");
@@ -18,10 +19,15 @@ var QuoteBlockMenuItem = function QuoteBlockMenuItem(_ref) {
18
19
  formatMessage = _useIntl.formatMessage;
19
20
  var currentBlockType = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType');
20
21
  var isBlockQuote = currentBlockType && currentBlockType === _consts.BLOCK_QUOTE;
21
- var handleClick = function handleClick() {
22
+ var handleClick = function handleClick(event) {
22
23
  if (!isBlockQuote) {
23
24
  var _api$blockMenu;
24
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("blockquote"));
25
+ var inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? _analytics.INPUT_METHOD.KEYBOARD : _analytics.INPUT_METHOD.MOUSE;
26
+ var triggeredFrom = _analytics.INPUT_METHOD.BLOCK_MENU;
27
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("blockquote", {
28
+ inputMethod: inputMethod,
29
+ triggeredFrom: triggeredFrom
30
+ }));
25
31
  }
26
32
  };
27
33
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
package/dist/es2019/ui/HeadingBlockMenuItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -29,13 +30,18 @@ const HeadingBlockMenuItem = ({
29
30
  const isHeading = isTextSelection && currentBlockType && HeadingBlockTypes.includes(currentBlockType);
30
31
  const currentHeadingLevel = isHeading ? currentBlockType.level : undefined;
31
32
  const isSelected = isHeading && currentHeadingLevel === level;
32
- const handleClick = () => {
33
+ const handleClick = event => {
33
34
  if (!selection) {
34
35
  return;
35
36
  }
36
37
  if (!isSelected) {
37
38
  var _api$blockMenu;
38
- api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(`heading${level}`));
39
+ const inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
40
+ const triggeredFrom = INPUT_METHOD.BLOCK_MENU;
41
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(`heading${level}`, {
42
+ inputMethod,
43
+ triggeredFrom
44
+ }));
39
45
  }
40
46
  };
41
47
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
package/dist/es2019/ui/ParagraphBlockMenuItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockMenuMessages } from '@atlaskit/editor-common/messages';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -18,13 +19,18 @@ const ParagraphBlockMenuItem = ({
18
19
  const selection = useSharedPluginStateSelector(api, 'selection.selection');
19
20
  const isTextSelection = selection instanceof TextSelection;
20
21
  const isParagraph = isTextSelection && currentBlockType && currentBlockType === NORMAL_TEXT && !bulletListActive && !orderedListActive;
21
- const handleClick = () => {
22
+ const handleClick = event => {
22
23
  if (!selection) {
23
24
  return;
24
25
  }
25
26
  if (!isParagraph) {
26
27
  var _api$blockMenu;
27
- api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(`paragraph`));
28
+ const inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
29
+ const triggeredFrom = INPUT_METHOD.BLOCK_MENU;
30
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(`paragraph`, {
31
+ inputMethod,
32
+ triggeredFrom
33
+ }));
28
34
  }
29
35
  };
30
36
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
package/dist/es2019/ui/QuoteBlockMenuItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
@@ -13,10 +14,15 @@ const QuoteBlockMenuItem = ({
13
14
  } = useIntl();
14
15
  const currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
15
16
  const isBlockQuote = currentBlockType && currentBlockType === BLOCK_QUOTE;
16
- const handleClick = () => {
17
+ const handleClick = event => {
17
18
  if (!isBlockQuote) {
18
19
  var _api$blockMenu;
19
- api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(`blockquote`));
20
+ const inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
21
+ const triggeredFrom = INPUT_METHOD.BLOCK_MENU;
22
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode(`blockquote`, {
23
+ inputMethod,
24
+ triggeredFrom
25
+ }));
20
26
  }
21
27
  };
22
28
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
package/dist/esm/ui/HeadingBlockMenuItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -27,13 +28,18 @@ var HeadingBlockMenuItem = function HeadingBlockMenuItem(_ref) {
27
28
  var isHeading = isTextSelection && currentBlockType && HeadingBlockTypes.includes(currentBlockType);
28
29
  var currentHeadingLevel = isHeading ? currentBlockType.level : undefined;
29
30
  var isSelected = isHeading && currentHeadingLevel === level;
30
- var handleClick = function handleClick() {
31
+ var handleClick = function handleClick(event) {
31
32
  if (!selection) {
32
33
  return;
33
34
  }
34
35
  if (!isSelected) {
35
36
  var _api$blockMenu;
36
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("heading".concat(level)));
37
+ var inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
38
+ var triggeredFrom = INPUT_METHOD.BLOCK_MENU;
39
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("heading".concat(level), {
40
+ inputMethod: inputMethod,
41
+ triggeredFrom: triggeredFrom
42
+ }));
37
43
  }
38
44
  };
39
45
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
package/dist/esm/ui/ParagraphBlockMenuItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockMenuMessages } from '@atlaskit/editor-common/messages';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -16,13 +17,18 @@ var ParagraphBlockMenuItem = function ParagraphBlockMenuItem(_ref) {
16
17
  var selection = useSharedPluginStateSelector(api, 'selection.selection');
17
18
  var isTextSelection = selection instanceof TextSelection;
18
19
  var isParagraph = isTextSelection && currentBlockType && currentBlockType === NORMAL_TEXT && !bulletListActive && !orderedListActive;
19
- var handleClick = function handleClick() {
20
+ var handleClick = function handleClick(event) {
20
21
  if (!selection) {
21
22
  return;
22
23
  }
23
24
  if (!isParagraph) {
24
25
  var _api$blockMenu;
25
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("paragraph"));
26
+ var inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
27
+ var triggeredFrom = INPUT_METHOD.BLOCK_MENU;
28
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("paragraph", {
29
+ inputMethod: inputMethod,
30
+ triggeredFrom: triggeredFrom
31
+ }));
26
32
  }
27
33
  };
28
34
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
package/dist/esm/ui/QuoteBlockMenuItem.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
4
  import { blockTypeMessages } from '@atlaskit/editor-common/messages';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
@@ -11,10 +12,15 @@ var QuoteBlockMenuItem = function QuoteBlockMenuItem(_ref) {
11
12
  formatMessage = _useIntl.formatMessage;
12
13
  var currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
13
14
  var isBlockQuote = currentBlockType && currentBlockType === BLOCK_QUOTE;
14
- var handleClick = function handleClick() {
15
+ var handleClick = function handleClick(event) {
15
16
  if (!isBlockQuote) {
16
17
  var _api$blockMenu;
17
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("blockquote"));
18
+ var inputMethod = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
19
+ var triggeredFrom = INPUT_METHOD.BLOCK_MENU;
20
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.formatNode("blockquote", {
21
+ inputMethod: inputMethod,
22
+ triggeredFrom: triggeredFrom
23
+ }));
18
24
  }
19
25
  };
20
26
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-type",
3
- "version": "9.0.1",
3
+ "version": "9.0.2",
4
4
  "description": "BlockType plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  "dependencies": {
32
32
  "@atlaskit/adf-schema": "^51.2.0",
33
33
  "@atlaskit/css": "^0.14.0",
34
- "@atlaskit/editor-plugin-analytics": "^6.0.0",
34
+ "@atlaskit/editor-plugin-analytics": "^6.1.0",
35
35
  "@atlaskit/editor-plugin-block-menu": "^4.0.0",
36
36
  "@atlaskit/editor-plugin-list": "^8.0.0",
37
37
  "@atlaskit/editor-plugin-primary-toolbar": "^7.0.0",
@@ -44,19 +44,19 @@
44
44
  "@atlaskit/editor-toolbar": "^0.10.0",
45
45
  "@atlaskit/editor-toolbar-model": "^0.2.0",
46
46
  "@atlaskit/icon": "^28.3.0",
47
- "@atlaskit/icon-lab": "^5.7.0",
47
+ "@atlaskit/icon-lab": "^5.8.0",
48
48
  "@atlaskit/platform-feature-flags": "^1.1.0",
49
49
  "@atlaskit/platform-feature-flags-react": "^0.3.0",
50
50
  "@atlaskit/primitives": "^14.15.0",
51
51
  "@atlaskit/prosemirror-input-rules": "^3.4.0",
52
52
  "@atlaskit/theme": "^21.0.0",
53
53
  "@atlaskit/tmp-editor-statsig": "^12.32.0",
54
- "@atlaskit/tokens": "^6.3.0",
54
+ "@atlaskit/tokens": "^6.4.0",
55
55
  "@babel/runtime": "^7.0.0",
56
56
  "@emotion/react": "^11.7.1"
57
57
  },
58
58
  "peerDependencies": {
59
- "@atlaskit/editor-common": "^110.1.0",
59
+ "@atlaskit/editor-common": "^110.4.0",
60
60
  "react": "^18.2.0",
61
61
  "react-dom": "^18.2.0",
62
62
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -65,7 +65,7 @@
65
65
  "@af/visual-regression": "workspace:^",
66
66
  "@atlaskit/analytics-next": "^11.1.0",
67
67
  "@atlaskit/editor-plugin-quick-insert": "^6.0.0",
68
- "@atlaskit/editor-plugin-type-ahead": "^6.0.0",
68
+ "@atlaskit/editor-plugin-type-ahead": "^6.1.0",
69
69
  "@atlaskit/ssr": "workspace:^",
70
70
  "@testing-library/react": "^13.4.0",
71
71
  "@testing-library/user-event": "^14.4.3",