@jetshop/ui 5.17.0-alpha.f7018eb5 → 5.17.0

package/Search/SearchField.js

@@ -0,0 +1,97 @@
+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 } = _a, rest = __rest(_a, ["initialValue", "className", "placeholder", "autocompleteQuery"]);
+    throwErrorInDev(!autocompleteQuery, `You forgot to pass 'autocompleteQuery' to SearchField`);
+    return (React.createElement(SearchAutoCompleteContainer, Object.assign({ autocompleteQuery: autocompleteQuery, initialValue: initialValue, focusOnLoad: true }, 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;
+            }))))));
+};
+SearchField.Flyout = Flyout;
+SearchField.Wrapper = SearchFieldWrapper;
+SearchField.Cancel = CancelButton;
+export default SearchField;
+//# 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 @@
+/// <reference types="react" />
+export declare const PageOf: ({ page, pages }: {
+    page: number;
+    pages: number;
+}) => 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(): JSX.Element;
+}
+export default SearchMeta;

package/Search/SearchPage/SearchMeta.js

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

package/Search/SearchPage/SearchMeta.js.map

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

package/Search/SearchPage/SearchPageBehaviour.d.ts

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

package/Search/SearchPage/SearchPageBehaviour.js

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

package/Search/SearchPage/SearchPageBehaviour.js.map

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

package/Search/SuggestedTerm.d.ts

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

package/Search/SuggestedTerm.js

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

package/Search/SuggestedTerm.js.map

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

package/Search/index.d.ts

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

package/Search/index.js

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

package/Search/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/Select/Components.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export declare const SelectContainer: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const ListItem: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const SelectableListItem: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const ListTitle: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const SelectItem: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const SelectItemWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & {
+    as?: React.ElementType<any>;
+}>;
+export interface DropdownWrapperProps {
+    isOpen: boolean;
+}
+export declare const Wrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const DropdownWrapper: React.SFC<DropdownWrapperProps>;
+export declare const StyledCarrot: import("linaria/lib/StyledMeta").StyledMeta & React.SFC<React.SVGProps<SVGSVGElement>>;
+export declare const StyledCheck: import("linaria/lib/StyledMeta").StyledMeta & React.SFC<React.SVGProps<SVGSVGElement>>;

package/Select/Components.js

@@ -0,0 +1,91 @@
+import { styled } from 'linaria/react';
+import React from 'react';
+import { ReactComponent as Carrot } from '../svg/Carrot.svg';
+import { ReactComponent as Check } from '../svg/Check.svg';
+export const SelectContainer = styled('div') `
+  width: 100%;
+  position: relative;
+  background-color: #ffffff;
+  margin-bottom: 16px;
+`;
+export const ListItem = styled('button') `
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  background-color: #ffffff;
+  border: 1px solid #dedede;
+  position: relative;
+  cursor: pointer;
+  &.disabled {
+    color: #c2c2c2;
+    cursor: not-allowed;
+    :hover {
+      background-color: #ffffff;
+    }
+  }
+`;
+export const SelectableListItem = styled(ListItem) `
+  cursor: pointer;
+  border-width: 1px 0 0 0;
+  :last-of-type {
+    border-bottom: none;
+  }
+  :hover {
+    background-color: #f2f2f2;
+  }
+  &.selected,
+  &.highlighted {
+    background-color: #f2f2f2;
+  }
+  &.disabled {
+    color: #c2c2c2;
+    cursor: not-allowed;
+    :hover {
+      background-color: #ffffff;
+    }
+  }
+`;
+export const ListTitle = styled('h4') ``;
+export const SelectItem = styled('span') `
+  display: block;
+`;
+export const SelectItemWrapper = styled('span') `
+  display: flex;
+  flex-direction: row;
+`;
+// TODO: animate height to auto
+export const Wrapper = styled('div') `
+  position: absolute;
+  height: 0px;
+  z-index: 40;
+  width: 100%;
+  overflow: hidden;
+  &.open {
+    height: auto;
+  }
+`;
+const InnerWrapper = styled('div') `
+  border: 1px solid #dedede;
+  border-top: 0;
+  overflow-y: auto;
+  max-height: 470px;
+  @media (--below.sm) {
+    max-height: 100vh;
+  }
+  > button:first-child {
+    border-top: 0;
+  }
+`;
+export const DropdownWrapper = ({ isOpen, children }) => (React.createElement(Wrapper, { className: isOpen ? 'open' : 'closed' },
+    React.createElement(InnerWrapper, null, children)));
+export const StyledCarrot = styled(Carrot) `
+  transition: transform 200ms;
+  &.open {
+    transform: rotate(-180deg);
+  }
+`;
+export const StyledCheck = styled(Check) ``;
+//# sourceMappingURL=Components.js.map

