@jetshop/ui 6.3.9-alpha.1 → 6.5.0

package/ScrollRestorationHandler/useScrollRestore.d.ts

@@ -0,0 +1,9 @@
+import { Location } from 'history';
+import { routeType } from './ScrollRestorationHandler';
+export declare function useScrollRestore({ location, ignoreForRouteTypes, prevLocation }: {
+    location: Location<{
+        type?: any;
+    }>;
+    prevLocation: Location;
+    ignoreForRouteTypes?: routeType[];
+}): void;

package/ScrollRestorationHandler/useScrollRestore.js

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+import { isInIgnoredRouteTypes } from './isInIgnoredRouteTypes';
+export function useScrollRestore({ location, ignoreForRouteTypes, prevLocation }) {
+    useEffect(() => {
+        if (ignoreForRouteTypes &&
+            isInIgnoredRouteTypes({ location, routeTypes: ignoreForRouteTypes })) {
+            return;
+        }
+        if (!prevLocation && location.hash !== '') {
+            return;
+        }
+        if (prevLocation &&
+            prevLocation.pathname === location.pathname &&
+            prevLocation.search === location.search) {
+            return;
+        }
+        window.scrollTo(0, 0);
+    }, [ignoreForRouteTypes, location, prevLocation]);
+}
+//# sourceMappingURL=useScrollRestore.js.map

package/ScrollRestorationHandler/useScrollRestore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollRestore.js","sourceRoot":"","sources":["useScrollRestore.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,mBAAmB,EACnB,YAAY,EAKb;IACC,SAAS,CAAC,GAAG,EAAE;QACb,IACE,mBAAmB;YACnB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,EAAE,CAAC,EACpE;YACA,OAAO;SACR;QAED,IAAI,CAAC,YAAY,IAAI,QAAQ,CAAC,IAAI,KAAK,EAAE,EAAE;YACzC,OAAO;SACR;QAED,IACE,YAAY;YACZ,YAAY,CAAC,QAAQ,KAAK,QAAQ,CAAC,QAAQ;YAC3C,YAAY,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,EACvC;YACA,OAAO;SACR;QAED,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;AACpD,CAAC"}

package/Search/SearchAutoCompleteContainer.d.ts

@@ -0,0 +1,45 @@
+import { SearchResult } from '@jetshop/core/types';
+import { DocumentNode } from 'graphql';
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+export interface Events {
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<FocusEvent>;
+    onFocus?: React.FocusEventHandler<FocusEvent>;
+}
+export interface RenderFnProps extends SearchFieldState {
+    getInputProps: (args?: Pick<Events, 'onBlur' | 'onFocus'>) => {};
+    getCancelProps: (args?: Pick<Events, 'onClick'>) => {};
+    getFlyoutProps: (args?: any) => {};
+    updateFocus: (args: 'focus' | 'blur') => void;
+    result: SearchResult;
+    loading: boolean;
+    inputRef: React.Ref<HTMLInputElement>;
+    triggerSearch(term: string): void;
+}
+export interface SearchFieldProps {
+    /** Initial value for the search field */
+    initialValue: string;
+    /** Optional function to call when cancel button is clicked */
+    onCancel?: () => void;
+    /** Optional function to call when the search is submitted */
+    onSubmit?: (term: string) => void;
+    /** Whether to focus the search input on first mount */
+    focusOnLoad?: boolean;
+    /** Query to perform the autocomplete search */
+    autocompleteQuery: DocumentNode;
+    /** Internals */
+    children: (args: RenderFnProps) => JSX.Element;
+}
+export interface SearchFieldState {
+    /** Whether or not the search term has been edited since render */
+    isDirty: boolean;
+    /** The search term string */
+    term: string;
+    /** The debounced search term string used for the query */
+    debouncedTerm: string;
+    /** Whether the search field is open */
+    isOpen: boolean;
+}
+declare const _default: React.ComponentClass<Pick<SearchFieldProps & RouteComponentProps<{}, import("react-router").StaticContext, unknown>, keyof SearchFieldProps>, any> & import("react-router").WithRouterStatics<(props: SearchFieldProps & RouteComponentProps<{}, import("react-router").StaticContext, unknown>) => React.JSX.Element>;
+export default _default;

