@blaze-cms/react-page-builder 0.139.0-alpha.1 → 0.139.0-alpha.3

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 (24) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/lib/components/SearchContent/SearchContent.js +55 -52
  3. package/lib/components/SearchContent/SearchContent.js.map +1 -1
  4. package/lib/components/SearchContent/SearchContentResults.js +16 -17
  5. package/lib/components/SearchContent/SearchContentResults.js.map +1 -1
  6. package/lib/components/SearchContent/SearchContentToggleIcon.js +8 -16
  7. package/lib/components/SearchContent/SearchContentToggleIcon.js.map +1 -1
  8. package/lib/components/SearchContent/constants.js +12 -0
  9. package/lib/components/SearchContent/constants.js.map +1 -0
  10. package/lib-es/components/SearchContent/SearchContent.js +53 -49
  11. package/lib-es/components/SearchContent/SearchContent.js.map +1 -1
  12. package/lib-es/components/SearchContent/SearchContentResults.js +16 -17
  13. package/lib-es/components/SearchContent/SearchContentResults.js.map +1 -1
  14. package/lib-es/components/SearchContent/SearchContentToggleIcon.js +13 -23
  15. package/lib-es/components/SearchContent/SearchContentToggleIcon.js.map +1 -1
  16. package/lib-es/components/SearchContent/constants.js +4 -0
  17. package/lib-es/components/SearchContent/constants.js.map +1 -0
  18. package/package.json +3 -3
  19. package/src/components/SearchContent/SearchContent.js +66 -52
  20. package/src/components/SearchContent/SearchContentResults.js +17 -17
  21. package/src/components/SearchContent/SearchContentToggleIcon.js +10 -23
  22. package/src/components/SearchContent/constants.js +6 -0
  23. package/tests/unit/src/components/SearchContent/SearchContent.test.js +32 -7
  24. package/tests/unit/src/components/SearchContent/__snapshots__/SearchContent.test.js.snap +66 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.139.0-alpha.3](https://github.com/thebyte9/blaze/compare/v0.139.0-alpha.2...v0.139.0-alpha.3) (2024-01-09)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * search filter close bug ([#4160](https://github.com/thebyte9/blaze/issues/4160)) ([76bae35](https://github.com/thebyte9/blaze/commit/76bae35e6a4aa896f8966d3b8b99c87400363874))
12
+
13
+
14
+
15
+
16
+
6
17
  # [0.139.0-alpha.1](https://github.com/thebyte9/blaze/compare/v0.139.0-alpha.0...v0.139.0-alpha.1) (2023-12-20)
7
18
 
8
19
 
package/lib/components/SearchContent/SearchContent.js CHANGED
@@ -26,17 +26,21 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
26
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
27
  var SearchContent = function SearchContent(_ref) {
28
28
  var entities = _ref.entities,
29
- searchInputAlignment = _ref.searchInputAlignment,
30
29
  searchInputWrapperMobile = _ref.searchInputWrapperMobile,
31
30
  searchInputWrapperDesktop = _ref.searchInputWrapperDesktop,
32
31
  isMobile = _ref.isMobile,
33
32
  placeholder = _ref.placeholder,
34
33
  modifier = _ref.modifier,
35
34
  collapsedSearch = _ref.collapsedSearch;
35
+ var searchContentRef = (0, _react.useRef)(null);
36
36
  var _useState = (0, _react.useState)(collapsedSearch),
37
37
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
38
38
  collapsed = _useState2[0],
39
39
  setCollapsed = _useState2[1];
40
+ var _useState3 = (0, _react.useState)(false),
41
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
42
+ showResults = _useState4[0],
43
+ setShowResults = _useState4[1];
40
44
  var router = (0, _router.useRouter)();
41
45
  var _useDebounceSearch = (0, _pluginSearchUi.useDebounceSearch)({
42
46
  entities: entities,
@@ -49,15 +53,32 @@ var SearchContent = function SearchContent(_ref) {
49
53
  debouncedSearchTerm = _useDebounceSearch.debouncedSearchTerm;
50
54
  (0, _react.useEffect)(function () {
51
55
  var handleRouteChange = function handleRouteChange() {
52
- return setSearchTerm('');
56
+ setSearchTerm('');
57
+ setShowResults(false);
58
+ if (collapsedSearch) setCollapsed(true);
53
59
  };
54
60
  router.events.on('routeChangeStart', handleRouteChange);
55
61
  return function () {
56
62
  router.events.off('routeChangeStart', handleRouteChange);
57
63
  };
58
- }, [router.events, setSearchTerm]);
64
+ }, [collapsedSearch, router.events, setSearchTerm]);
65
+ (0, _react.useEffect)(function () {
66
+ var handleClickOutside = function handleClickOutside(event) {
67
+ if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
68
+ setShowResults(false);
69
+ if (collapsedSearch) {
70
+ setCollapsed(true);
71
+ setSearchTerm('');
72
+ }
73
+ }
74
+ };
75
+ document.addEventListener('click', handleClickOutside);
76
+ return function () {
77
+ document.removeEventListener('click', handleClickOutside);
78
+ };
79
+ }, [collapsedSearch, setSearchTerm]);
59
80
  var responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
60
- var handleClick = function handleClick(e, url) {
81
+ var handleNavigation = function handleNavigation(e, url) {
61
82
  e.preventDefault();
62
83
  router.push(url);
63
84
  };
@@ -66,69 +87,52 @@ var SearchContent = function SearchContent(_ref) {
66
87
  router.push("/search?search_term=".concat(e.target.value));
67
88
  }
68
89
  };
69
- var handleOnBlur = function handleOnBlur() {
70
- if (!collapsedSearch) return;
71
- if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
72
- };
73
- var handleClearSearchResults = function handleClearSearchResults() {
74
- setSearchTerm('');
90
+ var handleIconClick = function handleIconClick() {
91
+ var isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
92
+ if (collapsedSearch) setCollapsed(!collapsed);
93
+ if (isCloseIcon) {
94
+ setSearchTerm('');
95
+ setShowResults(false);
96
+ } else {
97
+ setShowResults(true);
98
+ }
75
99
  };
76
100
  var className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
77
- return collapsed ? /*#__PURE__*/_react["default"].createElement("div", {
78
- className: className
101
+ var searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
102
+ return /*#__PURE__*/_react["default"].createElement("div", {
103
+ className: className,
104
+ ref: searchContentRef
79
105
  }, /*#__PURE__*/_react["default"].createElement("div", {
80
- className: "search-content--collapse__wrapper"
106
+ className: "".concat(searchModifier, "__wrapper")
81
107
  }, /*#__PURE__*/_react["default"].createElement("label", {
82
- className: "search-content--collapse__label"
108
+ className: "".concat(searchModifier, "__label")
83
109
  }, /*#__PURE__*/_react["default"].createElement("span", {
84
- className: "search-content--collapse__icon_wrapper"
85
- }, /*#__PURE__*/_react["default"].createElement("svg", {
86
- className: "search-content--collapse__icon",
87
- viewBox: "0 0 20 20"
88
- }, /*#__PURE__*/_react["default"].createElement("path", {
89
- fillRule: "evenodd",
90
- d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
91
- clipRule: "evenodd"
92
- }))), /*#__PURE__*/_react["default"].createElement("input", {
93
- onFocus: function onFocus() {
94
- return setCollapsed(false);
95
- },
96
- onChange: function onChange(e) {
97
- return setSearchTerm(e.target.value);
98
- },
99
- type: "text",
100
- name: "search",
101
- className: "search-content--collapse__input"
102
- })))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
103
- className: className
104
- }, /*#__PURE__*/_react["default"].createElement("div", {
105
- className: "search-content--expanded__wrapper"
106
- }, /*#__PURE__*/_react["default"].createElement("label", {
107
- className: "search-content--expanded__label"
108
- }, /*#__PURE__*/_react["default"].createElement("span", {
109
- className: "search-content--expanded__icon_wrapper"
110
+ className: "".concat(searchModifier, "__icon_wrapper")
110
111
  }, /*#__PURE__*/_react["default"].createElement(_SearchContentToggleIcon["default"], {
111
- results: results,
112
- onClear: handleClearSearchResults
113
- })), /*#__PURE__*/_react["default"].createElement("input", {
112
+ searchTerm: debouncedSearchTerm,
113
+ onClick: handleIconClick,
114
+ useCloseIcon: collapsedSearch ? !collapsed : debouncedSearchTerm
115
+ })), !collapsed && /*#__PURE__*/_react["default"].createElement("input", {
116
+ className: "".concat(searchModifier, "__input"),
114
117
  type: "text",
115
118
  name: "search",
119
+ placeholder: placeholder,
120
+ value: searchTerm,
116
121
  onChange: function onChange(e) {
117
122
  return setSearchTerm(e.target.value);
118
123
  },
119
124
  onKeyPress: handleKeyPress,
120
- className: "search-content--expanded__input",
121
- placeholder: placeholder,
122
- value: searchTerm,
123
- onBlur: handleOnBlur
124
- }))), /*#__PURE__*/_react["default"].createElement(_SearchContentResults["default"], {
125
+ onFocus: function onFocus() {
126
+ return setShowResults(true);
127
+ },
128
+ "data-testid": "search-content-input"
129
+ }))), showResults && /*#__PURE__*/_react["default"].createElement(_SearchContentResults["default"], {
125
130
  results: results,
126
131
  debouncedSearchTerm: debouncedSearchTerm,
127
- handleClick: handleClick
128
- })));
132
+ handleClick: handleNavigation
133
+ }));
129
134
  };
