@atlaskit/editor-core 187.40.2 → 187.41.1

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 (154) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/editor-next/hooks/useEditorMeasuresConstructor.js +2 -2
  3. package/dist/cjs/editor-next/utils/editorMeasureTTICallback.js +3 -2
  4. package/dist/cjs/element-browser.js +2 -3
  5. package/dist/cjs/plugins/media/index.js +59 -54
  6. package/dist/cjs/plugins/media/nodeviews/mediaInline.js +44 -29
  7. package/dist/cjs/plugins/media/ui/ToolbarMedia/index.js +20 -33
  8. package/dist/cjs/plugins/quick-insert/index.js +4 -2
  9. package/dist/cjs/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js +8 -7
  10. package/dist/cjs/plugins/quick-insert/ui/ModalElementBrowser/index.js +10 -17
  11. package/dist/cjs/ui/ElementBrowser/InsertMenu.js +5 -6
  12. package/dist/cjs/ui/ElementBrowser/types.js +1 -8
  13. package/dist/cjs/version-wrapper.js +1 -1
  14. package/dist/es2019/editor-next/hooks/useEditorMeasuresConstructor.js +2 -2
  15. package/dist/es2019/editor-next/utils/editorMeasureTTICallback.js +3 -2
  16. package/dist/es2019/element-browser.js +1 -1
  17. package/dist/es2019/plugins/media/index.js +28 -20
  18. package/dist/es2019/plugins/media/nodeviews/mediaInline.js +45 -27
  19. package/dist/es2019/plugins/media/ui/ToolbarMedia/index.js +24 -32
  20. package/dist/es2019/plugins/quick-insert/index.js +4 -2
  21. package/dist/es2019/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js +5 -5
  22. package/dist/es2019/plugins/quick-insert/ui/ModalElementBrowser/index.js +8 -13
  23. package/dist/es2019/ui/ElementBrowser/InsertMenu.js +2 -3
  24. package/dist/es2019/ui/ElementBrowser/types.js +1 -5
  25. package/dist/es2019/version-wrapper.js +1 -1
  26. package/dist/esm/editor-next/hooks/useEditorMeasuresConstructor.js +2 -2
  27. package/dist/esm/editor-next/utils/editorMeasureTTICallback.js +3 -2
  28. package/dist/esm/element-browser.js +1 -1
  29. package/dist/esm/plugins/media/index.js +57 -52
  30. package/dist/esm/plugins/media/nodeviews/mediaInline.js +44 -29
  31. package/dist/esm/plugins/media/ui/ToolbarMedia/index.js +20 -30
  32. package/dist/esm/plugins/quick-insert/index.js +4 -2
  33. package/dist/esm/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.js +5 -5
  34. package/dist/esm/plugins/quick-insert/ui/ModalElementBrowser/index.js +10 -17
  35. package/dist/esm/ui/ElementBrowser/InsertMenu.js +2 -3
  36. package/dist/esm/ui/ElementBrowser/types.js +1 -5
  37. package/dist/esm/version-wrapper.js +1 -1
  38. package/dist/types/editor-next/hooks/useEditorMeasuresConstructor.d.ts +4 -4
  39. package/dist/types/editor-next/utils/editorMeasureTTICallback.d.ts +5 -5
  40. package/dist/types/element-browser.d.ts +1 -1
  41. package/dist/types/labs/next/presets/default.d.ts +2 -2
  42. package/dist/types/plugins/media/index.d.ts +1 -1
  43. package/dist/types/plugins/media/nodeviews/mediaInline.d.ts +5 -4
  44. package/dist/types/plugins/media/types.d.ts +10 -1
  45. package/dist/types/plugins/media/ui/ToolbarMedia/index.d.ts +6 -10
  46. package/dist/types/plugins/quick-insert/index.d.ts +3 -3
  47. package/dist/types/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.d.ts +4 -3
  48. package/dist/types/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/categories.d.ts +1 -1
  49. package/dist/types/plugins/quick-insert/ui/ModalElementBrowser/index.d.ts +4 -1
  50. package/dist/types/ui/ElementBrowser/types.d.ts +6 -18
  51. package/dist/types-ts4.5/editor-next/hooks/useEditorMeasuresConstructor.d.ts +4 -4
  52. package/dist/types-ts4.5/editor-next/utils/editorMeasureTTICallback.d.ts +5 -5
  53. package/dist/types-ts4.5/element-browser.d.ts +1 -1
  54. package/dist/types-ts4.5/labs/next/presets/default.d.ts +2 -2
  55. package/dist/types-ts4.5/plugins/media/index.d.ts +1 -1
  56. package/dist/types-ts4.5/plugins/media/nodeviews/mediaInline.d.ts +5 -4
  57. package/dist/types-ts4.5/plugins/media/types.d.ts +10 -1
  58. package/dist/types-ts4.5/plugins/media/ui/ToolbarMedia/index.d.ts +6 -10
  59. package/dist/types-ts4.5/plugins/quick-insert/index.d.ts +3 -3
  60. package/dist/types-ts4.5/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/ModalElementBrowser.d.ts +4 -3
  61. package/dist/types-ts4.5/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/categories.d.ts +1 -1
  62. package/dist/types-ts4.5/plugins/quick-insert/ui/ModalElementBrowser/index.d.ts +4 -1
  63. package/dist/types-ts4.5/ui/ElementBrowser/types.d.ts +6 -18
  64. package/package.json +2 -2
  65. package/report.api.md +7 -1
  66. package/tmp/api-report-tmp.d.ts +7 -1
  67. package/dist/cjs/ui/ElementBrowser/ElementBrowser.js +0 -152
  68. package/dist/cjs/ui/ElementBrowser/ViewMore.js +0 -39
  69. package/dist/cjs/ui/ElementBrowser/components/CategoryList.js +0 -115
  70. package/dist/cjs/ui/ElementBrowser/components/ElementBrowserLoader.js +0 -36
  71. package/dist/cjs/ui/ElementBrowser/components/ElementList/ElementList.js +0 -250
  72. package/dist/cjs/ui/ElementBrowser/components/ElementList/EmptyState.js +0 -47
  73. package/dist/cjs/ui/ElementBrowser/components/ElementList/NotFoundIllustration.js +0 -69
  74. package/dist/cjs/ui/ElementBrowser/components/ElementList/cellSizeAndPositionGetter.js +0 -42
  75. package/dist/cjs/ui/ElementBrowser/components/ElementList/utils.js +0 -54
  76. package/dist/cjs/ui/ElementBrowser/components/ElementSearch.js +0 -88
  77. package/dist/cjs/ui/ElementBrowser/components/StatelessElementBrowser.js +0 -269
  78. package/dist/cjs/ui/ElementBrowser/constants.js +0 -43
  79. package/dist/cjs/ui/ElementBrowser/hooks/use-container-width.js +0 -70
  80. package/dist/cjs/ui/ElementBrowser/hooks/use-focus.js +0 -51
  81. package/dist/cjs/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.js +0 -286
  82. package/dist/cjs/ui/ElementBrowser/index.js +0 -10
  83. package/dist/es2019/ui/ElementBrowser/ElementBrowser.js +0 -117
  84. package/dist/es2019/ui/ElementBrowser/ViewMore.js +0 -40
  85. package/dist/es2019/ui/ElementBrowser/components/CategoryList.js +0 -104
  86. package/dist/es2019/ui/ElementBrowser/components/ElementBrowserLoader.js +0 -21
  87. package/dist/es2019/ui/ElementBrowser/components/ElementList/ElementList.js +0 -301
  88. package/dist/es2019/ui/ElementBrowser/components/ElementList/EmptyState.js +0 -58
  89. package/dist/es2019/ui/ElementBrowser/components/ElementList/NotFoundIllustration.js +0 -64
  90. package/dist/es2019/ui/ElementBrowser/components/ElementList/cellSizeAndPositionGetter.js +0 -39
  91. package/dist/es2019/ui/ElementBrowser/components/ElementList/utils.js +0 -50
  92. package/dist/es2019/ui/ElementBrowser/components/ElementSearch.js +0 -117
  93. package/dist/es2019/ui/ElementBrowser/components/StatelessElementBrowser.js +0 -339
  94. package/dist/es2019/ui/ElementBrowser/constants.js +0 -24
  95. package/dist/es2019/ui/ElementBrowser/hooks/use-container-width.js +0 -59
  96. package/dist/es2019/ui/ElementBrowser/hooks/use-focus.js +0 -48
  97. package/dist/es2019/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.js +0 -284
  98. package/dist/es2019/ui/ElementBrowser/index.js +0 -2
  99. package/dist/esm/ui/ElementBrowser/ElementBrowser.js +0 -142
  100. package/dist/esm/ui/ElementBrowser/ViewMore.js +0 -31
  101. package/dist/esm/ui/ElementBrowser/components/CategoryList.js +0 -104
  102. package/dist/esm/ui/ElementBrowser/components/ElementBrowserLoader.js +0 -23
  103. package/dist/esm/ui/ElementBrowser/components/ElementList/ElementList.js +0 -238
  104. package/dist/esm/ui/ElementBrowser/components/ElementList/EmptyState.js +0 -40
  105. package/dist/esm/ui/ElementBrowser/components/ElementList/NotFoundIllustration.js +0 -62
  106. package/dist/esm/ui/ElementBrowser/components/ElementList/cellSizeAndPositionGetter.js +0 -37
  107. package/dist/esm/ui/ElementBrowser/components/ElementList/utils.js +0 -46
  108. package/dist/esm/ui/ElementBrowser/components/ElementSearch.js +0 -77
  109. package/dist/esm/ui/ElementBrowser/components/StatelessElementBrowser.js +0 -258
  110. package/dist/esm/ui/ElementBrowser/constants.js +0 -24
  111. package/dist/esm/ui/ElementBrowser/hooks/use-container-width.js +0 -61
  112. package/dist/esm/ui/ElementBrowser/hooks/use-focus.js +0 -46
  113. package/dist/esm/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.js +0 -278
  114. package/dist/esm/ui/ElementBrowser/index.js +0 -2
  115. package/dist/types/ui/ElementBrowser/ElementBrowser.d.ts +0 -37
  116. package/dist/types/ui/ElementBrowser/ViewMore.d.ts +0 -6
  117. package/dist/types/ui/ElementBrowser/components/CategoryList.d.ts +0 -10
  118. package/dist/types/ui/ElementBrowser/components/ElementBrowserLoader.d.ts +0 -5
  119. package/dist/types/ui/ElementBrowser/components/ElementList/ElementList.d.ts +0 -29
  120. package/dist/types/ui/ElementBrowser/components/ElementList/EmptyState.d.ts +0 -6
  121. package/dist/types/ui/ElementBrowser/components/ElementList/NotFoundIllustration.d.ts +0 -2
  122. package/dist/types/ui/ElementBrowser/components/ElementList/cellSizeAndPositionGetter.d.ts +0 -7
  123. package/dist/types/ui/ElementBrowser/components/ElementList/utils.d.ts +0 -12
  124. package/dist/types/ui/ElementBrowser/components/ElementSearch.d.ts +0 -18
  125. package/dist/types/ui/ElementBrowser/components/StatelessElementBrowser.d.ts +0 -23
  126. package/dist/types/ui/ElementBrowser/constants.d.ts +0 -20
  127. package/dist/types/ui/ElementBrowser/hooks/use-container-width.d.ts +0 -33
  128. package/dist/types/ui/ElementBrowser/hooks/use-focus.d.ts +0 -35
  129. package/dist/types/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +0 -72
  130. package/dist/types/ui/ElementBrowser/index.d.ts +0 -2
  131. package/dist/types-ts4.5/ui/ElementBrowser/ElementBrowser.d.ts +0 -37
  132. package/dist/types-ts4.5/ui/ElementBrowser/ViewMore.d.ts +0 -6
  133. package/dist/types-ts4.5/ui/ElementBrowser/components/CategoryList.d.ts +0 -10
  134. package/dist/types-ts4.5/ui/ElementBrowser/components/ElementBrowserLoader.d.ts +0 -5
  135. package/dist/types-ts4.5/ui/ElementBrowser/components/ElementList/ElementList.d.ts +0 -29
  136. package/dist/types-ts4.5/ui/ElementBrowser/components/ElementList/EmptyState.d.ts +0 -6
  137. package/dist/types-ts4.5/ui/ElementBrowser/components/ElementList/NotFoundIllustration.d.ts +0 -2
  138. package/dist/types-ts4.5/ui/ElementBrowser/components/ElementList/cellSizeAndPositionGetter.d.ts +0 -7
  139. package/dist/types-ts4.5/ui/ElementBrowser/components/ElementList/utils.d.ts +0 -12
  140. package/dist/types-ts4.5/ui/ElementBrowser/components/ElementSearch.d.ts +0 -18
  141. package/dist/types-ts4.5/ui/ElementBrowser/components/StatelessElementBrowser.d.ts +0 -23
  142. package/dist/types-ts4.5/ui/ElementBrowser/constants.d.ts +0 -20
  143. package/dist/types-ts4.5/ui/ElementBrowser/hooks/use-container-width.d.ts +0 -33
  144. package/dist/types-ts4.5/ui/ElementBrowser/hooks/use-focus.d.ts +0 -35
  145. package/dist/types-ts4.5/ui/ElementBrowser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +0 -72
  146. package/dist/types-ts4.5/ui/ElementBrowser/index.d.ts +0 -2
  147. /package/dist/cjs/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/categories.js +0 -0
  148. /package/dist/cjs/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/messages.js +0 -0
  149. /package/dist/es2019/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/categories.js +0 -0
  150. /package/dist/es2019/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/messages.js +0 -0
  151. /package/dist/esm/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/categories.js +0 -0
  152. /package/dist/esm/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/messages.js +0 -0
  153. /package/dist/types/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/messages.d.ts +0 -0
  154. /package/dist/types-ts4.5/{ui/ElementBrowser → plugins/quick-insert/ui/ModalElementBrowser}/messages.d.ts +0 -0