package/Search/SearchAutoCompleteContainer.js

@@ -0,0 +1,172 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+import debounce from 'lodash.debounce';
+import * as React from 'react';
+import { Query } from '@apollo/client/react/components';
+import { withRouter } from 'react-router-dom';
+import { callAllEventHandlers } from '../utils/callAllEventHandlers';
+class SearchFieldBehaviour extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.inputRef = React.createRef();
+        this.flyoutRef = React.createRef();
+        this.cleanup = () => { };
+        this._isMounted = false;
+        this.initialState = {
+            isDirty: false,
+            term: this.props.initialValue,
+            debouncedTerm: this.props.initialValue,
+            isOpen: false
+        };
+        this.environment = typeof window === 'undefined' ? null : window;
+        this.state = this.initialState;
+        this.getInputProps = (_a = {}) => {
+            var { onBlur, onFocus, refKey = 'ref' } = _a, rest = __rest(_a, ["onBlur", "onFocus", "refKey"]);
+            const { updateSearch, handleBlur, handleFocus, handleEnterSubmit, inputRef } = this;
+            const { term } = this.state;
+            return Object.assign({ onChange: updateSearch, onBlur: callAllEventHandlers(onBlur, handleBlur), onFocus: callAllEventHandlers(onFocus, handleFocus), onKeyDown: callAllEventHandlers(handleEnterSubmit), [refKey]: inputRef, autoComplete: 'off', value: term, type: 'search' }, rest
+            // TODO: add an ID via props or generate one
+            // TODO: add ARIA labels
+            );
+        };
+        this.getFlyoutProps = ({ refKey = 'ref', rest } = {}) => {
+            const { flyoutRef } = this;
+            return Object.assign({ [refKey]: flyoutRef }, rest);
+        };
+        this.getCancelProps = (_a = {}) => {
+            var { onClick } = _a, rest = __rest(_a, ["onClick"]);
+            const { clearSearch } = this;
+            const { onCancel } = this.props;
+            return Object.assign({ onClick: callAllEventHandlers(onClick, onCancel, clearSearch) }, rest);
+        };
+        this.resetIfEmpty = (e) => {
+            if (e.currentTarget.value === this.props.initialValue) {
+                this.clearSearch();
+            }
+        };
+        this.handleBlur = (e, cb) => {
+            this.resetIfEmpty(e);
+            cb && typeof cb === 'function' && cb();
+            return true;
+        };
+        this.handleEnterSubmit = (e) => {
+            // First check that the key pressed was Enter, and then
+            // call the onSubmit callback. We always call triggerSearch,
+            // but the user has an opportunity to pass an onSubmit handler
+            // as a prop
+            const { term } = this.state;
+            if (e.key === 'Enter') {
+                this.triggerSearch(term);
+            }
+        };
+        this.triggerSearch = (term = this.state.term) => {
+            // Blur the input, close the search and navigate to the search page
+            this.setState({ isOpen: false });
+            this.debouncedUpdateTerm.cancel();
+            if (typeof this.props.onSubmit === 'function')
+                this.props.onSubmit(term);
+            this.props.history.push(`${this.props.routes.search.path}/?term=${term}`);
+            this.updateFocus('blur');
+        };
+        this.handleFocus = (_e, cb) => {
+            this.setState({ isOpen: true });
+            cb && typeof cb === 'function' && cb();
+            return true;
+        };
+        this.updateFocus = (focusState) => {
+            if (!['blur', 'focus'].includes(focusState)) {
+                throw new Error("updateFocus must be called with one of 'blur' | 'focus'");
+            }
+            const shouldHaveFocus = focusState === 'focus';
+            const DOMElementHasFocus = document.activeElement === this.inputRef.current;
+            // Trigger a blur or focus on the input
+            shouldHaveFocus && !DOMElementHasFocus && this.inputRef.current.focus();
+            !shouldHaveFocus && DOMElementHasFocus && this.inputRef.current.blur();
+            return true;
+        };
+        this.debouncedUpdateTerm = debounce((term) => this._isMounted && this.setState({ debouncedTerm: term }), 200);
+        this.updateSearch = (e) => {
+            const term = e.currentTarget.value;
+            const isDirty = term !== this.props.initialValue;
+            this.debouncedUpdateTerm(term);
+            this.setState({
+                term,
+                isDirty
+            });
+        };
+        this.clearSearch = () => {
+            this.setState(this.initialState);
+        };
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        const targetIsInside = (target) => [this.flyoutRef, this.inputRef].some((node) => node &&
+            node.current &&
+            (node.current === target || node.current.contains(target)));
+        const onMouseUp = (event) => {
+            if (!targetIsInside(event.target)) {
+                this.handleBlur(event);
+                this.setState({ isOpen: false });
+            }
+        };
+        const onTouchStart = (event) => {
+            if (!targetIsInside(event.target)) {
+                this.handleBlur(event);
+                this.setState({ isOpen: false });
+            }
+        };
+        if (this.environment) {
+            this.environment.addEventListener('mouseup', onMouseUp);
+            this.environment.addEventListener('touchstart', onTouchStart);
+        }
+        if (this.props.focusOnLoad) {
+            this.updateFocus('focus');
+        }
+        this.cleanup = () => {
+            if (this.environment) {
+                this.environment.removeEventListener('mouseup', onMouseUp);
+                this.environment.removeEventListener('touchstart', onTouchStart);
+            }
+        };
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+        this.cleanup();
+    }
+    componentDidUpdate(prevProps) {
+        const { pathname } = this.props.location;
+        const locationPath = pathname.substr(-1) !== '/'
+            ? pathname
+            : pathname.substr(0, pathname.length - 1);
+        if (this.props.location.pathname !== prevProps.location.pathname &&
+            locationPath !== this.props.routes.search.path)
+            this.props.onCancel();
+    }
+    render() {
+        return (React.createElement(Query, { context: { useApolloNetworkStatus: false }, skip: !this.state.isDirty ||
+                this.state.debouncedTerm === this.props.initialValue, variables: { term: this.state.debouncedTerm }, errorPolicy: "ignore", query: this.props.autocompleteQuery }, ({ loading, data }) => {
+            return this.props.children(Object.assign({ getInputProps: this.getInputProps, getCancelProps: this.getCancelProps, getFlyoutProps: this.getFlyoutProps, loading: loading || this.state.term !== this.state.debouncedTerm, isOpen: this.state.isOpen, updateFocus: this.updateFocus, result: data === null || data === void 0 ? void 0 : data.searchAutoComplete, inputRef: this.inputRef, triggerSearch: this.triggerSearch }, this.state));
+        }));
+    }
+}
+SearchFieldBehaviour.defaultProps = {
+    initialValue: '',
+    focusOnLoad: false
+};
+// If SearchFieldBehaviour is refactored to use hooks, then this can be moved inside there
+const SearchFieldBehaviourWrapper = (props) => {
+    const { routes } = useShopConfig();
+    return React.createElement(SearchFieldBehaviour, Object.assign({}, props, { routes: routes }));
+};
+export default withRouter(SearchFieldBehaviourWrapper);
+//# sourceMappingURL=SearchAutoCompleteContainer.js.map

