@cn-npm/search-autocomplete 0.2.21 → 0.2.23

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/dist/bundle.js +8 -4
  2. package/package.json +7 -7
  3. package/src/components/SearchAutocomplete/SearchAutocomplete.tsx +10 -16
package/dist/bundle.js CHANGED
@@ -7,7 +7,7 @@ var React = require('react');
7
7
  var reactDebounceInput = require('react-debounce-input');
8
8
  var classNames = require('classnames');
9
9
  var Highlighter = require('react-highlight-words');
10
- var CSSTransition = require('react-transition-group/CSSTransition');
10
+ var react = require('@headlessui/react');
11
11
  var axios = require('axios');
12
12
 
13
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -34,7 +34,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
34
34
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
35
35
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
36
36
  var Highlighter__default = /*#__PURE__*/_interopDefaultLegacy(Highlighter);
37
- var CSSTransition__default = /*#__PURE__*/_interopDefaultLegacy(CSSTransition);
38
37
  var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
39
38
 
40
39
  /******************************************************************************
@@ -52,7 +51,7 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
52
51
  PERFORMANCE OF THIS SOFTWARE.
53
52
  ***************************************************************************** */
54
53
 
55
- /* global Reflect, Promise */
54
+ /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
56
55
  var extendStatics = function (d, b) {
57
56
  extendStatics = Object.setPrototypeOf || {
58
57
  __proto__: []
@@ -89,6 +88,11 @@ var __assign = function () {
89
88
  return __assign.apply(this, arguments);
90
89
  };
91
90
 
91
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
92
+ var e = new Error(message);
93
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
94
+ };
95
+
92
96
  function styleInject(css, ref) {
93
97
  if (ref === void 0) ref = {};
94
98
  var insertAt = ref.insertAt;
@@ -392,7 +396,7 @@ var SearchAutocomplete = function (props) {
392
396
  }
393
397
  }
394
398
  };