package/Select/Components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Components.js","sourceRoot":"","sources":["Components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;CAK3C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;;;;;;;;;;;;;;CAkBvC,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;CAoBjD,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AACxC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;CAEvC,CAAC;AACF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAG9C,CAAC;AAMF,+BAA+B;AAC/B,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;CASnC,CAAC;AACF,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;;CAWjC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC,CAAC,EAC/D,MAAM,EACN,QAAQ,EACT,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;IAC5C,oBAAC,YAAY,QAAE,QAAQ,CAAgB,CAC/B,CACX,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;CAKzC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,EAAE,CAAC"}

package/Select/SelectComponents/Quantity.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Quantity: import("linaria/lib/StyledMeta").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+    as?: import("react").ElementType<any>;
+}>;
+export default Quantity;

package/Select/SelectComponents/Quantity.js

@@ -0,0 +1,8 @@
+import { styled } from 'linaria/react';
+const Quantity = styled('p') `
+  font-size: 1em;
+  margin-left: 4px;
+  color: #878787;
+`;
+export default Quantity;
+//# sourceMappingURL=Quantity.js.map

package/Select/SelectComponents/Quantity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Quantity.js","sourceRoot":"","sources":["Quantity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI3B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/Select/index.d.ts

@@ -0,0 +1,5 @@
+export interface SelectableItemProps {
+    selected?: boolean;
+    disabled?: boolean;
+    isHighlighted?: boolean;
+}

package/Select/index.js

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

package/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":""}

package/SortOrder/SortOrder.d.ts

@@ -0,0 +1,16 @@
+import { ISortOrderContext } from '@jetshop/core/components/SortOrder/SortOrderContext';
+import { ProductSortOrder } from '@jetshop/core/types';
+import * as React from 'react';
+export interface MappedSortOrder {
+    direction: 'ASCENDING' | 'DESCENDING';
+    value: string;
+    text: string;
+}
+export interface SortOrderProps {
+    sortOrders: ProductSortOrder[];
+    children(sortOrderContext: ISortOrderContext & {
+        mappedSortOrder: MappedSortOrder[];
+    }): React.ReactNode;
+}
+declare const _default: React.ComponentClass<SortOrderProps, any>;
+export default _default;

package/SortOrder/SortOrder.js

@@ -0,0 +1,32 @@
+import { sortTypes, sortValues } from '@jetshop/core/components/SortOrder/SortOrderContainer';
+import SortOrderContext from '@jetshop/core/components/SortOrder/SortOrderContext';
+import ErrorBoundary from '@jetshop/ui/ErrorBoundary/Generic';
+import PassThrough from '@jetshop/ui/ErrorBoundary/PassThrough';
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+class SortOrder extends React.PureComponent {
+    render() {
+        // Mutate sort order obj to include asc/desc & appropriate text
+        // eg { text: 'Price low to high', direction: 'ASCENDING' }
+        const mappedSortOrder = this.props.sortOrders.reduce((sorts, curr) => {
+            const mutatedSorts = sortValues[sortTypes[curr.value]].map(type => {
+                return Object.assign(Object.assign({}, curr), { text: (React.createElement("div", null,
+                        curr['text'],
+                        " ",
+                        type.text)), direction: type.direction });
+            });
+            return [...sorts, ...mutatedSorts];
+        }, []);
+        return (React.createElement(ErrorBoundary, { component: PassThrough },
+            React.createElement(SortOrderContext.Consumer, null, ({ changeSortOrder, direction, sortOrder }) => {
+                return this.props.children({
+                    changeSortOrder,
+                    direction,
+                    sortOrder,
+                    mappedSortOrder
+                });
+            })));
+    }
+}
+export default withRouter(SortOrder);
+//# sourceMappingURL=SortOrder.js.map