package/Search/SearchAutoCompleteContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchAutoCompleteContainer.js","sourceRoot":"","sources":["SearchAutoCompleteContainer.tsx"],"names":[],"mappings":"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"}

package/Search/SearchField.d.ts

@@ -0,0 +1,26 @@
+import { DocumentNode } from 'graphql';
+import * as React from 'react';
+export interface SearchFieldProps {
+    initialValue: string;
+    className?: string;
+    placeholder?: string;
+    autocompleteQuery: DocumentNode;
+    focusOnLoad?: boolean;
+}
+export interface SearchFieldCompound {
+    Flyout?: React.ReactNode;
+    Wrapper?: React.ReactNode;
+    Cancel?: React.ReactNode;
+}
+declare const _default: React.SFC<SearchFieldProps> & SearchFieldCompound & {
+    Flyout: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+        as?: React.ElementType<any>;
+    }>;
+    Wrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+        as?: React.ElementType<any>;
+    }>;
+    Cancel: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        as?: React.ElementType<any>;
+    }>;
+};
+export default _default;

package/Search/SearchField.js

@@ -0,0 +1,98 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import throwErrorInDev from '@jetshop/core/helpers/throwErrorInDev';
+import t from '@jetshop/intl';
+import { FlyoutTarget, FlyoutTrigger } from '@jetshop/ui/Modal/Flyout';
+import SuggestedTerm from '@jetshop/ui/Search/SuggestedTerm';
+import * as React from 'react';
+import { styled } from 'linaria/react';
+import { css } from 'linaria';
+import SearchAutoCompleteContainer from './SearchAutoCompleteContainer';
+const Wrapper = styled('div') `
+  display: flex;
+  margin: 0 auto;
+  justify-content: center;
+  align-items: center;
+`;
+const SearchFieldWrapper = styled('div') `
+  width: 12rem;
+  position: relative;
+  font-size: 16px;
+  font-weight: normal;
+`;
+const Flyout = styled('div') `
+  position: absolute;
+  background: white;
+  z-index: 999;
+  border: 1px solid #e8e8e8;
+  width: 100%;
+  top: 2rem;
+  left: 0;
+`;
+const CancelButton = styled('button') `
+  font-size: 0.875rem;
+  border: 0;
+  background: transparent;
+  color: #878787;
+  margin-left: 1rem;
+`;
+const resultStyles = css `
+  ul + h2 {
+    margin-top: 1em;
+  }
+`;
+const SearchResults = ({ term, result, loading, onClick }) => {
+    const products = result === null || result === void 0 ? void 0 : result.products;
+    const categories = result === null || result === void 0 ? void 0 : result.categories;
+    if (!loading &&
+        (products === null || products === void 0 ? void 0 : products.result.length) === 0 &&
+        (categories === null || categories === void 0 ? void 0 : categories.result.length) === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: resultStyles },
+        (products === null || products === void 0 ? void 0 : products.result.length) > 0 && (React.createElement(React.Fragment, null,
+            React.createElement("h2", null, t('Products')),
+            React.createElement("ul", { style: loading ? { opacity: 0.5 } : null }, products.result.map((item) => (React.createElement(SuggestedTerm, { term: term, onClick: onClick, key: item.id, item: item })))))),
+        (categories === null || categories === void 0 ? void 0 : categories.result.length) > 0 && (React.createElement(React.Fragment, null,
+            React.createElement("h2", null, t('Categories')),
+            React.createElement("ul", { style: loading ? { opacity: 0.5 } : null }, categories.result.map((item) => (React.createElement(SuggestedTerm, { term: term, onClick: onClick, key: item.id, item: item }))))))));
+};
+const SearchField = (_a) => {
+    var { initialValue, className, placeholder = '', autocompleteQuery, focusOnLoad = true } = _a, rest = __rest(_a, ["initialValue", "className", "placeholder", "autocompleteQuery", "focusOnLoad"]);
+    throwErrorInDev(!autocompleteQuery, `You forgot to pass 'autocompleteQuery' to SearchField`);
+    return (React.createElement(SearchAutoCompleteContainer, Object.assign({ autocompleteQuery: autocompleteQuery, initialValue: initialValue, focusOnLoad: focusOnLoad }, rest), (searchField) => (React.createElement(Wrapper, { className: className, "data-flight-searchfield": "" },
+        React.createElement(SearchFieldWrapper, null,
+            React.createElement(FlyoutTrigger, { showCover: false, id: "searchFlyout" }, ({ showTarget, hideTarget }) => (React.createElement(React.Fragment, null,
+                React.createElement("input", Object.assign({ placeholder: placeholder }, searchField.getInputProps({
+                    onFocus: showTarget
+                }), { "data-flight-search-autocomplete-field": "" })),
+                React.createElement(CancelButton, Object.assign({}, searchField.getCancelProps({ onClick: hideTarget }), { "data-flight-searchfield-cancel": true }), t('Cancel'))))),
+            React.createElement(FlyoutTarget, { id: "searchFlyout" }, (flyout) => {
+                var _a, _b, _c, _d;
+                const hasResults = ((_b = (_a = searchField.result) === null || _a === void 0 ? void 0 : _a.products) === null || _b === void 0 ? void 0 : _b.result.length) > 0 ||
+                    ((_d = (_c = searchField.result) === null || _c === void 0 ? void 0 : _c.categories) === null || _d === void 0 ? void 0 : _d.result.length) > 0;
+                const { loading, isDirty, isOpen } = searchField;
+                const showFlyout = isDirty && !loading && hasResults && isOpen && flyout.isOpen;
+                if (showFlyout) {
+                    return (React.createElement(Flyout, { "data-flight-searchfield-flyout": true },
+                        React.createElement("div", Object.assign({}, searchField.getFlyoutProps()), searchField.isDirty && (React.createElement(React.Fragment, null,
+                            React.createElement(SearchResults, { term: searchField.term, result: searchField.result, onClick: flyout.hideTarget, loading: searchField.loading }))))));
+                }
+                return null;
+            }))))));
+};
+export default Object.assign(SearchField, {
+    Flyout,
+    Wrapper: SearchFieldWrapper,
+    Cancel: CancelButton
+});
+//# sourceMappingURL=SearchField.js.map

