@searchstax-inc/searchstudio-ux-react 0.3.3 → 0.3.15
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.
- package/README.md +123 -70
- package/dist/@searchstax-inc/components/SearchstaxResultWidget.d.ts +1 -1
- package/dist/@searchstax-inc/searchstudio-ux-react.cjs +26 -28
- package/dist/@searchstax-inc/searchstudio-ux-react.iife.js +26 -28
- package/dist/@searchstax-inc/searchstudio-ux-react.mjs +688 -628
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -160,20 +160,26 @@ example of input widget initialization with template override
|
|
|
160
160
|
onMouseClick: () => void
|
|
161
161
|
): React.ReactElement {
|
|
162
162
|
return (
|
|
163
|
-
|
|
163
|
+
<div className="searchstax-search-input-wrapper">
|
|
164
164
|
<input
|
|
165
165
|
type="text"
|
|
166
166
|
id="searchstax-search-input"
|
|
167
167
|
className="searchstax-search-input"
|
|
168
168
|
placeholder="SEARCH FOR..."
|
|
169
|
+
aria-label="search"
|
|
169
170
|
/>
|
|
170
171
|
<div
|
|
171
|
-
className={`searchstax-autosuggest-container ${
|
|
172
|
+
className={`searchstax-autosuggest-container ${
|
|
173
|
+
suggestions.length === 0 ? "hidden" : ""
|
|
174
|
+
}`}
|
|
172
175
|
onMouseLeave={onMouseLeave}
|
|
173
176
|
>
|
|
174
177
|
{suggestions.map(function (suggestion) {
|
|
175
178
|
return (
|
|
176
|
-
<div
|
|
179
|
+
<div
|
|
180
|
+
className="searchstax-autosuggest-item"
|
|
181
|
+
key={suggestion.term}
|
|
182
|
+
>
|
|
177
183
|
<div
|
|
178
184
|
className="searchstax-autosuggest-item-term-container"
|
|
179
185
|
dangerouslySetInnerHTML={{ __html: suggestion.term }}
|
|
@@ -189,7 +195,11 @@ example of input widget initialization with template override
|
|
|
189
195
|
})}
|
|
190
196
|
</div>
|
|
191
197
|
|
|
192
|
-
<button
|
|
198
|
+
<button
|
|
199
|
+
className="searchstax-spinner-icon"
|
|
200
|
+
id="searchstax-search-input-action-button"
|
|
201
|
+
aria-label="search"
|
|
202
|
+
></button>
|
|
193
203
|
</div>
|
|
194
204
|
);
|
|
195
205
|
}
|
|
@@ -223,7 +233,7 @@ example of results widget initialization with minimum options for infinite scrol
|
|
|
223
233
|
|
|
224
234
|
example of result widget initialization with template override
|
|
225
235
|
```
|
|
226
|
-
function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadata | null): React.ReactElement {
|
|
236
|
+
function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadata | null, executeSearch: (term:string) => void): React.ReactElement {
|
|
227
237
|
return (
|
|
228
238
|
<div>
|
|
229
239
|
<div className="searchstax-no-results">
|
|
@@ -233,21 +243,24 @@ function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadat
|
|
|
233
243
|
{metaData?.spellingSuggestion && (
|
|
234
244
|
<span>
|
|
235
245
|
Did you mean{" "}
|
|
236
|
-
<a href="#" className="searchstax-suggestion-term"
|
|
246
|
+
<a href="#" className="searchstax-suggestion-term" onClick={(e) => {
|
|
247
|
+
e.preventDefault();
|
|
248
|
+
executeSearch(metaData?.spellingSuggestion);
|
|
249
|
+
}}>
|
|
237
250
|
{metaData?.spellingSuggestion}
|
|
238
251
|
</a>
|
|
239
252
|
?
|
|
240
253
|
</span>
|
|
241
254
|
)}
|
|
242
255
|
</div>
|
|
243
|
-
<
|
|
244
|
-
<
|
|
256
|
+
<ul>
|
|
257
|
+
<li>
|
|
245
258
|
{" "}
|
|
246
259
|
Try searching for search related terms or topics. We offer a wide variety of content to help you get the
|
|
247
260
|
information you need.{" "}
|
|
248
|
-
</
|
|
249
|
-
<
|
|
250
|
-
</
|
|
261
|
+
</li>
|
|
262
|
+
<li>Lost? Click on the ‘X” in the Search Box to reset your search.</li>
|
|
263
|
+
</ul>
|
|
251
264
|
</div>
|
|
252
265
|
);
|
|
253
266
|
}
|
|
@@ -257,64 +270,89 @@ function noResultTemplate(searchTerm: string, metaData: ISearchstaxSearchMetadat
|
|
|
257
270
|
resultClicked: (results: ISearchstaxParsedResult, event: any) => ISearchstaxParsedResult[]
|
|
258
271
|
): React.ReactElement {
|
|
259
272
|
return (
|
|
260
|
-
|
|
261
|
-
{searchResults
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
></a>
|
|
279
|
-
)}
|
|
280
|
-
|
|
281
|
-
{searchResult.ribbon && <div className="searchstax-search-result-ribbon">{searchResult.ribbon}</div>}
|
|
282
|
-
|
|
283
|
-
{searchResult.thumbnail && <img src={searchResult.thumbnail} className="searchstax-thumbnail" />}
|
|
284
|
-
|
|
285
|
-
<div className="searchstax-search-result-title-container">
|
|
286
|
-
<span className="searchstax-search-result-title">{searchResult.title}</span>
|
|
287
|
-
</div>
|
|
273
|
+
<>
|
|
274
|
+
{searchResults && searchResults.length && (
|
|
275
|
+
<div className="searchstax-search-results">
|
|
276
|
+
{searchResults !== null &&
|
|
277
|
+
searchResults.map(function (searchResult) {
|
|
278
|
+
return (
|
|
279
|
+
<a href={searchResult.url ?? ''} key={searchResult.uniqueId} onClick={event => {
|
|
280
|
+
resultClicked(searchResult, event);
|
|
281
|
+
}} tabIndex={0} data-searchstax-unique-result-id={ searchResult.uniqueId} className="searchstax-result-item-link searchstax-result-item-link-wrapping">
|
|
282
|
+
<div
|
|
283
|
+
className={`searchstax-search-result ${
|
|
284
|
+
searchResult.thumbnail ? "has-thumbnail" : ""
|
|
285
|
+
}`}
|
|
286
|
+
key={searchResult.uniqueId}
|
|
287
|
+
>
|
|
288
|
+
{searchResult.promoted && (
|
|
289
|
+
<div className="searchstax-search-result-promoted"></div>
|
|
290
|
+
)}
|
|
288
291
|
|
|
289
|
-
{searchResult.paths && <p className="searchstax-search-result-common">{searchResult.paths}</p>}
|
|
290
292
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
293
|
+
{searchResult.ribbon && (
|
|
294
|
+
<div className="searchstax-search-result-ribbon">
|
|
295
|
+
{searchResult.ribbon}
|
|
296
|
+
</div>
|
|
297
|
+
)}
|
|
298
|
+
|
|
299
|
+
{searchResult.thumbnail && (
|
|
300
|
+
<img
|
|
301
|
+
src={searchResult.thumbnail}
|
|
302
|
+
className="searchstax-thumbnail"
|
|
303
|
+
/>
|
|
304
|
+
)}
|
|
305
|
+
|
|
306
|
+
<div className="searchstax-search-result-title-container">
|
|
307
|
+
<span className="searchstax-search-result-title">
|
|
308
|
+
{searchResult.title}
|
|
309
|
+
</span>
|
|
310
|
+
</div>
|
|
296
311
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
312
|
+
{searchResult.paths && (
|
|
313
|
+
<p className="searchstax-search-result-common">
|
|
314
|
+
{searchResult.paths}
|
|
315
|
+
</p>
|
|
316
|
+
)}
|
|
317
|
+
|
|
318
|
+
{searchResult.description && (
|
|
319
|
+
<p className="searchstax-search-result-description searchstax-search-result-common">
|
|
320
|
+
{searchResult.description}
|
|
321
|
+
</p>
|
|
322
|
+
)}
|
|
323
|
+
|
|
324
|
+
{searchResult.unmappedFields.map(function (
|
|
325
|
+
unmappedField: any
|
|
326
|
+
) {
|
|
327
|
+
return (
|
|
328
|
+
<div key={unmappedField.key}>
|
|
329
|
+
{unmappedField.isImage &&
|
|
330
|
+
typeof unmappedField.value === "string" && (
|
|
331
|
+
<div className="searchstax-search-result-image-container">
|
|
332
|
+
<img
|
|
333
|
+
src={unmappedField.value}
|
|
334
|
+
className="searchstax-result-image"
|
|
335
|
+
/>
|
|
336
|
+
</div>
|
|
337
|
+
)}
|
|
305
338
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
339
|
+
{!unmappedField.isImage && (
|
|
340
|
+
<div>
|
|
341
|
+
<p className="searchstax-search-result-common">
|
|
342
|
+
{unmappedField.value}
|
|
343
|
+
</p>
|
|
344
|
+
</div>
|
|
345
|
+
)}
|
|
309
346
|
</div>
|
|
310
|
-
)
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
347
|
+
);
|
|
348
|
+
})}
|
|
349
|
+
</div>
|
|
350
|
+
</a>
|
|
351
|
+
);
|
|
352
|
+
})}
|
|
353
|
+
</div>
|
|
354
|
+
)}
|
|
355
|
+
</>
|
|
318
356
|
);
|
|
319
357
|
}
|
|
320
358
|
|
|
@@ -342,16 +380,19 @@ function paginationTemplate(
|
|
|
342
380
|
previousPage: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
|
|
343
381
|
) {
|
|
344
382
|
return (
|
|
345
|
-
|
|
383
|
+
<>
|
|
346
384
|
{paginationData && paginationData?.totalResults !== 0 && (
|
|
347
385
|
<div className="searchstax-pagination-container">
|
|
348
386
|
<div className="searchstax-pagination-content">
|
|
349
387
|
<a
|
|
350
388
|
className="searchstax-pagination-previous"
|
|
351
|
-
style={
|
|
389
|
+
style={
|
|
390
|
+
paginationData?.isFirstPage ? { pointerEvents: "none" } : {}
|
|
391
|
+
}
|
|
352
392
|
onClick={(e) => {
|
|
353
393
|
previousPage(e);
|
|
354
394
|
}}
|
|
395
|
+
tabIndex={0}
|
|
355
396
|
id="searchstax-pagination-previous"
|
|
356
397
|
>
|
|
357
398
|
{" "}
|
|
@@ -359,14 +400,19 @@ function paginationTemplate(
|
|
|
359
400
|
</a>
|
|
360
401
|
<div className="searchstax-pagination-details">
|
|
361
402
|
{" "}
|
|
362
|
-
{paginationData?.startResultIndex} -
|
|
403
|
+
{paginationData?.startResultIndex} -{" "}
|
|
404
|
+
{paginationData?.endResultIndex} of{" "}
|
|
405
|
+
{paginationData?.totalResults}
|
|
363
406
|
</div>
|
|
364
407
|
<a
|
|
365
408
|
className="searchstax-pagination-next"
|
|
366
|
-
style={
|
|
409
|
+
style={
|
|
410
|
+
paginationData?.isLastPage ? { pointerEvents: "none" } : {}
|
|
411
|
+
}
|
|
367
412
|
onClick={(e) => {
|
|
368
413
|
nextPage(e);
|
|
369
414
|
}}
|
|
415
|
+
tabIndex={0}
|
|
370
416
|
id="searchstax-pagination-next"
|
|
371
417
|
>
|
|
372
418
|
Next >
|
|
@@ -399,6 +445,11 @@ example of pagination widget for infinite scroll
|
|
|
399
445
|
onClick={(e) => {
|
|
400
446
|
nextPage(e);
|
|
401
447
|
}}
|
|
448
|
+
onKeyDown={(e) => {
|
|
449
|
+
if(e.key === 'Enter' || e.key === ' ') {
|
|
450
|
+
nextPage(e as any);
|
|
451
|
+
}
|
|
452
|
+
}}
|
|
402
453
|
>
|
|
403
454
|
Show More >
|
|
404
455
|
</a>
|
|
@@ -462,7 +513,7 @@ function facetsTemplateDesktop(
|
|
|
462
513
|
toggleFacetGroup(facet.name);
|
|
463
514
|
}}
|
|
464
515
|
>
|
|
465
|
-
<div className="searchstax-facet-title"> {facet.label}
|
|
516
|
+
<div className="searchstax-facet-title"> {facet.label}</div>
|
|
466
517
|
<div className="searchstax-facet-title-arrow active"></div>
|
|
467
518
|
</div>
|
|
468
519
|
<div className="searchstax-facet-values-container">
|
|
@@ -491,6 +542,7 @@ function facetsTemplateDesktop(
|
|
|
491
542
|
className="searchstax-facet-input-checkbox"
|
|
492
543
|
checked={isChecked(facetValue)}
|
|
493
544
|
readOnly={true}
|
|
545
|
+
aria-label={facetValue.value + ' ' + facetValue.count}
|
|
494
546
|
disabled={facetValue.disabled}
|
|
495
547
|
onClick={(e) => {
|
|
496
548
|
selectFacet(
|
|
@@ -694,6 +746,7 @@ function facetsTemplateDesktop(
|
|
|
694
746
|
className="searchstax-facet-input-checkbox"
|
|
695
747
|
checked={isChecked(facetValue)}
|
|
696
748
|
readOnly={true}
|
|
749
|
+
aria-label={facetValue.value + ' ' + facetValue.count}
|
|
697
750
|
disabled={facetValue.disabled}
|
|
698
751
|
onClick={(e) => {
|
|
699
752
|
selectFacet(
|
|
@@ -972,7 +1025,7 @@ example of sorting widget initialization with template override
|
|
|
972
1025
|
<>
|
|
973
1026
|
{sortingData && sortingData?.searchExecuted && sortingData?.hasResultsOrExternalPromotions && (
|
|
974
1027
|
<div className="searchstax-sorting-container">
|
|
975
|
-
<label className="searchstax-sorting-label" htmlFor="
|
|
1028
|
+
<label className="searchstax-sorting-label" htmlFor="searchstax-search-order-select">
|
|
976
1029
|
Sort By
|
|
977
1030
|
</label>
|
|
978
1031
|
<select
|
|
@@ -3,7 +3,7 @@ declare function SearchstaxResultWidget(props: {
|
|
|
3
3
|
afterLinkClick: (results: ISearchstaxParsedResult) => ISearchstaxParsedResult;
|
|
4
4
|
resultsPerPage?: number;
|
|
5
5
|
renderMethod?: "infiniteScroll" | "pagination";
|
|
6
|
-
noResultTemplate?: (searchTerm: string, metaData: ISearchstaxSearchMetadata | null) => React.ReactElement;
|
|
6
|
+
noResultTemplate?: (searchTerm: string, metaData: ISearchstaxSearchMetadata | null, executeSearch: (searchTerm: string) => void) => React.ReactElement;
|
|
7
7
|
resultsTemplate?: (results: ISearchstaxParsedResult[], resultClicked: (result: ISearchstaxParsedResult, event: any) => any) => React.ReactElement;
|
|
8
8
|
}): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export default SearchstaxResultWidget;
|