@jetshop/ui 5.7.0

package/ProductList/GridProduct.d.ts

@@ -0,0 +1,24 @@
+import { Product, Route } from '@jetshop/core/types';
+import React from 'react';
+export declare const ProductWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const ProductBlockLink: import("linaria/lib/StyledMeta").StyledMeta & React.FC<import("../ProductLink").ProductLinkProps>;
+export declare const ProductDetails: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const Name: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & {
+    as?: React.ElementType<any>;
+}>;
+export interface GridProductProps {
+    product: Product;
+    categoryPath?: Route;
+    loading?: boolean;
+    imageAspect?: string;
+    className?: string;
+    search?: string;
+    hash?: string;
+    listName?: string;
+}
+declare const GridProduct: React.SFC<GridProductProps>;
+export default GridProduct;

package/ProductList/GridProduct.js

@@ -0,0 +1,59 @@
+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 Image from '@jetshop/ui/Image/Image';
+import { Price } from '@jetshop/ui/Price';
+import ProductLink from '@jetshop/ui/ProductLink';
+import React from 'react';
+import { styled } from 'linaria/react';
+import Badges from './Badges';
+export const ProductWrapper = styled('div') `
+  width: 50%;
+
+  @media (--above-md) {
+    width: 33.333%;
+  }
+  @media (--above-lg) {
+    width: 20%;
+  }
+`;
+export const ProductBlockLink = styled(ProductLink) `
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  margin-right: 1em;
+  margin-left: 1em;
+  margin-bottom: 36px;
+  border: 1px solid #ededed;
+  background-color: white;
+`;
+export const ProductDetails = styled('div') `
+  background-color: white;
+  padding: 8px;
+  max-width: 100%;
+  max-height: 100%;
+`;
+export const Name = styled('p') `
+  font-weight: 600;
+`;
+const GridProduct = (_a) => {
+    var { product, categoryPath, loading, imageAspect = '1:1', className = '', search, hash, listName } = _a, rest = __rest(_a, ["product", "categoryPath", "loading", "imageAspect", "className", "search", "hash", "listName"]);
+    return (React.createElement(ProductWrapper, Object.assign({ "data-testid": "product", className: className }, rest),
+        React.createElement(ProductBlockLink, { list: listName, search: search, hash: hash, product: product, categoryPath: categoryPath, style: { opacity: loading ? 0.5 : 1 } },
+            product.images.length > 0 && (React.createElement(Image, { sizes: [1 / 4, 1 / 3, 1 / 2, 1 / 2], aspect: imageAspect, alt: product.images[0].alt, src: product.images[0].url },
+                React.createElement(Badges, { badges: product.badges }))),
+            React.createElement(ProductDetails, null,
+                React.createElement(Name, null, product.name),
+                React.createElement("p", { className: "sub-name" }, product.subName),
+                React.createElement(Price, { price: product.price, previousPrice: product.previousPrice })))));
+};
+export default GridProduct;
+//# sourceMappingURL=GridProduct.js.map

package/ProductList/GridProduct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridProduct.js","sourceRoot":"","sources":["GridProduct.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;CAS1C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;;;;;;CASlD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;CAK1C,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE9B,CAAC;AAeF,MAAM,WAAW,GAAgC,CAAC,EAUjD,EAAE,EAAE;QAV6C,EAChD,OAAO,EACP,YAAY,EACZ,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,EACJ,QAAQ,OAET,EADI,IAAI,cATyC,gGAUjD,CADQ;IACH,OAAA,CACJ,oBAAC,cAAc,iCAAa,SAAS,EAAC,SAAS,EAAE,SAAS,IAAM,IAAI;QAClE,oBAAC,gBAAgB,IACf,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;YAEpC,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,oBAAC,KAAK,IACJ,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EACnC,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,EAC1B,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG;gBAE1B,oBAAC,MAAM,IAAC,MAAM,EAAE,OAAO,CAAC,MAAM,GAAI,CAC5B,CACT;YAED,oBAAC,cAAc;gBACb,oBAAC,IAAI,QAAE,OAAO,CAAC,IAAI,CAAQ;gBAC3B,2BAAG,SAAS,EAAC,UAAU,IAAE,OAAO,CAAC,OAAO,CAAK;gBAC7C,oBAAC,KAAK,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,GAAI,CACtD,CACA,CACJ,CAClB,CAAA;CAAA,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/ProductList/ProductGrid.d.ts

@@ -0,0 +1,15 @@
+import { Product, Route } from '@jetshop/core/types';
+import { GridProductProps } from '@jetshop/ui/ProductList/GridProduct';
+import React from 'react';
+export interface ProductGridProps {
+    className: string;
+    products: Product[];
+    loading: boolean;
+    listName: string;
+    categoryPath: Route | null;
+    ProductComponent: React.SFC<GridProductProps>;
+    search?: string;
+    hash?: string;
+}
+declare const ProductGrid: React.SFC<ProductGridProps>;
+export default ProductGrid;

