@atlaskit/editor-plugin-type-ahead 1.1.6 → 1.1.8

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 (7) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/ui/TypeAheadListItem.js +50 -34
  3. package/dist/es2019/ui/TypeAheadListItem.js +52 -34
  4. package/dist/esm/ui/TypeAheadListItem.js +50 -34
  5. package/dist/types/ui/TypeAheadListItem.d.ts +3 -1
  6. package/dist/types-ts4.5/ui/TypeAheadListItem.d.ts +3 -1
  7. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 1.1.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#97599](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97599)
8
+ [`32c3130b08fe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/32c3130b08fe) -
9
+ [ED-22282] Bump adf-schema to 36.1.0
10
+
11
+ ## 1.1.7
12
+
13
+ ### Patch Changes
14
+
15
+ - [#98137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98137)
16
+ [`b1ddc8df2070`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b1ddc8df2070) -
17
+ [ED-23195] Refactor React components to use useRef inside functional components
18
+ - Updated dependencies
19
+
3
20
  ## 1.1.6
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/ui/TypeAheadListItem.js CHANGED
@@ -66,7 +66,40 @@ var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
66
66
  return (0, _react2.jsx)(_quickInsert.IconFallback, null);
67
67
  });
68
68
  var noop = function noop() {};
69
- var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_ref2) {
69
+ var CustomItemComponentWrapper = /*#__PURE__*/_react.default.memo(function (props) {
70
+ var customRenderItem = props.customRenderItem,
71
+ isSelected = props.isSelected,
72
+ ariaLabel = props.ariaLabel,
73
+ itemsLength = props.itemsLength,
74
+ customItemRef = props.customItemRef,
75
+ insertSelectedItem = props.insertSelectedItem,
76
+ itemIndex = props.itemIndex;
77
+ var Comp = customRenderItem;
78
+ var listItemClasses = (0, _react.useMemo)(function () {
79
+ return [customRenderItemDivStyle, isSelected && selectedStyle];
80
+ }, [isSelected]);
81
+ return (0, _react2.jsx)("div", {
82
+ "aria-selected": isSelected,
83
+ role: "option",
84
+ "aria-label": ariaLabel,
85
+ "aria-setsize": itemsLength,
86
+ "aria-posinset": itemIndex,
87
+ tabIndex: 0,
88
+ css: listItemClasses,
89
+ className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
90
+ //CSS classes added for test cases purpose
91
+ ,
92
+ ref: customItemRef
93
+ }, (0, _react2.jsx)("div", {
94
+ "aria-hidden": true
95
+ }, (0, _react2.jsx)(Comp, {
96
+ onClick: insertSelectedItem,
97
+ isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
98
+ ,
99
+ onHover: noop
100
+ })));
101
+ });
102
+ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.memo(function (_ref2) {
70
103
  var item = _ref2.item,
71
104
  itemsLength = _ref2.itemsLength,
72
105
  selectedIndex = _ref2.selectedIndex,
@@ -96,9 +129,12 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
96
129
  var insertSelectedItem = (0, _react.useCallback)(function () {
97
130
  onItemClick(_typeAhead.SelectItemMode.SELECTED, itemIndex);
98
131
  }, [onItemClick, itemIndex]);
99
- var customItemRef = /*#__PURE__*/_react.default.createRef();
100
- var buttonItemRef = /*#__PURE__*/_react.default.createRef();
132
+ var customItemRef = _react.default.useRef(null);
133
+ var buttonItemRef = _react.default.useRef(null);
101
134
  var shouldUpdateFocus = selectedIndex === itemIndex;
135
+ var listItemClasses = (0, _react.useMemo)(function () {
136
+ return [selectionFrame, isSelected && selectedStyle];
137
+ }, [isSelected]);
102
138
  (0, _react.useLayoutEffect)(function () {
103
139
  if (shouldUpdateFocus) {
104
140
  var _customItemRef$curren;
@@ -111,37 +147,17 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
111
147
  buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
112
148
  }
113
149
  }, [buttonItemRef, shouldUpdateFocus]);
114
- var customItem = (0, _react.useMemo)(function () {
115
- if (!customRenderItem) {
116
- return null;
117
- }
118
- var Comp = customRenderItem;
119
- var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
120
- return (0, _react2.jsx)("div", {
121
- "aria-selected": isSelected,
122
- role: "option",
123
- "aria-label": ariaLabel,
124
- "aria-setsize": itemsLength,
125
- "aria-posinset": itemIndex,
126
- tabIndex: 0,
127
- css: listItemClasses,
128
- className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
129
- //CSS classes added for test cases purpose
130
- ,
131
- ref: customItemRef
132
- }, (0, _react2.jsx)("div", {
133
- "aria-hidden": true
134
- }, (0, _react2.jsx)(Comp, {
135
- onClick: insertSelectedItem,
136
- isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
137
- ,
138
- onHover: noop
139
- })));
140
- }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
141
- if (customItem) {
142
- return customItem;
150
+ if (customRenderItem) {
151
+ return (0, _react2.jsx)(CustomItemComponentWrapper, {
152
+ customRenderItem: customRenderItem,
153
+ isSelected: isSelected,
154
+ ariaLabel: ariaLabel,
155
+ itemsLength: itemsLength,
156
+ customItemRef: customItemRef,
157
+ insertSelectedItem: insertSelectedItem,
158
+ itemIndex: itemIndex
159
+ });
143
160
  }
144
- var listItemClasses = [selectionFrame, isSelected && selectedStyle];
145
161
  return (0, _react2.jsx)("span", {
146
162
  css: listItemClasses
147
163
  }, (0, _react2.jsx)(_menu.ButtonItem, {
@@ -173,4 +189,4 @@ var TypeAheadListItem = exports.TypeAheadListItem = function TypeAheadListItem(_
173
189
  }, item.keyshortcut))), (0, _react2.jsx)("div", {
174
190
  className: "item-description"
175
191
  }, item.description)))));
176
- };
192
+ });
package/dist/es2019/ui/TypeAheadListItem.js CHANGED
@@ -84,7 +84,42 @@ const FallbackIcon = /*#__PURE__*/React.memo(({
84
84
  return jsx(IconFallback, null);
85
85
  });
86
86
  const noop = () => {};
87
- export const TypeAheadListItem = ({
87
+ const CustomItemComponentWrapper = /*#__PURE__*/React.memo(props => {
88
+ const {
89
+ customRenderItem,
90
+ isSelected,
91
+ ariaLabel,
92
+ itemsLength,
93
+ customItemRef,
94
+ insertSelectedItem,
95
+ itemIndex
96
+ } = props;
97
+ const Comp = customRenderItem;
98
+ const listItemClasses = useMemo(() => {
99
+ return [customRenderItemDivStyle, isSelected && selectedStyle];
100
+ }, [isSelected]);
101
+ return jsx("div", {
102
+ "aria-selected": isSelected,
103
+ role: "option",
104
+ "aria-label": ariaLabel,
105
+ "aria-setsize": itemsLength,
106
+ "aria-posinset": itemIndex,
107
+ tabIndex: 0,
108
+ css: listItemClasses,
109
+ className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}`
110
+ //CSS classes added for test cases purpose
111
+ ,
112
+ ref: customItemRef
113
+ }, jsx("div", {
114
+ "aria-hidden": true
115
+ }, jsx(Comp, {
116
+ onClick: insertSelectedItem,
117
+ isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
118
+ ,
119
+ onHover: noop
120
+ })));
121
+ });
122
+ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
88
123
  item,