package/SortOrder/SortOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortOrder.js","sourceRoot":"","sources":["SortOrder.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACX,MAAM,uDAAuD,CAAC;AAC/D,OAAO,gBAEN,MAAM,qDAAqD,CAAC;AAE7D,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAuB,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAiBnE,MAAM,SAAU,SAAQ,KAAK,CAAC,aAG7B;IACQ,MAAM;QACX,+DAA+D;QAC/D,2DAA2D;QAC3D,MAAM,eAAe,GAAsB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CACrE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;YACd,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAChE,uCACK,IAAI,KACP,IAAI,EAAE,CACJ;wBACG,IAAI,CAAC,MAAM,CAAC;;wBAAG,IAAI,CAAC,IAAI,CACrB,CACP,EACD,SAAS,EAAE,IAAI,CAAC,SAAS,IACzB;YACJ,CAAC,CAAC,CAAC;YACH,OAAO,CAAC,GAAG,KAAK,EAAE,GAAG,YAAY,CAAC,CAAC;QACrC,CAAC,EACD,EAAE,CACH,CAAC;QAEF,OAAO,CACL,oBAAC,aAAa,IAAC,SAAS,EAAE,WAAW;YACnC,oBAAC,gBAAgB,CAAC,QAAQ,QACvB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC7C,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;oBACzB,eAAe;oBACf,SAAS;oBACT,SAAS;oBACT,eAAe;iBAChB,CAAC,CAAC;YACL,CAAC,CACyB,CACd,CACjB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,UAAU,CAAC,SAAS,CAAmC,CAAC"}

package/SortOrder/SortOrderDropdown.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ProductSortOrder } from '@jetshop/core/types';
+export interface SortOrderDropdownProps {
+    sortOrders: ProductSortOrder[];
+}
+declare function SortOrderDropdown({ sortOrders }: {
+    sortOrders: ProductSortOrder[];
+}): JSX.Element;
+export default SortOrderDropdown;

package/SortOrder/SortOrderDropdown.js

@@ -0,0 +1,25 @@
+import t from '@jetshop/intl';
+import { DropdownMenu, DropdownMenuButton, DropdownMenuItem, DropdownMenuItems } from '@jetshop/ui/DropdownMenu';
+import { StyledCheck } from '@jetshop/ui/Select/Components';
+import SortOrder from '@jetshop/ui/SortOrder/SortOrder';
+import * as React from 'react';
+import logWarningInDev from '../../core/helpers/logWarningInDev';
+// TODO: replace this with a useSortOrder hook (as per useListFilter etc)
+function SortOrderDropdown({ sortOrders }) {
+    logWarningInDev(true, 'This implementation will be removed in flight 6.0. See the example in trend on how to migrate.');
+    return (React.createElement(SortOrder, { sortOrders: sortOrders }, props => (React.createElement(SortMenu, { changeSortOrder: props.changeSortOrder, direction: props.direction, sortOrder: props.sortOrder, mappedSortOrder: props.mappedSortOrder }))));
+}
+// TODO: Move this to the shop
+function SortMenu(props) {
+    const { mappedSortOrder, changeSortOrder, sortOrder, direction } = props;
+    const activeItem = mappedSortOrder.find(item => item.direction === direction && item.value === sortOrder);
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(DropdownMenuButton, null, activeItem ? activeItem.text : t('Sort By')),
+        React.createElement(DropdownMenuItems, null, mappedSortOrder.map(sortItem => {
+            return (React.createElement(DropdownMenuItem, { onSelect: () => changeSortOrder(sortItem.value, sortItem.direction), key: sortItem.value },
+                sortItem.text,
+                activeItem === sortItem && React.createElement(StyledCheck, null)));
+        }))));
+}
+export default SortOrderDropdown;
+//# sourceMappingURL=SortOrderDropdown.js.map