package/ProductList/ProductGrid.js

@@ -0,0 +1,29 @@
+import Analytics from '@jetshop/core/analytics/Analytics';
+import { trackListEvent } from '@jetshop/core/analytics/tracking';
+import GridProduct from '@jetshop/ui/ProductList/GridProduct';
+import React, { Fragment } from 'react';
+import { styled } from 'linaria/react';
+const ProductGridContainer = styled('div') `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+`;
+const productPlaceholder = {
+    name: '',
+    id: 'placeholder',
+    images: []
+};
+const ProductGrid = ({ className = '', products, loading, listName, categoryPath = null, search, hash, ProductComponent = GridProduct }) => {
+    const productList = products.length === 0 && loading
+        ? Array(4).fill(productPlaceholder)
+        : products;
+    return (React.createElement(ProductGridContainer, { "data-testid": "product-grid", className: className }, products && (React.createElement(Fragment, null,
+        !loading ? (React.createElement(Analytics, { event: trackListEvent({
+                listName,
+                products: products
+            }) })) : null,
+        productList.map((product, index) => (React.createElement(ProductComponent, { listName: listName, search: search, hash: hash, loading: loading, key: `${index}${product.id}`, product: product, categoryPath: categoryPath })))))));
+};
+export default ProductGrid;
+//# sourceMappingURL=ProductGrid.js.map

package/ProductList/ProductGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGrid.js","sourceRoot":"","sources":["ProductGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,OAAO,WAEN,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,aAAa;IACjB,MAAM,EAAE,EAAc;CACvB,CAAC;AAaF,MAAM,WAAW,GAAgC,CAAC,EAChD,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,MAAM,EACN,IAAI,EACJ,gBAAgB,GAAG,WAAW,EAC/B,EAAE,EAAE;IACH,MAAM,WAAW,GACf,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,OAAO;QAC9B,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;QACnC,CAAC,CAAC,QAAQ,CAAC;IACf,OAAO,CACL,oBAAC,oBAAoB,mBAAa,cAAc,EAAC,SAAS,EAAE,SAAS,IAClE,QAAQ,IAAI,CACX,oBAAC,QAAQ;QACN,CAAC,OAAO,CAAC,CAAC,CAAC,CACV,oBAAC,SAAS,IACR,KAAK,EAAE,cAAc,CAAC;gBACpB,QAAQ;gBACR,QAAQ,EAAE,QAAQ;aACnB,CAAC,GACF,CACH,CAAC,CAAC,CAAC,IAAI;QACP,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACnC,oBAAC,gBAAgB,IACf,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,KAAK,GAAG,OAAO,CAAC,EAAE,EAAE,EAC5B,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CACO,CACZ,CACoB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/ProductList/ProductImage.d.ts

@@ -0,0 +1,12 @@
+import { ProductBadge, ProductImage } from '@jetshop/core/types';
+import React from 'react';
+import { ImageBreakpointSizes } from '../Image/Image';
+export interface ProductImageProps {
+    image: ProductImage;
+    badges?: ProductBadge[];
+    sizes?: ImageBreakpointSizes;
+    aspect?: string;
+    loadEagerly?: boolean;
+}
+declare const ProdImage: React.SFC<ProductImageProps>;
+export default ProdImage;

package/ProductList/ProductImage.js

@@ -0,0 +1,22 @@
+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 Image from '../Image/Image';
+import Badges from './Badges';
+const ProdImage = (_a) => {
+    var { image, sizes = [1 / 4, 1 / 3, 1 / 2, 1 / 2], badges, aspect = '1:1' } = _a, rest = __rest(_a, ["image", "sizes", "badges", "aspect"]);
+    const imageOrSizes = image && (image.url || image.sizes);
+    return (React.createElement(Image, Object.assign({ src: imageOrSizes, sizes: sizes, aspect: aspect, title: image && image.title, alt: image && image.alt }, rest),
+        React.createElement(Badges, { badges: badges })));
+};
+export default ProdImage;
+//# sourceMappingURL=ProductImage.js.map