89
124
  itemsLength,
90
125
  selectedIndex,
@@ -117,9 +152,12 @@ export const TypeAheadListItem = ({
117
152
  const insertSelectedItem = useCallback(() => {
118
153
  onItemClick(SelectItemMode.SELECTED, itemIndex);
119
154
  }, [onItemClick, itemIndex]);
120
- const customItemRef = /*#__PURE__*/React.createRef();
121
- const buttonItemRef = /*#__PURE__*/React.createRef();
155
+ const customItemRef = React.useRef(null);
156
+ const buttonItemRef = React.useRef(null);
122
157
  const shouldUpdateFocus = selectedIndex === itemIndex;
158
+ const listItemClasses = useMemo(() => {
159
+ return [selectionFrame, isSelected && selectedStyle];
160
+ }, [isSelected]);
123
161
  useLayoutEffect(() => {
124
162
  if (shouldUpdateFocus) {
125
163
  var _customItemRef$curren;
@@ -132,37 +170,17 @@ export const TypeAheadListItem = ({
132
170
  buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
133
171
  }
134
172
  }, [buttonItemRef, shouldUpdateFocus]);
135
- const customItem = useMemo(() => {
136
- if (!customRenderItem) {
137
- return null;
138
- }
139
- const Comp = customRenderItem;
140
- const listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
141
- return jsx("div", {
142
- "aria-selected": isSelected,
143
- role: "option",
144
- "aria-label": ariaLabel,
145
- "aria-setsize": itemsLength,
146
- "aria-posinset": itemIndex,
147
- tabIndex: 0,
148
- css: listItemClasses,
149
- className: `ak-typeahead-item ${isSelected ? 'typeahead-selected-item' : ''}`
150
- //CSS classes added for test cases purpose
151
- ,
152
- ref: customItemRef
153
- }, jsx("div", {
154
- "aria-hidden": true
155
- }, jsx(Comp, {
156
- onClick: insertSelectedItem,
157
- isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
158
- ,
159
- onHover: noop
160
- })));
161
- }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
162
- if (customItem) {
163
- return customItem;
173
+ if (customRenderItem) {
174
+ return jsx(CustomItemComponentWrapper, {
175
+ customRenderItem: customRenderItem,
176
+ isSelected: isSelected,
177
+ ariaLabel: ariaLabel,
178
+ itemsLength: itemsLength,
179
+ customItemRef: customItemRef,
180
+ insertSelectedItem: insertSelectedItem,
181
+ itemIndex: itemIndex
182
+ });
164
183
  }
165
- const listItemClasses = [selectionFrame, isSelected && selectedStyle];
166
184
  return jsx("span", {
167
185
  css: listItemClasses
168
186
  }, jsx(ButtonItem, {
@@ -194,4 +212,4 @@ export const TypeAheadListItem = ({
194
212
  }, item.keyshortcut))), jsx("div", {
195
213
  className: "item-description"
196
214
  }, item.description)))));
197
- };
215
+ });
package/dist/esm/ui/TypeAheadListItem.js CHANGED
@@ -57,7 +57,40 @@ var FallbackIcon = /*#__PURE__*/React.memo(function (_ref) {
57
57
  return jsx(IconFallback, null);
58
58
  });