package/SortOrder/SortOrderDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortOrderDropdown.js","sourceRoot":"","sources":["SortOrderDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,CAAC,MAAM,eAAe,CAAC;AAC9B,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,SAA8B,MAAM,iCAAiC,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,eAAe,MAAM,oCAAoC,CAAC;AAMjE,yEAAyE;AACzE,SAAS,iBAAiB,CAAC,EAAE,UAAU,EAAsC;IAC3E,eAAe,CACb,IAAI,EACJ,gGAAgG,CACjG,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,UAAU,IAC9B,KAAK,CAAC,EAAE,CAAC,CACR,oBAAC,QAAQ,IACP,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,eAAe,EAAE,KAAK,CAAC,eAAe,GACtC,CACH,CACS,CACb,CAAC;AACJ,CAAC;AAED,8BAA8B;AAC9B,SAAS,QAAQ,CACf,KAAiE;IAEjE,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,MAAM,UAAU,GAAG,eAAe,CAAC,IAAI,CACrC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,CACjE,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY;QACX,oBAAC,kBAAkB,QAChB,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACzB;QACrB,oBAAC,iBAAiB,QACf,eAAe,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YAC9B,OAAO,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,GAAG,EAAE,CACb,eAAe,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,EAErD,GAAG,EAAE,QAAQ,CAAC,KAAK;gBAElB,QAAQ,CAAC,IAAI;gBACb,UAAU,KAAK,QAAQ,IAAI,oBAAC,WAAW,OAAG,CAC1B,CACpB,CAAC;QACJ,CAAC,CAAC,CACgB,CACP,CAChB,CAAC;AACJ,CAAC;AAED,eAAe,iBAAiB,CAAC"}

package/SortOrder/SortOrderList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ProductSortOrder } from '@jetshop/core/types';
+export interface SortOrderListProps {
+    sortOrders: ProductSortOrder[];
+}
+declare const SortOrderList: React.SFC<SortOrderListProps>;
+export default SortOrderList;

package/SortOrder/SortOrderList.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { styled } from 'linaria/react';
+import SortOrder from './SortOrder';
+import { ListItem } from '@jetshop/ui/Select/Components';
+import { ReactComponent as Check } from '@jetshop/ui/svg/Check.svg';
+const StyledListItem = styled(ListItem) `
+  padding: 0 1rem;
+`;
+const SortOrderList = ({ sortOrders }) => {
+    return (React.createElement(SortOrder, { sortOrders: sortOrders }, ({ changeSortOrder, direction, sortOrder, mappedSortOrder }) => mappedSortOrder.map(order => (React.createElement(StyledListItem, { type: "button", key: `${order.value}-${order.direction}`, onClick: () => {
+            changeSortOrder(order.value, order.direction);
+        } },
+        order.text,
+        direction === order.direction && sortOrder === order.value && (React.createElement(Check, null)))))));
+};
+export default SortOrderList;
+//# sourceMappingURL=SortOrderList.js.map

package/SortOrder/SortOrderList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortOrderList.js","sourceRoot":"","sources":["SortOrderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,cAAc,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAMpE,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;CAEtC,CAAC;AAEF,MAAM,aAAa,GAAkC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IACtE,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,UAAU,IAC9B,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,CAC9D,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC3B,oBAAC,cAAc,IACb,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,EAAE,EACxC,OAAO,EAAE,GAAG,EAAE;YACZ,eAAe,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QAChD,CAAC;QAEA,KAAK,CAAC,IAAI;QACV,SAAS,KAAK,KAAK,CAAC,SAAS,IAAI,SAAS,KAAK,KAAK,CAAC,KAAK,IAAI,CAC7D,oBAAC,KAAK,OAAG,CACV,CACc,CAClB,CAAC,CAEM,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}