@reltio/components 1.4.1728 → 1.4.1730

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 (9) hide show
  1. package/cjs/components/BasicTableView/ColumnFilter/ColumnFilter.js +4 -4
  2. package/cjs/components/ReltioGridLayout/ReltioGridLayout.d.ts +8 -3
  3. package/cjs/components/ReltioGridLayout/ReltioGridLayout.js +3 -3
  4. package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.js +3 -2
  5. package/esm/components/BasicTableView/ColumnFilter/ColumnFilter.js +5 -5
  6. package/esm/components/ReltioGridLayout/ReltioGridLayout.d.ts +8 -3
  7. package/esm/components/ReltioGridLayout/ReltioGridLayout.js +3 -3
  8. package/esm/components/editors/TypeaheadEditor/TypeaheadEditor.js +4 -3
  9. package/package.json +2 -2
package/cjs/components/BasicTableView/ColumnFilter/ColumnFilter.js CHANGED
@@ -45,7 +45,9 @@ var ColumnFilter = function (_a) {
45
45
  var openFilterPopup = function (event) { return setAnchorEl(event.currentTarget); };
46
46
  var closeFilterPopup = function () { return setAnchorEl(null); };
47
47
  var _c = (0, react_1.useState)(filter), columnFilter = _c[0], setColumnFilter = _c[1];
48
- var initColumnFilter = function () { return setColumnFilter(filter); };
48
+ (0, react_1.useEffect)(function () {
49
+ setColumnFilter(filter);
50
+ }, [filter]);
49
51
  var containerRef = (0, react_1.useRef)(null);
50
52
  var mdmFilter = (0, helpers_1.columnFilterToMdmFilter)({ id: columnId, dataTypeDefinition: dataTypeDefinition }, columnFilter);
51
53
  var applyFilterChange = function (newFilter) {
@@ -96,9 +98,7 @@ var ColumnFilter = function (_a) {
96
98
  }, transformOrigin: {
97
99
  vertical: 'top',
98
100
  horizontal: 'right'
99
- }, classes: { paper: styles.filterMenu }, onClose: applyChangesAndClose, TransitionProps: {
100
- onEnter: initColumnFilter
101
- } },
101
+ }, classes: { paper: styles.filterMenu }, onClose: applyChangesAndClose },
102
102
  react_1.default.createElement(FilterEditor_1.default, { classes: { option: styles['filter-editor__option'] }, value: mdmFilter, onChange: (0, ramda_1.pipe)(helpers_1.mdmFilterToColumnFilter, setColumnFilter), filterOptions: filterOptions, dataTypeDefinition: getFilterDataTypeDefinition(mdmFilter.filter), valueEditorProps: {
103
103
  TextFieldProps: {
104
104
  onKeyPress: handleValueEditorKeyPress
package/cjs/components/ReltioGridLayout/ReltioGridLayout.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import React, { DragEvent, ElementType } from 'react';
1
+ import React, { ElementType } from 'react';
2
+ import { DragOverEvent } from 'react-grid-layout';
2
3
  import { ReltioGridLayoutItem } from '@reltio/mdm-sdk';
3
4
  import { ReactGridLayoutItem, ReltioGridLayoutOptions } from '../../types';
4
5
  type Props<ViewConfig = Record<string, unknown>> = {
@@ -6,7 +7,11 @@ type Props<ViewConfig = Record<string, unknown>> = {
6
7
  views?: ViewConfig[];
7
8
  layoutOptions?: ReltioGridLayoutOptions;
8
9
  onLayoutChanged?: (layout: ReltioGridLayoutItem[]) => void;
9
- onDrop?: (layout: ReltioGridLayoutItem[], layoutItem: ReltioGridLayoutItem, e: DragEvent<HTMLDivElement>) => void;
10
+ onDrop?: (layout: ReltioGridLayoutItem[], layoutItem: ReltioGridLayoutItem, e: Event) => void;
11
+ onDropDragOver?: (e: DragOverEvent) => {
12
+ w?: number;
13
+ h?: number;
14
+ } | false | undefined;
10
15
  onRemove?: (id: string) => void;
11
16
  LayoutItem: ElementType;
12
17
  draggableHandle?: string;
@@ -20,7 +25,7 @@ type Props<ViewConfig = Record<string, unknown>> = {
20
25
  onResize?: (layout: ReactGridLayoutItem[], oldLayoutItem: ReactGridLayoutItem, layoutItem: ReactGridLayoutItem, placeholder: ReactGridLayoutItem) => void;
21
26
  };
22
27
  declare const _default: React.MemoExoticComponent<{
23
- ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, isStatic, classes, onResize }: Props<Record<string, unknown>>): JSX.Element;
28
+ ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, onDropDragOver, isStatic, classes, onResize }: Props<Record<string, unknown>>): JSX.Element;
24
29
  displayName: string;
25
30
  }>;
26
31
  export default _default;
package/cjs/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -52,7 +52,7 @@ var DEFAULT_LAYOUT_OPTIONS = {
52
52
  };
53
53
  var ReltioGridLayout = function (_a) {
54
54
  var _b;
55
- var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? core_1.noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, isStatic = _a.isStatic, classes = _a.classes, _e = _a.onResize, onResize = _e === void 0 ? core_1.noop : _e;
55
+ var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? core_1.noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, onDropDragOver = _a.onDropDragOver, isStatic = _a.isStatic, classes = _a.classes, _e = _a.onResize, onResize = _e === void 0 ? core_1.noop : _e;
56
56
  var ref = (0, react_1.useRef)();
57
57
  var heightsMap = (0, react_1.useRef)({});
58
58
  var styles = (0, styles_1.useStyles)();
@@ -63,7 +63,7 @@ var ReltioGridLayout = function (_a) {
63
63
  var processedLayout = (0, react_1.useMemo)(function () { return (0, helpers_1.reltioLayoutToReactGridLayout)(layout); }, [layout]);
64
64
  var onReltioLayoutChanged = (0, ramda_1.pipe)(helpers_1.reactGridLayoutToReltioLayout, (0, helpers_1.copyPropsFromPreviousLayout)(['autosizing'], layout), (0, ramda_1.ifElse)((0, ramda_1.always)(isStatic), (0, helpers_1.alignGroupedItemsHeights)(heightsMap.current), (0, helpers_1.calcLayoutItemsHeight)(heightsMap.current)), onLayoutChanged);
65
65
  var handleDrop = function (layout, layoutItem, e) {
66
- if (onDrop) {
66
+ if (onDrop && layoutItem) {
67
67
  onDrop((0, helpers_1.reactGridLayoutToReltioLayout)(layout), (0, helpers_1.reactGridLayoutItemToReltioLayoutItem)(layoutItem), e);
68
68
  }
69
69
  };
@@ -82,7 +82,7 @@ var ReltioGridLayout = function (_a) {
82
82
  react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
83
83
  !!width && (react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: (0, classnames_1.default)(classes === null || classes === void 0 ? void 0 : classes.root, styles.gridLayout, (_b = {},
84
84
  _b[styles.gridFullscreen] = isFullscreenEnabled,
85
- _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, onResize: onResize, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
85
+ _b)), onDrop: handleDrop, onDropDragOver: onDropDragOver, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, onResize: onResize, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
86
86
  var _a;
87
87
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
88
88
  var isResizing = resizingItemId === layoutItem.i;
package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.js CHANGED
@@ -122,6 +122,7 @@ var TypeaheadEditor = function (_a) {
122
122
  var value = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
123
123
  var styles = (0, styles_1.useStyles)();
124
124
  var inputRef = (0, react_1.useRef)(null);
125
+ var safePromise = (0, hooks_1.useSafePromise)();
125
126
  var _e = (0, react_1.useState)([]), suggestions = _e[0], setSuggestions = _e[1];
126
127
  var _f = (0, react_1.useState)(false), isPlaceholderVisible = _f[0], setPlaceholderVisibility = _f[1];
127
128
  var _g = (0, react_1.useState)(1), pageNumber = _g[0], setPageNumber = _g[1];
@@ -138,7 +139,7 @@ var TypeaheadEditor = function (_a) {
138
139
  var response;
139
140
  return __generator(this, function (_b) {
140
141
  switch (_b.label) {
141
- case 0: return [4 /*yield*/, getSuggestions(value.trim(), pageSizeForRequest)];
142
+ case 0: return [4 /*yield*/, safePromise(getSuggestions(value.trim(), pageSizeForRequest))];
142
143
  case 1:
143
144
  response = _b.sent();
144
145
  setSuggestions(response);
@@ -147,7 +148,7 @@ var TypeaheadEditor = function (_a) {
147
148
  }
148
149
  });
149
150
  });
150
- }, [getSuggestions, pageSizeForRequest]);
151
+ }, [safePromise, getSuggestions, pageSizeForRequest]);
151
152
  var debouncedFetchSuggestions = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(fetchSuggestions, FETCH_DEBOUNCE_INTERVAL), [
152
153
  getSuggestions
153
154
  ]);
package/esm/components/BasicTableView/ColumnFilter/ColumnFilter.js CHANGED
@@ -4,7 +4,7 @@ import FilterEditor from '../../editors/FilterEditor/FilterEditor';
4
4
  import IconButton from '@mui/material/IconButton';
5
5
  import Popover from '@mui/material/Popover';
6
6
  import PropTypes from 'prop-types';
7
- import React, { useRef, useState } from 'react';
7
+ import React, { useEffect, useRef, useState } from 'react';
8
8
  import { ColumnFilterType } from '../../../constants';
9
9
  import { defaultTo, pipe, pluck, prop, propEq } from 'ramda';
10
10
  import { useStyles } from './styles';
@@ -17,7 +17,9 @@ var ColumnFilter = function (_a) {
17
17
  var openFilterPopup = function (event) { return setAnchorEl(event.currentTarget); };
18
18
  var closeFilterPopup = function () { return setAnchorEl(null); };
19
19
  var _c = useState(filter), columnFilter = _c[0], setColumnFilter = _c[1];
20
- var initColumnFilter = function () { return setColumnFilter(filter); };
20
+ useEffect(function () {
21
+ setColumnFilter(filter);
22
+ }, [filter]);
21
23
  var containerRef = useRef(null);
22
24
  var mdmFilter = columnFilterToMdmFilter({ id: columnId, dataTypeDefinition: dataTypeDefinition }, columnFilter);
23
25
  var applyFilterChange = function (newFilter) {
@@ -68,9 +70,7 @@ var ColumnFilter = function (_a) {
68
70
  }, transformOrigin: {
69
71
  vertical: 'top',
70
72
  horizontal: 'right'
71
- }, classes: { paper: styles.filterMenu }, onClose: applyChangesAndClose, TransitionProps: {
72
- onEnter: initColumnFilter
73
- } },
73
+ }, classes: { paper: styles.filterMenu }, onClose: applyChangesAndClose },
74
74
  React.createElement(FilterEditor, { classes: { option: styles['filter-editor__option'] }, value: mdmFilter, onChange: pipe(mdmFilterToColumnFilter, setColumnFilter), filterOptions: filterOptions, dataTypeDefinition: getFilterDataTypeDefinition(mdmFilter.filter), valueEditorProps: {
75
75
  TextFieldProps: {
76
76
  onKeyPress: handleValueEditorKeyPress
package/esm/components/ReltioGridLayout/ReltioGridLayout.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import React, { DragEvent, ElementType } from 'react';
1
+ import React, { ElementType } from 'react';
2
+ import { DragOverEvent } from 'react-grid-layout';
2
3
  import { ReltioGridLayoutItem } from '@reltio/mdm-sdk';
3
4
  import { ReactGridLayoutItem, ReltioGridLayoutOptions } from '../../types';
4
5
  type Props<ViewConfig = Record<string, unknown>> = {
@@ -6,7 +7,11 @@ type Props<ViewConfig = Record<string, unknown>> = {
6
7
  views?: ViewConfig[];
7
8
  layoutOptions?: ReltioGridLayoutOptions;
8
9
  onLayoutChanged?: (layout: ReltioGridLayoutItem[]) => void;
9
- onDrop?: (layout: ReltioGridLayoutItem[], layoutItem: ReltioGridLayoutItem, e: DragEvent<HTMLDivElement>) => void;
10
+ onDrop?: (layout: ReltioGridLayoutItem[], layoutItem: ReltioGridLayoutItem, e: Event) => void;
11
+ onDropDragOver?: (e: DragOverEvent) => {
12
+ w?: number;
13
+ h?: number;
14
+ } | false | undefined;
10
15
  onRemove?: (id: string) => void;
11
16
  LayoutItem: ElementType;
12
17
  draggableHandle?: string;
@@ -20,7 +25,7 @@ type Props<ViewConfig = Record<string, unknown>> = {
20
25
  onResize?: (layout: ReactGridLayoutItem[], oldLayoutItem: ReactGridLayoutItem, layoutItem: ReactGridLayoutItem, placeholder: ReactGridLayoutItem) => void;
21
26
  };
22
27
  declare const _default: React.MemoExoticComponent<{
23
- ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, isStatic, classes, onResize }: Props<Record<string, unknown>>): JSX.Element;
28
+ ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, onDropDragOver, isStatic, classes, onResize }: Props<Record<string, unknown>>): JSX.Element;
24
29
  displayName: string;
25
30
  }>;
26
31
  export default _default;
package/esm/components/ReltioGridLayout/ReltioGridLayout.js CHANGED
@@ -24,7 +24,7 @@ var DEFAULT_LAYOUT_OPTIONS = {
24
24
  };
25
25
  var ReltioGridLayout = function (_a) {
26
26
  var _b;
27
- var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, isStatic = _a.isStatic, classes = _a.classes, _e = _a.onResize, onResize = _e === void 0 ? noop : _e;
27
+ var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, onDropDragOver = _a.onDropDragOver, isStatic = _a.isStatic, classes = _a.classes, _e = _a.onResize, onResize = _e === void 0 ? noop : _e;
28
28
  var ref = useRef();
29
29
  var heightsMap = useRef({});
30
30
  var styles = useStyles();
@@ -35,7 +35,7 @@ var ReltioGridLayout = function (_a) {
35
35
  var processedLayout = useMemo(function () { return reltioLayoutToReactGridLayout(layout); }, [layout]);
36
36
  var onReltioLayoutChanged = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), ifElse(always(isStatic), alignGroupedItemsHeights(heightsMap.current), calcLayoutItemsHeight(heightsMap.current)), onLayoutChanged);
37
37
  var handleDrop = function (layout, layoutItem, e) {
38
- if (onDrop) {
38
+ if (onDrop && layoutItem) {
39
39
  onDrop(reactGridLayoutToReltioLayout(layout), reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
40
40
  }
41
41
  };
@@ -54,7 +54,7 @@ var ReltioGridLayout = function (_a) {
54
54
  React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
55
55
  !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: classnames(classes === null || classes === void 0 ? void 0 : classes.root, styles.gridLayout, (_b = {},
56
56
  _b[styles.gridFullscreen] = isFullscreenEnabled,
57
- _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, onResize: onResize, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
57
+ _b)), onDrop: handleDrop, onDropDragOver: onDropDragOver, droppingItem: droppingItem, isDroppable: !isStatic && isDroppable, onResizeStart: function (_, layoutItem) { return setResizingItemId(layoutItem.i); }, onResizeStop: function () { return setResizingItemId(null); }, onResize: onResize, "data-reltio-id": "reltio-grid-layout" }, processedLayout.map(function (layoutItem) {
58
58
  var _a;
59
59
  var isItemFullscreen = fullscreenItemId === layoutItem.i;
60
60
  var isResizing = resizingItemId === layoutItem.i;
package/esm/components/editors/TypeaheadEditor/TypeaheadEditor.js CHANGED
@@ -74,7 +74,7 @@ import AutosizeInput from 'react-input-autosize';
74
74
  import TextField from '@mui/material/TextField';
75
75
  import MenuItem from '@mui/material/MenuItem';
76
76
  import Paper from '@mui/material/Paper';
77
- import { useDidUpdateEffect } from '../../../hooks';
77
+ import { useDidUpdateEffect, useSafePromise } from '../../../hooks';
78
78
  import Popper from '../../Popper/Popper';
79
79
  import { NoResults } from '../../../components/EmptySearchResult';
80
80
  import ExpandedValueTooltip from '../../ExpandedValueTooltip/ExpandedValueTooltip';
@@ -94,6 +94,7 @@ var TypeaheadEditor = function (_a) {
94
94
  var value = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
95
95
  var styles = useStyles();
96
96
  var inputRef = useRef(null);
97
+ var safePromise = useSafePromise();
97
98
  var _e = useState([]), suggestions = _e[0], setSuggestions = _e[1];
98
99
  var _f = useState(false), isPlaceholderVisible = _f[0], setPlaceholderVisibility = _f[1];
99
100
  var _g = useState(1), pageNumber = _g[0], setPageNumber = _g[1];
@@ -110,7 +111,7 @@ var TypeaheadEditor = function (_a) {
110
111
  var response;
111
112
  return __generator(this, function (_b) {
112
113
  switch (_b.label) {
113
- case 0: return [4 /*yield*/, getSuggestions(value.trim(), pageSizeForRequest)];
114
+ case 0: return [4 /*yield*/, safePromise(getSuggestions(value.trim(), pageSizeForRequest))];
114
115
  case 1:
115
116
  response = _b.sent();
116
117
  setSuggestions(response);
@@ -119,7 +120,7 @@ var TypeaheadEditor = function (_a) {
119
120
  }
120
121
  });
121
122
  });
122
- }, [getSuggestions, pageSizeForRequest]);
123
+ }, [safePromise, getSuggestions, pageSizeForRequest]);
123
124
  var debouncedFetchSuggestions = useCallback(debounce(fetchSuggestions, FETCH_DEBOUNCE_INTERVAL), [
124
125
  getSuggestions
125
126
  ]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1728",
3
+ "version": "1.4.1730",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
@@ -22,7 +22,7 @@
22
22
  "react-components": "bitbucket:reltio-ondemand/react-components#v3.23.1",
23
23
  "react-dnd": "^9.4.0",
24
24
  "react-dnd-html5-backend": "^10.0.2",
25
- "react-grid-layout": "^1.1.1",
25
+ "react-grid-layout": "1.4.2",
26
26
  "react-input-autosize": "^2.2.2",
27
27
  "react-lifecycles-compat": "^3.0.4",
28
28
  "react-mentions": "4.3.0",