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

package/build/index.d.ts

@@ -1403,8 +1403,8 @@ interface ProductItemProps {
     price: Pick<PriceLabelProps, 'finalPrice' | 'originalPrice' | 'color'>;
     rating: Pick<RatingProps, 'rating' | 'reviews'>;
     tags?: {
-        categoryTagText: string;
-        seasonOfferTagText: string;
+        categoryTagText?: string;
+        seasonOfferTagText?: string;
     };
     alignName?: 'left' | 'center';
     url?: string;
@@ -1413,6 +1413,7 @@ interface ProductItemProps {
 
 interface ProductItemSmallMobileProps extends ProductItemProps {
     size: ComponentSize.Medium | ComponentSize.Small | ComponentSize.Large;
+    onClick?: () => void;
 }
 
 declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
@@ -1421,7 +1422,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
 };
 
 declare const Collection: {
-    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, onClick, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
     withProductGrid: typeof withProductGrid;
 };
 
@@ -1587,11 +1588,13 @@ interface SearchBarProps {
     resultOptions: SearchBarOptionItem[];
     onChange: (text: string) => void;
     onSearch: (term: string) => void;
+    onClose: () => void;
     resultsPanelDataTestId?: string;
     allResults?: number;
     initialTerm?: string;
+    shouldClear?: boolean;
 }
-declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, resultsPanelDataTestId, allResults, initialTerm, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ suggestions, resultOptions, onChange, onSearch, onClose, resultsPanelDataTestId, allResults, initialTerm, shouldClear, }: SearchBarProps) => JSX.Element;
 
 interface ProductGalleryMobileProps {
     images: ImageType[];

package/build/index.esm.js

@@ -10249,7 +10249,7 @@ var getStylesBySize = function (size) {
     }
 };
 var ProductItemMobile = function (_a) {
-    var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className;
+    var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, onClick = _a.onClick;
     var theme = useTheme();
     var styles = getStylesBySize(size);
     var space = useMemo(function () {
@@ -10260,7 +10260,7 @@ var ProductItemMobile = function (_a) {
             _a[ComponentSize.Small] = 2,
             _a)[size];
     }, [size]);
-    return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
+    return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [tags ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), (tags === null || tags === void 0 ? void 0 : tags.seasonOfferTagText) && (jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0)), (tags === null || tags === void 0 ? void 0 : tags.categoryTagText) && (jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0))] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
 };
 var templateObject_1$n, templateObject_2$d;
 
@@ -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));
     }
 };
 
@@ -10601,12 +10601,12 @@ var reducer = function (state, action) {
         case 'UPDATE_TERM': {
             return __assign$1(__assign$1({}, state), { term: action.payload.term });
         }
-        case 'TOGGLE_PANEL': {
-            return __assign$1(__assign$1({}, state), { open: action.payload.open });
-        }
         case 'CLEAR': {
             return __assign$1(__assign$1({}, state), { term: '', open: false });
         }
+        case 'TOGGLE_PANEL': {
+            return __assign$1(__assign$1({}, state), { open: action.payload.open });
+        }
     }
 };
 var Container$8 = newStyled.div({
@@ -10614,12 +10614,12 @@ 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, _b = _a.shouldClear, shouldClear = _b === void 0 ? false : _b;
     var theme = useTheme();
     if (initialTerm) {
         initialState$1.term = initialTerm;
     }
-    var _b = useReducer(reducer, initialState$1), state = _b[0], dispatch = _b[1];
+    var _c = useReducer(reducer, initialState$1), state = _c[0], dispatch = _c[1];
     var ref = useRef(null);
     var shouldDisplaySuggestion = function () {
         return resultOptions.length === 0 && suggestions.length > 0 && !state.term;
@@ -10637,7 +10637,21 @@ 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));
+    var handleOnClose = function () {
+        if (shouldClear) {
+            dispatch({ type: 'CLEAR', payload: {} });
+        }
+        else {
+            onClose();
+        }
+    };
+    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", onKeyDown: function (e) {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onSearch(state.term);
+                            }
+                        } }, void 0), jsx$1(SearchControl, { open: state.open, onClose: handleOnClose, 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() {