@yoast/related-keyphrase-suggestions 0.1.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.
@@ -0,0 +1,430 @@
1
+ import React, { useCallback, useMemo, useState } from "react";
2
+ import PropTypes from "prop-types";
3
+ import { __ } from "@wordpress/i18n";
4
+ import { Button, AutocompleteField } from "@yoast/ui-library";
5
+ import classNames from "classnames";
6
+ import { filter } from "lodash";
7
+
8
+ /**
9
+ * List of all available database countries for the Semrush API. We do not use the label but it is included for reference.
10
+ @link https://www.semrush.com/api-analytics/#databases
11
+ @type {{value: string, label: string}[]}
12
+ */
13
+ const COUNTRIES = [{
14
+ value: "us",
15
+ label: "United States - US"
16
+ }, {
17
+ value: "uk",
18
+ label: "United Kingdom - UK"
19
+ }, {
20
+ value: "ca",
21
+ label: "Canada - CA"
22
+ }, {
23
+ value: "ru",
24
+ label: "Russia - RU"
25
+ }, {
26
+ value: "de",
27
+ label: "Germany - DE"
28
+ }, {
29
+ value: "fr",
30
+ label: "France - FR"
31
+ }, {
32
+ value: "es",
33
+ label: "Spain - ES"
34
+ }, {
35
+ value: "it",
36
+ label: "Italy - IT"
37
+ }, {
38
+ value: "br",
39
+ label: "Brazil - BR"
40
+ }, {
41
+ value: "au",
42
+ label: "Australia - AU"
43
+ }, {
44
+ value: "ar",
45
+ label: "Argentina - AR"
46
+ }, {
47
+ value: "be",
48
+ label: "Belgium - BE"
49
+ }, {
50
+ value: "ch",
51
+ label: "Switzerland - CH"
52
+ }, {
53
+ value: "dk",
54
+ label: "Denmark - DK"
55
+ }, {
56
+ value: "fi",
57
+ label: "Finland - FI"
58
+ }, {
59
+ value: "hk",
60
+ label: "Hong Kong - HK"
61
+ }, {
62
+ value: "ie",
63
+ label: "Ireland - IE"
64
+ }, {
65
+ value: "il",
66
+ label: "Israel - IL"
67
+ }, {
68
+ value: "mx",
69
+ label: "Mexico - MX"
70
+ }, {
71
+ value: "nl",
72
+ label: "Netherlands - NL"
73
+ }, {
74
+ value: "no",
75
+ label: "Norway - NO"
76
+ }, {
77
+ value: "pl",
78
+ label: "Poland - PL"
79
+ }, {
80
+ value: "se",
81
+ label: "Sweden - SE"
82
+ }, {
83
+ value: "sg",
84
+ label: "Singapore - SG"
85
+ }, {
86
+ value: "tr",
87
+ label: "Turkey - TR"
88
+ }, {
89
+ value: "jp",
90
+ label: "Japan - JP"
91
+ }, {
92
+ value: "in",
93
+ label: "India - IN"
94
+ }, {
95
+ value: "hu",
96
+ label: "Hungary - HU"
97
+ }, {
98
+ value: "af",
99
+ label: "Afghanistan - AF"
100
+ }, {
101
+ value: "al",
102
+ label: "Albania - AL"
103
+ }, {
104
+ value: "dz",
105
+ label: "Algeria - DZ"
106
+ }, {
107
+ value: "ao",
108
+ label: "Angola - AO"
109
+ }, {
110
+ value: "am",
111
+ label: "Armenia - AM"
112
+ }, {
113
+ value: "at",
114
+ label: "Austria - AT"
115
+ }, {
116
+ value: "az",
117
+ label: "Azerbaijan - AZ"
118
+ }, {
119
+ value: "bh",
120
+ label: "Bahrain - BH"
121
+ }, {
122
+ value: "bd",
123
+ label: "Bangladesh - BD"
124
+ }, {
125
+ value: "by",
126
+ label: "Belarus - BY"
127
+ }, {
128
+ value: "bz",
129
+ label: "Belize - BZ"
130
+ }, {
131
+ value: "bo",
132
+ label: "Bolivia - BO"
133
+ }, {
134
+ value: "ba",
135
+ label: "Bosnia and Herzegovina - BA"
136
+ }, {
137
+ value: "bw",
138
+ label: "Botswana - BW"
139
+ }, {
140
+ value: "bn",
141
+ label: "Brunei - BN"
142
+ }, {
143
+ value: "bg",
144
+ label: "Bulgaria - BG"
145
+ }, {
146
+ value: "cv",
147
+ label: "Cabo Verde - CV"
148
+ }, {
149
+ value: "kh",
150
+ label: "Cambodia - KH"
151
+ }, {
152
+ value: "cm",
153
+ label: "Cameroon - CM"
154
+ }, {
155
+ value: "cl",
156
+ label: "Chile - CL"
157
+ }, {
158
+ value: "co",
159
+ label: "Colombia - CO"
160
+ }, {
161
+ value: "cr",
162
+ label: "Costa Rica - CR"
163
+ }, {
164
+ value: "hr",
165
+ label: "Croatia - HR"
166
+ }, {
167
+ value: "cy",
168
+ label: "Cyprus - CY"
169
+ }, {
170
+ value: "cz",
171
+ label: "Czech Republic - CZ"
172
+ }, {
173
+ value: "cd",
174
+ label: "Congo - CD"
175
+ }, {
176
+ value: "do",
177
+ label: "Dominican Republic - DO"
178
+ }, {
179
+ value: "ec",
180
+ label: "Ecuador - EC"
181
+ }, {
182
+ value: "eg",
183
+ label: "Egypt - EG"
184
+ }, {
185
+ value: "sv",
186
+ label: "El Salvador - SV"
187
+ }, {
188
+ value: "ee",
189
+ label: "Estonia - EE"
190
+ }, {
191
+ value: "et",
192
+ label: "Ethiopia - ET"
193
+ }, {
194
+ value: "ge",
195
+ label: "Georgia - GE"
196
+ }, {
197
+ value: "gh",
198
+ label: "Ghana - GH"
199
+ }, {
200
+ value: "gr",
201
+ label: "Greece - GR"
202
+ }, {
203
+ value: "gt",
204
+ label: "Guatemala - GT"
205
+ }, {
206
+ value: "gy",
207
+ label: "Guyana - GY"
208
+ }, {
209
+ value: "ht",
210
+ label: "Haiti - HT"
211
+ }, {
212
+ value: "hn",
213
+ label: "Honduras - HN"
214
+ }, {
215
+ value: "is",
216
+ label: "Iceland - IS"
217
+ }, {
218
+ value: "id",
219
+ label: "Indonesia - ID"
220
+ }, {
221
+ value: "jm",
222
+ label: "Jamaica - JM"
223
+ }, {
224
+ value: "jo",
225
+ label: "Jordan - JO"
226
+ }, {
227
+ value: "kz",
228
+ label: "Kazakhstan - KZ"
229
+ }, {
230
+ value: "kw",
231
+ label: "Kuwait - KW"
232
+ }, {
233
+ value: "lv",
234
+ label: "Latvia - LV"
235
+ }, {
236
+ value: "lb",
237
+ label: "Lebanon - LB"
238
+ }, {
239
+ value: "lt",
240
+ label: "Lithuania - LT"
241
+ }, {
242
+ value: "lu",
243
+ label: "Luxembourg - LU"
244
+ }, {
245
+ value: "mg",
246
+ label: "Madagascar - MG"
247
+ }, {
248
+ value: "my",
249
+ label: "Malaysia - MY"
250
+ }, {
251
+ value: "mt",
252
+ label: "Malta - MT"
253
+ }, {
254
+ value: "mu",
255
+ label: "Mauritius - MU"
256
+ }, {
257
+ value: "md",
258
+ label: "Moldova - MD"
259
+ }, {
260
+ value: "mn",
261
+ label: "Mongolia - MN"
262
+ }, {
263
+ value: "me",
264
+ label: "Montenegro - ME"
265
+ }, {
266
+ value: "ma",
267
+ label: "Morocco - MA"
268
+ }, {
269
+ value: "mz",
270
+ label: "Mozambique - MZ"
271
+ }, {
272
+ value: "na",
273
+ label: "Namibia - NA"
274
+ }, {
275
+ value: "np",
276
+ label: "Nepal - NP"
277
+ }, {
278
+ value: "nz",
279
+ label: "New Zealand - NZ"
280
+ }, {
281
+ value: "ni",
282
+ label: "Nicaragua - NI"
283
+ }, {
284
+ value: "ng",
285
+ label: "Nigeria - NG"
286
+ }, {
287
+ value: "om",
288
+ label: "Oman - OM"
289
+ }, {
290
+ value: "py",
291
+ label: "Paraguay - PY"
292
+ }, {
293
+ value: "pe",
294
+ label: "Peru - PE"
295
+ }, {
296
+ value: "ph",
297
+ label: "Philippines - PH"
298
+ }, {
299
+ value: "pt",
300
+ label: "Portugal - PT"
301
+ }, {
302
+ value: "ro",
303
+ label: "Romania - RO"
304
+ }, {
305
+ value: "sa",
306
+ label: "Saudi Arabia - SA"
307
+ }, {
308
+ value: "sn",
309
+ label: "Senegal - SN"
310
+ }, {
311
+ value: "rs",
312
+ label: "Serbia - RS"
313
+ }, {
314
+ value: "sk",
315
+ label: "Slovakia - SK"
316
+ }, {
317
+ value: "si",
318
+ label: "Slovenia - SI"
319
+ }, {
320
+ value: "za",
321
+ label: "South Africa - ZA"
322
+ }, {
323
+ value: "kr",
324
+ label: "South Korea - KR"
325
+ }, {
326
+ value: "lk",
327
+ label: "Sri Lanka - LK"
328
+ }, {
329
+ value: "th",
330
+ label: "Thailand - TH"
331
+ }, {
332
+ value: "bs",
333
+ label: "Bahamas - BS"
334
+ }, {
335
+ value: "tt",
336
+ label: "Trinidad and Tobago - TT"
337
+ }, {
338
+ value: "tn",
339
+ label: "Tunisia - TN"
340
+ }, {
341
+ value: "ua",
342
+ label: "Ukraine - UA"
343
+ }, {
344
+ value: "ae",
345
+ label: "United Arab Emirates - AE"
346
+ }, {
347
+ value: "uy",
348
+ label: "Uruguay - UY"
349
+ }, {
350
+ value: "ve",
351
+ label: "Venezuela - VE"
352
+ }, {
353
+ value: "vn",
354
+ label: "Vietnam - VN"
355
+ }, {
356
+ value: "zm",
357
+ label: "Zambia - ZM"
358
+ }, {
359
+ value: "zw",
360
+ label: "Zimbabwe - ZW"
361
+ }, {
362
+ value: "ly",
363
+ label: "Libya - LY"
364
+ }];
365
+
366
+ /**
367
+ * The Country Selector component.
368
+ *
369
+ * @param {string} [countryCode="us"] The country code.
370
+ * @param {string} [activeCountryCode="us"] The active country code.
371
+ * @param {Function} onChange The change handler for the select.
372
+ * @param {Function} onClick The click handler for the button.
373
+ * @param {string} [className] The class name.
374
+ * @param {string} [userLocale="en"] The user locale, only the language code.
375
+ *
376
+ * @returns {JSX.Element} The country selector.
377
+ */
378
+ export const CountrySelector = ({
379
+ countryCode = "us",
380
+ activeCountryCode = "us",
381
+ onChange,
382
+ onClick,
383
+ className = "",
384
+ userLocale = "en"
385
+ }) => {
386
+ let regionNames;
387
+ try {
388
+ regionNames = new Intl.DisplayNames([userLocale], {
389
+ type: "region"
390
+ });
391
+ } catch (e) {
392
+ // Fallback to the browser language.
393
+ regionNames = new Intl.DisplayNames([navigator.language.split("-")[0]], {
394
+ type: "region"
395
+ });
396
+ }
397
+ const [query, setQuery] = useState("");
398
+ const filteredOptions = useMemo(() => filter(COUNTRIES, option => query ? regionNames.of(option.value.toUpperCase()).toLowerCase().startsWith(query) : true), [query]);
399
+ const handleQueryChange = useCallback(event => {
400
+ setQuery(event.target.value.toLowerCase());
401
+ }, [setQuery]);
402
+ return /*#__PURE__*/React.createElement("div", {
403
+ className: classNames("yst-flex yst-items-end yst-gap-2", className)
404
+ }, /*#__PURE__*/React.createElement(AutocompleteField, {
405
+ id: "yst-country-selector__select",
406
+ label: __("Show results for:", "wordpress-seo"),
407
+ value: countryCode,
408
+ selectedLabel: countryCode ? regionNames.of(countryCode.toUpperCase()) : "",
409
+ onChange: onChange,
410
+ onQueryChange: handleQueryChange,
411
+ className: "sm:yst-w-96"
412
+ }, filteredOptions.map(option => /*#__PURE__*/React.createElement(AutocompleteField.Option, {
413
+ key: option.value,
414
+ value: option.value
415
+ }, regionNames.of(option.value.toUpperCase())))), /*#__PURE__*/React.createElement(Button, {
416
+ id: "yst-country-selector__button",
417
+ size: "large",
418
+ variant: activeCountryCode === countryCode ? "secondary" : "primary",
419
+ onClick: onClick
420
+ }, __("Change country", "wordpress-seo")));
421
+ };
422
+ CountrySelector.propTypes = {
423
+ countryCode: PropTypes.string,
424
+ activeCountryCode: PropTypes.string,
425
+ onChange: PropTypes.func.isRequired,
426
+ onClick: PropTypes.func.isRequired,
427
+ className: PropTypes.string,
428
+ userLocale: PropTypes.string
429
+ };
430
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,225 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import { __ } from "@wordpress/i18n";
3
+ import { SkeletonLoader, Table } from "@yoast/ui-library";
4
+ import { isFunction } from "lodash";
5
+ import PropTypes from "prop-types";
6
+ import React from "react";
7
+ import { DifficultyBullet, IntentBadge, TrendGraph } from "../..";
8
+
9
+ /**
10
+ * The row for the keyphrases table.
11
+ *
12
+ * @param {string} [keyword=""] The keyword.
13
+ * @param {string} [searchVolume=""] The search volume.
14
+ * @param {number[]} [trends=[]] An array of trends for 12 months.
15
+ * @param {number} [keywordDifficultyIndex=-1] The keyword difficulty index.
16
+ * @param {string[]} [intent=[]] An array of intent initials.
17
+ * @param {Function?} [renderButton=null] The render button function.
18
+ * @param {Object[]} [relatedKeyphrases=[]] The related keyphrases.
19
+ * @param {string} id The id of the row.
20
+ *
21
+ * @returns {JSX.Element} The row.
22
+ */
23
+ const KeyphrasesTableRow = ({
24
+ keyword = "",
25
+ searchVolume = "",
26
+ trends = [],
27
+ keywordDifficultyIndex = -1,
28
+ intent = [],
29
+ renderButton = null,
30
+ relatedKeyphrases = [],
31
+ id
32
+ }) => {
33
+ return /*#__PURE__*/React.createElement(Table.Row, {
34
+ id: id
35
+ }, /*#__PURE__*/React.createElement(Table.Cell, null, keyword), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement("div", {
36
+ className: "yst-flex yst-gap-2"
37
+ }, intent.length > 0 && intent.map((value, index) => /*#__PURE__*/React.createElement(IntentBadge, {
38
+ id: `${id}__intent-${index}-${value}`,
39
+ key: `${id}-${index}-${value}`,
40
+ value: value
41
+ })))), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement("div", {
42
+ className: "yst-flex yst-justify-end"
43
+ }, searchVolume)), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(TrendGraph, {
44
+ data: trends
45
+ })), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement("div", {
46
+ className: "yst-flex yst-justify-end"
47
+ }, /*#__PURE__*/React.createElement(DifficultyBullet, {
48
+ value: keywordDifficultyIndex,
49
+ id: `${id}__difficulty-index`
50
+ }))), isFunction(renderButton) && /*#__PURE__*/React.createElement(Table.Cell, null, renderButton(keyword, relatedKeyphrases)));
51
+ };
52
+ KeyphrasesTableRow.propTypes = {
53
+ keyword: PropTypes.string,
54
+ searchVolume: PropTypes.string,
55
+ trends: PropTypes.arrayOf(PropTypes.number),
56
+ keywordDifficultyIndex: PropTypes.number,
57
+ intent: PropTypes.arrayOf(PropTypes.string),
58
+ renderButton: PropTypes.func,
59
+ relatedKeyphrases: PropTypes.arrayOf(PropTypes.shape({
60
+ key: PropTypes.string,
61
+ keyword: PropTypes.string,
62
+ results: PropTypes.array,
63
+ score: PropTypes.number
64
+ })),
65
+ id: PropTypes.string.isRequired
66
+ };
67
+
68
+ /**
69
+ * Loading keyphrase table row.
70
+ *
71
+ * @param {boolean} withButton Whether the user is with button columns or not.
72
+ *
73
+ * @returns {JSX.Element} The loading row.
74
+ */
75
+ const LoadingKeyphrasesTableRow = ({
76
+ withButton = false
77
+ }) => {
78
+ return /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, {
79
+ className: "yst-w-44"
80
+ }, /*#__PURE__*/React.createElement(SkeletonLoader, {
81
+ className: "yst-w-36 yst-h-5"
82
+ })), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(SkeletonLoader, {
83
+ className: "yst-w-5 yst-h-5"
84
+ })), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement("div", {
85
+ className: "yst-flex yst-justify-end"
86
+ }, /*#__PURE__*/React.createElement(SkeletonLoader, {
87
+ className: "yst-w-14 yst-h-5"
88
+ }))), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(SkeletonLoader, {
89
+ className: "yst-w-16 yst-h-5"
90
+ })), /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement("div", {
91
+ className: "yst-flex yst-gap-2 yst-justify-end"
92
+ }, /*#__PURE__*/React.createElement(SkeletonLoader, {
93
+ className: "yst-w-4 yst-h-5"
94
+ }), /*#__PURE__*/React.createElement(SkeletonLoader, {
95
+ className: "yst-w-3 yst-h-5"
96
+ }))), withButton && /*#__PURE__*/React.createElement(Table.Cell, {
97
+ className: "yst-w-32"
98
+ }, /*#__PURE__*/React.createElement("div", {
99
+ className: "yst-flex yst-justify-end"
100
+ }, /*#__PURE__*/React.createElement(SkeletonLoader, {
101
+ className: "yst-w-16 yst-h-7"
102
+ }))));
103
+ };
104
+ LoadingKeyphrasesTableRow.propTypes = {
105
+ withButton: PropTypes.bool
106
+ };
107
+ const intentMapping = ["i", "n", "t", "c"];
108
+
109
+ /**
110
+ * Prepare the row data.
111
+ * @param {string[]} columnNames The column names.
112
+ * @param {string[]} row The row data.
113
+ * @param {Object} searchVolumeFormat The search volume format object.
114
+ * @returns {object} The prepared row.
115
+ */
116
+ const prepareRow = (columnNames, row, searchVolumeFormat) => {
117
+ const rowData = {};
118
+ columnNames.forEach((columnName, index) => {
119
+ switch (columnName) {
120
+ case "Trends":
121
+ rowData.trends = row[index].split(",").map(value => parseFloat(value));
122
+ break;
123
+ case "Intent":
124
+ rowData.intent = row[index].split(",").map(value => intentMapping[Number(value)]);
125
+ break;
126
+ case "Keyword Difficulty Index":
127
+ rowData.keywordDifficultyIndex = Number(row[index]);
128
+ break;
129
+ case "Search Volume":
130
+ rowData.searchVolume = searchVolumeFormat.format(row[index]);
131
+ break;
132
+ default:
133
+ rowData[columnName.toLowerCase()] = row[index];
134
+ }
135
+ });
136
+ return rowData;
137
+ };
138
+
139
+ /**
140
+ *
141
+ * @param {string[]} [columnNames=[]] The column names.
142
+ * @param {string[]} [data] The rows to display in the table.
143
+ * @param {Function?} [renderButton=null] The render button function.
144
+ * @param {Object[]} [relatedKeyphrases=[]] The related keyphrases.
145
+ * @param {string} [className=""] The class name for the table.
146
+ * @param {boolean} [isPending=false] Whether the data is still pending.
147
+ * @param {string} [userLocale="en"] The user locale, only the first part, for example "en" not "en_US".
148
+ * @param {string} [idPrefix=""] The idPrefix for the id of the row.
149
+ *
150
+ * @returns {JSX.Element} The keyphrases table.
151
+ */
152
+ export const KeyphrasesTable = ({
153
+ columnNames = [],
154
+ data = [],
155
+ renderButton = null,
156
+ relatedKeyphrases = [],
157
+ className = "",
158
+ userLocale = "en",
159
+ isPending = false,
160
+ idPrefix = "yoast-seo"
161
+ }) => {
162
+ let searchVolumeFormat;
163
+ try {
164
+ searchVolumeFormat = new Intl.NumberFormat(userLocale, {
165
+ notation: "compact",
166
+ compactDisplay: "short"
167
+ });
168
+ } catch (e) {
169
+ // Fallback to the browser language.
170
+ searchVolumeFormat = new Intl.NumberFormat(navigator.language.split("-")[0], {
171
+ notation: "compact",
172
+ compactDisplay: "short"
173
+ });
174
+ }
175
+ const rows = data === null || data === void 0 ? void 0 : data.map(row => prepareRow(columnNames, row, searchVolumeFormat));
176
+ if ((!rows || rows.length === 0) && !isPending) {
177
+ return null;
178
+ }
179
+ return /*#__PURE__*/React.createElement(Table, {
180
+ className: className
181
+ }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Header, {
182
+ className: "yst-text-start"
183
+ }, __("Related keyphrase", "wordpress-seo")), /*#__PURE__*/React.createElement(Table.Header, {
184
+ className: "yst-text-start"
185
+ }, __("Intent", "wordpress-seo")), /*#__PURE__*/React.createElement(Table.Header, null, /*#__PURE__*/React.createElement("div", {
186
+ className: "yst-flex yst-justify-end"
187
+ }, __("Volume", "wordpress-seo"))), /*#__PURE__*/React.createElement(Table.Header, {
188
+ className: "yst-text-start"
189
+ }, __("Trend", "wordpress-seo")), /*#__PURE__*/React.createElement(Table.Header, {
190
+ className: "yst-whitespace-nowrap"
191
+ }, /*#__PURE__*/React.createElement("div", {
192
+ className: "yst-flex yst-justify-end"
193
+ }, __("Difficulty %", "wordpress-seo"))), renderButton && /*#__PURE__*/React.createElement(Table.Header, null, /*#__PURE__*/React.createElement("div", {
194
+ className: "yst-flex yst-justify-end"
195
+ }, /*#__PURE__*/React.createElement("div", {
196
+ className: "yst-text-end yst-w-[88px]"
197
+ }, __("Add keyphrase", "wordpress-seo")))))), /*#__PURE__*/React.createElement(Table.Body, null, !isPending && rows && rows.map((rowData, index) => /*#__PURE__*/React.createElement(KeyphrasesTableRow, _extends({
198
+ key: `${idPrefix}-related-keyphrase-${index}`,
199
+ id: `${idPrefix}-related-keyphrase-${index}`,
200
+ renderButton: renderButton,
201
+ relatedKeyphrases: relatedKeyphrases
202
+ }, rowData))), isPending && Array.from({
203
+ length: 10
204
+ }, (_, index) => /*#__PURE__*/React.createElement(LoadingKeyphrasesTableRow, {
205
+ key: `loading-row-${index}`,
206
+ withButton: isFunction(renderButton)
207
+ }))));
208
+ };
209
+ KeyphrasesTable.propTypes = {
210
+ columnNames: PropTypes.arrayOf(PropTypes.string),
211
+ data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
212
+ relatedKeyphrases: PropTypes.arrayOf(PropTypes.shape({
213
+ key: PropTypes.string,
214
+ keyword: PropTypes.string,
215
+ results: PropTypes.array,
216
+ score: PropTypes.number
217
+ })),
218
+ renderButton: PropTypes.func,
219
+ className: PropTypes.string,
220
+ isPending: PropTypes.bool,
221
+ userLocale: PropTypes.string,
222
+ idPrefix: PropTypes.string
223
+ };
224
+ KeyphrasesTable.displayName = "KeyphrasesTable";
225
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+
3
+ /**
4
+ * The Yoast icon component.
5
+ *
6
+ * @returns {JSX.Element} The Yoast icon component.
7
+ */
8
+ export const YoastIcon = () => {
9
+ return /*#__PURE__*/React.createElement("svg", {
10
+ className: "yst-w-[17px] yst-h-[17px] yst-fill-primary-500 yst-mt-[3px]",
11
+ xmlns: "http://www.w3.org/2000/svg",
12
+ viewBox: "0 0 425 456.27",
13
+ role: "img",
14
+ "aria-hidden": "true",
15
+ focusable: "false"
16
+ }, /*#__PURE__*/React.createElement("path", {
17
+ d: "M73 405.26a66.79 66.79 0 0 1-6.54-1.7 64.75 64.75 0 0 1-6.28-2.31c-1-.42-2-.89-3-1.37-1.49-.72-3-1.56-4.77-2.56-1.5-.88-2.71-1.64-3.83-2.39-.9-.61-1.8-1.26-2.68-1.92a70.154 70.154 0 0 1-5.08-4.19 69.21 69.21 0 0 1-8.4-9.17c-.92-1.2-1.68-2.25-2.35-3.24a70.747 70.747 0 0 1-3.44-5.64 68.29 68.29 0 0 1-8.29-32.55V142.13a68.26 68.26 0 0 1 8.29-32.55c1-1.92 2.21-3.82 3.44-5.64s2.55-3.58 4-5.27a69.26 69.26 0 0 1 14.49-13.25C50.37 84.19 52.27 83 54.2 82A67.59 67.59 0 0 1 73 75.09a68.75 68.75 0 0 1 13.75-1.39h169.66L263 55.39H86.75A86.84 86.84 0 0 0 0 142.13v196.09A86.84 86.84 0 0 0 86.75 425h11.32v-18.35H86.75A68.75 68.75 0 0 1 73 405.26zM368.55 60.85l-1.41-.53-6.41 17.18 1.41.53a68.06 68.06 0 0 1 8.66 4c1.93 1 3.82 2.2 5.65 3.43A69.19 69.19 0 0 1 391 98.67c1.4 1.68 2.72 3.46 3.95 5.27s2.39 3.72 3.44 5.64a68.29 68.29 0 0 1 8.29 32.55v264.52H233.55l-.44.76c-3.07 5.37-6.26 10.48-9.49 15.19L222 425h203V142.13a87.2 87.2 0 0 0-56.45-81.28z"
18
+ }), /*#__PURE__*/React.createElement("path", {
19
+ d: "M119.8 408.28v46c28.49-1.12 50.73-10.6 69.61-29.58 19.45-19.55 36.17-50 52.61-96L363.94 1.9H305l-98.25 272.89-48.86-153h-54l71.7 184.18a75.67 75.67 0 0 1 0 55.12c-7.3 18.68-20.25 40.66-55.79 47.19z",
20
+ stroke: "#000",
21
+ strokeMiterlimit: "10",
22
+ strokeWidth: "3.81"
23
+ }));
24
+ };
25
+ //# sourceMappingURL=YoastIcon.js.map