59
59
  var noop = function noop() {};
60
- export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
60
+ var CustomItemComponentWrapper = /*#__PURE__*/React.memo(function (props) {
61
+ var customRenderItem = props.customRenderItem,
62
+ isSelected = props.isSelected,
63
+ ariaLabel = props.ariaLabel,
64
+ itemsLength = props.itemsLength,
65
+ customItemRef = props.customItemRef,
66
+ insertSelectedItem = props.insertSelectedItem,
67
+ itemIndex = props.itemIndex;
68
+ var Comp = customRenderItem;
69
+ var listItemClasses = useMemo(function () {
70
+ return [customRenderItemDivStyle, isSelected && selectedStyle];
71
+ }, [isSelected]);
72
+ return jsx("div", {
73
+ "aria-selected": isSelected,
74
+ role: "option",
75
+ "aria-label": ariaLabel,
76
+ "aria-setsize": itemsLength,
77
+ "aria-posinset": itemIndex,
78
+ tabIndex: 0,
79
+ css: listItemClasses,
80
+ className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
81
+ //CSS classes added for test cases purpose
82
+ ,
83
+ ref: customItemRef
84
+ }, jsx("div", {
85
+ "aria-hidden": true
86
+ }, jsx(Comp, {
87
+ onClick: insertSelectedItem,
88
+ isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
89
+ ,
90
+ onHover: noop
91
+ })));
92
+ });
93
+ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
61
94
  var item = _ref2.item,
62
95
  itemsLength = _ref2.itemsLength,
63
96
  selectedIndex = _ref2.selectedIndex,
@@ -87,9 +120,12 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
87
120
  var insertSelectedItem = useCallback(function () {
88
121
  onItemClick(SelectItemMode.SELECTED, itemIndex);
89
122
  }, [onItemClick, itemIndex]);
90
- var customItemRef = /*#__PURE__*/React.createRef();
91
- var buttonItemRef = /*#__PURE__*/React.createRef();
123
+ var customItemRef = React.useRef(null);
124
+ var buttonItemRef = React.useRef(null);
92
125
  var shouldUpdateFocus = selectedIndex === itemIndex;