395
- return (jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"](styles$3.SearchAutocomplete, "autocomplete"), "data-testid": "SearchAutocomplete" }, { children: [jsxRuntime.jsxs("form", __assign({ action: "/search?q=".concat(searchTerm), className: "flex font-sofia-pro", autoComplete: "off" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "search", className: "hidden" }, { children: label })), jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-grow" }, { children: [jsxRuntime.jsx(reactDebounceInput.DebounceInput, { type: "text", name: "q", id: "search", placeholder: label, className: "form-input flex-auto pr-0 items-stretch flex-grow text-night-sky-800 ring-0 py-0 shadow-none focus:ring-0 bg-white transition-colors border-opacity-100 hover:bg-grey-100 hover:border-grey-500 hover:border-opacity-50 focus:bg-grey-100 focus:border-blue-400 inline-block sm:text-sm border-grey-500 rounded-md rounded-tr-none rounded-br-none placeholder:text-gray-600", debounceTimeout: 300, minLength: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, onClick: function () { return setOpen(true); }, onFocus: function () { return setOpen(true); }, onBlur: function () { return setOpen(false); }, onKeyDown: function (e) { return keyDownHandler(e); } }), searchTerm !== "" && (jsxRuntime.jsx("button", __assign({ type: "button", className: "absolute right-3 top-[50%] -translate-y-[50%] text-night-sky-800 hover:text-blue-500 transition-colors !bg-[transparent] cursor-pointer", onClick: clearSearch }, { children: jsxRuntime.jsx(SvgCircleClose, { className: "fill-night-sky-800 hover:fill-blue-500 h-4 w-4" }) })))] })), jsxRuntime.jsx("button", __assign({ type: "submit", className: "inline-flex transition-colors items-center justify-center px-4 h-[38px] font-medium rounded-md shadow-sm border border-blue-500 text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm rounded-tl-none rounded-bl-none" }, { children: jsxRuntime.jsx(SvgSearch, { className: "fill-white h-4 w-4" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "relative" }, { children: jsxRuntime.jsx(CSSTransition__default["default"], __assign({ mountOnEnter: true, unmountOnExit: true, in: open, timeout: 300, classNames: "fade-slide", "data-testid": "searchResults" }, { children: jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"]("search-results-container absolute top-0 left-1/2 -translate-x-1/2 mt-2 bg-white py-5 rounded-[1.25rem] z-50 shadow-lg border border-[#a6abbd] border-opacity-60 w-full tablet:w-[70vw] min-h-[8rem] overflow-hidden") }, { children: [jsxRuntime.jsxs(ErrorBoundary, { children: [loading && (jsxRuntime.jsx(Loader, { "data-testid": "Loader", className: "absolute top-5 right-5" })), jsxRuntime.jsxs("div", __assign({ className: "px-6 h-full mb-12 max-h-[70vh] overflow-y-auto", "data-testid": "Sections" }, { children: [hasError && (jsxRuntime.jsx("p", { children: "Sorry, there was a problem. Please try your search again." })), searchData.data &&
399
+ return (jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"](styles$3.SearchAutocomplete, "autocomplete"), "data-testid": "SearchAutocomplete" }, { children: [jsxRuntime.jsxs("form", __assign({ action: "/search?q=".concat(searchTerm), className: "flex font-sofia-pro", autoComplete: "off" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "search", className: "hidden" }, { children: label })), jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-grow" }, { children: [jsxRuntime.jsx(reactDebounceInput.DebounceInput, { type: "text", name: "q", id: "search", placeholder: label, className: "form-input flex-auto pr-0 items-stretch flex-grow text-night-sky-800 ring-0 py-0 shadow-none focus:ring-0 bg-white transition-colors border-opacity-100 hover:bg-grey-100 hover:border-grey-500 hover:border-opacity-50 focus:bg-grey-100 focus:border-blue-400 inline-block sm:text-sm border-grey-500 rounded-md rounded-tr-none rounded-br-none placeholder:text-gray-600", debounceTimeout: 300, minLength: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, onClick: function () { return setOpen(true); }, onFocus: function () { return setOpen(true); }, onBlur: function () { return setOpen(false); }, onKeyDown: function (e) { return keyDownHandler(e); } }), searchTerm !== "" && (jsxRuntime.jsx("button", __assign({ type: "button", className: "absolute right-3 top-[50%] -translate-y-[50%] text-night-sky-800 hover:text-blue-500 transition-colors !bg-[transparent] cursor-pointer", onClick: clearSearch }, { children: jsxRuntime.jsx(SvgCircleClose, { className: "fill-night-sky-800 hover:fill-blue-500 h-4 w-4" }) })))] })), jsxRuntime.jsx("button", __assign({ type: "submit", className: "inline-flex transition-colors items-center justify-center px-4 h-[38px] font-medium rounded-md shadow-sm border border-blue-500 text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm rounded-tl-none rounded-bl-none" }, { children: jsxRuntime.jsx(SvgSearch, { className: "fill-white h-4 w-4" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "relative" }, { children: jsxRuntime.jsx(react.Transition, __assign({ show: open, appear: true, "data-testid": "searchResults" }, { children: jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"]("fade-slide", "search-results-container absolute top-0 left-1/2 -translate-x-1/2 mt-2 bg-white py-5 rounded-[1.25rem] z-50 shadow-lg border border-[#a6abbd] border-opacity-60 w-full tablet:w-[70vw] min-h-[8rem] overflow-hidden") }, { children: [jsxRuntime.jsxs(ErrorBoundary, { children: [loading && (jsxRuntime.jsx(Loader, { "data-testid": "Loader", className: "absolute top-5 right-5" })), jsxRuntime.jsxs("div", __assign({ className: "px-6 h-full mb-12 max-h-[70vh] overflow-y-auto", "data-testid": "Sections" }, { children: [hasError && (jsxRuntime.jsx("p", { children: "Sorry, there was a problem. Please try your search again." })), searchData.data &&
396
400
  searchData.data.searchAutocomplete &&
397
401
  searchData.data.searchAutocomplete.map(function (section) { return (jsxRuntime.jsx(SearchAutocompleteSection, { searchTerm: searchTerm, title: section.title, results: section.results }, section.title)); })] }))] }), jsxRuntime.jsx("div", __assign({ className: "border-t border-[#a6abbd] border-opacity-60 flex items-center absolute bottom-0 left-0 w-full bg-white h-16" }, { children: jsxRuntime.jsxs("a", __assign({ href: "/search?q=".concat(searchTerm), className: "px-3 py-1 ml-6 flex items-center space-x-3 ring-1 ring-offset-2 ring-transparent transition-colors text-blue-500 hover:text-blue-600 rounded-lg autocomplete-custom-search" }, { children: [jsxRuntime.jsx(SvgSearch, { className: "fill-blue-500 hover:fill-blue-600 h-4 w-4" }), jsxRuntime.jsx("span", __assign({ className: "font-semibold text-[1.125rem] " }, { children: searchTerm === "" ? "Custom Search" : "View All Results" }))] })) }))] })) })) }))] })));
398
402
  };
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@cn-npm/search-autocomplete",
3
- "version": "0.2.21",
3
+ "version": "0.2.23",
4
4
  "main": "dist/bundle.js",
5
5
  "peerDependencies": {
6
- "@headlessui/react": "^1.7.1",
6
+ "@headlessui/react": "^2.2.10",
7
7
  "axios": "^1.6.5",
8
8
  "classnames": "^2.3.1",
9
- "react": "^18.2.0",
9
+ "react": "^19.2.7",
10
10
  "react-debounce-input": "^3.3.0",
11
- "react-dom": "^18.2.0",
11
+ "react-dom": "^19.2.7",
12
12
  "react-highlight-words": "^0.18.0",
13
13
  "react-transition-group": "^4.4.5",
14
14
  "web-vitals": "^2.1.4"
@@ -52,7 +52,7 @@
52
52
  ]
