@jetshop/ui 5.13.10-0 → 5.14.0-alpha.49df897e

package/WindowGrid/WindowGrid.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-interface WindowGridProps {
-    id?: string;
-    items: any[];
-    className?: string;
-    prevOffset: number;
-    itemsPerRow?: number;
-    component: any;
-}
-export declare const WindowGrid: React.FC<WindowGridProps>;
-export {};
+import React from 'react';
+interface WindowGridProps {
+    id?: string;
+    items: any[];
+    className?: string;
+    prevOffset: number;
+    itemsPerRow?: number;
+    component: any;
+}
+export declare const WindowGrid: React.FC<WindowGridProps>;
+export {};

package/WindowGrid/WindowGrid.js

@@ -1,58 +1,58 @@
-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 PaginationContext from '@jetshop/core/components/Pagination/PaginationContext';
-import getBreakpointsFromValues from '@jetshop/core/helpers/getBreakpointsFromValues';
-import { Above } from '@jetshop/ui/Breakpoints';
-import { cx } from 'linaria';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { SnappyReactGrid } from 'snappy-react-grid';
-import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
-const SnappyReactGridWithId = SnappyReactGrid;
-function WindowGridInner({ id, items, className = '', prevOffset, itemsPerRow = 0, component }) {
-    // Keep pagination in URL in sync with scrolling
-    const { perPage, goToPage, currentPage } = useContext(PaginationContext);
-    const [scrollOffsetPage, setScrollOffsetPage] = useState(null);
-    // Updates the url query, the history and triggers a refetch for products
-    const updateHistory = useCallback(({ firstVisibleIndex }) => {
-        const pageForIndex = Math.floor((firstVisibleIndex + (prevOffset + perPage)) / perPage + 1);
-        setScrollOffsetPage(pageForIndex);
-    }, [perPage, prevOffset]);
-    useEffect(() => {
-        if (scrollOffsetPage && scrollOffsetPage !== currentPage) {
-            goToPage(scrollOffsetPage, { replace: true });
-        }
-    }, [scrollOffsetPage, currentPage, goToPage]);
-    return (React.createElement("div", { "data-testid": "product-grid" },
-        React.createElement(SnappyReactGridWithId, { id: id, className: cx('product-grid', className), columns: itemsPerRow, items: items, component: component, onScroll: updateHistory, defaultVisible: 16 })));
-}
-const WindowGridWrapper = (_a) => {
-    var { itemsPerRow = [2, null, 3, 4] } = _a, props = __rest(_a, ["itemsPerRow"]);
-    const { theme: { breakpoints: themeBreakpoints } } = useShopConfig();
-    if (Array.isArray(itemsPerRow)) {
-        const breakpoints = getBreakpointsFromValues(itemsPerRow, Object.keys(themeBreakpoints));
-        // Walk down each breakpoint until we find a match, starting at the biggest.
-        // This should be rewritten whenever we have support for media queries in hooks.
-        return breakpoints.reduce((acc, cur) => (React.createElement(Above, { breakpoint: cur.breakpoint }, match => {
-            if (match) {
-                return React.createElement(WindowGridInner, Object.assign({ itemsPerRow: cur.value }, props));
-            }
-            else {
-                return acc;
-            }
-        })), 
-        // Fallback to the smallest breakpoint
-        React.createElement(WindowGridInner, Object.assign({ itemsPerRow: breakpoints[0].value }, props)));
-    }
-    return null;
-};
-export const WindowGrid = WindowGridWrapper;
+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 PaginationContext from '@jetshop/core/components/Pagination/PaginationContext';
+import getBreakpointsFromValues from '@jetshop/core/helpers/getBreakpointsFromValues';
+import { Above } from '@jetshop/ui/Breakpoints';
+import { cx } from 'linaria';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { SnappyReactGrid } from 'snappy-react-grid';
+import { useShopConfig } from '@jetshop/core/hooks/useShopConfig';
+const SnappyReactGridWithId = SnappyReactGrid;
+function WindowGridInner({ id, items, className = '', prevOffset, itemsPerRow = 0, component }) {
+    // Keep pagination in URL in sync with scrolling
+    const { perPage, goToPage, currentPage } = useContext(PaginationContext);
+    const [scrollOffsetPage, setScrollOffsetPage] = useState(null);
+    // Updates the url query, the history and triggers a refetch for products
+    const updateHistory = useCallback(({ firstVisibleIndex }) => {
+        const pageForIndex = Math.floor((firstVisibleIndex + (prevOffset + perPage)) / perPage + 1);
+        setScrollOffsetPage(pageForIndex);
+    }, [perPage, prevOffset]);
+    useEffect(() => {
+        if (scrollOffsetPage && scrollOffsetPage !== currentPage) {
+            goToPage(scrollOffsetPage, { replace: true });
+        }
+    }, [scrollOffsetPage, currentPage, goToPage]);
+    return (React.createElement("div", { "data-testid": "product-grid" },
+        React.createElement(SnappyReactGridWithId, { id: id, className: cx('product-grid', className), columns: itemsPerRow, items: items, component: component, onScroll: updateHistory, defaultVisible: 16 })));
+}
+const WindowGridWrapper = (_a) => {
+    var { itemsPerRow = [2, null, 3, 4] } = _a, props = __rest(_a, ["itemsPerRow"]);
+    const { theme: { breakpoints: themeBreakpoints } } = useShopConfig();
+    if (Array.isArray(itemsPerRow)) {
+        const breakpoints = getBreakpointsFromValues(itemsPerRow, Object.keys(themeBreakpoints));
+        // Walk down each breakpoint until we find a match, starting at the biggest.
+        // This should be rewritten whenever we have support for media queries in hooks.
+        return breakpoints.reduce((acc, cur) => (React.createElement(Above, { breakpoint: cur.breakpoint }, match => {
+            if (match) {
+                return React.createElement(WindowGridInner, Object.assign({ itemsPerRow: cur.value }, props));
+            }
+            else {
+                return acc;
+            }
+        })), 
+        // Fallback to the smallest breakpoint
+        React.createElement(WindowGridInner, Object.assign({ itemsPerRow: breakpoints[0].value }, props)));
+    }
+    return null;
+};
+export const WindowGrid = WindowGridWrapper;
 //# sourceMappingURL=WindowGrid.js.map

