@trafilea/afrodita-components 5.0.0-beta.23 → 5.0.0-beta.24

package/build/index.d.ts

@@ -1587,11 +1587,12 @@ interface SearchBarProps {
     resultOptions: SearchBarOptionItem[];
     onChange: (text: string) => void;
     onSearch: (term: string) => void;
+    onClose: () => void;
     resultsPanelDataTestId?: string;
     allResults?: number;
     initialTerm?: string;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, allResults, initialTerm, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];

package/build/index.esm.js

@@ -10577,11 +10577,11 @@ var SearchIconContainer = newStyled.div({
     alignSelf: 'center',
 });
 var SearchControl = function (_a) {
-    var open = _a.open, onSearch = _a.onSearch, onClear = _a.onClear;
+    var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose;
     var theme = useTheme();
     var isMobile = useWindowDimensions(theme.mediaQueries).isMobile;
     if (isMobile) {
-        return open ? (jsx(ClearButton, { onClick: onClear }, void 0)) : (jsx(SearchIconContainer, { children: jsx(Icon.Navigation.Search, { height: 1.25, width: 1.25 }, void 0) }, void 0));
+        return open ? (jsx(ClearButton, { onClick: onClose }, void 0)) : (jsx(SearchIconContainer, { children: jsx(Icon.Navigation.Search, { height: 1.25, width: 1.25 }, void 0) }, void 0));
     }
     else {
         return (jsxs(Fragment, { children: [jsx(ButtonSecondary, { css: {
@@ -10591,7 +10591,7 @@ var SearchControl = function (_a) {
                         borderTopLeftRadius: 0,
                         borderBottomLeftRadius: 0,
                         padding: '0.875rem 1.5rem',
-                    }, text: "SEARCH", onClick: onSearch }, void 0), jsx(ClearButton, { onClick: onClear }, void 0)] }, void 0));
+                    }, text: "SEARCH", onClick: onSearch }, void 0), jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
     }
 };
 
@@ -10604,9 +10604,6 @@ var reducer = function (state, action) {
         case 'TOGGLE_PANEL': {
             return __assign$1(__assign$1({}, state), { open: action.payload.open });
         }
-        case 'CLEAR': {
-            return __assign$1(__assign$1({}, state), { term: '', open: false });
-        }
     }
 };
 var Container$8 = newStyled.div({
@@ -10614,7 +10611,7 @@ var Container$8 = newStyled.div({
     display: 'flex',
 });
 var SearchBar = function (_a) {
-    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm;
+    var suggestions = _a.suggestions, resultOptions = _a.resultOptions, onChange = _a.onChange, onSearch = _a.onSearch, onClose = _a.onClose, resultsPanelDataTestId = _a.resultsPanelDataTestId, allResults = _a.allResults, initialTerm = _a.initialTerm;
     var theme = useTheme();
     if (initialTerm) {
         initialState$1.term = initialTerm;
@@ -10637,7 +10634,7 @@ var SearchBar = function (_a) {
         : shouldDisplaySuggestion()
             ? suggestions
             : [];
-    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$8, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
+    return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$8, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsx$1(SearchControl, { open: state.open, onClose: onClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
 };
 
 function _extends() {