53
53
  },
54
54
  "devDependencies": {
55
- "@headlessui/react": "^1.7.1",
55
+ "@headlessui/react": "^2.2.10",
56
56
  "@rollup/plugin-commonjs": "^22.0.2",
57
57
  "@rollup/plugin-node-resolve": "^14.1.0",
58
58
  "@rollup/plugin-typescript": "^8.5.0",
@@ -89,9 +89,9 @@
89
89
  "classnames": "^2.3.1",
90
90
  "postcss": "^8.4.16",
91
91
  "prop-types": "^15.8.1",
92
- "react": "^18.2.0",
92
+ "react": "^19.2.7",
93
93
  "react-debounce-input": "^3.3.0",
94
- "react-dom": "^18.2.0",
94
+ "react-dom": "^19.2.7",
95
95
  "react-highlight-words": "^0.18.0",
96
96
  "react-scripts": "5.0.1",
97
97
  "react-transition-group": "^4.4.5",
package/src/components/SearchAutocomplete/SearchAutocomplete.tsx CHANGED
@@ -3,7 +3,7 @@ import styles from "./SearchAutocomplete.module.scss";
3
3
  import { DebounceInput } from "react-debounce-input";
4
4
  import SearchAutocompleteSection from "../SearchAutocompleteSection/SearchAutocompleteSection";
5
5
  import classNames from "classnames";
6
- import CSSTransition from "react-transition-group/CSSTransition";
6
+ import { Transition } from "@headlessui/react";
7
7
  import axios from "axios";
8
8
  import { SearchResponse } from "../../search-result";
9
9
  import Loader from "../Loader/Loader";
@@ -20,7 +20,7 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
20
20
  // Set state variables
21
21
  const [open, setOpen] = useState(props.open || false);
22
22
  const [label, setLabel] = useState(
23
- props.label || "Search by Charity or Cause"
23
+ props.label || "Search by Charity or Cause",
24
24
  );
25
25
  const [loading, setLoading] = useState<boolean>(false);
26
26
  const [searchTerm, setSearchTerm] = useState("");
@@ -35,14 +35,14 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
35
35
  // On selected tag change
36
36
  React.useEffect(() => {
37
37
  const tags = document.querySelectorAll(
38
- ".autocomplete-tag, .autocomplete-custom-search"
38
+ ".autocomplete-tag, .autocomplete-custom-search",
39
39
  );
40
40
 
41
41
  tags.forEach((x, i) => {
42
42
  x.classList.remove(
43
43
  "autocomplete-selected",
44
44
  "!bg-grey-100",
45
- "!ring-blue-600"
45
+ "!ring-blue-600",
46
46
  );
47
47
  if (i + 1 === selectedTag) {
48
48
  x.classList.add(
@@ -50,7 +50,7 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
50
50
  tags[i].classList.contains("autocomplete-tag")
51
51
  ? "!bg-grey-100"
52
52
  : "none",
53
- "!ring-blue-600"
53
+ "!ring-blue-600",
54
54
  );
55
55
  x.scrollIntoView({
56
56
  behavior: "smooth",
@@ -143,7 +143,7 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
143
143
  // Handle key events
144
144
  const keyDownHandler = (e: any) => {
145
145
  const tags = document.querySelectorAll(
146
- ".autocomplete-tag, .autocomplete-custom-search"
146
+ ".autocomplete-tag, .autocomplete-custom-search",
147
147
  );
148
148
 
149
149
  switch (e.key) {
@@ -245,17 +245,11 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
245
245
  </button>
246
246
  </form>
247
247
  <div className="relative">
248
- <CSSTransition
249
- mountOnEnter
250
- unmountOnExit
251
- in={open}
252
- timeout={300}
253
- classNames="fade-slide"
254
- data-testid="searchResults"
255
- >
248
+ <Transition show={open} appear={true} data-testid="searchResults">
256
249
  <div
257
250
  className={classNames(
258
- "search-results-container absolute top-0 left-1/2 -translate-x-1/2 mt-2 bg-white py-5 rounded-[1.25rem] z-50 shadow-lg border border-[#a6abbd] border-opacity-60 w-full tablet:w-[70vw] min-h-[8rem] overflow-hidden"
251
+ "fade-slide",
252
+ "search-results-container absolute top-0 left-1/2 -translate-x-1/2 mt-2 bg-white py-5 rounded-[1.25rem] z-50 shadow-lg border border-[#a6abbd] border-opacity-60 w-full tablet:w-[70vw] min-h-[8rem] overflow-hidden",
259
253
  )}
260
254
  >
261
255
  <ErrorBoundary>
@@ -298,7 +292,7 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
298
292
  </a>
299
293
  </div>
300
294
  </div>
301
- </CSSTransition>
295
+ </Transition>
302
296
  </div>
303
297
  </div>
304
298
  );