package/Search/SearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["SearchField.tsx"],"names":[],"mappings":"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"}

package/Search/SearchPage/PageOf.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const PageOf: ({ page, pages }: {
+    page: number;
+    pages: number;
+}) => React.JSX.Element;

package/Search/SearchPage/PageOf.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const PageOf = ({ page, pages }) => (React.createElement("div", null,
+    "Page ",
+    page,
+    " of ",
+    pages));
+//# sourceMappingURL=PageOf.js.map

package/Search/SearchPage/PageOf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageOf.js","sourceRoot":"","sources":["PageOf.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAmC,EAAE,EAAE,CAAC,CAC1E;;IACQ,IAAI;;IAAM,KAAK,CACjB,CACP,CAAC"}

package/Search/SearchPage/SearchMeta.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface ISearchMetaProps {
+    total: number;
+    page: number;
+    pages: number;
+    className?: string;
+}
+export declare const SearchMetaWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType<any>;
+}>;
+declare class SearchMeta extends React.PureComponent<ISearchMetaProps & {
+    className?: string;
+}, any> {
+    render(): React.JSX.Element;
+}
+export default SearchMeta;

package/Search/SearchPage/SearchMeta.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { styled } from 'linaria/react';
+import { PageOf } from './PageOf';
+export const SearchMetaWrapper = styled('aside') `
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0;
+`;
+class SearchMeta extends React.PureComponent {
+    render() {
+        const { total, page, pages, className = '' } = this.props;
+        return (React.createElement(SearchMetaWrapper, { className: className },
+            React.createElement("header", null,
+                total,
+                " items"),
+            React.createElement(PageOf, { page: page, pages: pages })));
+    }
+}
+export default SearchMeta;
+//# sourceMappingURL=SearchMeta.js.map

