@atlaskit/editor-plugin-text-color 10.1.4 → 10.1.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-text-color
2
2
 
3
+ ## 10.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`41962dd9dccb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/41962dd9dccb2) -
8
+ NO-ISSUE: adds a default toolbar state so we can render the toolbar on initial load without
9
+ relying on editor state
10
+ - Updated dependencies
11
+
3
12
  ## 10.1.4
4
13
 
5
14
  ### Patch Changes
@@ -7,11 +7,14 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.TextColorHighlightMenu = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _reactIntl = require("react-intl");
10
+ var _hooks = require("@atlaskit/editor-common/hooks");
10
11
  var _keymaps = require("@atlaskit/editor-common/keymaps");
11
12
  var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
13
14
  var _editorPalette = require("@atlaskit/editor-palette");
14
15
  var _editorToolbar = require("@atlaskit/editor-toolbar");
16
+ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
17
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
15
18
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
16
19
  var getIconColor = function getIconColor(textColor, defaultColor, highlightColor) {
17
20
  if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
@@ -25,21 +28,52 @@ var getHighlightColorIcon = function getHighlightColorIcon(highlightColor) {
25
28
  }
26
29
  return undefined;
27
30
  };
31
+ var useTextColorHighlightMenuStateNew = function useTextColorHighlightMenuStateNew(api) {
32
+ return (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor', 'highlight', 'interaction'], function (states) {
33
+ var _states$interactionSt, _states$textColorStat, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4, _states$highlightStat;
34
+ var useDefaultToolbarState = ((_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState) === 'hasNotHadInteraction';
35
+ return {
36
+ isTextColorDisabled: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.disabled,
37
+ textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
38
+ defaultColor: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.defaultColor,
39
+ isPaletteOpen: (_states$textColorStat4 = states.textColorState) === null || _states$textColorStat4 === void 0 ? void 0 : _states$textColorStat4.isPaletteOpen,
40
+ highlightColor: useDefaultToolbarState ? undefined : (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor
41
+ };
42
+ });
43
+ };
44
+ var useTextColorHighlightMenuStateOld = function useTextColorHighlightMenuStateOld(api) {
45
+ var isTextColorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.disabled');
46
+ var textColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.color');
47
+ var defaultColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.defaultColor');
48
+ var isPaletteOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.isPaletteOpen');
49
+ var highlightColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
50
+ return {
51
+ isTextColorDisabled: isTextColorDisabled,
52
+ textColor: textColor,
53
+ defaultColor: defaultColor,
54
+ isPaletteOpen: isPaletteOpen,
55
+ highlightColor: highlightColor
56
+ };
57
+ };
58
+ var useTextColorHighlightMenuState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
59
+ return (0, _expValEquals.expValEquals)('platform_editor_default_toolbar_state', 'isEnabled', true);
60
+ }, useTextColorHighlightMenuStateNew, useTextColorHighlightMenuStateOld);
28
61
  var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
29
62
  var _api$textColor2;
30
63
  var children = _ref.children,
31
64
  api = _ref.api;
32
65
  var isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
33
- var isTextColorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.disabled');
34
66
  var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
35
67
  isToolbarDisabled = _useToolbarUI.isDisabled;
68
+ var _useTextColorHighligh = useTextColorHighlightMenuState(api),
69
+ isTextColorDisabled = _useTextColorHighligh.isTextColorDisabled,
70
+ textColor = _useTextColorHighligh.textColor,
71
+ defaultColor = _useTextColorHighligh.defaultColor,
72
+ isPaletteOpen = _useTextColorHighligh.isPaletteOpen,
73
+ highlightColor = _useTextColorHighligh.highlightColor;
36
74
  var isDisabled = Boolean(isToolbarDisabled || isTextColorDisabled);
37
- var highlightColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'highlight.activeColor');
38
- var textColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.color');
39
75
  var _useIntl = (0, _reactIntl.useIntl)(),
40
76
  formatMessage = _useIntl.formatMessage;
