@contentful/field-editor-reference 6.17.0 → 6.18.0

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.
@@ -12,6 +12,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
12
12
  const _f36components = require("@contentful/f36-components");
13
13
  const _f36icons = require("@contentful/f36-icons");
14
14
  const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
15
+ const _core = require("@lingui/core");
15
16
  const _emotion = require("emotion");
16
17
  const _get = /*#__PURE__*/ _interop_require_default(require("lodash/get"));
17
18
  function _interop_require_default(obj) {
@@ -100,7 +101,10 @@ const styles = {
100
101
  borderColor: _f36tokens.default.gray200
101
102
  })
102
103
  };
103
- const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentTypesLabel, title, onSelect, testId, dropdownSettings = {
104
+ const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentTypesLabel = _core.i18n._({
105
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.AllContentTypesLabel",
106
+ message: "All Content Types"
107
+ }), title, onSelect, testId = 'create-entry-button-menu-trigger', dropdownSettings = {
104
108
  position: 'bottom-left'
105
109
  }, customDropdownItems, children, menuProps, filterExperienceTypes = true })=>{
106
110
  const [isOpen, setOpen] = (0, _react.useState)(false);
@@ -161,12 +165,21 @@ const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentT
161
165
  isOpen
162
166
  ]);
163
167
  const renderSearchResultsCount = (resultsLength)=>resultsLength ? /*#__PURE__*/ _react.default.createElement(_f36components.Menu.SectionTitle, {
164
- testId: "add-entru-menu-search-results"
165
- }, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
168
+ testId: "add-entry-menu-search-results"
169
+ }, _core.i18n._({
170
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SearchContentTypeResultsLabel",
171
+ message: "{resultsLength, plural, one {# result} other {# results}}",
172
+ values: {
173
+ resultsLength: resultsLength
174
+ }
175
+ })) : null;
166
176
  const isSearchable = filteredContentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
167
177
  const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
168
178
  const suggestedContentType = filteredContentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
169
- const searchFilteredContentTypes = filteredContentTypes.filter((ct)=>!searchInput || (0, _get.default)(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
179
+ const searchFilteredContentTypes = filteredContentTypes.filter((ct)=>!searchInput || (0, _get.default)(ct, 'name', _core.i18n._({
180
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SearchContentTypeFallbackLabel",
181
+ message: "Untitled"
182
+ })).toLowerCase().includes(searchInput.toLowerCase()));
170
183
  return /*#__PURE__*/ _react.default.createElement("span", {
171
184
  className: styles.wrapper,
172
185
  ref: wrapper,
@@ -184,38 +197,45 @@ const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentT
184
197
  })), isOpen && /*#__PURE__*/ _react.default.createElement(_f36components.Menu.List, {
185
198
  className: styles.dropdownList,
186
199
  style: {
187
- width: dropdownWidth != undefined ? `${dropdownWidth}px` : undefined,
200
+ width: dropdownWidth !== undefined ? `${dropdownWidth}px` : undefined,
188
201
  maxHeight: `${maxDropdownHeight}px`
189
202
  },
190
203
  ref: menuListRef,
191
204
  testId: "add-entry-menu"
192
205
  }, Boolean(customDropdownItems) && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, customDropdownItems, /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Divider, null)), title && /*#__PURE__*/ _react.default.createElement(_f36components.Menu.SectionTitle, {
193
206
  className: styles.title
194
- }, title), isSearchable && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("div", {
207
+ }, title), isSearchable && /*#__PURE__*/ _react.default.createElement("div", {
195
208
  ref: textField,
196
209
  className: styles.inputWrapper
197
210
  }, /*#__PURE__*/ _react.default.createElement(_f36components.TextInput, {
198
211
  className: styles.searchInput,
199
- placeholder: "Search content type",
212
+ placeholder: _core.i18n._({
213
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SearchContentTypePlaceholder",
214
+ message: "Search content type"
215
+ }),
200
216
  testId: "add-entry-menu-search",
201
217
  value: searchInput,
202
218
  onChange: (e)=>setSearchInput(e.target.value)
203
219
  }), /*#__PURE__*/ _react.default.createElement(_f36icons.MagnifyingGlassIcon, {
204
220
  size: "small",
205
221
  className: styles.searchIcon
206
- }))), searchInput && renderSearchResultsCount(searchFilteredContentTypes.length), suggestedContentType && !searchInput && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_f36components.Menu.SectionTitle, null, "Suggested Content Type"), /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
222
+ })), searchInput && renderSearchResultsCount(searchFilteredContentTypes.length), suggestedContentType && !searchInput && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_f36components.Menu.SectionTitle, null, _core.i18n._({
223
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SuggestedContentTypeLabel",
224
+ message: "Suggested Content Type"
225
+ })), /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
207
226
  testId: "suggested",
