@jetshop/ui 7.0.0-alpha-3 → 7.0.0-alpha-4

package/ProductSpecifications/ProductSpecifications.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Table: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & {
+    as?: React.ElementType<any>;
+}>;
+declare const ProductSpecifications: ({ fields, ...rest }: {
+    fields: any;
+}) => React.JSX.Element;
+export default ProductSpecifications;

package/ProductSpecifications/ProductSpecifications.js

@@ -0,0 +1,78 @@
+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 React from 'react';
+import { styled } from 'linaria/react';
+import t from '@jetshop/intl';
+export const Table = styled('table') `
+  width: 100%;
+  overflow: hidden;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+  ul {
+    list-style-type: disc;
+    margin-left: 1rem;
+  }
+
+  tr {
+    > * {
+      line-height: 2rem;
+    }
+    th {
+      text-align: left;
+      font-weight: 600;
+      padding-right: 0.5rem;
+    }
+  }
+`;
+const StringValues = ({ stringValue, title }) => (React.createElement("tr", null,
+    React.createElement("th", null, title),
+    React.createElement("td", null, stringValue)));
+const HtmlValues = ({ htmlValue, title }) => {
+    const value = { __html: htmlValue };
+    return (React.createElement("tr", null,
+        React.createElement("th", null, title),
+        React.createElement("td", { dangerouslySetInnerHTML: value })));
+};
+const BoolValues = ({ boolValue, title }) => (React.createElement("tr", null,
+    React.createElement("th", null, title),
+    React.createElement("td", null, boolValue ? React.createElement("div", null, t('Yes')) : React.createElement("div", null, t('No')))));
+const ListValues = ({ listValues, title }) => listValues ? (React.createElement("tr", null,
+    React.createElement("th", null, title),
+    React.createElement("td", null,
+        React.createElement("ul", null, listValues.map((val) => (React.createElement("li", { key: val }, val))))))) : null;
+const renderFieldPair = (field, index) => {
+    const type = field.type;
+    switch (type) {
+        case 'STRING':
+            return React.createElement(StringValues, Object.assign({}, field, { key: index }));
+        case 'HTML':
+            return React.createElement(HtmlValues, Object.assign({}, field, { key: index }));
+        case 'BOOL':
+            return React.createElement(BoolValues, Object.assign({}, field, { key: index }));
+        case 'LIST':
+            return React.createElement(ListValues, Object.assign({}, field, { key: index }));
+        default:
+            break;
+    }
+};
+const ProductSpecifications = (_a) => {
+    var { fields } = _a, rest = __rest(_a, ["fields"]);
+    return fields ? (React.createElement(Table, Object.assign({}, rest),
+        React.createElement("tbody", null, fields.map((field, index) => {
+            return renderFieldPair(field, index);
+        })))) : null;
+};
+export default ProductSpecifications;
+//# sourceMappingURL=ProductSpecifications.js.map