41
- var defaultColor = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.defaultColor');
42
- var isPaletteOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'textColor.isPaletteOpen');
43
77
  var setIsPaletteOpen = (0, _react.useCallback)(function (isOpen) {
44
78
  var _api$textColor;
45
79
  if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.commands) !== null && _api$textColor !== void 0 && _api$textColor.setPalette) {
@@ -1,10 +1,13 @@
1
1
  import React, { useCallback, useEffect } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
4
  import { toggleHighlightPalette, ToolTipContent } from '@atlaskit/editor-common/keymaps';
4
5
  import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
6
7
  import { hexToEditorTextPaletteColor, hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
7
8
  import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarDropdownMenuProvider, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
9
+ import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
10
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
11
  const getIconColor = (textColor, defaultColor, highlightColor) => {
9
12
  if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
10
13
  return "var(--ds-text, #292A2E)";
@@ -17,24 +20,54 @@ const getHighlightColorIcon = highlightColor => {
17
20
  }
18
21
  return undefined;
19
22
  };
23
+ const useTextColorHighlightMenuStateNew = api => {
24
+ return useSharedPluginStateWithSelector(api, ['textColor', 'highlight', 'interaction'], states => {
25
+ var _states$interactionSt, _states$textColorStat, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4, _states$highlightStat;
26
+ const useDefaultToolbarState = ((_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState) === 'hasNotHadInteraction';
27
+ return {
28
+ isTextColorDisabled: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.disabled,
29
+ textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
30
+ defaultColor: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.defaultColor,
31
+ isPaletteOpen: (_states$textColorStat4 = states.textColorState) === null || _states$textColorStat4 === void 0 ? void 0 : _states$textColorStat4.isPaletteOpen,
32
+ highlightColor: useDefaultToolbarState ? undefined : (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor
33
+ };
34
+ });
35
+ };
36
+ const useTextColorHighlightMenuStateOld = api => {
37
+ const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
38
+ const textColor = useSharedPluginStateSelector(api, 'textColor.color');
39
+ const defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
40
+ const isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
41
+ const highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
42
+ return {
43
+ isTextColorDisabled,
44
+ textColor,
45
+ defaultColor,
46
+ isPaletteOpen,
47
+ highlightColor
48
+ };
49
+ };
50
+ const useTextColorHighlightMenuState = conditionalHooksFactory(() => expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true), useTextColorHighlightMenuStateNew, useTextColorHighlightMenuStateOld);
20
51
  export const TextColorHighlightMenu = ({
21
52
  children,
22
53
  api
23
54
  }) => {
24
55
  var _api$textColor2;
25
56
  const isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
26
- const isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
27
57
  const {
28
58
  isDisabled: isToolbarDisabled
29
59
  } = useToolbarUI();
60
+ const {
61
+ isTextColorDisabled,
62
+ textColor,
63
+ defaultColor,
64
+ isPaletteOpen,
65
+ highlightColor
66
+ } = useTextColorHighlightMenuState(api);
30
67
  const isDisabled = Boolean(isToolbarDisabled || isTextColorDisabled);
31
- const highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
32
- const textColor = useSharedPluginStateSelector(api, 'textColor.color');
33
68
  const {
34
69
  formatMessage
35
70
  } = useIntl();
36
- const defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
37
- const isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
38
71
  const setIsPaletteOpen = useCallback(isOpen => {
39
72
  var _api$textColor, _api$textColor$comman;
40
73
  if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor$comman = _api$textColor.commands) !== null && _api$textColor$comman !== void 0 && _api$textColor$comman.setPalette) {
@@ -1,10 +1,13 @@
1
1
  import React, { useCallback, useEffect } from 'react';
2
2
  import { useIntl } from 'react-intl';
3
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
4
  import { toggleHighlightPalette, ToolTipContent } from '@atlaskit/editor-common/keymaps';
4
5
  import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
5
6
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
6
7
  import { hexToEditorTextPaletteColor, hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
7
8
  import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarDropdownMenuProvider, ToolbarTooltip, useToolbarUI } from '@atlaskit/editor-toolbar';
9
+ import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
10
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
11
  var getIconColor = function getIconColor(textColor, defaultColor, highlightColor) {
9
12
  if (highlightColor || !textColor || textColor === defaultColor && defaultColor) {
10
13
  return "var(--ds-text, #292A2E)";
@@ -17,21 +20,52 @@ var getHighlightColorIcon = function getHighlightColorIcon(highlightColor) {
17
20
  }
18
21
  return undefined;
19
22
  };
23
+ var useTextColorHighlightMenuStateNew = function useTextColorHighlightMenuStateNew(api) {
24
+ return useSharedPluginStateWithSelector(api, ['textColor', 'highlight', 'interaction'], function (states) {
25
+ var _states$interactionSt, _states$textColorStat, _states$textColorStat2, _states$textColorStat3, _states$textColorStat4, _states$highlightStat;
26
+ var useDefaultToolbarState = ((_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState) === 'hasNotHadInteraction';
27
+ return {
28
+ isTextColorDisabled: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.disabled,
29
+ textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color,
30
+ defaultColor: (_states$textColorStat3 = states.textColorState) === null || _states$textColorStat3 === void 0 ? void 0 : _states$textColorStat3.defaultColor,
31
+ isPaletteOpen: (_states$textColorStat4 = states.textColorState) === null || _states$textColorStat4 === void 0 ? void 0 : _states$textColorStat4.isPaletteOpen,
32
+ highlightColor: useDefaultToolbarState ? undefined : (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor
33
+ };
34
+ });
35
+ };
36
+ var useTextColorHighlightMenuStateOld = function useTextColorHighlightMenuStateOld(api) {
37
+ var isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
38
+ var textColor = useSharedPluginStateSelector(api, 'textColor.color');
39
+ var defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
40
+ var isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
41
+ var highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
42
+ return {
43
+ isTextColorDisabled: isTextColorDisabled,
44
+ textColor: textColor,
45
+ defaultColor: defaultColor,
46
+ isPaletteOpen: isPaletteOpen,
47
+ highlightColor: highlightColor
48
+ };
49
+ };
50
+ var useTextColorHighlightMenuState = conditionalHooksFactory(function () {
51
+ return expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true);
52
+ }, useTextColorHighlightMenuStateNew, useTextColorHighlightMenuStateOld);
20
53
  export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
21
54
  var _api$textColor2;
22
55
  var children = _ref.children,
23
56
  api = _ref.api;
24
57
  var isHighlightPluginExisted = !!(api !== null && api !== void 0 && api.highlight);
25
- var isTextColorDisabled = useSharedPluginStateSelector(api, 'textColor.disabled');
26
58
  var _useToolbarUI = useToolbarUI(),
27
59
  isToolbarDisabled = _useToolbarUI.isDisabled;
60
+ var _useTextColorHighligh = useTextColorHighlightMenuState(api),
61
+ isTextColorDisabled = _useTextColorHighligh.isTextColorDisabled,
62
+ textColor = _useTextColorHighligh.textColor,
63
+ defaultColor = _useTextColorHighligh.defaultColor,
64
+ isPaletteOpen = _useTextColorHighligh.isPaletteOpen,
65
+ highlightColor = _useTextColorHighligh.highlightColor;
28
66
  var isDisabled = Boolean(isToolbarDisabled || isTextColorDisabled);
29
- var highlightColor = useSharedPluginStateSelector(api, 'highlight.activeColor');
30
- var textColor = useSharedPluginStateSelector(api, 'textColor.color');
31
67
  var _useIntl = useIntl(),
32
68
  formatMessage = _useIntl.formatMessage;
33
- var defaultColor = useSharedPluginStateSelector(api, 'textColor.defaultColor');
34
- var isPaletteOpen = useSharedPluginStateSelector(api, 'textColor.isPaletteOpen');
35
69
  var setIsPaletteOpen = useCallback(function (isOpen) {
36
70
  var _api$textColor;
37
71
  if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.commands) !== null && _api$textColor !== void 0 && _api$textColor.setPalette) {
@@ -1,6 +1,7 @@
1
1
  import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
3
  import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
4
+ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
4
5
  import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
5
6
  import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
6
7
  import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -14,7 +15,8 @@ export type Dependencies = [
14
15
  OptionalPlugin<SelectionToolbarPlugin>,
15
16
  OptionalPlugin<ToolbarPlugin>,
16
17
  OptionalPlugin<UserPreferencesPlugin>,
17
- OptionalPlugin<HighlightPlugin>
18
+ OptionalPlugin<HighlightPlugin>,
19
+ OptionalPlugin<InteractionPlugin>
18
20
  ];
19
21
  export type TextColorPlugin = NextEditorPlugin<'textColor', {
20
22
  actions: {
@@ -1,6 +1,7 @@
1
1
  import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
3
3
  import type { HighlightPlugin } from '@atlaskit/editor-plugin-highlight';
4
+ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
4
5
  import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
5
6
  import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
6
7
  import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -14,7 +15,8 @@ export type Dependencies = [
14
15
  OptionalPlugin<SelectionToolbarPlugin>,
15
16
  OptionalPlugin<ToolbarPlugin>,
16
17
  OptionalPlugin<UserPreferencesPlugin>,
17
- OptionalPlugin<HighlightPlugin>
18
+ OptionalPlugin<HighlightPlugin>,
19
+ OptionalPlugin<InteractionPlugin>
18
20
  ];
19
21
  export type TextColorPlugin = NextEditorPlugin<'textColor', {
20
22
  actions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-text-color",
3
- "version": "10.1.4",
3
+ "version": "10.1.5",
4
4
  "description": "Text color plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,24 +35,26 @@
35
35
  "@atlaskit/editor-palette": "^2.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^10.1.0",
37
37
  "@atlaskit/editor-plugin-highlight": "^10.1.0",
38
+ "@atlaskit/editor-plugin-interaction": "^19.1.0",
38
39
  "@atlaskit/editor-plugin-primary-toolbar": "^11.1.0",
39
40
  "@atlaskit/editor-plugin-selection-toolbar": "^11.3.0",
40
41
  "@atlaskit/editor-plugin-toolbar": "^7.3.0",
41
42
  "@atlaskit/editor-prosemirror": "^7.3.0",
42
43
  "@atlaskit/editor-shared-styles": "^3.11.0",
43
- "@atlaskit/editor-toolbar": "^1.6.0",
44
+ "@atlaskit/editor-toolbar": "^1.7.0",
44
45
  "@atlaskit/editor-toolbar-model": "^0.5.0",
45
46
  "@atlaskit/heading": "^5.4.0",
46
47
  "@atlaskit/icon": "^35.0.0",
47
48
  "@atlaskit/platform-feature-flags": "^1.1.0",
49
+ "@atlaskit/platform-feature-flags-react": "^0.5.0",
48
50
  "@atlaskit/primitives": "^19.0.0",
49
- "@atlaskit/tmp-editor-statsig": "^82.0.0",
51
+ "@atlaskit/tmp-editor-statsig": "^82.4.0",
50
52
  "@atlaskit/tokens": "^13.0.0",
51
53
  "@babel/runtime": "^7.0.0",
52
54
  "@emotion/react": "^11.7.1"
53
55
  },
54
56
  "peerDependencies": {
55
- "@atlaskit/editor-common": "^114.36.0",
57
+ "@atlaskit/editor-common": "^114.41.0",
56
58
  "react": "^18.2.0",
57
59
  "react-dom": "^18.2.0",
58
60
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -60,6 +62,8 @@
60
62
  "devDependencies": {
61
63
  "@atlassian/structured-docs-types": "workspace:^",
62
64
  "@testing-library/react": "^16.3.0",
65
+ "react": "^18.2.0",
66
+ "react-dom": "^18.2.0",
63
67
  "react-intl": "^6.6.2",
64
68
  "wait-for-expect": "^1.2.0"
65
69
  },