130
135
  SearchContent.propTypes = {
131
- searchInputAlignment: _propTypes["default"].string,
132
136
  searchInputWrapperMobile: _propTypes["default"].string,
133
137
  searchInputWrapperDesktop: _propTypes["default"].string,
134
138
  placeholder: _propTypes["default"].string,
@@ -138,7 +142,6 @@ SearchContent.propTypes = {
138
142
  collapsedSearch: _propTypes["default"].bool
139
143
  };
140
144
  SearchContent.defaultProps = {
141
- searchInputAlignment: '',
142
145
  searchInputWrapperMobile: '',
143
146
  searchInputWrapperDesktop: '',
144
147
  placeholder: '',
package/lib/components/SearchContent/SearchContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchContent.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_router","_pluginSearchUi","_SearchContentResults","_SearchContentToggleIcon","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchContent","_ref","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","isMobile","placeholder","modifier","collapsedSearch","_useState","useState","_useState2","_slicedToArray2","collapsed","setCollapsed","router","useRouter","_useDebounceSearch","useDebounceSearch","initialSearchTerm","resultKeys","results","searchTerm","setSearchTerm","debouncedSearchTerm","useEffect","handleRouteChange","events","on","off","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","target","value","concat","handleOnBlur","handleClearSearchResults","className","filter","Boolean","join","createElement","viewBox","fillRule","d","clipRule","onFocus","onChange","type","name","Fragment","onClear","onKeyPress","onBlur","propTypes","PropTypes","string","bool","array","isRequired","defaultProps","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n entities,\n searchInputAlignment,\n searchInputWrapperMobile,\n searchInputWrapperDesktop,\n isMobile,\n placeholder,\n modifier,\n collapsedSearch\n}) => {\n const [collapsed, setCollapsed] = useState(collapsedSearch);\n const router = useRouter();\n\n const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n useEffect(\n () => {\n const handleRouteChange = () => setSearchTerm('');\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [router.events, setSearchTerm]\n );\n\n const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n const handleClick = (e, url) => {\n e.preventDefault();\n router.push(url);\n };\n\n const handleKeyPress = e => {\n if (e.key === 'Enter' && e.target.value !== '') {\n router.push(`/search?search_term=${e.target.value}`);\n }\n };\n\n const handleOnBlur = () => {\n if (!collapsedSearch) return;\n if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n };\n\n const handleClearSearchResults = () => {\n setSearchTerm('');\n };\n\n const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');\n return collapsed ? (\n <div className={className}>\n <div className=\"search-content--collapse__wrapper\">\n <label className=\"search-content--collapse__label\">\n <span className=\"search-content--collapse__icon_wrapper\">\n <svg className=\"search-content--collapse__icon\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </span>\n <input\n onFocus={() => setCollapsed(false)}\n onChange={e => setSearchTerm(e.target.value)}\n type=\"text\"\n name=\"search\"\n className=\"search-content--collapse__input\"\n />\n </label>\n </div>\n </div>\n ) : (\n <>\n <div className={className}>\n <div className=\"search-content--expanded__wrapper\">\n <label className=\"search-content--expanded__label\">\n <span className=\"search-content--expanded__icon_wrapper\">\n <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />\n </span>\n <input\n type=\"text\"\n name=\"search\"\n onChange={e => setSearchTerm(e.target.value)}\n onKeyPress={handleKeyPress}\n className=\"search-content--expanded__input\"\n placeholder={placeholder}\n value={searchTerm}\n onBlur={handleOnBlur}\n />\n </label>\n </div>\n <SearchContentResults\n results={results}\n debouncedSearchTerm={debouncedSearchTerm}\n handleClick={handleClick}\n />\n </div>\n </>\n );\n};\n\nSearchContent.propTypes = {\n searchInputAlignment: PropTypes.string,\n searchInputWrapperMobile: PropTypes.string,\n searchInputWrapperDesktop: PropTypes.string,\n placeholder: PropTypes.string,\n isMobile: PropTypes.bool,\n entities: PropTypes.array.isRequired,\n modifier: PropTypes.string,\n collapsedSearch: PropTypes.bool\n};\n\nSearchContent.defaultProps = {\n searchInputAlignment: '',\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n modifier: '',\n collapsedSearch: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
1
+ {"version":3,"file":"SearchContent.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_router","_pluginSearchUi","_SearchContentResults","_SearchContentToggleIcon","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SearchContent","_ref","entities","searchInputWrapperMobile","searchInputWrapperDesktop","isMobile","placeholder","modifier","collapsedSearch","searchContentRef","useRef","_useState","useState","_useState2","_slicedToArray2","collapsed","setCollapsed","_useState3","_useState4","showResults","setShowResults","router","useRouter","_useDebounceSearch","useDebounceSearch","initialSearchTerm","resultKeys","results","searchTerm","setSearchTerm","debouncedSearchTerm","useEffect","handleRouteChange","events","on","off","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","responsiveClasses","handleNavigation","e","url","preventDefault","push","handleKeyPress","value","concat","handleIconClick","isCloseIcon","className","filter","Boolean","join","searchModifier","createElement","ref","onClick","useCloseIcon","type","name","onChange","onKeyPress","onFocus","handleClick","propTypes","PropTypes","string","bool","array","isRequired","defaultProps","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n entities,\n searchInputWrapperMobile,\n searchInputWrapperDesktop,\n isMobile,\n placeholder,\n modifier,\n collapsedSearch\n}) => {\n const searchContentRef = useRef(null);\n const [collapsed, setCollapsed] = useState(collapsedSearch);\n const [showResults, setShowResults] = useState(false);\n const router = useRouter();\n\n const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n useEffect(\n () => {\n const handleRouteChange = () => {\n setSearchTerm('');\n setShowResults(false);\n if (collapsedSearch) setCollapsed(true);\n };\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [collapsedSearch, router.events, setSearchTerm]\n );\n\n useEffect(\n () => {\n const handleClickOutside = event => {\n if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {\n setShowResults(false);\n if (collapsedSearch) {\n setCollapsed(true);\n setSearchTerm('');\n }\n }\n };\n\n document.addEventListener('click', handleClickOutside);\n\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n },\n [collapsedSearch, setSearchTerm]\n );\n\n const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n const handleNavigation = (e, url) => {\n e.preventDefault();\n router.push(url);\n };\n\n const handleKeyPress = e => {\n if (e.key === 'Enter' && e.target.value !== '') {\n router.push(`/search?search_term=${e.target.value}`);\n }\n };\n\n const handleIconClick = () => {\n const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;\n\n if (collapsedSearch) setCollapsed(!collapsed);\n\n if (isCloseIcon) {\n setSearchTerm('');\n setShowResults(false);\n } else {\n setShowResults(true);\n }\n };\n\n const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');\n const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';\n\n return (\n <div className={className} ref={searchContentRef}>\n <div className={`${searchModifier}__wrapper`}>\n <label className={`${searchModifier}__label`}>\n <span className={`${searchModifier}__icon_wrapper`}>\n <SearchContentToggleIcon\n searchTerm={debouncedSearchTerm}\n onClick={handleIconClick}\n useCloseIcon={collapsedSearch ? !collapsed : debouncedSearchTerm}\n />\n </span>\n {!collapsed && (\n <input\n className={`${searchModifier}__input`}\n type=\"text\"\n name=\"search\"\n placeholder={placeholder}\n value={searchTerm}\n onChange={e => setSearchTerm(e.target.value)}\n onKeyPress={handleKeyPress}\n onFocus={() => setShowResults(true)}\n data-testid=\"search-content-input\"\n />\n )}\n </label>\n </div>\n {showResults && (\n <SearchContentResults\n results={results}\n debouncedSearchTerm={debouncedSearchTerm}\n handleClick={handleNavigation}\n />\n )}\n </div>\n );\n};\n\nSearchContent.propTypes = {\n searchInputWrapperMobile: PropTypes.string,\n searchInputWrapperDesktop: PropTypes.string,\n placeholder: PropTypes.string,\n isMobile: PropTypes.bool,\n entities: PropTypes.array.isRequired,\n modifier: PropTypes.string,\n collapsedSearch: PropTypes.bool\n};\n\nSearchContent.defaultProps = {\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n modifier: '',\n collapsedSearch: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
package/lib/components/SearchContent/SearchContentResults.js CHANGED
@@ -13,23 +13,22 @@ var SearchContentResults = function SearchContentResults(_ref) {
13
13
  var results = _ref.results,
14
14
  debouncedSearchTerm = _ref.debouncedSearchTerm,
15
15
  onClick = _ref.onClick;
16
- if (debouncedSearchTerm !== '') {
17
- return /*#__PURE__*/_react["default"].createElement("div", {
18
- className: "search-content--results__wrapper"
19
- }, /*#__PURE__*/_react["default"].createElement("div", {
20
- className: "search-content--results__wrapper--message"
21
- }, /*#__PURE__*/_react["default"].createElement("div", {
22
- className: "search-content--results__content"
23
- }, results.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
24
- className: "search-content--results__message"
25
- }, /*#__PURE__*/_react["default"].createElement(_BlazeLink["default"], {
26
- href: "/search?search_term=".concat(debouncedSearchTerm)
27
- }, "Search all results for: ".concat(debouncedSearchTerm))), results.length > 0 && /*#__PURE__*/_react["default"].createElement(_SearchContentItems["default"], {
28
- results: results,
29
- onClick: onClick
30
- }))));
31
- }
32
- return null;
16
+ if (!debouncedSearchTerm) return null;
17
+ var hasResults = results.length > 0;
18
+ return /*#__PURE__*/_react["default"].createElement("div", {
19
+ className: "search-content--results__wrapper"
20
+ }, /*#__PURE__*/_react["default"].createElement("div", {
21
+ className: "search-content--results__wrapper--message"
22
+ }, /*#__PURE__*/_react["default"].createElement("div", {
23
+ className: "search-content--results__content"
24
+ }, hasResults ? /*#__PURE__*/_react["default"].createElement(_SearchContentItems["default"], {
25
+ results: results,
26
+ onClick: onClick
27
+ }) : /*#__PURE__*/_react["default"].createElement("div", {
28
+ className: "search-content--results__message"
29
+ }, /*#__PURE__*/_react["default"].createElement(_BlazeLink["default"], {
30
+ href: "/search?search_term=".concat(debouncedSearchTerm)
31
+ }, "Search all results for: ".concat(debouncedSearchTerm))))));
33
32
  };
34
33
  var _default = SearchContentResults;
35
34
  exports["default"] = _default;
package/lib/components/SearchContent/SearchContentResults.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchContentResults.js","names":["_react","_interopRequireDefault","require","_BlazeLink","_SearchContentItems","SearchContentResults","_ref","results","debouncedSearchTerm","onClick","createElement","className","length","href","concat","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContentResults.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\nimport SearchContentItems from './SearchContentItems';\n\nconst SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {\n if (debouncedSearchTerm !== '') {\n return (\n <div className=\"search-content--results__wrapper\">\n <div className=\"search-content--results__wrapper--message\">\n <div className=\"search-content--results__content\">\n {results.length === 0 && (\n <div className=\"search-content--results__message\">\n <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>\n {`Search all results for: ${debouncedSearchTerm}`}\n </BlazeLink>\n </div>\n )}\n {results.length > 0 && <SearchContentItems results={results} onClick={onClick} />}\n </div>\n </div>\n </div>\n );\n }\n return null;\n};\n\nexport default SearchContentResults;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAAkD;EAAA,IAA5CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,mBAAmB,GAAAF,IAAA,CAAnBE,mBAAmB;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EACnE,IAAID,mBAAmB,KAAK,EAAE,EAAE;IAC9B,oBACER,MAAA,YAAAU,aAAA;MAAKC,SAAS,EAAC;IAAkC,gBAC/CX,MAAA,YAAAU,aAAA;MAAKC,SAAS,EAAC;IAA2C,gBACxDX,MAAA,YAAAU,aAAA;MAAKC,SAAS,EAAC;IAAkC,GAC9CJ,OAAO,CAACK,MAAM,KAAK,CAAC,iBACnBZ,MAAA,YAAAU,aAAA;MAAKC,SAAS,EAAC;IAAkC,gBAC/CX,MAAA,YAAAU,aAAA,CAACP,UAAA,WAAS;MAACU,IAAI,yBAAAC,MAAA,CAAyBN,mBAAmB;IAAG,8BAAAM,MAAA,CAChCN,mBAAmB,CACtC,CACR,CACN,EACAD,OAAO,CAACK,MAAM,GAAG,CAAC,iBAAIZ,MAAA,YAAAU,aAAA,CAACN,mBAAA,WAAkB;MAACG,OAAO,EAAEA,OAAQ;MAACE,OAAO,EAAEA;IAAQ,CAAE,CAC7E,CACF,CACF,CAAC;EAEV;EACA,OAAO,IAAI;AACb,CAAC;AAAC,IAAAM,QAAA,GAEaV,oBAAoB;AAAAW,OAAA,cAAAD,QAAA"}
1
+ {"version":3,"file":"SearchContentResults.js","names":["_react","_interopRequireDefault","require","_BlazeLink","_SearchContentItems","SearchContentResults","_ref","results","debouncedSearchTerm","onClick","hasResults","length","createElement","className","href","concat","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContentResults.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\nimport SearchContentItems from './SearchContentItems';\n\nconst SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {\n if (!debouncedSearchTerm) return null;\n const hasResults = results.length > 0;\n return (\n <div className=\"search-content--results__wrapper\">\n <div className=\"search-content--results__wrapper--message\">\n <div className=\"search-content--results__content\">\n {hasResults ? (\n <SearchContentItems results={results} onClick={onClick} />\n ) : (\n <div className=\"search-content--results__message\">\n <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>\n {`Search all results for: ${debouncedSearchTerm}`}\n </BlazeLink>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default SearchContentResults;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAAC,IAAA,EAAkD;EAAA,IAA5CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,mBAAmB,GAAAF,IAAA,CAAnBE,mBAAmB;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EACnE,IAAI,CAACD,mBAAmB,EAAE,OAAO,IAAI;EACrC,IAAME,UAAU,GAAGH,OAAO,CAACI,MAAM,GAAG,CAAC;EACrC,oBACEX,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/Cb,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAA2C,gBACxDb,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAC9CH,UAAU,gBACTV,MAAA,YAAAY,aAAA,CAACR,mBAAA,WAAkB;IAACG,OAAO,EAAEA,OAAQ;IAACE,OAAO,EAAEA;EAAQ,CAAE,CAAC,gBAE1DT,MAAA,YAAAY,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/Cb,MAAA,YAAAY,aAAA,CAACT,UAAA,WAAS;IAACW,IAAI,yBAAAC,MAAA,CAAyBP,mBAAmB;EAAG,8BAAAO,MAAA,CAChCP,mBAAmB,CACtC,CACR,CAEJ,CACF,CACF,CAAC;AAEV,CAAC;AAAC,IAAAQ,QAAA,GAEaX,oBAAoB;AAAAY,OAAA,cAAAD,QAAA"}
package/lib/components/SearchContent/SearchContentToggleIcon.js CHANGED
@@ -7,27 +7,19 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
+ var _constants = require("./constants");
10
11
  var SearchContentToggleIcon = function SearchContentToggleIcon(_ref) {
11
- var results = _ref.results,
12
- onClear = _ref.onClear;
13
- if (results && results.length > 0) {
14
- return /*#__PURE__*/_react["default"].createElement("svg", {
15
- className: "search-content--expanded__icon",
16
- viewBox: "0 0 20 20",
17
- onClick: onClear
18
- }, /*#__PURE__*/_react["default"].createElement("path", {
19
- fillRule: "evenodd",
20
- d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
21
- clipRule: "evenodd"
22
- }));
23
- }
12
+ var onClick = _ref.onClick,
13
+ useCloseIcon = _ref.useCloseIcon;
24
14
  return /*#__PURE__*/_react["default"].createElement("svg", {
25
15
  className: "search-content--expanded__icon",
26
- viewBox: "0 0 20 20"
16
+ viewBox: "0 0 20 20",
17
+ onClick: onClick,
18
+ "data-testid": useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'
27
19
  }, /*#__PURE__*/_react["default"].createElement("path", {
28
20
  fillRule: "evenodd",
29
- d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
30
- clipRule: "evenodd"
21
+ clipRule: "evenodd",
22
+ d: useCloseIcon ? _constants.CLOSE_ICON : _constants.SEARCH_ICON
31
23
  }));
32
24
  };
33
25
  var _default = SearchContentToggleIcon;
package/lib/components/SearchContent/SearchContentToggleIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchContentToggleIcon.js","names":["_react","_interopRequireDefault","require","SearchContentToggleIcon","_ref","results","onClear","length","createElement","className","viewBox","onClick","fillRule","d","clipRule","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\n\nconst SearchContentToggleIcon = ({ results, onClear }) => {\n if (results && results.length > 0) {\n return (\n <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\" onClick={onClear}>\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n }\n\n return (\n <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n\nexport default SearchContentToggleIcon;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,IAAA,EAA6B;EAAA,IAAvBC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,OAAO,GAAAF,IAAA,CAAPE,OAAO;EACjD,IAAID,OAAO,IAAIA,OAAO,CAACE,MAAM,GAAG,CAAC,EAAE;IACjC,oBACEP,MAAA,YAAAQ,aAAA;MAAKC,SAAS,EAAC,gCAAgC;MAACC,OAAO,EAAC,WAAW;MAACC,OAAO,EAAEL;IAAQ,gBACnFN,MAAA,YAAAQ,aAAA;MACEI,QAAQ,EAAC,SAAS;MAClBC,CAAC,EAAC,oMAAoM;MACtMC,QAAQ,EAAC;IAAS,CACnB,CACE,CAAC;EAEV;EAEA,oBACEd,MAAA,YAAAQ,aAAA;IAAKC,SAAS,EAAC,gCAAgC;IAACC,OAAO,EAAC;EAAW,gBACjEV,MAAA,YAAAQ,aAAA;IACEI,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,kHAAkH;IACpHC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAEV,CAAC;AAAC,IAAAC,QAAA,GAEaZ,uBAAuB;AAAAa,OAAA,cAAAD,QAAA"}
1
+ {"version":3,"file":"SearchContentToggleIcon.js","names":["_react","_interopRequireDefault","require","_constants","SearchContentToggleIcon","_ref","onClick","useCloseIcon","createElement","className","viewBox","fillRule","clipRule","d","CLOSE_ICON","SEARCH_ICON","_default","exports"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\nimport { CLOSE_ICON, SEARCH_ICON } from './constants';\n\nconst SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (\n <svg\n className=\"search-content--expanded__icon\"\n viewBox=\"0 0 20 20\"\n onClick={onClick}\n data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />\n </svg>\n);\n\nexport default SearchContentToggleIcon;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEA,IAAME,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,IAAA;EAAA,IAAMC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY;EAAA,oBACtDP,MAAA,YAAAQ,aAAA;IACEC,SAAS,EAAC,gCAAgC;IAC1CC,OAAO,EAAC,WAAW;IACnBJ,OAAO,EAAEA,OAAQ;IACjB,eAAaC,YAAY,GAAG,2BAA2B,GAAG;EAAsB,gBAChFP,MAAA,YAAAQ,aAAA;IAAMG,QAAQ,EAAC,SAAS;IAACC,QAAQ,EAAC,SAAS;IAACC,CAAC,EAAEN,YAAY,GAAGO,qBAAU,GAAGC;EAAY,CAAE,CACtF,CAAC;AAAA,CACP;AAAC,IAAAC,QAAA,GAEaZ,uBAAuB;AAAAa,OAAA,cAAAD,QAAA"}
package/lib/components/SearchContent/constants.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.object.define-property.js");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.SEARCH_ICON = exports.CLOSE_ICON = void 0;
8
+ var SEARCH_ICON = 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
9
+ exports.SEARCH_ICON = SEARCH_ICON;
10
+ var CLOSE_ICON = 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
11
+ exports.CLOSE_ICON = CLOSE_ICON;
12
+ //# sourceMappingURL=constants.js.map
package/lib/components/SearchContent/constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","names":["SEARCH_ICON","exports","CLOSE_ICON"],"sources":["../../../src/components/SearchContent/constants.js"],"sourcesContent":["const SEARCH_ICON =\n 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';\nconst CLOSE_ICON =\n 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';\n\nexport { SEARCH_ICON, CLOSE_ICON };\n"],"mappings":";;;;;;;AAAA,IAAMA,WAAW,GACf,kHAAkH;AAACC,OAAA,CAAAD,WAAA,GAAAA,WAAA;AACrH,IAAME,UAAU,GACd,oMAAoM;AAACD,OAAA,CAAAC,UAAA,GAAAA,UAAA"}
package/lib-es/components/SearchContent/SearchContent.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState, useEffect, useRef } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { useRouter } from 'next/router';
4
4
  import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
@@ -6,7 +6,6 @@ import SearchContentResults from './SearchContentResults';
6
6
  import SearchContentToggleIcon from './SearchContentToggleIcon';
7
7
  const SearchContent = ({
8
8
  entities,
9
- searchInputAlignment,
10
9
  searchInputWrapperMobile,
11
10
  searchInputWrapperDesktop,
12
11
  isMobile,
@@ -14,7 +13,9 @@ const SearchContent = ({
14
13
  modifier,
15
14
  collapsedSearch
16
15
  }) => {
16
+ const searchContentRef = useRef(null);
17
17
  const [collapsed, setCollapsed] = useState(collapsedSearch);
18
+ const [showResults, setShowResults] = useState(false);
18
19
  const router = useRouter();
19
20
  const {
20
21
  results,
@@ -27,14 +28,33 @@ const SearchContent = ({
27
28
  resultKeys: 'id, name, image { url }, url'
28
29
  });
29
30
  useEffect(() => {
30
- const handleRouteChange = () => setSearchTerm('');
31
+ const handleRouteChange = () => {
32
+ setSearchTerm('');
33
+ setShowResults(false);
34
+ if (collapsedSearch) setCollapsed(true);
35
+ };
31
36
  router.events.on('routeChangeStart', handleRouteChange);
32
37
  return () => {
33
38
  router.events.off('routeChangeStart', handleRouteChange);
34
39
  };
35
- }, [router.events, setSearchTerm]);
40
+ }, [collapsedSearch, router.events, setSearchTerm]);
41
+ useEffect(() => {
42
+ const handleClickOutside = event => {
43
+ if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
44
+ setShowResults(false);
45
+ if (collapsedSearch) {
46
+ setCollapsed(true);
47
+ setSearchTerm('');
48
+ }
49
+ }
50
+ };
51
+ document.addEventListener('click', handleClickOutside);
52
+ return () => {
53
+ document.removeEventListener('click', handleClickOutside);
54
+ };
55
+ }, [collapsedSearch, setSearchTerm]);
36
56
  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
37
- const handleClick = (e, url) => {
57
+ const handleNavigation = (e, url) => {
38
58
  e.preventDefault();
39
59
  router.push(url);
40
60
  };
@@ -43,63 +63,48 @@ const SearchContent = ({
43
63
  router.push(`/search?search_term=${e.target.value}`);
44
64
  }
45
65
  };
46
- const handleOnBlur = () => {
47
- if (!collapsedSearch) return;
48
- if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
49
- };
50
- const handleClearSearchResults = () => {
51
- setSearchTerm('');
66
+ const handleIconClick = () => {
67
+ const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
68
+ if (collapsedSearch) setCollapsed(!collapsed);
69
+ if (isCloseIcon) {
70
+ setSearchTerm('');
71
+ setShowResults(false);
72
+ } else {
73
+ setShowResults(true);
74
+ }
52
75
  };
53
76
  const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
54
- return collapsed ? /*#__PURE__*/React.createElement("div", {
55
- className: className
56
- }, /*#__PURE__*/React.createElement("div", {
57
- className: "search-content--collapse__wrapper"
58
- }, /*#__PURE__*/React.createElement("label", {
59
- className: "search-content--collapse__label"
60
- }, /*#__PURE__*/React.createElement("span", {
61
- className: "search-content--collapse__icon_wrapper"
62
- }, /*#__PURE__*/React.createElement("svg", {
63
- className: "search-content--collapse__icon",
64
- viewBox: "0 0 20 20"
65
- }, /*#__PURE__*/React.createElement("path", {
66
- fillRule: "evenodd",
67
- d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
68
- clipRule: "evenodd"
69
- }))), /*#__PURE__*/React.createElement("input", {
70
- onFocus: () => setCollapsed(false),
71
- onChange: e => setSearchTerm(e.target.value),
72
- type: "text",
73
- name: "search",
74
- className: "search-content--collapse__input"
75
- })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
76
- className: className
77
+ const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
78
+ return /*#__PURE__*/React.createElement("div", {
79
+ className: className,
80
+ ref: searchContentRef
77
81
  }, /*#__PURE__*/React.createElement("div", {
78
- className: "search-content--expanded__wrapper"
82
+ className: `${searchModifier}__wrapper`
79
83
  }, /*#__PURE__*/React.createElement("label", {
80
- className: "search-content--expanded__label"
84
+ className: `${searchModifier}__label`
81
85
  }, /*#__PURE__*/React.createElement("span", {
82
- className: "search-content--expanded__icon_wrapper"
86
+ className: `${searchModifier}__icon_wrapper`
83
87
  }, /*#__PURE__*/React.createElement(SearchContentToggleIcon, {
84
- results: results,
85
- onClear: handleClearSearchResults
86
- })), /*#__PURE__*/React.createElement("input", {
88
+ searchTerm: debouncedSearchTerm,
89
+ onClick: handleIconClick,
90
+ useCloseIcon: collapsedSearch ? !collapsed : debouncedSearchTerm
91
+ })), !collapsed && /*#__PURE__*/React.createElement("input", {
92
+ className: `${searchModifier}__input`,
87
93
  type: "text",
88
94
  name: "search",
89
- onChange: e => setSearchTerm(e.target.value),
90
- onKeyPress: handleKeyPress,
91
- className: "search-content--expanded__input",
92
95
  placeholder: placeholder,
93
96
  value: searchTerm,
94
- onBlur: handleOnBlur
95
- }))), /*#__PURE__*/React.createElement(SearchContentResults, {
97
+ onChange: e => setSearchTerm(e.target.value),
98
+ onKeyPress: handleKeyPress,
99
+ onFocus: () => setShowResults(true),
100
+ "data-testid": "search-content-input"
101
+ }))), showResults && /*#__PURE__*/React.createElement(SearchContentResults, {
96
102
  results: results,
97
103
  debouncedSearchTerm: debouncedSearchTerm,
98
- handleClick: handleClick
99
- })));
104
+ handleClick: handleNavigation
105
+ }));
100
106
  };
101
107
  SearchContent.propTypes = {
102
- searchInputAlignment: PropTypes.string,
103
108
  searchInputWrapperMobile: PropTypes.string,
104
109
  searchInputWrapperDesktop: PropTypes.string,
105
110
  placeholder: PropTypes.string,
@@ -109,7 +114,6 @@ SearchContent.propTypes = {
109
114
  collapsedSearch: PropTypes.bool
110
115
  };
111
116
  SearchContent.defaultProps = {
112
- searchInputAlignment: '',
113
117
  searchInputWrapperMobile: '',
114
118
  searchInputWrapperDesktop: '',
115
119
  placeholder: '',
package/lib-es/components/SearchContent/SearchContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchContent.js","names":["React","useState","useEffect","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContentToggleIcon","SearchContent","entities","searchInputAlignment","searchInputWrapperMobile","searchInputWrapperDesktop","isMobile","placeholder","modifier","collapsedSearch","collapsed","setCollapsed","router","results","searchTerm","setSearchTerm","debouncedSearchTerm","initialSearchTerm","resultKeys","handleRouteChange","events","on","off","responsiveClasses","handleClick","e","url","preventDefault","push","handleKeyPress","key","target","value","handleOnBlur","handleClearSearchResults","className","filter","Boolean","join","createElement","viewBox","fillRule","d","clipRule","onFocus","onChange","type","name","Fragment","onClear","onKeyPress","onBlur","propTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n entities,\n searchInputAlignment,\n searchInputWrapperMobile,\n searchInputWrapperDesktop,\n isMobile,\n placeholder,\n modifier,\n collapsedSearch\n}) => {\n const [collapsed, setCollapsed] = useState(collapsedSearch);\n const router = useRouter();\n\n const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n useEffect(\n () => {\n const handleRouteChange = () => setSearchTerm('');\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [router.events, setSearchTerm]\n );\n\n const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n const handleClick = (e, url) => {\n e.preventDefault();\n router.push(url);\n };\n\n const handleKeyPress = e => {\n if (e.key === 'Enter' && e.target.value !== '') {\n router.push(`/search?search_term=${e.target.value}`);\n }\n };\n\n const handleOnBlur = () => {\n if (!collapsedSearch) return;\n if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);\n };\n\n const handleClearSearchResults = () => {\n setSearchTerm('');\n };\n\n const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');\n return collapsed ? (\n <div className={className}>\n <div className=\"search-content--collapse__wrapper\">\n <label className=\"search-content--collapse__label\">\n <span className=\"search-content--collapse__icon_wrapper\">\n <svg className=\"search-content--collapse__icon\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </span>\n <input\n onFocus={() => setCollapsed(false)}\n onChange={e => setSearchTerm(e.target.value)}\n type=\"text\"\n name=\"search\"\n className=\"search-content--collapse__input\"\n />\n </label>\n </div>\n </div>\n ) : (\n <>\n <div className={className}>\n <div className=\"search-content--expanded__wrapper\">\n <label className=\"search-content--expanded__label\">\n <span className=\"search-content--expanded__icon_wrapper\">\n <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />\n </span>\n <input\n type=\"text\"\n name=\"search\"\n onChange={e => setSearchTerm(e.target.value)}\n onKeyPress={handleKeyPress}\n className=\"search-content--expanded__input\"\n placeholder={placeholder}\n value={searchTerm}\n onBlur={handleOnBlur}\n />\n </label>\n </div>\n <SearchContentResults\n results={results}\n debouncedSearchTerm={debouncedSearchTerm}\n handleClick={handleClick}\n />\n </div>\n </>\n );\n};\n\nSearchContent.propTypes = {\n searchInputAlignment: PropTypes.string,\n searchInputWrapperMobile: PropTypes.string,\n searchInputWrapperDesktop: PropTypes.string,\n placeholder: PropTypes.string,\n isMobile: PropTypes.bool,\n entities: PropTypes.array.isRequired,\n modifier: PropTypes.string,\n collapsedSearch: PropTypes.bool\n};\n\nSearchContent.defaultProps = {\n searchInputAlignment: '',\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n modifier: '',\n collapsedSearch: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
1
+ {"version":3,"file":"SearchContent.js","names":["React","useState","useEffect","useRef","PropTypes","useRouter","useDebounceSearch","SearchContentResults","SearchContentToggleIcon","SearchContent","entities","searchInputWrapperMobile","searchInputWrapperDesktop","isMobile","placeholder","modifier","collapsedSearch","searchContentRef","collapsed","setCollapsed","showResults","setShowResults","router","results","searchTerm","setSearchTerm","debouncedSearchTerm","initialSearchTerm","resultKeys","handleRouteChange","events","on","off","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","responsiveClasses","handleNavigation","e","url","preventDefault","push","handleKeyPress","key","value","handleIconClick","isCloseIcon","className","filter","Boolean","join","searchModifier","createElement","ref","onClick","useCloseIcon","type","name","onChange","onKeyPress","onFocus","handleClick","propTypes","string","bool","array","isRequired","defaultProps"],"sources":["../../../src/components/SearchContent/SearchContent.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { useDebounceSearch } from '@blaze-cms/plugin-search-ui';\nimport SearchContentResults from './SearchContentResults';\nimport SearchContentToggleIcon from './SearchContentToggleIcon';\n\nconst SearchContent = ({\n entities,\n searchInputWrapperMobile,\n searchInputWrapperDesktop,\n isMobile,\n placeholder,\n modifier,\n collapsedSearch\n}) => {\n const searchContentRef = useRef(null);\n const [collapsed, setCollapsed] = useState(collapsedSearch);\n const [showResults, setShowResults] = useState(false);\n const router = useRouter();\n\n const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({\n entities,\n initialSearchTerm: '',\n resultKeys: 'id, name, image { url }, url'\n });\n\n useEffect(\n () => {\n const handleRouteChange = () => {\n setSearchTerm('');\n setShowResults(false);\n if (collapsedSearch) setCollapsed(true);\n };\n router.events.on('routeChangeStart', handleRouteChange);\n\n return () => {\n router.events.off('routeChangeStart', handleRouteChange);\n };\n },\n [collapsedSearch, router.events, setSearchTerm]\n );\n\n useEffect(\n () => {\n const handleClickOutside = event => {\n if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {\n setShowResults(false);\n if (collapsedSearch) {\n setCollapsed(true);\n setSearchTerm('');\n }\n }\n };\n\n document.addEventListener('click', handleClickOutside);\n\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n },\n [collapsedSearch, setSearchTerm]\n );\n\n const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;\n\n const handleNavigation = (e, url) => {\n e.preventDefault();\n router.push(url);\n };\n\n const handleKeyPress = e => {\n if (e.key === 'Enter' && e.target.value !== '') {\n router.push(`/search?search_term=${e.target.value}`);\n }\n };\n\n const handleIconClick = () => {\n const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;\n\n if (collapsedSearch) setCollapsed(!collapsed);\n\n if (isCloseIcon) {\n setSearchTerm('');\n setShowResults(false);\n } else {\n setShowResults(true);\n }\n };\n\n const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');\n const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';\n\n return (\n <div className={className} ref={searchContentRef}>\n <div className={`${searchModifier}__wrapper`}>\n <label className={`${searchModifier}__label`}>\n <span className={`${searchModifier}__icon_wrapper`}>\n <SearchContentToggleIcon\n searchTerm={debouncedSearchTerm}\n onClick={handleIconClick}\n useCloseIcon={collapsedSearch ? !collapsed : debouncedSearchTerm}\n />\n </span>\n {!collapsed && (\n <input\n className={`${searchModifier}__input`}\n type=\"text\"\n name=\"search\"\n placeholder={placeholder}\n value={searchTerm}\n onChange={e => setSearchTerm(e.target.value)}\n onKeyPress={handleKeyPress}\n onFocus={() => setShowResults(true)}\n data-testid=\"search-content-input\"\n />\n )}\n </label>\n </div>\n {showResults && (\n <SearchContentResults\n results={results}\n debouncedSearchTerm={debouncedSearchTerm}\n handleClick={handleNavigation}\n />\n )}\n </div>\n );\n};\n\nSearchContent.propTypes = {\n searchInputWrapperMobile: PropTypes.string,\n searchInputWrapperDesktop: PropTypes.string,\n placeholder: PropTypes.string,\n isMobile: PropTypes.bool,\n entities: PropTypes.array.isRequired,\n modifier: PropTypes.string,\n collapsedSearch: PropTypes.bool\n};\n\nSearchContent.defaultProps = {\n searchInputWrapperMobile: '',\n searchInputWrapperDesktop: '',\n placeholder: '',\n isMobile: false,\n modifier: '',\n collapsedSearch: false\n};\n\nexport default SearchContent;\n"],"mappings":"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"}
package/lib-es/components/SearchContent/SearchContentResults.js CHANGED
@@ -6,23 +6,22 @@ const SearchContentResults = ({
6
6
  debouncedSearchTerm,
7
7
  onClick
8
8
  }) => {
9
- if (debouncedSearchTerm !== '') {
10
- return /*#__PURE__*/React.createElement("div", {
11
- className: "search-content--results__wrapper"
12
- }, /*#__PURE__*/React.createElement("div", {
13
- className: "search-content--results__wrapper--message"
14
- }, /*#__PURE__*/React.createElement("div", {
15
- className: "search-content--results__content"
16
- }, results.length === 0 && /*#__PURE__*/React.createElement("div", {
17
- className: "search-content--results__message"
18
- }, /*#__PURE__*/React.createElement(BlazeLink, {
19
- href: `/search?search_term=${debouncedSearchTerm}`
20
- }, `Search all results for: ${debouncedSearchTerm}`)), results.length > 0 && /*#__PURE__*/React.createElement(SearchContentItems, {
21
- results: results,
22
- onClick: onClick
23
- }))));
24
- }
25
- return null;
9
+ if (!debouncedSearchTerm) return null;
10
+ const hasResults = results.length > 0;
11
+ return /*#__PURE__*/React.createElement("div", {
12
+ className: "search-content--results__wrapper"
13
+ }, /*#__PURE__*/React.createElement("div", {
14
+ className: "search-content--results__wrapper--message"
15
+ }, /*#__PURE__*/React.createElement("div", {
16
+ className: "search-content--results__content"
17
+ }, hasResults ? /*#__PURE__*/React.createElement(SearchContentItems, {
18
+ results: results,
19
+ onClick: onClick
20
+ }) : /*#__PURE__*/React.createElement("div", {
21
+ className: "search-content--results__message"
22
+ }, /*#__PURE__*/React.createElement(BlazeLink, {
23
+ href: `/search?search_term=${debouncedSearchTerm}`
24
+ }, `Search all results for: ${debouncedSearchTerm}`)))));
26
25
  };
27
26
  export default SearchContentResults;
28
27
  //# sourceMappingURL=SearchContentResults.js.map
package/lib-es/components/SearchContent/SearchContentResults.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchContentResults.js","names":["React","BlazeLink","SearchContentItems","SearchContentResults","results","debouncedSearchTerm","onClick","createElement","className","length","href"],"sources":["../../../src/components/SearchContent/SearchContentResults.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\nimport SearchContentItems from './SearchContentItems';\n\nconst SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {\n if (debouncedSearchTerm !== '') {\n return (\n <div className=\"search-content--results__wrapper\">\n <div className=\"search-content--results__wrapper--message\">\n <div className=\"search-content--results__content\">\n {results.length === 0 && (\n <div className=\"search-content--results__message\">\n <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>\n {`Search all results for: ${debouncedSearchTerm}`}\n </BlazeLink>\n </div>\n )}\n {results.length > 0 && <SearchContentItems results={results} onClick={onClick} />}\n </div>\n </div>\n </div>\n );\n }\n return null;\n};\n\nexport default SearchContentResults;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,kBAAkB,MAAM,sBAAsB;AAErD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,OAAO;EAAEC,mBAAmB;EAAEC;AAAQ,CAAC,KAAK;EAC1E,IAAID,mBAAmB,KAAK,EAAE,EAAE;IAC9B,oBACEL,KAAA,CAAAO,aAAA;MAAKC,SAAS,EAAC;IAAkC,gBAC/CR,KAAA,CAAAO,aAAA;MAAKC,SAAS,EAAC;IAA2C,gBACxDR,KAAA,CAAAO,aAAA;MAAKC,SAAS,EAAC;IAAkC,GAC9CJ,OAAO,CAACK,MAAM,KAAK,CAAC,iBACnBT,KAAA,CAAAO,aAAA;MAAKC,SAAS,EAAC;IAAkC,gBAC/CR,KAAA,CAAAO,aAAA,CAACN,SAAS;MAACS,IAAI,EAAG,uBAAsBL,mBAAoB;IAAE,GAC1D,2BAA0BA,mBAAoB,EACvC,CACR,CACN,EACAD,OAAO,CAACK,MAAM,GAAG,CAAC,iBAAIT,KAAA,CAAAO,aAAA,CAACL,kBAAkB;MAACE,OAAO,EAAEA,OAAQ;MAACE,OAAO,EAAEA;IAAQ,CAAE,CAC7E,CACF,CACF,CAAC;EAEV;EACA,OAAO,IAAI;AACb,CAAC;AAED,eAAeH,oBAAoB"}
1
+ {"version":3,"file":"SearchContentResults.js","names":["React","BlazeLink","SearchContentItems","SearchContentResults","results","debouncedSearchTerm","onClick","hasResults","length","createElement","className","href"],"sources":["../../../src/components/SearchContent/SearchContentResults.js"],"sourcesContent":["import React from 'react';\nimport BlazeLink from '../BlazeLink';\nimport SearchContentItems from './SearchContentItems';\n\nconst SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {\n if (!debouncedSearchTerm) return null;\n const hasResults = results.length > 0;\n return (\n <div className=\"search-content--results__wrapper\">\n <div className=\"search-content--results__wrapper--message\">\n <div className=\"search-content--results__content\">\n {hasResults ? (\n <SearchContentItems results={results} onClick={onClick} />\n ) : (\n <div className=\"search-content--results__message\">\n <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>\n {`Search all results for: ${debouncedSearchTerm}`}\n </BlazeLink>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default SearchContentResults;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,kBAAkB,MAAM,sBAAsB;AAErD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,OAAO;EAAEC,mBAAmB;EAAEC;AAAQ,CAAC,KAAK;EAC1E,IAAI,CAACD,mBAAmB,EAAE,OAAO,IAAI;EACrC,MAAME,UAAU,GAAGH,OAAO,CAACI,MAAM,GAAG,CAAC;EACrC,oBACER,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/CV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAA2C,gBACxDV,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAkC,GAC9CH,UAAU,gBACTP,KAAA,CAAAS,aAAA,CAACP,kBAAkB;IAACE,OAAO,EAAEA,OAAQ;IAACE,OAAO,EAAEA;EAAQ,CAAE,CAAC,gBAE1DN,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAC;EAAkC,gBAC/CV,KAAA,CAAAS,aAAA,CAACR,SAAS;IAACU,IAAI,EAAG,uBAAsBN,mBAAoB;EAAE,GAC1D,2BAA0BA,mBAAoB,EACvC,CACR,CAEJ,CACF,CACF,CAAC;AAEV,CAAC;AAED,eAAeF,oBAAoB"}
package/lib-es/components/SearchContent/SearchContentToggleIcon.js CHANGED
@@ -1,27 +1,17 @@
1
1
  import React from 'react';
2
+ import { CLOSE_ICON, SEARCH_ICON } from './constants';
2
3
  const SearchContentToggleIcon = ({
3
- results,
4
- onClear
5
- }) => {
6
- if (results && results.length > 0) {
7
- return /*#__PURE__*/React.createElement("svg", {
8
- className: "search-content--expanded__icon",
9
- viewBox: "0 0 20 20",
10
- onClick: onClear
11
- }, /*#__PURE__*/React.createElement("path", {
12
- fillRule: "evenodd",
13
- d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
14
- clipRule: "evenodd"
15
- }));
16
- }
17
- return /*#__PURE__*/React.createElement("svg", {
18
- className: "search-content--expanded__icon",
19
- viewBox: "0 0 20 20"
20
- }, /*#__PURE__*/React.createElement("path", {
21
- fillRule: "evenodd",
22
- d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
23
- clipRule: "evenodd"
24
- }));
25
- };
4
+ onClick,
5
+ useCloseIcon
6
+ }) => /*#__PURE__*/React.createElement("svg", {
7
+ className: "search-content--expanded__icon",
8
+ viewBox: "0 0 20 20",
9
+ onClick: onClick,
10
+ "data-testid": useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'
11
+ }, /*#__PURE__*/React.createElement("path", {
12
+ fillRule: "evenodd",
13
+ clipRule: "evenodd",
14
+ d: useCloseIcon ? CLOSE_ICON : SEARCH_ICON
15
+ }));
26
16
  export default SearchContentToggleIcon;
27
17
  //# sourceMappingURL=SearchContentToggleIcon.js.map
package/lib-es/components/SearchContent/SearchContentToggleIcon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchContentToggleIcon.js","names":["React","SearchContentToggleIcon","results","onClear","length","createElement","className","viewBox","onClick","fillRule","d","clipRule"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\n\nconst SearchContentToggleIcon = ({ results, onClear }) => {\n if (results && results.length > 0) {\n return (\n <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\" onClick={onClear}>\n <path\n fillRule=\"evenodd\"\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n }\n\n return (\n <svg className=\"search-content--expanded__icon\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n d=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"\n clipRule=\"evenodd\"\n />\n </svg>\n );\n};\n\nexport default SearchContentToggleIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAQ,CAAC,KAAK;EACxD,IAAID,OAAO,IAAIA,OAAO,CAACE,MAAM,GAAG,CAAC,EAAE;IACjC,oBACEJ,KAAA,CAAAK,aAAA;MAAKC,SAAS,EAAC,gCAAgC;MAACC,OAAO,EAAC,WAAW;MAACC,OAAO,EAAEL;IAAQ,gBACnFH,KAAA,CAAAK,aAAA;MACEI,QAAQ,EAAC,SAAS;MAClBC,CAAC,EAAC,oMAAoM;MACtMC,QAAQ,EAAC;IAAS,CACnB,CACE,CAAC;EAEV;EAEA,oBACEX,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC,gCAAgC;IAACC,OAAO,EAAC;EAAW,gBACjEP,KAAA,CAAAK,aAAA;IACEI,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,kHAAkH;IACpHC,QAAQ,EAAC;EAAS,CACnB,CACE,CAAC;AAEV,CAAC;AAED,eAAeV,uBAAuB"}
1
+ {"version":3,"file":"SearchContentToggleIcon.js","names":["React","CLOSE_ICON","SEARCH_ICON","SearchContentToggleIcon","onClick","useCloseIcon","createElement","className","viewBox","fillRule","clipRule","d"],"sources":["../../../src/components/SearchContent/SearchContentToggleIcon.js"],"sourcesContent":["import React from 'react';\nimport { CLOSE_ICON, SEARCH_ICON } from './constants';\n\nconst SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (\n <svg\n className=\"search-content--expanded__icon\"\n viewBox=\"0 0 20 20\"\n onClick={onClick}\n data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />\n </svg>\n);\n\nexport default SearchContentToggleIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,WAAW,QAAQ,aAAa;AAErD,MAAMC,uBAAuB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAa,CAAC,kBACxDL,KAAA,CAAAM,aAAA;EACEC,SAAS,EAAC,gCAAgC;EAC1CC,OAAO,EAAC,WAAW;EACnBJ,OAAO,EAAEA,OAAQ;EACjB,eAAaC,YAAY,GAAG,2BAA2B,GAAG;AAAsB,gBAChFL,KAAA,CAAAM,aAAA;EAAMG,QAAQ,EAAC,SAAS;EAACC,QAAQ,EAAC,SAAS;EAACC,CAAC,EAAEN,YAAY,GAAGJ,UAAU,GAAGC;AAAY,CAAE,CACtF,CACN;AAED,eAAeC,uBAAuB"}
package/lib-es/components/SearchContent/constants.js ADDED
@@ -0,0 +1,4 @@
1
+ const SEARCH_ICON = 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
2
+ const CLOSE_ICON = 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
3
+ export { SEARCH_ICON, CLOSE_ICON };
4
+ //# sourceMappingURL=constants.js.map
package/lib-es/components/SearchContent/constants.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","names":["SEARCH_ICON","CLOSE_ICON"],"sources":["../../../src/components/SearchContent/constants.js"],"sourcesContent":["const SEARCH_ICON =\n 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';\nconst CLOSE_ICON =\n 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';\n\nexport { SEARCH_ICON, CLOSE_ICON };\n"],"mappings":"AAAA,MAAMA,WAAW,GACf,kHAAkH;AACpH,MAAMC,UAAU,GACd,oMAAoM;AAEtM,SAASD,WAAW,EAAEC,UAAU"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blaze-cms/react-page-builder",
3
- "version": "0.139.0-alpha.1",
3
+ "version": "0.139.0-alpha.3",
4
4
  "description": "Blaze react page builder",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-es/index.js",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "license": "GPL-3.0",
29
29
  "dependencies": {
30
- "@blaze-cms/core-auth-ui": "^0.131.0",
30
+ "@blaze-cms/core-auth-ui": "0.139.0-alpha.3",
31
31
  "@blaze-cms/core-errors": "^0.131.0",
32
32
  "@blaze-cms/core-errors-ui": "^0.131.0",
33
33
  "@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
@@ -89,5 +89,5 @@
89
89
  "lib/*",
90
90
  "lib-es/*"
91
91
  ],
92
- "gitHead": "1cee8a2d2777b141287f3f59844156f56fa97f80"
92
+ "gitHead": "00aa8ba6ed9d34f0b2651f8afd810ae8ec136a3c"
93
93
  }
package/src/components/SearchContent/SearchContent.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { useState, useEffect, useRef } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { useRouter } from 'next/router';
4
4
  import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
@@ -7,7 +7,6 @@ import SearchContentToggleIcon from './SearchContentToggleIcon';
7
7
 
8
8
  const SearchContent = ({
9
9
  entities,
10
- searchInputAlignment,
11
10
  searchInputWrapperMobile,
12
11
  searchInputWrapperDesktop,
13
12
  isMobile,
@@ -15,7 +14,9 @@ const SearchContent = ({
15
14
  modifier,
16
15
  collapsedSearch
17
16
  }) => {
17
+ const searchContentRef = useRef(null);
18
18
  const [collapsed, setCollapsed] = useState(collapsedSearch);
19
+ const [showResults, setShowResults] = useState(false);
19
20
  const router = useRouter();
20
21
 
21
22
  const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
@@ -26,19 +27,44 @@ const SearchContent = ({
26
27
 
27
28
  useEffect(
28
29
  () => {
29
- const handleRouteChange = () => setSearchTerm('');
30
+ const handleRouteChange = () => {
31
+ setSearchTerm('');
32
+ setShowResults(false);
33
+ if (collapsedSearch) setCollapsed(true);
34
+ };
30
35
  router.events.on('routeChangeStart', handleRouteChange);
31
36
 
32
37
  return () => {
33
38
  router.events.off('routeChangeStart', handleRouteChange);
34
39
  };
35
40
  },
36
- [router.events, setSearchTerm]
41
+ [collapsedSearch, router.events, setSearchTerm]
42
+ );
43
+
44
+ useEffect(
45
+ () => {
46
+ const handleClickOutside = event => {
47
+ if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
48
+ setShowResults(false);
49
+ if (collapsedSearch) {
50
+ setCollapsed(true);
51
+ setSearchTerm('');
52
+ }
53
+ }
54
+ };
55
+
56
+ document.addEventListener('click', handleClickOutside);
57
+
58
+ return () => {
59
+ document.removeEventListener('click', handleClickOutside);
60
+ };
61
+ },
62
+ [collapsedSearch, setSearchTerm]
37
63
  );
38
64
 
39
65
  const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
40
66
 
41
- const handleClick = (e, url) => {
67
+ const handleNavigation = (e, url) => {
42
68
  e.preventDefault();
43
69
  router.push(url);
44
70
  };
@@ -49,71 +75,60 @@ const SearchContent = ({
49
75
  }
50
76
  };
51
77
 
52
- const handleOnBlur = () => {
53
- if (!collapsedSearch) return;
54
- if (!debouncedSearchTerm || debouncedSearchTerm === '') setCollapsed(true);
55
- };
78
+ const handleIconClick = () => {
79
+ const isCloseIcon = collapsedSearch ? !collapsed : debouncedSearchTerm;
80
+
81
+ if (collapsedSearch) setCollapsed(!collapsed);
56
82
 
57
- const handleClearSearchResults = () => {
58
- setSearchTerm('');
83
+ if (isCloseIcon) {
84
+ setSearchTerm('');
85
+ setShowResults(false);
86
+ } else {
87
+ setShowResults(true);
88
+ }
59
89
  };
60
90
 
61
91
  const className = ['search-content', modifier, responsiveClasses].filter(Boolean).join(' ');
62
- return collapsed ? (
63
- <div className={className}>
64
- <div className="search-content--collapse__wrapper">
65
- <label className="search-content--collapse__label">
66
- <span className="search-content--collapse__icon_wrapper">
67
- <svg className="search-content--collapse__icon" viewBox="0 0 20 20">
68
- <path
69
- fillRule="evenodd"
70
- d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
71
- clipRule="evenodd"
72
- />
73
- </svg>
92
+ const searchModifier = collapsed ? 'search-content--collapse' : 'search-content--expanded';
93
+
94
+ return (
95
+ <div className={className} ref={searchContentRef}>
96
+ <div className={`${searchModifier}__wrapper`}>
97
+ <label className={`${searchModifier}__label`}>
98
+ <span className={`${searchModifier}__icon_wrapper`}>
99
+ <SearchContentToggleIcon
100
+ searchTerm={debouncedSearchTerm}
101
+ onClick={handleIconClick}
102
+ useCloseIcon={collapsedSearch ? !collapsed : debouncedSearchTerm}
103
+ />
74
104
  </span>
75
- <input
76
- onFocus={() => setCollapsed(false)}
77
- onChange={e => setSearchTerm(e.target.value)}
78
- type="text"
79
- name="search"
80
- className="search-content--collapse__input"
81
- />
82
- </label>
83
- </div>
84
- </div>
85
- ) : (
86
- <>
87
- <div className={className}>
88
- <div className="search-content--expanded__wrapper">
89
- <label className="search-content--expanded__label">
90
- <span className="search-content--expanded__icon_wrapper">
91
- <SearchContentToggleIcon results={results} onClear={handleClearSearchResults} />
92
- </span>
105
+ {!collapsed && (
93
106
  <input
107
+ className={`${searchModifier}__input`}
94
108
  type="text"
95
109
  name="search"
96
- onChange={e => setSearchTerm(e.target.value)}
97
- onKeyPress={handleKeyPress}
98
- className="search-content--expanded__input"
99
110
  placeholder={placeholder}
100
111
  value={searchTerm}
101
- onBlur={handleOnBlur}
112
+ onChange={e => setSearchTerm(e.target.value)}
113
+ onKeyPress={handleKeyPress}
114
+ onFocus={() => setShowResults(true)}
115
+ data-testid="search-content-input"
102
116
  />
103
- </label>
104
- </div>
117
+ )}
118
+ </label>
119
+ </div>
120
+ {showResults && (
105
121
  <SearchContentResults
106
122
  results={results}
107
123
  debouncedSearchTerm={debouncedSearchTerm}
108
- handleClick={handleClick}
124
+ handleClick={handleNavigation}
109
125
  />
110
- </div>
111
- </>
126
+ )}
127
+ </div>
112
128
  );
113
129
  };
114
130
 
115
131
  SearchContent.propTypes = {
116
- searchInputAlignment: PropTypes.string,
117
132
  searchInputWrapperMobile: PropTypes.string,
118
133
  searchInputWrapperDesktop: PropTypes.string,
119
134
  placeholder: PropTypes.string,
@@ -124,7 +139,6 @@ SearchContent.propTypes = {
124
139
  };
125
140
 
126
141
  SearchContent.defaultProps = {
127
- searchInputAlignment: '',
128
142
  searchInputWrapperMobile: '',
129
143
  searchInputWrapperDesktop: '',
130
144
  placeholder: '',
package/src/components/SearchContent/SearchContentResults.js CHANGED
@@ -3,25 +3,25 @@ import BlazeLink from '../BlazeLink';
3
3
  import SearchContentItems from './SearchContentItems';
4
4
 
5
5
  const SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {
6
- if (debouncedSearchTerm !== '') {
7
- return (
8
- <div className="search-content--results__wrapper">
9
- <div className="search-content--results__wrapper--message">
10
- <div className="search-content--results__content">
11
- {results.length === 0 && (
12
- <div className="search-content--results__message">
13
- <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>
14
- {`Search all results for: ${debouncedSearchTerm}`}
15
- </BlazeLink>
16
- </div>
17
- )}
18
- {results.length > 0 && <SearchContentItems results={results} onClick={onClick} />}
19
- </div>
6
+ if (!debouncedSearchTerm) return null;
7
+ const hasResults = results.length > 0;
8
+ return (
9
+ <div className="search-content--results__wrapper">
10
+ <div className="search-content--results__wrapper--message">
11
+ <div className="search-content--results__content">
12
+ {hasResults ? (
13
+ <SearchContentItems results={results} onClick={onClick} />
14
+ ) : (
15
+ <div className="search-content--results__message">
16
+ <BlazeLink href={`/search?search_term=${debouncedSearchTerm}`}>
17
+ {`Search all results for: ${debouncedSearchTerm}`}
18
+ </BlazeLink>
19
+ </div>
20
+ )}
20
21
  </div>
21
22
  </div>
22
- );
23
- }
24
- return null;
23
+ </div>
24
+ );
25
25
  };
26
26
 
27
27
  export default SearchContentResults;
package/src/components/SearchContent/SearchContentToggleIcon.js CHANGED
@@ -1,27 +1,14 @@
1
1
  import React from 'react';
2
+ import { CLOSE_ICON, SEARCH_ICON } from './constants';
2
3
 
3
- const SearchContentToggleIcon = ({ results, onClear }) => {
4
- if (results && results.length > 0) {
5
- return (
6
- <svg className="search-content--expanded__icon" viewBox="0 0 20 20" onClick={onClear}>
7
- <path
8
- fillRule="evenodd"
9
- d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
10
- clipRule="evenodd"
11
- />
12
- </svg>
13
- );
14
- }
15
-
16
- return (
17
- <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
18
- <path
19
- fillRule="evenodd"
20
- d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
21
- clipRule="evenodd"
22
- />
23
- </svg>
24
- );
25
- };
4
+ const SearchContentToggleIcon = ({ onClick, useCloseIcon }) => (
5
+ <svg
6
+ className="search-content--expanded__icon"
7
+ viewBox="0 0 20 20"
8
+ onClick={onClick}
9
+ data-testid={useCloseIcon ? 'search-content-icon-close' : 'search-content-icon'}>
10
+ <path fillRule="evenodd" clipRule="evenodd" d={useCloseIcon ? CLOSE_ICON : SEARCH_ICON} />
11
+ </svg>
12
+ );
26
13
 
27
14
  export default SearchContentToggleIcon;
package/src/components/SearchContent/constants.js ADDED
@@ -0,0 +1,6 @@
1
+ const SEARCH_ICON =
2
+ 'M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z';
3
+ const CLOSE_ICON =
4
+ 'M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z';
5
+
6
+ export { SEARCH_ICON, CLOSE_ICON };
package/tests/unit/src/components/SearchContent/SearchContent.test.js CHANGED
@@ -4,7 +4,7 @@
4
4
  import React from 'react';
5
5
  import '@testing-library/jest-dom/extend-expect';
6
6
  import { MockedProvider } from '@apollo/client/testing';
7
- import { render } from '@testing-library/react';
7
+ import { render, fireEvent, waitFor } from '@testing-library/react';
8
8
  import SearchContent from '../../../../../src/components/SearchContent';
9
9
 
10
10
  jest.mock('@apollo/client', () => ({
@@ -13,20 +13,45 @@ jest.mock('@apollo/client', () => ({
13
13
  }));
14
14
 
15
15
  jest.mock('next/router', () => ({
16
- useRouter: jest.fn(() => ({ asPath: 'test-url' }))
16
+ useRouter: jest.fn(() => ({ asPath: 'test-url', events: { on: jest.fn(), off: jest.fn() } }))
17
17
  }));
18
18
 
19
- jest.mock('../../../../../src/components/SearchContent/SearchContent', () =>
20
- jest.fn(() => <div>Mocked component</div>)
21
- );
19
+ const SEARCH_INPUT_TEST_ID = 'search-content-input';
22
20
 
23
21
  describe('SearchContent', () => {
22
+ const entities = [];
23
+
24
24
  it('should match snapshot', async () => {
25
- const { asFragment } = render(
25
+ const { asFragment, getByTestId, queryByTestId } = render(
26
+ <MockedProvider mocks={[]} addTypename={false}>
27
+ <SearchContent entities={entities} />
28
+ </MockedProvider>
29
+ );
30
+ expect(asFragment()).toMatchSnapshot();
31
+ const searchInput = getByTestId(SEARCH_INPUT_TEST_ID);
32
+ fireEvent.change(searchInput, { target: { value: 'search' } });
33
+ await waitFor(() => expect(queryByTestId('search-content-icon-close')).toBeTruthy());
34
+ const closeIcon = getByTestId('search-content-icon-close');
35
+ expect(closeIcon).toBeTruthy();
36
+ fireEvent.click(closeIcon);
37
+ expect(searchInput.value).toEqual('');
38
+ await waitFor(() => expect(queryByTestId('search-content-icon')).toBeTruthy());
39
+ });
40
+
41
+ it('should should be collapsed when collapsedSearch=true', async () => {
42
+ const { asFragment, getByTestId, queryByTestId } = render(
26
43
  <MockedProvider mocks={[]} addTypename={false}>
27
- <SearchContent />
44
+ <SearchContent collapsedSearch entities={entities} />
28
45
  </MockedProvider>
29
46
  );
47
+ expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeNull();
30
48
  expect(asFragment()).toMatchSnapshot();
49
+
50
+ const searchIcon = getByTestId('search-content-icon');
51
+ fireEvent.click(searchIcon);
52
+ await waitFor(() => expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeTruthy());
53
+ const closeIcon = getByTestId('search-content-icon-close');
54
+ fireEvent.click(closeIcon);
55
+ await waitFor(() => expect(queryByTestId(SEARCH_INPUT_TEST_ID)).toBeNull());
31
56
  });
32
57
  });
package/tests/unit/src/components/SearchContent/__snapshots__/SearchContent.test.js.snap CHANGED
@@ -2,8 +2,72 @@
2
2
 
3
3
  exports[`SearchContent should match snapshot 1`] = `
4
4
  <DocumentFragment>
5
- <div>
6
- Mocked component
5
+ <div
6
+ class="search-content"
7
+ >
8
+ <div
9
+ class="search-content--expanded__wrapper"
10
+ >
11
+ <label
12
+ class="search-content--expanded__label"
13
+ >
14
+ <span
15
+ class="search-content--expanded__icon_wrapper"
16
+ >
17
+ <svg
18
+ class="search-content--expanded__icon"
19
+ data-testid="search-content-icon"
20
+ viewBox="0 0 20 20"
21
+ >
22
+ <path
23
+ clip-rule="evenodd"
24
+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
25
+ fill-rule="evenodd"
26
+ />
27
+ </svg>
28
+ </span>
29
+ <input
30
+ class="search-content--expanded__input"
31
+ data-testid="search-content-input"
32
+ name="search"
33
+ placeholder=""
34
+ type="text"
35
+ value=""
36
+ />
37
+ </label>
38
+ </div>
39
+ </div>
40
+ </DocumentFragment>
41
+ `;
42
+
43
+ exports[`SearchContent should should be collapsed when collapsedSearch=true 1`] = `
44
+ <DocumentFragment>
45
+ <div
46
+ class="search-content"
47
+ >
48
+ <div
49
+ class="search-content--collapse__wrapper"
50
+ >
51
+ <label
52
+ class="search-content--collapse__label"
53
+ >
54
+ <span
55
+ class="search-content--collapse__icon_wrapper"
56
+ >
57
+ <svg
58
+ class="search-content--expanded__icon"
59
+ data-testid="search-content-icon"
60
+ viewBox="0 0 20 20"
61
+ >
62
+ <path
63
+ clip-rule="evenodd"
64
+ d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
65
+ fill-rule="evenodd"
66
+ />
67
+ </svg>
68
+ </span>
69
+ </label>
70
+ </div>
7
71
  </div>
8
72
  </DocumentFragment>
9
73
  `;