package/Search/SearchPage/SearchMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchMeta.js","sourceRoot":"","sources":["SearchMeta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;;CAI/C,CAAC;AAEF,MAAM,UAAW,SAAQ,KAAK,CAAC,aAG9B;IACQ,MAAM;QACX,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE1D,OAAO,CACL,oBAAC,iBAAiB,IAAC,SAAS,EAAE,SAAS;YACrC;gBAAS,KAAK;yBAAgB;YAC9B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAClB,CACrB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,UAAU,CAAC"}

package/Search/SearchPage/SearchPageBehaviour.d.ts

@@ -0,0 +1,19 @@
+import { ApolloError } from '@apollo/client';
+import { DocumentNode } from 'graphql';
+import * as React from 'react';
+export interface SearchPageRenderProps {
+    result: object;
+    filters: object;
+    total: number;
+    term: string;
+    loading: boolean;
+    error: ApolloError;
+}
+export interface SearchPageProps {
+    children(props: SearchPageRenderProps): React.ReactElement;
+    /** Query to perform the search */
+    searchQuery: DocumentNode;
+    location: Location;
+}
+declare const SearchPageBehaviour: React.FC<SearchPageProps>;
+export default SearchPageBehaviour;

package/Search/SearchPage/SearchPageBehaviour.js