package/WindowGrid/index.d.ts

@@ -1 +1 @@
-export { WindowGrid } from './WindowGrid';
+export { WindowGrid } from './WindowGrid';

package/WindowGrid/index.js

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

package/WindowGrid/useResizeObserver.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-declare function useResizeObserverServer<T>(): {
-    width: number;
-    height: number;
-    ref: import("react").MutableRefObject<T>;
-};
-declare const _default: typeof useResizeObserverServer;
-export default _default;
+/// <reference types="react" />
+declare function useResizeObserverServer<T>(): {
+    width: number;
+    height: number;
+    ref: import("react").MutableRefObject<T>;
+};
+declare const _default: typeof useResizeObserverServer;
+export default _default;

package/WindowGrid/useResizeObserver.js

@@ -1,14 +1,14 @@
-import useResizeObserverClient from 'use-resize-observer';
-import { useRef } from 'react';
-function useResizeObserverServer() {
-    const ref = useRef();
-    return {
-        width: 0,
-        height: 0,
-        ref
-    };
-}
-export default __IN_SERVER__
-    ? useResizeObserverServer
-    : useResizeObserverClient;
+import useResizeObserverClient from 'use-resize-observer';
+import { useRef } from 'react';
+function useResizeObserverServer() {
+    const ref = useRef();
+    return {
+        width: 0,
+        height: 0,
+        ref
+    };
+}
+export default __IN_SERVER__
+    ? useResizeObserverServer
+    : useResizeObserverClient;
 //# sourceMappingURL=useResizeObserver.js.map

package/WindowGrid/useScrollWithWindow.d.ts

