hds-web 1.41.0 → 1.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.
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/helpers/AlgoliaSearch/searchbox.js +30 -13
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
|
2
2
|
import { connectSearchBox } from "react-instantsearch-dom";
|
|
3
|
-
import { Icon } from
|
|
4
|
-
import { Typography } from
|
|
3
|
+
import { Icon } from "../../components/common-components/Icon";
|
|
4
|
+
import { Typography } from "../../foundation/Typography";
|
|
5
5
|
const searchSuggestions = [
|
|
6
|
+
"AI",
|
|
6
7
|
"GraphQL",
|
|
7
8
|
"Actions",
|
|
8
9
|
"Authentication",
|
|
@@ -25,7 +26,7 @@ const DebouncedSearchBox = ({
|
|
|
25
26
|
searchInputRef.current?.focus();
|
|
26
27
|
}, []);
|
|
27
28
|
|
|
28
|
-
const trySuggestion = inputValue => {
|
|
29
|
+
const trySuggestion = (inputValue) => {
|
|
29
30
|
refine(inputValue);
|
|
30
31
|
setValue(inputValue);
|
|
31
32
|
};
|
|
@@ -35,7 +36,7 @@ const DebouncedSearchBox = ({
|
|
|
35
36
|
setValue("");
|
|
36
37
|
};
|
|
37
38
|
|
|
38
|
-
const onChangeDebounced = event => {
|
|
39
|
+
const onChangeDebounced = (event) => {
|
|
39
40
|
const value = event.target.value;
|
|
40
41
|
|
|
41
42
|
clearTimeout(timerId.current);
|
|
@@ -50,10 +51,17 @@ const DebouncedSearchBox = ({
|
|
|
50
51
|
{isSearchStalled ? (
|
|
51
52
|
<div className="loader-spin border-[3px] border-neutral-400 border-t-blue-500 w-5 h-5 rounded-full" />
|
|
52
53
|
) : (
|
|
53
|
-
<Icon
|
|
54
|
+
<Icon
|
|
55
|
+
height={"w-8 h-8 stroke-[1.5px]"}
|
|
56
|
+
variant="searchsm"
|
|
57
|
+
strokeClass="stroke-neutral-800"
|
|
58
|
+
/>
|
|
54
59
|
)}
|
|
55
60
|
</div>
|
|
56
|
-
<form
|
|
61
|
+
<form
|
|
62
|
+
className={`${className} w-full`}
|
|
63
|
+
onSubmit={(e) => e.preventDefault()}
|
|
64
|
+
>
|
|
57
65
|
<input
|
|
58
66
|
id="search-input"
|
|
59
67
|
ref={searchInputRef}
|
|
@@ -65,21 +73,30 @@ const DebouncedSearchBox = ({
|
|
|
65
73
|
value={value}
|
|
66
74
|
/>
|
|
67
75
|
</form>
|
|
68
|
-
<div
|
|
69
|
-
|
|
76
|
+
<div
|
|
77
|
+
onClick={resetInput}
|
|
78
|
+
className="absolute right-2 cursor-pointer rounded-md"
|
|
79
|
+
>
|
|
80
|
+
<Icon
|
|
81
|
+
height={"w-6 h-6 stroke-[1.5px]"}
|
|
82
|
+
variant="xclose"
|
|
83
|
+
strokeClass="stroke-neutral-800"
|
|
84
|
+
/>
|
|
70
85
|
</div>
|
|
71
86
|
</div>
|
|
72
87
|
<div className="tb:flex flex-wrap items-center mt-4">
|
|
73
88
|
{/* <Typography textStyle="body2c-bold" className="uppercase text-neutral-500 mr-4">POPULAR</Typography> */}
|
|
74
|
-
{searchSuggestions.map(suggestion => (
|
|
89
|
+
{searchSuggestions.map((suggestion) => (
|
|
75
90
|
<button
|
|
76
91
|
key={suggestion}
|
|
77
|
-
className={`px-2 py-[2px] text-blue-800 border rounded-[100px] m-1 ${
|
|
92
|
+
className={`px-2 py-[2px] text-blue-800 border rounded-[100px] m-1 ${
|
|
93
|
+
currentRefinement === suggestion
|
|
94
|
+
? "border-blue-300 hover:bg-blue-300 bg-blue-300"
|
|
95
|
+
: "bg-blue-200 hover:bg-blue-300 border-blue-200"
|
|
96
|
+
}`}
|
|
78
97
|
onClick={() => trySuggestion(suggestion)}
|
|
79
98
|
>
|
|
80
|
-
<Typography textStyle="body2c-medium">
|
|
81
|
-
{suggestion}
|
|
82
|
-
</Typography>
|
|
99
|
+
<Typography textStyle="body2c-medium">{suggestion}</Typography>
|
|
83
100
|
</button>
|
|
84
101
|
))}
|
|
85
102
|
</div>
|