@@ -0,0 +1,75 @@
+import ActiveFiltersQuery from '@jetshop/core/components/DynamicRoute/ActiveFiltersQuery.gql';
+import PaginationContext from '@jetshop/core/components/Pagination/PaginationContext';
+import PaginationProvider, { usePagination } from '@jetshop/core/components/Pagination/PaginationProvider';
+import throwErrorInDev from '@jetshop/core/helpers/throwErrorInDev';
+import { useFilters } from '@jetshop/core/hooks/Filters/useFilters';
+import qs from 'qs';
+import * as React from 'react';
+import { Query } from '@apollo/client/react/components';
+import { useQuery } from '@apollo/client';
+const SearchPageBehaviour = (props) => {
+    var _a, _b;
+    const pagination = usePagination();
+    const { location, searchQuery, children } = props;
+    const { offset, perPage } = React.useContext(PaginationContext);
+    const activeSearchTerm = React.useRef();
+    // Track the previous offset. If it has changed, we're paginating. If it
+    // hasn't, we're just applying filters.
+    const activeOffset = React.useRef(0);
+    const { clearAllFilters } = useFilters();
+    throwErrorInDev(!searchQuery, `You did not pass 'searchQuery' to SearchPageBehaviour`);
+    const activeFilterQuery = useQuery(ActiveFiltersQuery, {
+        fetchPolicy: 'cache-only'
+    });
+    const searchTerm = React.useMemo(() => qs.parse(location.search, { ignoreQueryPrefix: true }).term, [location]);
+    React.useEffect(() => {
+        if (activeSearchTerm.current && activeSearchTerm.current !== searchTerm) {
+            clearAllFilters();
+        }
+        activeSearchTerm.current = searchTerm;
+    }, [clearAllFilters, searchTerm]);
+    React.useEffect(() => {
+        activeOffset.current = offset;
+    }, [offset]);
+    if (pagination === undefined) {
+        return (React.createElement(PaginationProvider, null,
+            React.createElement(SearchPageBehaviour, Object.assign({}, props))));
+    }
+    const filters = ((_a = activeFilterQuery.data) === null || _a === void 0 ? void 0 : _a.activeFilters)
+        ? Object.assign({}, (_b = activeFilterQuery.data) === null || _b === void 0 ? void 0 : _b.activeFilters) : null;
+    filters && delete filters.__typename;
+    // Ideally this component would use the data from usePagination, but due to
+    // how the shouldComponentUpdate method in FilterContainer works it prevents
+    // rendering if we don't do it this way.
+    return searchTerm ? (React.createElement(Query, { variables: {
+            term: searchTerm,
+            first: perPage,
+            limit: perPage,
+            filters,
+            offset: activeOffset.current === offset ? 0 : offset,
+            client: !__IN_SERVER__
+        }, query: searchQuery, fetchPolicy: "cache-and-network" }, (result) => {
+        var _a, _b, _c, _d, _e, _f;
+        const totalResults = (_c = (_b = (_a = ((result === null || result === void 0 ? void 0 : result.data) || (result === null || result === void 0 ? void 0 : result.previousData))) === null || _a === void 0 ? void 0 : _a.search) === null || _b === void 0 ? void 0 : _b.products) === null || _c === void 0 ? void 0 : _c.totalResults;
+        const filters = (_f = (_e = (_d = ((result === null || result === void 0 ? void 0 : result.data) || (result === null || result === void 0 ? void 0 : result.previousData))) === null || _d === void 0 ? void 0 : _d.search) === null || _e === void 0 ? void 0 : _e.products) === null || _f === void 0 ? void 0 : _f.filters;
+        return (React.createElement(React.Fragment, null, children({
+            result: Object.assign(Object.assign({}, result), { 
+                // We want to show the previous data to avoid unnecessary loading states
+                data: result.data || result.previousData }),
+            total: totalResults,
+            filters,
+            term: searchTerm,
+            loading: result.loading,
+            error: result.error
+        })));
+    })) : (children({
+        term: searchTerm,
+        loading: false,
+        error: null,
+        total: 0,
+        result: {},
+        filters: {}
+    }));
+};
+export default SearchPageBehaviour;
+//# sourceMappingURL=SearchPageBehaviour.js.map