@@ -1,12 +1,12 @@
-import { RefObject } from 'react';
-import { FixedSizeList } from 'react-window';
-interface ScrollWithWindow {
-    container: RefObject<HTMLElement>;
-    width: number;
-    height: number;
-}
-declare function useScrollWithWindowServer(_props: ScrollWithWindow): {
-    ref: import("react").MutableRefObject<FixedSizeList>;
-};
-declare const _default: typeof useScrollWithWindowServer;
-export default _default;
+import { RefObject } from 'react';
+import { FixedSizeList } from 'react-window';
+interface ScrollWithWindow {
+    container: RefObject<HTMLElement>;
+    width: number;
+    height: number;
+}
+declare function useScrollWithWindowServer(_props: ScrollWithWindow): {
+    ref: import("react").MutableRefObject<FixedSizeList>;
+};
+declare const _default: typeof useScrollWithWindowServer;
+export default _default;

package/WindowGrid/useScrollWithWindow.js

@@ -1,39 +1,39 @@
-import { useRef, useState, useCallback, useLayoutEffect } from 'react';
-function useScrollWithWindow({ container, width, height }) {
-    const [offset, setOffset] = useState(0);
-    const ref = useRef();
-    // Calculate offset from top of the page to the start of WindowGrid whenever
-    // the container size is changed
-    useLayoutEffect(() => {
-        if (container.current) {
-            const viewportTop = container.current.getBoundingClientRect().top;
-            const scrollTop = 'scrollY' in window
-                ? window.scrollY
-                : document.documentElement.scrollTop;
-            const top = scrollTop + viewportTop;
-            setOffset(top);
-        }
-    }, [container, width, height]);
-    // Sync scrolling between window and react-window list
-    const handleScroll = useCallback(() => {
-        if (ref.current) {
-            const scroll = 'scrollY' in window
-                ? window.scrollY
-                : document.documentElement.scrollTop;
-            ref.current.scrollTo(scroll - offset);
-        }
-    }, [ref, offset]);
-    useLayoutEffect(() => {
-        window.addEventListener('scroll', handleScroll);
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, [handleScroll]);
-    return {
-        ref
-    };
-}
-function useScrollWithWindowServer(_props) {
-    const ref = useRef();
-    return { ref };
-}
-export default __IN_SERVER__ ? useScrollWithWindowServer : useScrollWithWindow;
+import { useRef, useState, useCallback, useLayoutEffect } from 'react';
+function useScrollWithWindow({ container, width, height }) {
+    const [offset, setOffset] = useState(0);
+    const ref = useRef();
+    // Calculate offset from top of the page to the start of WindowGrid whenever
+    // the container size is changed
+    useLayoutEffect(() => {
+        if (container.current) {
+            const viewportTop = container.current.getBoundingClientRect().top;
+            const scrollTop = 'scrollY' in window
+                ? window.scrollY
+                : document.documentElement.scrollTop;
+            const top = scrollTop + viewportTop;
+            setOffset(top);
+        }
+    }, [container, width, height]);
+    // Sync scrolling between window and react-window list
+    const handleScroll = useCallback(() => {
+        if (ref.current) {
+            const scroll = 'scrollY' in window
+                ? window.scrollY
+                : document.documentElement.scrollTop;
+            ref.current.scrollTo(scroll - offset);
+        }
+    }, [ref, offset]);
+    useLayoutEffect(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
+    return {
+        ref
+    };
+}
+function useScrollWithWindowServer(_props) {
+    const ref = useRef();
+    return { ref };
+}
+export default __IN_SERVER__ ? useScrollWithWindowServer : useScrollWithWindow;
 //# sourceMappingURL=useScrollWithWindow.js.map

package/dependencies.d.ts

@@ -1,98 +1,98 @@
-declare module '@jetshop/intl';
-declare module '@jetshop/intl/context';
-declare module '@jetshop/intl/config';
-declare module '@jetshop/react-scripts/config/paths';
-declare module 'universal-cookie-express';
-declare module 'react-dev-utils/checkRequiredFiles';
-declare module 'store-css';
-declare module 'dnscache';
-declare module 'object-fit-images';
-declare module 'isbot' {
-  export default function (userAgent: string): boolean;
-}
-
-declare module 'use-resize-observer' {
-  import { RefObject } from 'react';
-  interface UseResizeObserverValue<T> {
-    width: number;
-    height: number;
-    ref: RefObject<T>;
-  }
-  export default function <T>(): UseResizeObserverValue<T>;
-}
-
-declare module '*.gql' {
-  import { DocumentNode } from 'graphql';
-  const value: DocumentNode;
-  export default value;
-  export const addToCart: DocumentNode;
-  export const removeFromCart: DocumentNode;
-  export const decrementItemQuantity: DocumentNode;
-  export const incrementItemQuantity: DocumentNode;
-  export const setItemQuantity: DocumentNode;
-  export const setCartId: DocumentNode;
-  export const login: DocumentNode;
-  export const resetPassword: DocumentNode;
-}
-
-declare module '*.svg' {
-  import React = require('react');
-
-  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-
-  const src: string;
-  export default src;
-}
-declare module '*.json' {
-  const value: any;
-  export default value;
-}
-
-declare module '*.bmp' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.gif' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.jpeg' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.png' {
-  const src: string;
-  export default src;
-}
-
-declare module '*.svg' {
-  import React = require('react');
-
-  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-
-  const src: string;
-  export default src;
-}
-
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-declare module '*.module.sass' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
+declare module '@jetshop/intl';
+declare module '@jetshop/intl/context';
+declare module '@jetshop/intl/config';
+declare module '@jetshop/react-scripts/config/paths';
+declare module 'universal-cookie-express';
+declare module 'react-dev-utils/checkRequiredFiles';
+declare module 'store-css';
+declare module 'dnscache';
+declare module 'object-fit-images';
+declare module 'isbot' {
+  export default function (userAgent: string): boolean;
+}
+
+declare module 'use-resize-observer' {
+  import { RefObject } from 'react';
+  interface UseResizeObserverValue<T> {
+    width: number;
+    height: number;
+    ref: RefObject<T>;
+  }
+  export default function <T>(): UseResizeObserverValue<T>;
+}
+
+declare module '*.gql' {
+  import { DocumentNode } from 'graphql';
+  const value: DocumentNode;
+  export default value;
+  export const addToCart: DocumentNode;
+  export const removeFromCart: DocumentNode;
+  export const decrementItemQuantity: DocumentNode;
+  export const incrementItemQuantity: DocumentNode;
+  export const setItemQuantity: DocumentNode;
+  export const setCartId: DocumentNode;
+  export const login: DocumentNode;
+  export const resetPassword: DocumentNode;
+}
+
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+
+  const src: string;
+  export default src;
+}
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/fuzzySearch/fuzzySearch.d.ts