208
227
  onClick: ()=>handleSelect(suggestedContentType)
209
228
  }, (0, _get.default)(suggestedContentType, 'name')), /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Divider, null)), !searchInput && /*#__PURE__*/ _react.default.createElement(_f36components.Menu.SectionTitle, null, contentTypesLabel), searchFilteredContentTypes.length ? searchFilteredContentTypes.map((contentType, i)=>/*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
210
229
  testId: "contentType",
211
230
  key: `${(0, _get.default)(contentType, 'name')}-${i}`,
212
231
  onClick: ()=>handleSelect(contentType)
213
- }, (0, _get.default)(contentType, 'name', 'Untitled'))) : /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
214
- testId: "add-entru-menu-search-results"
215
- }, "No results found"))));
216
- };
217
- CreateEntryMenuTrigger.defaultProps = {
218
- testId: 'create-entry-button-menu-trigger',
219
- contentTypesLabel: 'All Content Types',
220
- filterExperienceTypes: true
232
+ }, (0, _get.default)(contentType, 'name', _core.i18n._({
233
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.ContentTypeFallbackLabel",
234
+ message: "Untitled"
235
+ })))) : /*#__PURE__*/ _react.default.createElement(_f36components.Menu.Item, {
236
+ testId: "add-entry-menu-search-results"
237
+ }, _core.i18n._({
238
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.NoResultsLabel",
239
+ message: "No results found"
240
+ })))));
221
241
  };
@@ -179,7 +179,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
179
179
  preventDefault: _noop.default
180
180
  });
181
181
  expect(getAllByTestId('contentType')).toHaveLength(10);
182
- expect(getByTestId('add-entru-menu-search-results').textContent).toBe('10 results');
182
+ expect(getByTestId('add-entry-menu-search-results').textContent).toBe('10 results');
183
183
  _react1.fireEvent.change(input, {
184
184
  target: {
185
185
  value: '3'
@@ -187,14 +187,14 @@ describe('CreateEntryMenuTrigger general', ()=>{
187
187
  preventDefault: _noop.default
188
188
  });
189
189
  expect(getAllByTestId('contentType')).toHaveLength(1);
190
- expect(getByTestId('add-entru-menu-search-results').textContent).toBe('1 result');
190
+ expect(getByTestId('add-entry-menu-search-results').textContent).toBe('1 result');
191
191
  _react1.fireEvent.change(input, {
192
192
  target: {
193
193
  value: '4'
194
194
  },
195
195
  preventDefault: _noop.default
196
196
  });
197
- expect(getByTestId('add-entru-menu-search-results').textContent).toBe('No results found');
197
+ expect(getByTestId('add-entry-menu-search-results').textContent).toBe('No results found');
198
198
  });
199
199
  it('shows suggestedContentType in the list', ()=>{
200
200
  const { getByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_CreateEntryMenuTrigger.CreateEntryMenuTrigger, {
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect, useMemo } from 'react';
2
2
  import { TextInput, Menu } from '@contentful/f36-components';
3
3
  import { MagnifyingGlassIcon } from '@contentful/f36-icons';
4
4
  import tokens from '@contentful/f36-tokens';
5
+ import { i18n as $_i18n } from "@lingui/core";
5
6
  import { css } from 'emotion';
6
7
  import get from 'lodash/get';
7
8
  const MAX_ITEMS_WITHOUT_SEARCH = 5;
@@ -44,7 +45,10 @@ const styles = {
44
45
  borderColor: tokens.gray200
45
46
  })
46
47
  };
47
- export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentTypesLabel, title, onSelect, testId, dropdownSettings = {
48
+ export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, contentTypesLabel = $_i18n._({
49
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.AllContentTypesLabel",
50
+ message: "All Content Types"
51
+ }), title, onSelect, testId = 'create-entry-button-menu-trigger', dropdownSettings = {
48
52
  position: 'bottom-left'
49
53
  }, customDropdownItems, children, menuProps, filterExperienceTypes = true })=>{
50
54
  const [isOpen, setOpen] = useState(false);
@@ -105,12 +109,21 @@ export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, c
105
109
  isOpen
106
110
  ]);