package/Search/SearchPage/SearchPageBehaviour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchPageBehaviour.js","sourceRoot":"","sources":["SearchPageBehaviour.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,8DAA8D,CAAC;AAC9F,OAAO,iBAAiB,MAAM,uDAAuD,CAAC;AACtF,OAAO,kBAAkB,EAAE,EACzB,aAAa,EACd,MAAM,wDAAwD,CAAC;AAChE,OAAO,eAAe,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAGpE,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAe,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAkBvD,MAAM,mBAAmB,GAA8B,CAAC,KAAK,EAAE,EAAE;;IAC/D,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAChE,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,EAAU,CAAC;IAChD,wEAAwE;IACxE,uCAAuC;IACvC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAErC,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,EAAE,CAAC;IAEzC,eAAe,CACb,CAAC,WAAW,EACZ,uDAAuD,CACxD,CAAC;IAEF,MAAM,iBAAiB,GAAG,QAAQ,CAAC,kBAAkB,EAAE;QACrD,WAAW,EAAE,YAAY;KAC1B,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAC9B,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,CAAC,IAAc,EAC3E,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,gBAAgB,CAAC,OAAO,IAAI,gBAAgB,CAAC,OAAO,KAAK,UAAU,EAAE;YACvE,eAAe,EAAE,CAAC;SACnB;QACD,gBAAgB,CAAC,OAAO,GAAG,UAAU,CAAC;IACxC,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAElC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAI,UAAU,KAAK,SAAS,EAAE;QAC5B,OAAO,CACL,oBAAC,kBAAkB;YACjB,oBAAC,mBAAmB,oBAAK,KAAK,EAAI,CACf,CACtB,CAAC;KACH;IAED,MAAM,OAAO,GAAG,CAAA,MAAA,iBAAiB,CAAC,IAAI,0CAAE,aAAa;QACnD,CAAC,mBAAM,MAAA,iBAAiB,CAAC,IAAI,0CAAE,aAAa,EAC5C,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,IAAI,OAAO,OAAO,CAAC,UAAU,CAAC;IAErC,2EAA2E;IAC3E,4EAA4E;IAC5E,wCAAwC;IACxC,OAAO,UAAU,CAAC,CAAC,CAAC,CAClB,oBAAC,KAAK,IACJ,SAAS,EAAE;YACT,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,OAAO;YACd,OAAO;YACP,MAAM,EAAE,YAAY,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;YACpD,MAAM,EAAE,CAAC,aAAa;SACvB,EACD,KAAK,EAAE,WAAW,EAClB,WAAW,EAAC,mBAAmB,IAE9B,CAAC,MAAwB,EAAE,EAAE;;QAC5B,MAAM,YAAY,GAAG,MAAA,MAAA,MAAA,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,CAAA,CAAC,0CAAE,MAAM,0CAC/D,QAAQ,0CAAE,YAAY,CAAC;QAC3B,MAAM,OAAO,GAAG,MAAA,MAAA,MAAA,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,CAAA,CAAC,0CAAE,MAAM,0CAAE,QAAQ,0CACpE,OAAO,CAAC;QAEZ,OAAO,CACL,0CACG,QAAQ,CAAC;YACR,MAAM,kCACD,MAAM;gBACT,wEAAwE;gBACxE,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,YAAY,GACzC;YACD,KAAK,EAAE,YAAY;YACnB,OAAO;YACP,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,MAAM,CAAC,OAAO;YACvB,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC,CACD,CACJ,CAAC;IACJ,CAAC,CACK,CACT,CAAC,CAAC,CAAC,CACF,QAAQ,CAAC;QACP,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,EAAE;KACZ,CAAC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/Search/SuggestedTerm.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Product, Category } from '@jetshop/core/types';
+export interface SuggestedTermProps {
+    className?: string;
+    term: string;
+    /** Function to call when a search term is clicked */
+    onClick?: () => void;
+}
+interface SuggestedProduct extends SuggestedTermProps {
+    item: Product;
+}
+interface SuggestedCategory extends SuggestedTermProps {
+    item: Category;
+}
+declare const SuggestedTerm: (props: SuggestedProduct | SuggestedCategory) => React.JSX.Element;
+export default SuggestedTerm;