@@ -1,8 +1,8 @@
-export interface FuzzySearchProps<T> {
-    data: T[];
-    keys: string[];
-    searchTerm: string;
-    rest: any;
-}
-declare const fuzzySearch: <T>({ data, keys, searchTerm, ...rest }: FuzzySearchProps<T>) => T[];
-export { fuzzySearch };
+export interface FuzzySearchProps<T> {
+    data: T[];
+    keys: string[];
+    searchTerm: string;
+    rest: any;
+}
+declare const fuzzySearch: <T>({ data, keys, searchTerm, ...rest }: FuzzySearchProps<T>) => T[];
+export { fuzzySearch };

package/fuzzySearch/fuzzySearch.js

@@ -1,43 +1,43 @@
-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 Fuse from 'fuse.js';
-const highlight = (text, indices) => {
-    if (!indices)
-        return text;
-    var content = '', nextUnhighlightedRegionStartingIndex = 0;
-    indices.forEach(function (region) {
-        content +=
-            '' +
-                text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
-                '<span class="highlight">' +
-                text.substring(region[0], region[1] + 1) +
-                '</span>' +
-                '';
-        nextUnhighlightedRegionStartingIndex = region[1] + 1;
-    });
-    content += text.substring(nextUnhighlightedRegionStartingIndex);
-    return content;
-};
-const highlightResults = (results) => {
-    return results.map((result) => (Object.assign(Object.assign({}, result.item), result.matches.reduce((acc, match) => (Object.assign(Object.assign({}, acc), { [match.key]: highlight(match.value, match.indices) })), {}))));
-};
-const fuzzySearch = (_a) => {
-    var { data, keys, searchTerm } = _a, rest = __rest(_a, ["data", "keys", "searchTerm"]);
-    const fuse = new Fuse(data, Object.assign(Object.assign({ shouldSort: true, matchAllTokens: true, tokenize: true, threshold: 0.26, location: 0, distance: 255, maxPatternLength: 32, minMatchCharLength: 3, keys }, rest), { 
-        // This needs to be enabled
-        includeMatches: true }));
-    const results = fuse.search(searchTerm);
-    const highlightedResults = highlightResults(results);
-    return highlightedResults;
-};
-export { fuzzySearch };
+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 Fuse from 'fuse.js';
+const highlight = (text, indices) => {
+    if (!indices)
+        return text;
+    var content = '', nextUnhighlightedRegionStartingIndex = 0;
+    indices.forEach(function (region) {
+        content +=
+            '' +
+                text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
+                '<span class="highlight">' +
+                text.substring(region[0], region[1] + 1) +
+                '</span>' +
+                '';
+        nextUnhighlightedRegionStartingIndex = region[1] + 1;
+    });
+    content += text.substring(nextUnhighlightedRegionStartingIndex);
+    return content;
+};
+const highlightResults = (results) => {
+    return results.map((result) => (Object.assign(Object.assign({}, result.item), result.matches.reduce((acc, match) => (Object.assign(Object.assign({}, acc), { [match.key]: highlight(match.value, match.indices) })), {}))));
+};
+const fuzzySearch = (_a) => {
+    var { data, keys, searchTerm } = _a, rest = __rest(_a, ["data", "keys", "searchTerm"]);
+    const fuse = new Fuse(data, Object.assign(Object.assign({ shouldSort: true, matchAllTokens: true, tokenize: true, threshold: 0.26, location: 0, distance: 255, maxPatternLength: 32, minMatchCharLength: 3, keys }, rest), { 
+        // This needs to be enabled
+        includeMatches: true }));
+    const results = fuse.search(searchTerm);
+    const highlightedResults = highlightResults(results);
+    return highlightedResults;
+};
+export { fuzzySearch };
 //# sourceMappingURL=fuzzySearch.js.map