package/ProductSpecifications/ProductSpecifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSpecifications.js","sourceRoot":"","sources":["ProductSpecifications.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,CAAC,MAAM,eAAe,CAAC;AAE9B,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBnC,CAAC;AAIF,MAAM,YAAY,GAAG,CAAC,EACpB,WAAW,EACX,KAAK,EAIN,EAAE,EAAE,CAAC,CACJ;IACE,gCAAK,KAAK,CAAM;IAChB,gCAAK,WAAW,CAAM,CACnB,CACN,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,EACT,KAAK,EAIN,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpC,OAAO,CACL;QACE,gCAAK,KAAK,CAAM;QAChB,4BAAI,uBAAuB,EAAE,KAAK,GAAI,CACnC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,EACT,KAAK,EAIN,EAAE,EAAE,CAAC,CACJ;IACE,gCAAK,KAAK,CAAM;IAChB,gCAAK,SAAS,CAAC,CAAC,CAAC,iCAAM,CAAC,CAAC,KAAK,CAAC,CAAO,CAAC,CAAC,CAAC,iCAAM,CAAC,CAAC,IAAI,CAAC,CAAO,CAAM,CAChE,CACN,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,UAAU,EACV,KAAK,EAIN,EAAE,EAAE,CACH,UAAU,CAAC,CAAC,CAAC,CACX;IACE,gCAAK,KAAK,CAAM;IAChB;QACE,gCACG,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACvB,4BAAI,GAAG,EAAE,GAAG,IAAG,GAAG,CAAM,CACzB,CAAC,CACC,CACF,CACF,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;AAEX,MAAM,eAAe,GAAG,CAAC,KAAU,EAAE,KAAa,EAAE,EAAE;IACpD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IACxB,QAAQ,IAAI,EAAE;QACZ,KAAK,QAAQ;YACX,OAAO,oBAAC,YAAY,oBAAK,KAAK,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;QACjD,KAAK,MAAM;YACT,OAAO,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;QAC/C,KAAK,MAAM;YACT,OAAO,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;QAC/C,KAAK,MAAM;YACT,OAAO,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,KAAK,IAAI,CAAC;QAE/C;YACE,MAAM;KACT;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,CAAC,EAAoC,EAAE,EAAE;QAAxC,EAAE,MAAM,OAA4B,EAAvB,IAAI,cAAjB,UAAmB,CAAF;IAC9C,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,oBAAC,KAAK,oBAAK,IAAI;QACb,mCACG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAU,EAAE,KAAa,EAAE,EAAE;YACxC,OAAO,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC,CACI,CACF,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/ScrollRestorationHandler/ScrollRestorationHandler.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RouteComponentProps } from 'react-router-dom';
+export type routeType = 'sortOrderChange' | 'filterChange' | 'paginationChange' | 'Product' | 'Category' | 'Page';
+export interface ScrollRestoreProps {
+    ignoreForRouteTypes?: routeType[];
+}
+declare const _default: import("react").ComponentClass<Pick<ScrollRestoreProps & RouteComponentProps<{}, import("react-router").StaticContext, unknown>, "ignoreForRouteTypes">, any> & import("react-router").WithRouterStatics<({ location, ignoreForRouteTypes }: ScrollRestoreProps & RouteComponentProps<{}, import("react-router").StaticContext, unknown>) => any>;
+export default _default;

package/ScrollRestorationHandler/ScrollRestorationHandler.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+import { withRouter } from 'react-router-dom';
+import { useScrollRestore } from './useScrollRestore';
+const ScrollRestorationHandler = function ScrollRestorationHandler({ location, ignoreForRouteTypes }) {
+    const prevLocation = useRef();
+    useEffect(() => {
+        prevLocation.current = location;
+    }, [location]);
+    useScrollRestore({
+        location,
+        prevLocation: prevLocation.current,
+        ignoreForRouteTypes
+    });
+    return null;
+};
+export default withRouter(ScrollRestorationHandler);
+//# sourceMappingURL=ScrollRestorationHandler.js.map

package/ScrollRestorationHandler/ScrollRestorationHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollRestorationHandler.js","sourceRoot":"","sources":["ScrollRestorationHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAuB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAetD,MAAM,wBAAwB,GAAG,SAAS,wBAAwB,CAAC,EACjE,QAAQ,EACR,mBAAmB,EACsB;IACzC,MAAM,YAAY,GAAG,MAAM,EAAY,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;IAClC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,gBAAgB,CAAC;QACf,QAAQ;QACR,YAAY,EAAE,YAAY,CAAC,OAAO;QAClC,mBAAmB;KACpB,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC,wBAAwB,CAAC,CAAC"}

package/ScrollRestorationHandler/index.d.ts

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

package/ScrollRestorationHandler/index.js

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

package/ScrollRestorationHandler/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC"}

package/ScrollRestorationHandler/isInIgnoredRouteTypes.d.ts

@@ -0,0 +1,8 @@
+import { Location } from 'history';
+import { routeType } from './ScrollRestorationHandler';
+export declare function isInIgnoredRouteTypes({ location, routeTypes }: {
+    location: Location<{
+        type?: any;
+    }>;
+    routeTypes: routeType[];
+}): boolean;

package/ScrollRestorationHandler/isInIgnoredRouteTypes.js

@@ -0,0 +1,8 @@
+export function isInIgnoredRouteTypes({ location, routeTypes }) {
+    if (!location.state || !location.state.type)
+        return false;
+    if (routeTypes.includes(location.state.type))
+        return true;
+    return false;
+}
+//# sourceMappingURL=isInIgnoredRouteTypes.js.map

package/ScrollRestorationHandler/isInIgnoredRouteTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isInIgnoredRouteTypes.js","sourceRoot":"","sources":["isInIgnoredRouteTypes.tsx"],"names":[],"mappings":"AAEA,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,UAAU,EAIX;IACC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI;QAAE,OAAO,KAAK,CAAC;IAC1D,IAAI,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAC1D,OAAO,KAAK,CAAC;AACf,CAAC"}

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"}