package/Search/SuggestedTerm.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import ProductLink from '@jetshop/ui/ProductLink';
+import CategoryLink from '@jetshop/ui/CategoryLink';
+const SuggestedTerm = (props) => {
+    const { term = '', className = '', onClick = () => null } = props;
+    if (isProduct(props)) {
+        const { item } = props;
+        return (React.createElement("li", { className: className, onClick: onClick, "data-flight-search-autocomplete-result": "product" }, item.primaryRoute ? (React.createElement(ProductLink, { product: item }, getHighlightedText(item.name, term))) : (item.name)));
+    }
+    else {
+        const { item } = props;
+        const displayText = item.primaryRoute.breadcrumbs.join(' > ');
+        return (React.createElement("li", { className: className, onClick: onClick, "data-flight-search-autocomplete-result": "category" }, item.primaryRoute ? (React.createElement(CategoryLink, { category: item }, getHighlightedText(displayText, term))) : (item.name)));
+    }
+};
+function isProduct(props) {
+    return props.item.__typename === 'Product';
+}
+function getHighlightedText(text, highlight) {
+    // Split on higlight term and include term into parts, ignore case
+    const parts = text.split(new RegExp(`(${escapeRegExp(highlight).split(' ').join('|')})`, 'gi'));
+    const highlightArray = highlight.split(' ');
+    const toHighlightLower = highlightArray.map((word) => word.toLowerCase());
+    return parts.reduce((prev, curr, index) => {
+        return [
+            ...prev,
+            toHighlightLower.includes(curr.toLowerCase()) ? (React.createElement("strong", { style: { fontWeight: 600 }, key: index }, curr)) : (curr)
+        ];
+    }, []);
+}
+function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+export default SuggestedTerm;
+//# sourceMappingURL=SuggestedTerm.js.map

package/Search/SuggestedTerm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestedTerm.js","sourceRoot":"","sources":["SuggestedTerm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAElD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAiBpD,MAAM,aAAa,GAAG,CAAC,KAA2C,EAAE,EAAE;IACpE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC;IAElE,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;QACpB,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QACvB,OAAO,CACL,4BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,4CACuB,SAAS,IAE/C,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,oBAAC,WAAW,IAAC,OAAO,EAAE,IAAI,IACvB,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CACxB,CACf,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,IAAI,CACV,CACE,CACN,CAAC;KACH;SAAM;QACL,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;QAEvB,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9D,OAAO,CACL,4BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,4CACuB,UAAU,IAEhD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,oBAAC,YAAY,IAAC,QAAQ,EAAE,IAAI,IACzB,kBAAkB,CAAC,WAAW,EAAE,IAAI,CAAC,CACzB,CAChB,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,IAAI,CACV,CACE,CACN,CAAC;KACH;AACH,CAAC,CAAC;AAEF,SAAS,SAAS,CAChB,KAA2C;IAE3C,OAAQ,KAA0B,CAAC,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC;AACnE,CAAC;AAED,SAAS,kBAAkB,CAAC,IAAY,EAAE,SAAiB;IACzD,kEAAkE;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CACtB,IAAI,MAAM,CAAC,IAAI,YAAY,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CACtE,CAAC;IACF,MAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,gBAAgB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IAE1E,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;QACxC,OAAO;YACL,GAAG,IAAI;YACP,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAC9C,gCAAQ,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,KAAK,IAC3C,IAAI,CACE,CACV,CAAC,CAAC,CAAC,CACF,IAAI,CACL;SACF,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC;AAED,SAAS,YAAY,CAAC,MAAc;IAClC,OAAO,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC;AAED,eAAe,aAAa,CAAC"}

package/Search/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchField } from './SearchField';

package/Search/index.js

@@ -0,0 +1,2 @@
+export { default as SearchField } from './SearchField';
+//# sourceMappingURL=index.js.map