package/fuzzySearch/index.d.ts

@@ -1 +1 @@
-export { fuzzySearch } from './fuzzySearch';
+export { fuzzySearch } from './fuzzySearch';

package/fuzzySearch/index.js

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

package/global.d.ts

@@ -1 +1 @@
-import '@jetshop/core/global';
+import '@jetshop/core/global';

package/hooks/index.d.ts

@@ -1,2 +1,2 @@
-export * from './useOnEsc';
-export * from './useOnClickOutside';
+export * from './useOnEsc';
+export * from './useOnClickOutside';

package/hooks/index.js

@@ -1,3 +1,3 @@
-export * from './useOnEsc';
-export * from './useOnClickOutside';
+export * from './useOnEsc';
+export * from './useOnClickOutside';
 //# sourceMappingURL=index.js.map

package/hooks/useOnClickOutside.d.ts

@@ -1,6 +1,6 @@
-import { RefObject } from 'react';
-export declare function useOnClickOutside({ condition, ref, action }: {
-    condition?: boolean;
-    ref: RefObject<any>;
-    action: () => void;
-}): void;
+import { RefObject } from 'react';
+export declare function useOnClickOutside({ condition, ref, action }: {
+    condition?: boolean;
+    ref: RefObject<any>;
+    action: () => void;
+}): void;