@ndla/image-search 11.0.41-alpha.0 → 11.0.43-alpha.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.
Files changed (3) hide show
  1. package/es/ImageSearch.js +12 -9
  2. package/lib/ImageSearch.js +12 -9
  3. package/package.json +5 -5
package/es/ImageSearch.js CHANGED
@@ -27,7 +27,7 @@ const StyledSearchResults = styled("div", {
27
27
  gridAutoFlow: "dense"
28
28
  }
29
29
  });
30
- const StyledForm = styled("form", {
30
+ const InputWrapper = styled("div", {
31
31
  base: {
32
32
  display: "flex",
33
33
  gap: "xsmall"
@@ -127,28 +127,30 @@ const ImageSearch = _ref => {
127
127
  query: value
128
128
  }));
129
129
  };
130
- const handleSubmit = e => {
131
- e.preventDefault();
132
- e.stopPropagation();
133
- searchImages(queryObject);
130
+ const onEnter = e => {
131
+ if (e.key === "Enter") {
132
+ searchImages(queryObject);
133
+ }
134
134
  };
135
135
  useEffect(() => {
136
136
  searchImages(queryObject);
137
137
  // eslint-disable-next-line react-hooks/exhaustive-deps
138
138
  }, []);
139
139
  return /*#__PURE__*/_jsxs(ImageSearchWrapper, {
140
- children: [/*#__PURE__*/_jsxs(StyledForm, {
141
- onSubmit: handleSubmit,
140
+ children: [/*#__PURE__*/_jsxs(InputWrapper, {
141
+ role: "search",
142
142
  children: [/*#__PURE__*/_jsx(Input, {
143
143
  type: "search",
144
144
  placeholder: translations.searchPlaceholder,
145
145
  value: queryObject?.query,
146
- onChange: handleQueryChange
146
+ onChange: handleQueryChange,
147
+ onKeyDown: onEnter
147
148
  }), /*#__PURE__*/_jsx(IconButton, {
148
149
  variant: "primary",
149
- type: "submit",
150
150
  "aria-label": translations.searchButtonTitle,
151
151
  title: translations.searchButtonTitle,
152
+ onKeyDown: onEnter,
153
+ onClick: () => searchImages(queryObject),
152
154
  children: /*#__PURE__*/_jsx(SearchLine, {})
153
155
  })]
154
156
  }), noResultsFound && noResults, /*#__PURE__*/_jsx(StyledSearchResults, {
@@ -170,6 +172,7 @@ const ImageSearch = _ref => {
170
172
  translations: translations.paginationTranslations,
171
173
  count: searchResult?.totalCount ?? 0,
172
174
  pageSize: searchResult?.pageSize,
175
+ hidden: noResultsFound,
173
176
  children: [/*#__PURE__*/_jsx(PaginationPrevTrigger, {
174
177
  asChild: true,
175
178
  children: /*#__PURE__*/_jsxs(StyledButton, {
package/lib/ImageSearch.js CHANGED
@@ -34,7 +34,7 @@ const StyledSearchResults = (0, _jsx2.styled)("div", {
34
34
  gridAutoFlow: "dense"
35
35
  }
36
36
  });
37
- const StyledForm = (0, _jsx2.styled)("form", {
37
+ const InputWrapper = (0, _jsx2.styled)("div", {
38
38
  base: {
39
39
  display: "flex",
40
40
  gap: "xsmall"
@@ -134,28 +134,30 @@ const ImageSearch = _ref => {
134
134
  query: value
135
135
  }));
136
136
  };
137
- const handleSubmit = e => {
138
- e.preventDefault();
139
- e.stopPropagation();
140
- searchImages(queryObject);
137
+ const onEnter = e => {
138
+ if (e.key === "Enter") {
139
+ searchImages(queryObject);
140
+ }
141
141
  };
142
142
  (0, _react.useEffect)(() => {
143
143
  searchImages(queryObject);
144
144
  // eslint-disable-next-line react-hooks/exhaustive-deps
145
145
  }, []);
146
146
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageSearchWrapper, {
147
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledForm, {
148
- onSubmit: handleSubmit,
147
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
148
+ role: "search",
149
149
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Input, {
150
150
  type: "search",
151
151
  placeholder: translations.searchPlaceholder,
152
152
  value: queryObject?.query,
153
- onChange: handleQueryChange
153
+ onChange: handleQueryChange,
154
+ onKeyDown: onEnter
154
155
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
155
156
  variant: "primary",
156
- type: "submit",
157
157
  "aria-label": translations.searchButtonTitle,
158
158
  title: translations.searchButtonTitle,
159
+ onKeyDown: onEnter,
160
+ onClick: () => searchImages(queryObject),
159
161
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.SearchLine, {})
160
162
  })]
161
163
  }), noResultsFound && noResults, /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearchResults, {
@@ -177,6 +179,7 @@ const ImageSearch = _ref => {
177
179
  translations: translations.paginationTranslations,
178
180
  count: searchResult?.totalCount ?? 0,
179
181
  pageSize: searchResult?.pageSize,
182
+ hidden: noResultsFound,
180
183
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PaginationPrevTrigger, {
181
184
  asChild: true,
182
185
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/image-search",
3
- "version": "11.0.41-alpha.0",
3
+ "version": "11.0.43-alpha.0",
4
4
  "description": "A simple library for searching images from NDLA",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -26,14 +26,14 @@
26
26
  "es"
27
27
  ],
28
28
  "dependencies": {
29
- "@ndla/icons": "^8.0.27-alpha.0",
29
+ "@ndla/icons": "^8.0.28-alpha.0",
30
30
  "@ndla/licenses": "^8.0.3-alpha.0",
31
- "@ndla/primitives": "^1.0.38-alpha.0",
31
+ "@ndla/primitives": "^1.0.40-alpha.0",
32
32
  "@ndla/styled-system": "^0.0.23",
33
33
  "pretty-bytes": "^5.6.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@ndla/preset-panda": "^0.0.36",
36
+ "@ndla/preset-panda": "^0.0.37",
37
37
  "@ndla/types-backend": "^0.2.86",
38
38
  "@pandacss/dev": "^0.46.0"
39
39
  },
@@ -44,5 +44,5 @@
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "fa8b235f77c036a235f87c3e5875a2e938cb0ccd"
47
+ "gitHead": "e79c68709bfa94d73a608d460f271f41f9f04e09"
48
48
  }