package/ProductList/ProductImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImage.js","sourceRoot":"","sources":["ProductImage.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAA+B,MAAM,gBAAgB,CAAC;AAC7D,OAAO,MAAM,MAAM,UAAU,CAAC;AAU9B,MAAM,SAAS,GAAiC,CAAC,EAMhD,EAAE,EAAE;QAN4C,EAC/C,KAAK,EACL,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EACpC,MAAM,EACN,MAAM,GAAG,KAAK,OAEf,EADI,IAAI,cALwC,sCAMhD,CADQ;IAEP,MAAM,YAAY,GAChB,KAAK,IAAK,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,CAAiC,CAAC;IACvE,OAAO,CACL,oBAAC,KAAK,kBACJ,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK,EAC3B,GAAG,EAAE,KAAK,IAAI,KAAK,CAAC,GAAG,IACnB,IAAI;QAER,oBAAC,MAAM,IAAC,MAAM,EAAE,MAAM,GAAI,CACpB,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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;
+}) => 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 }) => (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)))))));
+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,CAAC,CACJ;IACE,gCAAK,KAAK,CAAM;IAChB;QACE,gCACG,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACrB,4BAAI,GAAG,EAAE,GAAG,IAAG,GAAG,CAAM,CACzB,CAAC,CACC,CACF,CACF,CACN,CAAC;AAEF,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 declare 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, any>, "ignoreForRouteTypes">, any> & import("react-router").WithRouterStatics<import("react").FC<ScrollRestoreProps & RouteComponentProps<{}, import("react-router").StaticContext, 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,GACL,SAAS,wBAAwB,CAAC,EACzD,QAAQ,EACR,mBAAmB,EACpB;IACC,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/ScrollRestorationHandler.test.js

@@ -0,0 +1,75 @@
+import renderWithRouter from '@jetshop/core/test-utils/renderWithRouter';
+import React from 'react';
+import { Link, Route, Switch } from 'react-router-dom';
+import ScrollRestorationHandler from './ScrollRestorationHandler';
+import { fireEvent } from '@testing-library/react';
+
+describe('ScrollRestorationHandler', () => {
+  test(`scrolls to top when the route changes`, () => {
+    const { getByText } = setup();
+    const category1 = getByText('Category one');
+    const about = getByText('About');
+
+    expect(global.scrollTo).toHaveBeenCalledWith(0, 0);
+    expect(global.scrollTo).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(category1);
+
+    expect(global.scrollTo).toHaveBeenCalledTimes(2);
+
+    fireEvent.click(about);
+
+    expect(global.scrollTo).toHaveBeenCalledTimes(3);
+  });
+
+  test(`does not scroll to top when routing to an ignored route type`, () => {
+    const { getByText } = setup({ ignoredTypes: ['Category'] });
+    const category1 = getByText('Category one');
+    const about = getByText('About');
+
+    expect(global.scrollTo).toHaveBeenCalledWith(0, 0);
+    expect(global.scrollTo).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(category1);
+
+    expect(global.scrollTo).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(about);
+
+    expect(global.scrollTo).toHaveBeenCalledTimes(2);
+  });
+});
+
+function setup({ ignoredTypes = [] } = {}) {
+  global.scrollTo = jest.fn();
+  const utils = renderWithRouter(<TinyApp ignoredTypes={ignoredTypes} />);
+
+  return { ...utils };
+}
+
+function TinyApp({ ignoredTypes }) {
+  return (
+    <div>
+      <Link to="/">Home</Link>
+      <Link to="/about">About</Link>
+      <Link
+        to={{
+          pathname: '/category1',
+          state: {
+            type: 'Category',
+            id: 1
+          }
+        }}
+      >
+        Category one
+      </Link>
+      <Switch>
+        <Route exact path="/" component={() => 'you are home'} />
+        <Route exact path="/about" component={() => 'you are at about'} />
+        <Route path="/category1" component={() => 'you are at category one'} />
+        <Route component={() => 'no match for route'} />
+      </Switch>
+      <ScrollRestorationHandler ignoreForRouteTypes={ignoredTypes} />
+    </div>
+  );
+}

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,6 @@
+import { Location } from 'history';
+import { routeType } from './ScrollRestorationHandler';
+export declare function isInIgnoredRouteTypes({ location, routeTypes }: {
+    location: Location;
+    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,7 @@
+import { Location } from 'history';
+import { routeType } from './ScrollRestorationHandler';
+export declare function useScrollRestore({ location, ignoreForRouteTypes, prevLocation }: {
+    location: Location;
+    prevLocation: Location;
+    ignoreForRouteTypes?: routeType[];
+}): void;

package/ScrollRestorationHandler/useScrollRestore.js

@@ -0,0 +1,15 @@
+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;
+        }
+        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,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/AutocompleteQuery.gql

@@ -0,0 +1,10 @@
+query AutocompleteQuery($term: String!) {
+  searchAutoComplete(term: $term) {
+    products {
+      result {
+        id
+        articleNumber
+      }
+    }
+  }
+}

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, any>, "children" | "onSubmit" | "initialValue" | "onCancel" | "focusOnLoad" | "autocompleteQuery">, any> & import("react-router").WithRouterStatics<(props: SearchFieldProps & RouteComponentProps<{}, import("react-router").StaticContext, any>) => JSX.Element>;
+export default _default;