@@ -1,301 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- /** @jsx jsx */
3
- import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
4
- import { css, jsx } from '@emotion/react';
5
- import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
6
- import { Collection } from 'react-virtualized/dist/commonjs/Collection';
7
- import { ButtonItem } from '@atlaskit/menu';
8
- import { B100, N200 } from '@atlaskit/theme/colors';
9
- import Tooltip from '@atlaskit/tooltip';
10
- import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
11
- import { withAnalyticsContext } from '@atlaskit/analytics-next';
12
- import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
13
- import { IconFallback } from '@atlaskit/editor-common/quick-insert';
14
- import { itemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
15
- import { shortcutStyle } from '../../../styles';
16
- import { ELEMENT_LIST_PADDING, SCROLLBAR_WIDTH } from '../../constants';
17
- import useContainerWidth from '../../hooks/use-container-width';
18
- import useFocus from '../../hooks/use-focus';
19
- import { Modes } from '../../types';
20
- import cellSizeAndPositionGetter from './cellSizeAndPositionGetter';
21
- import EmptyState from './EmptyState';
22
- import { getColumnCount, getScrollbarWidth } from './utils';
23
- function ElementList({
24
- items,
25
- mode,
26
- selectedItemIndex,
27
- focusedItemIndex,
28
- setColumnCount,
29
- createAnalyticsEvent,
30
- emptyStateHandler,
31
- selectedCategory,
32
- searchTerm,
33
- ...props
34
- }) {
35
- const {
36
- containerWidth,
37
- ContainerWidthMonitor
38
- } = useContainerWidth();
39
- const [scrollbarWidth, setScrollbarWidth] = useState(SCROLLBAR_WIDTH);
40
- const fullMode = mode === Modes.full;
41
- useEffect(() => {
42
- /**
43
- * More of an optimization condition.
44
- * Initially the containerWidths are reported 0 twice.
45
- **/
46
- if (fullMode && containerWidth > 0) {
47
- setColumnCount(getColumnCount(containerWidth));
48
- const updatedScrollbarWidth = getScrollbarWidth();
49
- if (updatedScrollbarWidth > 0) {
50
- setScrollbarWidth(updatedScrollbarWidth);
51
- }
52
- }
53
- }, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
54
- const onExternalLinkClick = useCallback(() => {
55
- fireAnalyticsEvent(createAnalyticsEvent)({
56
- payload: {
57
- action: ACTION.VISITED,
58
- actionSubject: ACTION_SUBJECT.SMART_LINK,
59
- eventType: EVENT_TYPE.TRACK
60
- }
61
- });
62
- }, [createAnalyticsEvent]);
63
- const cellRenderer = useMemo(() => ({
64
- index,
65
- key,
66
- style
67
- }) => {
68
- if (items[index] == null) {
69
- return;
70
- }
71
- return jsx("div", {
72
- style: style,
73
- key: key,
74
- className: "element-item-wrapper",
75
- css: elementItemWrapper
76
- }, jsx(MemoizedElementItem, _extends({
77
- inlineMode: !fullMode,
78
- index: index,
79
- item: items[index],
80
- selected: selectedItemIndex === index,
81
- focus: focusedItemIndex === index
82
- }, props)));
83
- }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
84
- return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
85
- mode,
86
- selectedCategory,
87
- searchTerm
88
- }) : jsx(EmptyState, {
89
- onExternalLinkClick: onExternalLinkClick
90
- }) : jsx("div", {
91
- css: elementItemsWrapper,
92
- "data-testid": "element-items"
93
- }, jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
94
- disableWidth: true
95
- }, ({
96
- height
97
- }) => jsx(Collection, {
98
- cellCount: items.length,
99
- cellRenderer: cellRenderer,
100
- cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth - ELEMENT_LIST_PADDING * 2, scrollbarWidth),
101
- height: height,
102
- width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
103
- /**
104
- * Refresh Collection on WidthObserver value change.
105
- * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
106
- * scroll position after updating the data. If new data has different number of cells, a re-render
107
- * is forced to prevent the scroll position render bug.
108
- */,
109
- key: containerWidth + items.length,
110
- scrollToCell: selectedItemIndex
111
- })))));
112
- }
113
- const MemoizedElementItem = /*#__PURE__*/memo(ElementItem);
114
- MemoizedElementItem.displayName = 'MemoizedElementItem';
115
- export function ElementItem({
116
- inlineMode,
117
- selected,
118
- item,
119
- index,
120
- onInsertItem,
121
- focus,
122
- setFocusedItemIndex
123
- }) {
124
- const ref = useFocus(focus);
125
-
126
- /**
127
- * Note: props.onSelectItem(item) is not called here as the StatelessElementBrowser's
128
- * useEffect would trigger it on selectedItemIndex change. (Line 106-110)
129
- * This implementation was changed for keyboard/click selection to work with `onInsertItem`.
130
- */
131
- const onClick = useCallback(e => {
132
- e.preventDefault();
133
- e.stopPropagation();
134
- setFocusedItemIndex(index);
135
- switch (e.nativeEvent.detail) {
136
- case 0:
137
- onInsertItem(item);
138
- break;
139
- case 1:
140
- if (inlineMode) {
141
- onInsertItem(item);
142
- }
143
- break;
144
- case 2:
145
- if (!inlineMode) {
146
- onInsertItem(item);
147
- }
148
- break;
149
- default:
150
- return;
151
- }
152
- }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
153
- const {
154
- icon,
155
- title,
156
- description,
157
- keyshortcut
158
- } = item;
159
- return jsx(Tooltip, {
160
- content: description,
161
- testId: `element-item-tooltip-${index}`
162
- }, jsx(ButtonItem, {
163
- onClick: onClick,
164
- iconBefore: jsx(ElementBefore, {
165
- icon: icon,
166
- title: title
167
- }),
168
- isSelected: selected,
169
- "aria-describedby": title,
170
- ref: ref,
171
- testId: `element-item-${index}`
172
- }, jsx(ItemContent, {
173
- style: inlineMode ? null : itemStyleOverrides,
174
- tabIndex: 0,
175
- title: title,
176
- description: description,
177
- keyshortcut: keyshortcut
178
- })));
179
- }
180
-
181
- /**
182
- * Inline mode should use the existing Align-items:center value.
183
- */
184
- const itemStyleOverrides = {
185
- alignItems: 'flex-start'
186
- };
187
- const ElementBefore = /*#__PURE__*/memo(({
188
- icon,
189
- title
190
- }) => jsx("div", {
191
- css: [itemIcon, itemIconStyle]
192
- }, icon ? icon() : jsx(IconFallback, null)));
193
- const ItemContent = /*#__PURE__*/memo(({
194
- title,
195
- description,
196
- keyshortcut
197
- }) => jsx("div", {
198
- css: itemBody,
199
- className: "item-body"
200
- }, jsx("div", {
201
- css: itemText
202
- }, jsx("div", {
203
- css: itemTitleWrapper
204
- }, jsx("p", {
205
- css: itemTitle
206
- }, title), jsx("div", {
207
- css: itemAfter
208
- }, keyshortcut && jsx("div", {
209
- css: shortcutStyle
210
- }, keyshortcut))), description && jsx("p", {
211
- css: itemDescription
212
- }, description))));
213
- const elementItemsWrapper = css`
214
- flex: 1;
215
- flex-flow: row wrap;
216
- align-items: flex-start;
217
- justify-content: flex-start;
218
- overflow: hidden;
219
- padding: ${ELEMENT_LIST_PADDING}px; // For Focus outline
220
-
221
- .ReactVirtualized__Collection {
222
- border-radius: 3px; // Standard border-radius across other components like Search or Item.
223
- outline: none;
224
-
225
- :focus {
226
- box-shadow: 0 0 0 ${ELEMENT_LIST_PADDING}px
227
- ${`var(--ds-border-focused, ${B100})`};
228
- }
229
- }
230
- .ReactVirtualized__Collection__innerScrollContainer {
231
- div[class='element-item-wrapper']:last-child {
232
- padding-bottom: 4px;
233
- }
234
- }
235
- `;
236
- const elementItemWrapper = css`
237
- div {
238
- button {
239
- height: 75px;
240
- align-items: flex-start;
241
- padding: 12px 12px 11px;
242
- }
243
- }
244
- `;
245
- const itemBody = css`
246
- display: flex;
247
- flex-direction: row;
248
- flex-wrap: nowrap;
249
- justify-content: space-between;
250
- line-height: 1.4;
251
- width: 100%;
252
-
253
- margin-top: -2px; // Fixes the Item Icon and text's alignment issue
254
- `;
255
-
256
- /*
257
- * -webkit-line-clamp is also supported by firefox 🎉
258
- * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
259
- */
260
- const multilineStyle = css`
261
- display: -webkit-box;
262
- -webkit-line-clamp: 2;
263
- -webkit-box-orient: vertical;
264
- `;
265
- const itemDescription = css`
266
- ${multilineStyle};
267
-
268
- overflow: hidden;
269
- font-size: ${relativeFontSizeToBase16(11.67)};
270
- color: ${`var(--ds-text-subtle, ${N200})`};
271
- margin-top: 2px;
272
- `;
273
- const itemText = css`
274
- width: inherit;
275
- white-space: initial;
276
- `;
277
- const itemTitleWrapper = css`
278
- display: flex;
279
- justify-content: space-between; // Title and keyboardshortcut are rendered in the same block
280
- `;
281
- const itemTitle = css`
282
- width: 100%;
283
- overflow: hidden;
284
-
285
- white-space: nowrap;
286
- text-overflow: ellipsis;
287
- `;
288
- const itemAfter = css`
289
- flex: 0 0 auto;
290
- `;
291
- const itemIconStyle = css`
292
- img {
293
- height: 40px;
294
- width: 40px;
295
- object-fit: cover;
296
- }
297
- `;
298
- const MemoizedElementListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
299
- component: 'ElementList'
300
- })(ElementList));
301
- export default MemoizedElementListWithAnalytics;
@@ -1,58 +0,0 @@
1
- /** @jsx jsx */
2
- import { css, jsx } from '@emotion/react';
3
- import { FormattedMessage } from 'react-intl-next';
4
- import Button from '@atlaskit/button';
5
- import NotFoundIllustration from './NotFoundIllustration';
6
- export default function EmptyState({
7
- onExternalLinkClick
8
- }) {
9
- return jsx("div", {
10
- css: emptyStateWrapper
11
- }, jsx(NotFoundIllustration, null), jsx("div", {
12
- css: emptyStateHeading
13
- }, jsx(FormattedMessage, {
14
- id: "fabric.editor.elementbrowser.search.empty-state.heading",
15
- defaultMessage: "Nothing matches your search",
16
- description: "Empty state heading"
17
- })), jsx("div", {
18
- css: emptyStateSubHeading
19
- }, jsx("p", null, jsx(FormattedMessage, {
20
- id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
21
- defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
22
- description: "Empty state sub-heading"
23
- })), jsx("div", {
24
- css: externalLinkWrapper
25
- }, jsx(Button, {
26
- appearance: "primary",
27
- target: "_blank",
28
- href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
29
- onClick: onExternalLinkClick
30
- }, jsx(FormattedMessage, {
31
- id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
32
- defaultMessage: "Explore Atlassian Marketplace",
33
- description: "Empty state sub-heading external link"
34
- })))));
35
- }
36
- const emptyStateHeading = css`
37
- font-size: 1.42857em;
38
- line-height: 1.2;
39
- color: ${"var(--ds-text, rgb(23, 43, 77))"};
40
- font-weight: 500;
41
- letter-spacing: -0.008em;
42
- margin-top: 28px;
43
- `;
44
- const emptyStateSubHeading = css`
45
- margin-top: 16px;
46
- max-width: 400px;
47
- text-align: center;
48
- `;
49
- const emptyStateWrapper = css`
50
- display: flex;
51
- flex-direction: column;
52
- justify-content: center;
53
- align-items: center;
54
- width: 100%;
55
- `;
56
- const externalLinkWrapper = css`
57
- margin-top: 14px;
58
- `;
@@ -1,64 +0,0 @@
1
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
2
- // TODO: https://product-fabric.atlassian.net/browse/DSP-4249
3
- /** @jsx jsx */
4
- import { css, jsx } from '@emotion/react';
5
- const imageContainer = css`
6
- width: 120px;
7
- height: 111px;
8
- margin-top: 48px;
9
- `;
10
- export default function NotFoundIllustration() {
11
- return jsx("div", {
12
- css: imageContainer
13
- }, jsx("svg", {
14
- width: "120",
15
- height: "111",
16
- fill: "none",
17
- xmlns: "http://www.w3.org/2000/svg"
18
- }, jsx("g", {
19
- clipPath: "url(#clip0)"
20
- }, jsx("path", {
21
- fill: "#fff",
22
- fillOpacity: ".01",
23
- d: "M0 0h120v110.365H0z"
24
- }), jsx("path", {
25
- opacity: ".3",
26
- d: "M60.985 110.336c-.539.017-1.078.029-1.616.035a1.359 1.359 0 01-1.367-1.36 1.361 1.361 0 011.314-1.372h.041a50.876 50.876 0 0010.276-1.105 1.367 1.367 0 01.568 2.674 54.422 54.422 0 01-9.216 1.128zM52 109.877c-.075 0-.156 0-.237-.012a52.688 52.688 0 01-10.583-2.61 1.368 1.368 0 01.92-2.575c3.245 1.169 6.616 2 10.034 2.471.747.104 1.268.79 1.164 1.54A1.36 1.36 0 0152 109.877zM77.088 107.162a1.364 1.364 0 01-1.326-.895 1.366 1.366 0 01.805-1.755 50.423 50.423 0 009.274-4.575 1.358 1.358 0 011.877.43c.4.64.208 1.482-.429 1.884a53.25 53.25 0 01-9.772 4.824 1.26 1.26 0 01-.429.087zM34.9 104.32a1.359 1.359 0 01-.683-.157 53.29 53.29 0 01-9.042-6.092 1.369 1.369 0 01-.18-1.924 1.357 1.357 0 011.918-.18 50.483 50.483 0 008.578 5.778c.667.354.916 1.18.562 1.848a1.337 1.337 0 01-1.152.727zM20.732 93.23a1.372 1.372 0 01-1.06-.448 53.223 53.223 0 01-6.436-8.818 1.37 1.37 0 01.487-1.872 1.36 1.36 0 011.865.489 50.724 50.724 0 006.105 8.364 1.366 1.366 0 01-.098 1.93c-.25.226-.556.343-.863.354zM104.093 84.196a1.367 1.367 0 01-1.228-2.046 50.41 50.41 0 004.183-9.48 1.358 1.358 0 011.714-.878 1.365 1.365 0 01.875 1.72 53.17 53.17 0 01-4.414 9.993 1.34 1.34 0 01-1.13.691zM11.18 77.965a1.365 1.365 0 01-1.31-.854 52.827 52.827 0 01-3.029-10.498 1.362 1.362 0 112.682-.483 50.732 50.732 0 002.873 9.958 1.363 1.363 0 01-1.216 1.877zM110.17 67.218a1.362 1.362 0 01-1.39-1.593c.579-3.395.805-6.876.683-10.347l-.006-.116a1.36 1.36 0 011.315-1.412 1.359 1.359 0 011.408 1.32l.006.115a54.054 54.054 0 01-.724 10.905 1.36 1.36 0 01-1.292 1.128zM7.426 60.3c-.753.03-1.384-.534-1.407-1.29v-.058a53.82 53.82 0 01.712-10.846 1.368 1.368 0 011.57-1.122c.741.128 1.24.83 1.118 1.575a51.307 51.307 0 00-.678 10.288c.029.762-.562 1.425-1.315 1.453zM110.06 49.076a1.363 1.363 0 01-1.385-1.122 50.567 50.567 0 00-2.884-9.95c-.284-.698.052-1.5.747-1.785a1.365 1.365 0 011.778.75 53.085 53.085 0 013.041 10.497 1.37 1.37 0 01-1.094 1.593l-.203.017zM9.888 42.462a1.452 1.452 0 01-.47-.065 1.365 1.365 0 01-.874-1.72 53.157 53.157 0 014.402-9.998 1.362 1.362 0 011.86-.511c.655.372.88 1.209.51 1.866a50.68 50.68 0 00-4.177 9.486 1.37 1.37 0 01-1.251.941zM103.815 32.179a1.355 1.355 0 01-1.222-.674 50.958 50.958 0 00-6.117-8.359 1.366 1.366 0 01.099-1.93 1.355 1.355 0 011.923.099 53.449 53.449 0 016.447 8.806 1.37 1.37 0 01-.487 1.872 1.432 1.432 0 01-.643.186zM18.31 26.529a1.372 1.372 0 01-1.124-2.209 53.551 53.551 0 017.537-7.888 1.363 1.363 0 011.923.157 1.375 1.375 0 01-.156 1.93 51.072 51.072 0 00-7.154 7.487 1.343 1.343 0 01-1.025.523zM92.172 18.444a1.352 1.352 0 01-.915-.314 50.861 50.861 0 00-8.59-5.772 1.368 1.368 0 01-.568-1.849 1.364 1.364 0 011.842-.57 53.153 53.153 0 019.048 6.08c.58.483.66 1.343.18 1.925a1.366 1.366 0 01-.997.5zM31.64 14.433a1.368 1.368 0 01-.776-2.523 53.107 53.107 0 019.771-4.836 1.359 1.359 0 011.75.808c.26.71-.099 1.494-.805 1.755a50.203 50.203 0 00-9.269 4.587c-.208.133-.44.203-.672.209zM76.555 9.51a1.257 1.257 0 01-.504-.082A50.06 50.06 0 0066.013 6.97a1.364 1.364 0 01-1.165-1.54 1.364 1.364 0 011.535-1.168 52.623 52.623 0 0110.584 2.592 1.369 1.369 0 01-.412 2.657zM48.287 7.65a1.367 1.367 0 01-.33-2.703 54.261 54.261 0 0110.827-1.18 1.367 1.367 0 011.372 1.36 1.367 1.367 0 01-1.314 1.377H58.8A50.85 50.85 0 0048.525 7.62c-.081.018-.162.024-.238.03z",
27
- fill: "#B3BAC5"
28
- }), jsx("path", {
29
- opacity: ".3",
30
- d: "M110.523 19.873a.304.304 0 01-.226-.325l.035-.262c.029-.168.064-.348.11-.534a4.423 4.423 0 01.95-1.796c.458-.53 1.118-.971 1.97-1.314l1.436-.587c.858-.343 1.385-.913 1.593-1.697a2.48 2.48 0 00.07-.878 1.998 1.998 0 00-.273-.849c-.156-.261-.37-.5-.654-.709a3.07 3.07 0 00-1.049-.477c-.451-.116-.851-.133-1.21-.052a2.56 2.56 0 00-.956.43c-.278.204-.51.465-.695.78-.191.313-.33.65-.423.999-.029.104-.052.21-.07.302a.459.459 0 01-.59.355l-2.219-.68a.464.464 0 01-.33-.483c.006-.07.017-.14.029-.21.035-.197.075-.383.121-.569.174-.668.47-1.29.887-1.866a5.14 5.14 0 011.546-1.412c.614-.366 1.31-.605 2.097-.72.788-.117 1.645-.047 2.578.197.967.256 1.778.622 2.433 1.098.66.477 1.176 1.012 1.552 1.599.377.593.614 1.22.707 1.889.093.668.058 1.32-.11 1.953-.261 1-.712 1.796-1.344 2.389a6.773 6.773 0 01-2.288 1.39l-1.211.458c-.341.11-.851.338-1.274.803-.041.046-.214.238-.388.534-.128.221-.22.436-.284.622a.303.303 0 01-.365.192l-2.155-.57zm-1.772 3.412c.145-.552.457-.97.944-1.26a1.942 1.942 0 011.552-.222c.551.146.968.465 1.257.96.29.493.359 1.017.215 1.569a1.966 1.966 0 01-.956 1.25 2.005 2.005 0 01-1.558.203 1.957 1.957 0 01-1.246-.942 1.98 1.98 0 01-.208-1.558zM10.722 12.393a.301.301 0 01-.203-.338l.053-.261c.04-.169.086-.343.15-.523a4.334 4.334 0 011.072-1.727c.492-.5 1.176-.889 2.056-1.18l1.472-.488c.874-.285 1.442-.814 1.703-1.587.092-.279.139-.57.127-.872a2.052 2.052 0 00-.214-.866 2.285 2.285 0 00-.609-.75c-.266-.226-.608-.406-1.013-.546-.44-.151-.846-.192-1.205-.134a2.518 2.518 0 00-1.726 1.099 3.583 3.583 0 00-.585 1.267.461.461 0 01-.615.314L9.02 4.976a.467.467 0 01-.295-.506c.011-.07.029-.14.046-.21a5.65 5.65 0 01.162-.557A5.505 5.505 0 019.946 1.9 5.246 5.246 0 0111.579.593a5.545 5.545 0 012.138-.576c.793-.058 1.645.064 2.554.372.945.32 1.732.739 2.358 1.262.626.523 1.106 1.087 1.442 1.703.336.616.533 1.255.58 1.93a4.97 4.97 0 01-.244 1.941c-.33.982-.828 1.744-1.506 2.29a6.844 6.844 0 01-2.375 1.233l-1.24.372a2.94 2.94 0 00-1.326.715c-.046.046-.232.226-.423.505-.145.215-.249.419-.324.599a.3.3 0 01-.377.168l-2.114-.714zm-1.998 3.284a2 2 0 011.025-1.198 1.957 1.957 0 011.564-.116c.539.18.933.529 1.188 1.04.254.512.29 1.041.11 1.582-.18.54-.528.935-1.037 1.18a2.019 2.019 0 01-1.57.098 1.96 1.96 0 01-1.182-1.029 1.99 1.99 0 01-.098-1.557zM7.177 104.849a.298.298 0 01-.37-.134c-.041-.076-.082-.157-.122-.238a8.207 8.207 0 01-.215-.5 4.405 4.405 0 01-.249-2.017c.076-.698.36-1.436.863-2.215l.84-1.308c.504-.773.614-1.546.33-2.307a2.6 2.6 0 00-.446-.762 2.019 2.019 0 00-.706-.54 2.421 2.421 0 00-.944-.204 3.05 3.05 0 00-1.13.215c-.434.163-.776.378-1.025.657-.25.273-.423.576-.533.901-.11.326-.15.674-.128 1.04.024.367.099.721.226 1.064.04.105.076.198.116.285a.466.466 0 01-.278.634l-2.201.72a.455.455 0 01-.545-.209c-.034-.064-.063-.128-.098-.192a5.595 5.595 0 01-.568-2.575 5.09 5.09 0 01.458-2.046c.29-.65.724-1.25 1.303-1.796.58-.546 1.32-.988 2.225-1.32.938-.348 1.807-.517 2.618-.505.81.012 1.54.151 2.19.413a4.62 4.62 0 011.656 1.139c.458.494.8 1.046 1.025 1.662.36.971.446 1.884.267 2.732-.18.85-.539 1.669-1.078 2.46l-.73 1.075c-.214.29-.503.767-.585 1.389-.005.064-.04.319-.011.657.023.255.07.482.127.668a.309.309 0 01-.19.372l-2.092.785zm.504 3.813a2.026 2.026 0 01.052-1.581 1.958 1.958 0 011.147-1.076 1.986 1.986 0 011.576.064c.521.239.88.628 1.077 1.163a1.947 1.947 0 01-.07 1.569 2.028 2.028 0 01-1.158 1.064 1.977 1.977 0 01-1.564-.052 1.96 1.96 0 01-1.06-1.151z",
31
- fill: "#C1C7D0"
32
- }), jsx("path", {
33
- d: "M86.519 77.651l-4.142-4.028-5.578 5.784 4.141 4.028a7.812 7.812 0 012.15 3.772 7.858 7.858 0 002.148 3.773l16.816 16.333a6.405 6.405 0 009.077-.145 6.46 6.46 0 00-.144-9.108L94.171 81.726a7.786 7.786 0 00-3.83-2.034 7.9 7.9 0 01-3.822-2.04z",
34
- fill: "#CFD4DB"
35
- }), jsx("path", {
36
- d: "M90.18 79.64a7.756 7.756 0 01-3.656-1.995l-1.262-1.226a4 4 0 00-5.671.093 4.032 4.032 0 00.092 5.69l1.263 1.227a7.853 7.853 0 012.103 3.598 33.606 33.606 0 003.858-3.435 33.629 33.629 0 003.273-3.953z",
37
- fill: "#B3BAC5"
38
- }), jsx("path", {
39
- d: "M59.056 90.677c-8.961.146-17.442-3.22-23.877-9.474-13.295-12.91-13.636-34.266-.77-47.606C40.64 27.14 49.01 23.501 57.966 23.35c8.961-.145 17.441 3.22 23.877 9.475 6.441 6.255 10.062 14.654 10.212 23.64.145 8.992-3.209 17.502-9.442 23.96-6.227 6.47-14.597 10.108-23.558 10.253zM58.1 31.388c-6.824.11-13.19 2.883-17.94 7.801-9.795 10.155-9.534 26.413.585 36.242 4.9 4.76 11.36 7.324 18.183 7.213 6.824-.11 13.19-2.883 17.94-7.8 4.744-4.918 7.299-11.399 7.189-18.246-.11-6.847-2.873-13.236-7.774-18.002-4.906-4.755-11.36-7.318-18.183-7.208z",
40
- fill: "url(#paint0_linear)"
41
- }), jsx("path", {
42
- d: "M68.886 49.535l-3.093-3.051a1.158 1.158 0 00-1.64.017l-5.67 5.796-5.776-5.691a1.158 1.158 0 00-1.64.017l-3.04 3.104c-.446.46-.44 1.192.017 1.645l5.775 5.69-5.67 5.796c-.447.46-.44 1.192.017 1.645l3.093 3.052a1.158 1.158 0 001.64-.018l5.67-5.795 5.775 5.69a1.158 1.158 0 001.64-.017l3.04-3.104c.447-.459.441-1.191-.017-1.645l-5.775-5.69 5.671-5.795c.446-.46.44-1.198-.017-1.645z",
43
- fill: "#C1C7D0"
44
- })), jsx("defs", null, jsx("linearGradient", {
45
- id: "paint0_linear",
46
- x1: "34.792",
47
- y1: "80.822",
48
- x2: "82.401",
49
- y2: "33.377",
50
- gradientUnits: "userSpaceOnUse"
51
- }, jsx("stop", {
52
- offset: ".557",
53
- stopColor: "#C1C7D0"
54
- }), jsx("stop", {
55
- offset: ".966",
56
- stopColor: "#E9EBEF",
57
- stopOpacity: ".5"
58
- })), jsx("clipPath", {
59
- id: "clip0"
60
- }, jsx("path", {
61
- fill: "#fff",
62
- d: "M0 0h120v110.365H0z"
63
- })))));
64
- }
@@ -1,39 +0,0 @@
1
- import { ELEMENT_ITEM_HEIGHT } from '../../constants';
2
- import { generateVirtualizedContainerDatum } from './utils';
3
-
4
- /**
5
- * Callback responsible for returning size and offset/position information
6
- * for a given cell.
7
- * https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md
8
- **/
9
- export default function cellSizeAndPositionGetter(containerWidth, scrollbarWidth) {
10
- const GUTTER_SIZE = 4;
11
- /**
12
- * Save the currently rendered columnY positions.
13
- * Have to be within the current render scope.
14
- */
15
- let columnYMap = [];
16
- return ({
17
- index
18
- }) => {
19
- const {
20
- columnCount,
21
- availableWidth
22
- } = generateVirtualizedContainerDatum(containerWidth, {
23
- gutterSize: GUTTER_SIZE,
24
- scrollbarWidth
25
- });
26
- const width = Math.floor(availableWidth / columnCount);
27
- const height = ELEMENT_ITEM_HEIGHT;
28
- const columnPosition = index % (columnCount || 1);
29
- const x = columnPosition * width;
30
- const y = columnYMap[columnPosition] || 0;
31
- columnYMap[columnPosition] = y + height;
32
- return {
33
- height,
34
- width,
35
- x,
36
- y
37
- };
38
- };
39
- }
@@ -1,50 +0,0 @@
1
- import { ELEMENT_LIST_PADDING, FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS, SCROLLBAR_WIDTH } from '../../constants';
2
- export function getColumnCount(clientWidth) {
3
- const {
4
- small,
5
- medium,
6
- large
7
- } = FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS;
8
- switch (true) {
9
- case clientWidth < small:
10
- return 1;
11
- case clientWidth >= small && clientWidth < medium:
12
- return Math.floor(clientWidth / 200);
13
- case clientWidth >= large:
14
- return Math.floor(clientWidth / 248);
15
- default:
16
- return Math.floor(clientWidth / 220);
17
- }
18
- }
19
- export function generateVirtualizedContainerDatum(containerWidth, options) {
20
- const {
21
- scrollbarWidth
22
- } = options;
23
- const columnCount = getColumnCount(containerWidth);
24
- const availableWidth = containerWidth - (scrollbarWidth + ELEMENT_LIST_PADDING);
25
- return {
26
- availableWidth,
27
- columnCount
28
- };
29
- }
30
- let CALCULATED_SCROLLBAR_WIDTH;
31
- export function getScrollbarWidth() {
32
- if (!CALCULATED_SCROLLBAR_WIDTH) {
33
- var _container$parentNode;
34
- const container = document.createElement('div');
35
- container.style.visibility = 'hidden';
36
- container.style.overflow = 'scroll';
37
- document.body.appendChild(container);
38
- const innerContainer = document.createElement('div');
39
- container.appendChild(innerContainer);
40
- const scrollbarWidth = container.offsetWidth - innerContainer.offsetWidth;
41
- (_container$parentNode = container.parentNode) === null || _container$parentNode === void 0 ? void 0 : _container$parentNode.removeChild(container);
42
- if (scrollbarWidth) {
43
- CALCULATED_SCROLLBAR_WIDTH = scrollbarWidth;
44
- return scrollbarWidth;
45
- }
46
- return SCROLLBAR_WIDTH;
47
- } else {
48
- return CALCULATED_SCROLLBAR_WIDTH;
49
- }
50
- }
@@ -1,117 +0,0 @@
1
- /** @jsx jsx */
2
- import React, { memo } from 'react';
3
- import { css, jsx } from '@emotion/react';
4
- import { injectIntl } from 'react-intl-next';
5
- import Textfield from '@atlaskit/textfield';
6
- import SearchIcon from '@atlaskit/icon/glyph/search';
7
- import { withAnalyticsContext } from '@atlaskit/analytics-next';
8
- import { N200 } from '@atlaskit/theme/colors';
9
- import { shortcutStyle } from '../../styles';
10
- import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
11
- import useFocus from '../hooks/use-focus';
12
- import { Modes } from '../types';
13
- import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
14
- function ElementSearch({
15
- onSearch,
16
- mode,
17
- intl: {
18
- formatMessage
19
- },
20
- focus,
21
- onClick,
22
- onKeyDown,
23
- searchTerm
24
- }) {
25
- const ref = useFocus(focus);
26
- const onChange = ({
27
- target: {
28
- value
29
- }
30
- }) => {
31
- onSearch(value);
32
- };
33
- const onFocus = e => {};
34
- const onBlur = e => {};
35
- return jsx("div", {
36
- css: [wrapper, mode === Modes.inline && wrapperInline]
37
- }, jsx(Textfield, {
38
- ref: ref,
39
- onChange: onChange,
40
- onClick: onClick,
41
- onFocus: onFocus,
42
- onKeyDown: onKeyDown,
43
- onBlur: onBlur,
44
- elemBeforeInput: jsx("div", {
45
- css: elementBeforeInput,
46
- "data-testid": "element_search__element_before_input"
47
- }, jsx(SearchIcon, {
48
- size: "medium",
49
- label: "Advanced search",
50
- primaryColor: "inherit"
51
- })),
52
- elemAfterInput: jsx("div", {
53
- css: elementAfterInput,
54
- "data-testid": "element_search__element_after_input"
55
- }, jsx("div", {
56
- css: styledShortcut
57
- }, "\u23CE ", formatMessage(elementAfterInputMessage))),
58
- placeholder: formatMessage(placeHolderMessage),
59
- "aria-label": "search",
60
- value: searchTerm
61
- }));
62
- }
63
- const elementAfterInputMessage = {
64
- id: 'fabric.editor.elementbrowser.searchbar.elementAfterInput',
65
- defaultMessage: 'Enter',
66
- description: 'Enter to insert'
67
- };
68
- const placeHolderMessage = {
69
- id: 'fabric.editor.elementbrowser.searchbar.placeholder',
70
- defaultMessage: 'Search',
71
- description: 'Search field placeholder'
72
- };
73
- const styledShortcut = css`
74
- ${shortcutStyle}
75
- padding: ${GRID_SIZE / 2}px ${GRID_SIZE}px;
76
- width: ${GRID_SIZE * 6}px;
77
- `;
78
- const wrapper = css`
79
- & > [data-ds--text-field--container] {
80
- height: ${GRID_SIZE * 6}px;
81
- border-radius: ${GRID_SIZE}px;
82
- flex: 1 1 100%;
83
- overflow: visible;
84
- & > [data-ds--text-field--input] {
85
- margin-bottom: 3px;
86
- font-size: ${relativeFontSizeToBase16(14)};
87
- padding: ${GRID_SIZE}px ${"var(--ds-space-075, 6px)"} ${GRID_SIZE}px 0;
88
- }
89
- }
90
- `;
91
- const wrapperInline = css`
92
- & > [data-ds--text-field--container] {
93
- height: ${GRID_SIZE * 5}px;
94
- flex: none;
95
- overflow: revert;
96
- }
97
- `;
98
- const elementBeforeInput = css`
99
- margin: 1px ${"var(--ds-space-075, 6px)"} 0 ${"var(--ds-space-100, 8px)"};
100
- color: ${`var(--ds-icon, ${N200})`};
101
-
102
- // Custom SearchIcon style
103
- span,
104
- svg {
105
- height: 20px;
106
- width: 20px;
107
- }
108
- `;
109
- const elementAfterInput = css`
110
- margin: 0 ${"var(--ds-space-100, 8px)"};
111
- height: ${SEARCH_ITEM_HEIGHT_WIDTH};
112
- text-align: center;
113
- `;
114
- const MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
115
- component: 'Searchbar'
116
- })(injectIntl(ElementSearch)));
117
- export default MemoizedElementSearchWithAnalytics;