126
+ var listItemClasses = useMemo(function () {
127
+ return [selectionFrame, isSelected && selectedStyle];
128
+ }, [isSelected]);
93
129
  useLayoutEffect(function () {
94
130
  if (shouldUpdateFocus) {
95
131
  var _customItemRef$curren;
@@ -102,37 +138,17 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
102
138
  buttonItemRef === null || buttonItemRef === void 0 || (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 || _buttonItemRef$curren.focus();
103
139
  }
104
140
  }, [buttonItemRef, shouldUpdateFocus]);
105
- var customItem = useMemo(function () {
106
- if (!customRenderItem) {
107
- return null;
108
- }
109
- var Comp = customRenderItem;
110
- var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
111
- return jsx("div", {
112
- "aria-selected": isSelected,
113
- role: "option",
114
- "aria-label": ariaLabel,
115
- "aria-setsize": itemsLength,
116
- "aria-posinset": itemIndex,
117
- tabIndex: 0,
118
- css: listItemClasses,
119
- className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
120
- //CSS classes added for test cases purpose
121
- ,
122
- ref: customItemRef
123
- }, jsx("div", {
124
- "aria-hidden": true
125
- }, jsx(Comp, {
126
- onClick: insertSelectedItem,
127
- isSelected: false //The selection styles are handled in the parent div instead. Hence isSelected is made false always.
128
- ,
129
- onHover: noop
130
- })));
131
- }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem, itemIndex]);
132
- if (customItem) {
133
- return customItem;
141
+ if (customRenderItem) {
142
+ return jsx(CustomItemComponentWrapper, {
143
+ customRenderItem: customRenderItem,
144
+ isSelected: isSelected,
145
+ ariaLabel: ariaLabel,
146
+ itemsLength: itemsLength,
147
+ customItemRef: customItemRef,
148
+ insertSelectedItem: insertSelectedItem,
149
+ itemIndex: itemIndex
150
+ });
134
151
  }
135
- var listItemClasses = [selectionFrame, isSelected && selectedStyle];
136
152
  return jsx("span", {
137
153
  css: listItemClasses
138
154
  }, jsx(ButtonItem, {
@@ -164,4 +180,4 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
164
180
  }, item.keyshortcut))), jsx("div", {
165
181
  className: "item-description"
166
182
  }, item.description)))));
167
- };
183
+ });
package/dist/types/ui/TypeAheadListItem.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
1
3
  import { jsx } from '@emotion/react';
2
4
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
3
5
  import type { TypeAheadItem } from '../types';
@@ -10,5 +12,5 @@ type TypeAheadListItemProps = {
10
12
  ariaLabel?: string;
11
13
  onItemClick: (mode: SelectItemMode, index: number) => void;
12
14
  };
13
- export declare const TypeAheadListItem: ({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element;
15
+ export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element>;
14
16
  export {};
package/dist/types-ts4.5/ui/TypeAheadListItem.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /** @jsx jsx */
2
+ import React from 'react';
1
3
  import { jsx } from '@emotion/react';
2
4
  import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
3
5
  import type { TypeAheadItem } from '../types';
@@ -10,5 +12,5 @@ type TypeAheadListItemProps = {
10
12
  ariaLabel?: string;
11
13
  onItemClick: (mode: SelectItemMode, index: number) => void;
12
14
  };
13
- export declare const TypeAheadListItem: ({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element;
15
+ export declare const TypeAheadListItem: React.MemoExoticComponent<({ item, itemsLength, selectedIndex, onItemClick, itemIndex, ariaLabel, }: TypeAheadListItemProps) => jsx.JSX.Element>;
14
16
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,16 +32,16 @@
32
32
  ".": "./src/index.ts"
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/adf-schema": "^35.12.2",
35
+ "@atlaskit/adf-schema": "^36.1.0",
36
36
  "@atlaskit/analytics-next": "^9.3.0",
37
- "@atlaskit/editor-common": "^79.1.0",
37
+ "@atlaskit/editor-common": "^79.2.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^1.1.0",
39
39
  "@atlaskit/editor-prosemirror": "4.0.1",
40
40
  "@atlaskit/editor-shared-styles": "^2.10.0",
41
41
  "@atlaskit/menu": "^2.2.0",
42
42
  "@atlaskit/prosemirror-input-rules": "^3.1.0",
43
- "@atlaskit/theme": "^12.7.0",
44
- "@atlaskit/tokens": "^1.45.0",
43
+ "@atlaskit/theme": "^12.8.0",
44
+ "@atlaskit/tokens": "^1.46.0",
45
45
  "@babel/runtime": "^7.0.0",
46
46
  "@emotion/react": "^11.7.1",
47
47
  "lodash": "^4.17.21",