107
111
  const renderSearchResultsCount = (resultsLength)=>resultsLength ? /*#__PURE__*/ React.createElement(Menu.SectionTitle, {
108
- testId: "add-entru-menu-search-results"
109
- }, resultsLength, " result", resultsLength > 1 ? 's' : '') : null;
112
+ testId: "add-entry-menu-search-results"
113
+ }, $_i18n._({
114
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SearchContentTypeResultsLabel",
115
+ message: "{resultsLength, plural, one {# result} other {# results}}",
116
+ values: {
117
+ resultsLength: resultsLength
118
+ }
119
+ })) : null;
110
120
  const isSearchable = filteredContentTypes.length > MAX_ITEMS_WITHOUT_SEARCH;
111
121
  const maxDropdownHeight = suggestedContentTypeId ? 300 : 250;
112
122
  const suggestedContentType = filteredContentTypes.find((ct)=>ct.sys.id === suggestedContentTypeId);
113
- const searchFilteredContentTypes = filteredContentTypes.filter((ct)=>!searchInput || get(ct, 'name', 'Untitled').toLowerCase().includes(searchInput.toLowerCase()));
123
+ const searchFilteredContentTypes = filteredContentTypes.filter((ct)=>!searchInput || get(ct, 'name', $_i18n._({
124
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SearchContentTypeFallbackLabel",
125
+ message: "Untitled"
126
+ })).toLowerCase().includes(searchInput.toLowerCase()));
114
127
  return /*#__PURE__*/ React.createElement("span", {
115
128
  className: styles.wrapper,
116
129
  ref: wrapper,
@@ -128,38 +141,45 @@ export const CreateEntryMenuTrigger = ({ contentTypes, suggestedContentTypeId, c
128
141
  })), isOpen && /*#__PURE__*/ React.createElement(Menu.List, {
129
142
  className: styles.dropdownList,
130
143
  style: {
131
- width: dropdownWidth != undefined ? `${dropdownWidth}px` : undefined,
144
+ width: dropdownWidth !== undefined ? `${dropdownWidth}px` : undefined,
132
145
  maxHeight: `${maxDropdownHeight}px`
133
146
  },
134
147
  ref: menuListRef,
135
148
  testId: "add-entry-menu"
136
149
  }, Boolean(customDropdownItems) && /*#__PURE__*/ React.createElement(React.Fragment, null, customDropdownItems, /*#__PURE__*/ React.createElement(Menu.Divider, null)), title && /*#__PURE__*/ React.createElement(Menu.SectionTitle, {
137
150
  className: styles.title
138
- }, title), isSearchable && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
151
+ }, title), isSearchable && /*#__PURE__*/ React.createElement("div", {
139
152
  ref: textField,
140
153
  className: styles.inputWrapper
141
154
  }, /*#__PURE__*/ React.createElement(TextInput, {
142
155
  className: styles.searchInput,
143
- placeholder: "Search content type",
156
+ placeholder: $_i18n._({
157
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SearchContentTypePlaceholder",
158
+ message: "Search content type"
159
+ }),
144
160
  testId: "add-entry-menu-search",
145
161
  value: searchInput,
146
162
  onChange: (e)=>setSearchInput(e.target.value)
147
163
  }), /*#__PURE__*/ React.createElement(MagnifyingGlassIcon, {
148
164
  size: "small",
149
165
  className: styles.searchIcon
150
- }))), searchInput && renderSearchResultsCount(searchFilteredContentTypes.length), suggestedContentType && !searchInput && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Menu.SectionTitle, null, "Suggested Content Type"), /*#__PURE__*/ React.createElement(Menu.Item, {
166
+ })), searchInput && renderSearchResultsCount(searchFilteredContentTypes.length), suggestedContentType && !searchInput && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Menu.SectionTitle, null, $_i18n._({
167
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.SuggestedContentTypeLabel",
168
+ message: "Suggested Content Type"
169
+ })), /*#__PURE__*/ React.createElement(Menu.Item, {
151
170
  testId: "suggested",
152
171
  onClick: ()=>handleSelect(suggestedContentType)
153
172
  }, get(suggestedContentType, 'name')), /*#__PURE__*/ React.createElement(Menu.Divider, null)), !searchInput && /*#__PURE__*/ React.createElement(Menu.SectionTitle, null, contentTypesLabel), searchFilteredContentTypes.length ? searchFilteredContentTypes.map((contentType, i)=>/*#__PURE__*/ React.createElement(Menu.Item, {
154
173
  testId: "contentType",
155
174
  key: `${get(contentType, 'name')}-${i}`,
156
175
  onClick: ()=>handleSelect(contentType)
157
- }, get(contentType, 'name', 'Untitled'))) : /*#__PURE__*/ React.createElement(Menu.Item, {
158
- testId: "add-entru-menu-search-results"
159
- }, "No results found"))));
160
- };
161
- CreateEntryMenuTrigger.defaultProps = {
162
- testId: 'create-entry-button-menu-trigger',
163
- contentTypesLabel: 'All Content Types',
164
- filterExperienceTypes: true
176
+ }, get(contentType, 'name', $_i18n._({
177
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.ContentTypeFallbackLabel",
178
+ message: "Untitled"
179
+ })))) : /*#__PURE__*/ React.createElement(Menu.Item, {
180
+ testId: "add-entry-menu-search-results"
181
+ }, $_i18n._({
182
+ id: "FieldEditors.Reference.CreateEntryMenuTrigger.NoResultsLabel",
183
+ message: "No results found"
184
+ })))));
165
185
  };
