@jetshop/ui 5.13.12-0 → 5.14.0

package/Search/SearchAutoCompleteContainer.d.ts

@@ -1,45 +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, any>, keyof SearchFieldProps>, any> & import("react-router").WithRouterStatics<(props: SearchFieldProps & RouteComponentProps<{}, import("react-router").StaticContext, any>) => JSX.Element>;
-export default _default;
+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, any>, keyof SearchFieldProps>, any> & import("react-router").WithRouterStatics<(props: SearchFieldProps & RouteComponentProps<{}, import("react-router").StaticContext, any>) => JSX.Element>;
+export default _default;

package/Search/SearchAutoCompleteContainer.js

@@ -1,172 +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 'react-apollo';
-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);
+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 'react-apollo';
+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