@@ -129,7 +129,7 @@ describe('CreateEntryMenuTrigger general', ()=>{
129
129
  preventDefault: noop
130
130
  });
131
131
  expect(getAllByTestId('contentType')).toHaveLength(10);
132
- expect(getByTestId('add-entru-menu-search-results').textContent).toBe('10 results');
132
+ expect(getByTestId('add-entry-menu-search-results').textContent).toBe('10 results');
133
133
  fireEvent.change(input, {
134
134
  target: {
135
135
  value: '3'
@@ -137,14 +137,14 @@ describe('CreateEntryMenuTrigger general', ()=>{
137
137
  preventDefault: noop
138
138
  });
139
139
  expect(getAllByTestId('contentType')).toHaveLength(1);
140
- expect(getByTestId('add-entru-menu-search-results').textContent).toBe('1 result');
140
+ expect(getByTestId('add-entry-menu-search-results').textContent).toBe('1 result');
141
141
  fireEvent.change(input, {
142
142
  target: {
143
143
  value: '4'
144
144
  },
145
145
  preventDefault: noop
146
146
  });
147
- expect(getByTestId('add-entru-menu-search-results').textContent).toBe('No results found');
147
+ expect(getByTestId('add-entry-menu-search-results').textContent).toBe('No results found');
148
148
  });
149
149
  it('shows suggestedContentType in the list', ()=>{
150
150
  const { getByTestId } = render(/*#__PURE__*/ React.createElement(CreateEntryMenuTrigger, {
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
- import { MenuProps } from '@contentful/f36-components';
3
- import { ContentType } from '../../types';
2
+ import { type MenuProps } from '@contentful/f36-components';
3
+ import type { ContentType } from '../../types';
4
4
  type CreateEntryMenuTriggerChildProps = {
5
5
  isOpen: boolean;
6
6
  isSelecting: boolean;
7
7
  };
8
8
  export type CreateEntryMenuTriggerChild = (props: CreateEntryMenuTriggerChildProps) => React.ReactElement;
9
9
  export type CreateCustomEntryMenuItems = ({ closeMenu, }: {
10
- closeMenu: Function;
10
+ closeMenu: () => void;
11
11
  }) => React.ReactElement;
12
12
  interface CreateEntryMenuTrigger {
13
13
  contentTypes: ContentType[];
@@ -25,12 +25,5 @@ interface CreateEntryMenuTrigger {
25
25
  menuProps?: Omit<MenuProps, 'children'>;
26
26
  filterExperienceTypes?: boolean;
27
27
  }
28
- export declare const CreateEntryMenuTrigger: {
29
- ({ contentTypes, suggestedContentTypeId, contentTypesLabel, title, onSelect, testId, dropdownSettings, customDropdownItems, children, menuProps, filterExperienceTypes, }: CreateEntryMenuTrigger): React.JSX.Element;
30
- defaultProps: {
31
- testId: string;
32
- contentTypesLabel: string;
33
- filterExperienceTypes: boolean;
34
- };
35
- };
28
+ export declare const CreateEntryMenuTrigger: ({ contentTypes, suggestedContentTypeId, contentTypesLabel, title, onSelect, testId, dropdownSettings, customDropdownItems, children, menuProps, filterExperienceTypes, }: CreateEntryMenuTrigger) => React.JSX.Element;
36
29
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/field-editor-reference",
3
- "version": "6.17.0",
3
+ "version": "6.18.0",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "registry": "https://npm.pkg.github.com/"
70
70
  },
71
- "gitHead": "fdd4f24a3d228412061a01660a1281813535b4eb"
71
+ "gitHead": "b25d0af70c82c9e29505335ce636f2e32e6cb927"
72
72
  }