@jetshop/ui 5.7.0

package/Button/Button.js

@@ -0,0 +1,60 @@
+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 * as React from 'react';
+import { styled } from 'linaria/react';
+export const buttonStyles = `
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  color: white;
+  background-color: grey;
+  border-color: grey;
+  cursor: pointer;
+
+  text-align: center;
+  height: 54px;
+  font-family: 'Source Sans Pro', sans-serif;
+  width: 100%;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const BaseButton = styled('button') `
+  ${buttonStyles};
+  @media (--above-md) {
+    max-width: 300px;
+  }
+`;
+const BaseLink = styled('a') `
+  ${buttonStyles};
+  text-decoration: none;
+  @media (--above.md) {
+    max-width: 300px;
+  }
+
+  :hover {
+    text-decoration: none;
+  }
+`;
+const Button = (_a) => {
+    var { icon, text, children, anchor = false } = _a, rest = __rest(_a, ["icon", "text", "children", "anchor"]);
+    const Comp = anchor ? BaseLink : BaseButton;
+    return (React.createElement(Comp, Object.assign({ type: "button" }, rest),
+        icon ? [React.createElement(icon, { key: 'icon' }), ' '] : '',
+        text,
+        children));
+};
+export default Button;
+//# sourceMappingURL=Button.js.map

package/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;IAC/B,YAAY;;;;CAIf,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;IACxB,YAAY;;;;;;;;;CASf,CAAC;AAaF,MAAM,MAAM,GAA2B,CAAC,EAMvC,EAAE,EAAE;QANmC,EACtC,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,KAAK,OAEf,EADI,IAAI,cAL+B,sCAMvC,CADQ;IAEP,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;IAE5C,OAAO,CACL,oBAAC,IAAI,kBAAC,IAAI,EAAC,QAAQ,IAAK,IAAI;QACzB,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;QAC7D,IAAI;QACJ,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/Button/OutlineButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const OutlineButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("./Button").ButtonProps>;
+/** @component */
+export default OutlineButton;

package/Button/OutlineButton.js

@@ -0,0 +1,10 @@
+import { styled } from 'linaria/react';
+import Button from './Button';
+export const OutlineButton = styled(Button) `
+  background: transparent;
+  color: ${({ inverted }) => (inverted ? '#fff' : '#000')};
+  border: 1px solid ${({ inverted }) => (inverted ? '#fff' : '#000')};
+`;
+/** @component */
+export default OutlineButton;
+//# sourceMappingURL=OutlineButton.js.map

package/Button/OutlineButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineButton.js","sourceRoot":"","sources":["OutlineButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;WAEhC,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;sBACxC,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,iBAAiB;AACjB,eAAe,aAAa,CAAC"}

package/Button/SecondaryButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SecondaryButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("./Button").ButtonProps>;
+export default SecondaryButton;

package/Button/SecondaryButton.js

@@ -0,0 +1,9 @@
+import { styled } from 'linaria/react';
+import Button from './Button';
+export const SecondaryButton = styled(Button) `
+  background: ${({ inverted }) => (inverted ? '#000' : '#fff')};
+  color: ${({ inverted }) => (inverted ? '#fff' : '#000')};
+  border: 1px solid ${({ inverted }) => (inverted ? '#000' : '#fff')};
+`;
+export default SecondaryButton;
+//# sourceMappingURL=SecondaryButton.js.map

package/Button/SecondaryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryButton.js","sourceRoot":"","sources":["SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;gBAC7B,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;WACxD,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;sBACxC,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/Button/TrendButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const TrendButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("./Button").ButtonProps>;
+export default TrendButton;

package/Button/TrendButton.js

@@ -0,0 +1,8 @@
+import { styled } from 'linaria/react';
+import Button from './Button';
+export const TrendButton = styled(Button) `
+  background: ${({ inverted }) => (inverted ? '#fff' : '#000')};
+  color: ${({ inverted }) => (inverted ? '#000' : '#fff')};
+`;
+export default TrendButton;
+//# sourceMappingURL=TrendButton.js.map

package/Button/TrendButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendButton.js","sourceRoot":"","sources":["TrendButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;gBACzB,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;WACxD,CAAC,EAAE,QAAQ,EAAO,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/Button/index.d.ts

@@ -0,0 +1,4 @@
+import SecondaryButton from './SecondaryButton';
+import TrendButton from './TrendButton';
+export { default } from './Button';
+export { SecondaryButton, TrendButton };

package/Button/index.js

@@ -0,0 +1,5 @@
+import SecondaryButton from './SecondaryButton';
+import TrendButton from './TrendButton';
+export { default } from './Button';
+export { SecondaryButton, TrendButton };
+//# sourceMappingURL=index.js.map

package/Button/index.js.map

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

package/CategoryLink.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { NavLinkProps } from 'react-router-dom';
+import { Category } from '@jetshop/core/types';
+export interface CategoryLinkProps extends Partial<NavLinkProps> {
+    category: Category;
+    className?: string;
+}
+declare const CategoryLink: React.FC<CategoryLinkProps>;
+export default CategoryLink;

package/CategoryLink.js

@@ -0,0 +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 * as React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useRoutePreload } from '@jetshop/core/hooks/useRoutePreload';
+import { useHoverIntent } from './utils/useHoverIntent';
+const CategoryLink = (_a) => {
+    var { category: { id, name, primaryRoute }, children } = _a, props = __rest(_a, ["category", "children"]);
+    const { preload } = useRoutePreload();
+    const categoryPreload = () => {
+        preload({
+            pathname: primaryRoute && primaryRoute.path,
+            routeType: 'Category'
+        });
+    };
+    const [, intentRef] = useHoverIntent({
+        onHover: () => {
+            categoryPreload();
+        }
+    });
+    if (primaryRoute && primaryRoute.path) {
+        return (React.createElement(NavLink, Object.assign({}, props, { to: {
+                pathname: primaryRoute.path,
+                state: {
+                    type: 'Category',
+                    id
+                }
+            }, innerRef: intentRef, onTouchStart: categoryPreload }), children ? children : name));
+    }
+    else
+        return null;
+};
+export default CategoryLink;
+//# sourceMappingURL=CategoryLink.js.map

package/CategoryLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryLink.js","sourceRoot":"","sources":["CategoryLink.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAgB,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMxD,MAAM,YAAY,GAAgC,CAAC,EAIlD,EAAE,EAAE;QAJ8C,EACjD,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EACpC,QAAQ,OAET,EADI,KAAK,cAHyC,wBAIlD,CADS;IAER,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;IACtC,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,OAAO,CAAC;YACN,QAAQ,EAAE,YAAY,IAAI,YAAY,CAAC,IAAI;YAC3C,SAAS,EAAE,UAAU;SACtB,CAAC,CAAC;IACL,CAAC,CAAC;IACF,MAAM,CAAC,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;QACnC,OAAO,EAAE,GAAG,EAAE;YACZ,eAAe,EAAE,CAAC;QACpB,CAAC;KACF,CAAC,CAAC;IAEH,IAAI,YAAY,IAAI,YAAY,CAAC,IAAI,EAAE;QACrC,OAAO,CACL,oBAAC,OAAO,oBACF,KAAK,IACT,EAAE,EAAE;gBACF,QAAQ,EAAE,YAAY,CAAC,IAAI;gBAC3B,KAAK,EAAE;oBACL,IAAI,EAAE,UAAU;oBAChB,EAAE;iBACH;aACF,EACD,QAAQ,EAAE,SAAgB,EAC1B,YAAY,EAAE,eAAe,KAE5B,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACnB,CACX,CAAC;KACH;;QAAM,OAAO,IAAI,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/ChannelSelector/ChannelListItem.d.ts

@@ -0,0 +1,10 @@
+import { SFC } from 'react';
+import { Channel } from '@jetshop/core/types';
+import { SelectChannel } from './ChannelSelector';
+export interface ChannelListItemProps {
+    channel: Channel;
+    onSelect: SelectChannel;
+    isSelected: boolean;
+}
+declare const ChannelListItem: SFC<ChannelListItemProps>;
+export default ChannelListItem;

package/ChannelSelector/ChannelListItem.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { styled } from 'linaria/react';
+import { cx } from 'linaria';
+const selectedStyle = `
+  color: #000;
+  font-weight: 600;
+  &:before {
+    /*
+    Using a before pseudo-element allows us to create a background
+    hover effect without adding padding to the element itself.
+    */
+    background: #ebebeb;
+  }
+`;
+const ListItem = styled('li') `
+  list-style: none;
+  margin: 0;
+  padding: 0.75rem 0;
+  color: #4f4f4f;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  z-index: 1;
+  &:before {
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: -0.5rem;
+    right: -0.5rem;
+    z-index: -1;
+    position: absolute;
+    border: 1px solid transparent;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus:before {
+    border-color: #2f80ed;
+  }
+  &.isSelected {
+    ${selectedStyle};
+  }
+  &:hover {
+    ${selectedStyle};
+  }
+`;
+const ChannelListItem = ({ channel, onSelect, isSelected }) => (React.createElement(ListItem, { className: cx(isSelected && 'isSelected'), tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && onSelect(channel.id), onClick: () => onSelect(channel.id) }, channel.name));
+export default ChannelListItem;
+//# sourceMappingURL=ChannelListItem.js.map

package/ChannelSelector/ChannelListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelListItem.js","sourceRoot":"","sources":["ChannelListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAI7B,MAAM,aAAa,GAAG;;;;;;;;;;CAUrB,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BvB,aAAa;;;MAGb,aAAa;;CAElB,CAAC;AAaF,MAAM,eAAe,GAA8B,CAAC,EAClD,OAAO,EACP,QAAQ,EACR,UAAU,EACX,EAAE,EAAE,CAAC,CACJ,oBAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CAAC,UAAU,IAAI,YAAY,CAAC,EACzC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,CAAqC,EAAE,EAAE,CACnD,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAE3C,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAKlC,OAAO,CAAC,IAAI,CACJ,CACZ,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/ChannelSelector/ChannelListItem.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import CountryListItem from './ChannelListItem';
+
+xdescribe('CountryListItem', () => {
+  const country = { name: 'Australia', code: 'AUS' };
+  let props;
+  let mountedCountryListItem;
+
+  const countryListItem = () =>
+    (mountedCountryListItem = !mountedCountryListItem
+      ? (mountedCountryListItem = mount(<CountryListItem {...props} />))
+      : mountedCountryListItem);
+
+  beforeEach(() => {
+    props = {
+      country: undefined,
+      onSelect: undefined,
+      isSelected: undefined
+    };
+    mountedCountryListItem = undefined;
+  });
+
+  it('renders correctly', () => {
+    props.country = country;
+    expect(countryListItem()).toMatchSnapshot();
+  });
+
+  it('renders the name of the passed `country`', () => {
+    props.country = country;
+    expect(countryListItem().text()).toBe(country.name);
+  });
+
+  it('renders the flag of the passed `country`', () => {
+    props.country = country;
+    expect(
+      countryListItem()
+        .find('img')
+        .props().src
+    ).toMatch(country.code);
+  });
+
+  describe('when `isSelected` is true', () => {
+    beforeEach(() => {
+      props.country = country;
+      props.isSelected = true;
+    });
+
+    it('renders with `selected` styles', () => {
+      expect(countryListItem()).toMatchSnapshot();
+    });
+
+    it('passes `isSelected` to the rendered styled component', () => {
+      expect(
+        countryListItem()
+          .childAt(0)
+          .props().isSelected
+      ).toBe(true);
+    });
+  });
+
+  describe('when clicked', () => {
+    beforeEach(() => {
+      props.onSelect = jest.fn();
+      props.country = country;
+    });
+    it('calls `onSelect` with the country', () => {
+      countryListItem().simulate('click');
+      expect(props.onSelect).toBeCalledWith(props.country);
+    });
+  });
+
+  describe('when focused', () => {
+    beforeEach(() => {
+      props.onSelect = jest.fn();
+      props.country = country;
+      props.isSelected = true;
+      countryListItem().simulate('focus');
+    });
+
+    it('calls `onSelect` with the country if enter is pressed', () => {
+      countryListItem().simulate('keydown', { key: 'Enter' });
+      expect(props.onSelect).toBeCalledWith(props.country);
+    });
+  });
+});

package/ChannelSelector/ChannelSelector.d.ts

@@ -0,0 +1,63 @@
+import { SelectedChannel } from '@jetshop/core/components/ChannelContext/ChannelContext';
+import { Channel } from '@jetshop/core/types';
+import { Item } from '@jetshop/ui/Checkbox/CheckboxGroup';
+import React from 'react';
+export interface RenderCallback {
+    (props: {
+        channels: Channel[];
+        currencyItems: Item[];
+        languageItems: Item[];
+        selectedChannel: SelectedChannel;
+        hasChanged: boolean;
+        onSelect: SelectChannel;
+        onCurrencySelect: (currency: string) => void;
+        onLanguageSelect: (language: string) => void;
+    }): React.ReactElement<any>;
+}
+export interface ChannelSelectorProps {
+    /** Any array of channels to display */
+    channels: Channel[];
+    /** The default-selected channel */
+    initialChannel: SelectedChannel;
+    /**
+     * Render callback to pass state to composed child components
+     * @param {arr} channels
+     * @param {arr} currencyItems
+     * @param {arr} languageItems
+     * @param {obj} selectedChannel selected channel
+     * @param {boolean} hasChanged Whether the selection has changed from the default
+     * @param {func} onSelect Call with the channel to set the selected channel
+     * @param {func} onCurrencySelect Call with the currency to set the selected currnecy
+     * @param {func} onLanguageSelect Call with the language to set the selected lanauge
+     */
+    render: RenderCallback;
+}
+export interface ChannelSelectorState {
+    selectedChannel: SelectedChannel;
+    hasChanged: boolean;
+}
+export declare type SelectChannel = (channel: number | string, culture?: string, currency?: string, country?: string) => void;
+export declare type SelectCurrency = (currency: string) => void;
+export declare type SelectLanguage = (language: string) => void;
+/** Wraps either MiniSelector or LargeSelector and provides controlled state */
+export default class ChannelSelector extends React.Component<ChannelSelectorProps, ChannelSelectorState> {
+    state: {
+        selectedChannel: SelectedChannel;
+        hasChanged: boolean;
+    };
+    setDirtyState: () => void;
+    componentDidUpdate(_prevProps: any, prevState: any): void;
+    selectChannel: SelectChannel;
+    selectCurrency: SelectCurrency;
+    selectLanguage: SelectLanguage;
+    render(): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+}
+export declare const LangCurrWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const SelectorBody: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const Title: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: React.ElementType<any>;
+}>;

package/ChannelSelector/ChannelSelector.js

@@ -0,0 +1,80 @@
+import { createSelectedChannel, findChannel, findChannelById } from '@jetshop/core/ChannelHandler/channelUtils';
+import { styled } from 'linaria/react';
+import React from 'react';
+/** Wraps either MiniSelector or LargeSelector and provides controlled state */
+export default class ChannelSelector extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            selectedChannel: this.props.initialChannel,
+            hasChanged: false
+        };
+        this.setDirtyState = () => {
+            const hasChanged = this.state.selectedChannel.name !== this.props.initialChannel.name ||
+                this.state.selectedChannel.language.name !==
+                    this.props.initialChannel.language.name ||
+                this.state.selectedChannel.currency.name !==
+                    this.props.initialChannel.currency.name ||
+                this.state.selectedChannel.country.name !==
+                    this.props.initialChannel.country.name;
+            this.setState({ hasChanged });
+        };
+        this.selectChannel = (channel, culture, currency, country) => {
+            const selectedChannel = createSelectedChannel(typeof channel === 'number'
+                ? findChannelById(channel, this.props.channels)
+                : findChannel(channel, this.props.channels), culture, currency, country);
+            this.setState({
+                selectedChannel
+            });
+            return selectedChannel;
+        };
+        this.selectCurrency = (selectedCurrency) => {
+            const currency = this.state.selectedChannel.currencies.find((currency) => currency.name === selectedCurrency);
+            this.setState({
+                selectedChannel: Object.assign(Object.assign({}, this.state.selectedChannel), { currency })
+            });
+        };
+        this.selectLanguage = (selectedLanguage) => {
+            const language = this.state.selectedChannel.languages.find((language) => language.name === selectedLanguage);
+            this.setState({
+                selectedChannel: Object.assign(Object.assign({}, this.state.selectedChannel), { language })
+            });
+        };
+    }
+    componentDidUpdate(_prevProps, prevState) {
+        (prevState.selectedChannel.name !== this.state.selectedChannel.name ||
+            prevState.selectedChannel.language.name !==
+                this.state.selectedChannel.language.name ||
+            prevState.selectedChannel.currency.name !==
+                this.state.selectedChannel.currency.name ||
+            prevState.selectedChannel.country.name !==
+                this.state.selectedChannel.country.name) &&
+            this.setDirtyState();
+    }
+    render() {
+        const { render, channels } = this.props;
+        const currencyItems = this.state.selectedChannel.currencies.map(currency => {
+            return {
+                label: currency.name,
+                val: currency.name
+            };
+        });
+        const languageItems = this.state.selectedChannel.languages.map(language => {
+            return {
+                label: language.name,
+                val: language.name
+            };
+        });
+        return render(Object.assign(Object.assign({}, this.state), { channels,
+            currencyItems,
+            languageItems, onSelect: this.selectChannel, onCurrencySelect: this.selectCurrency, onLanguageSelect: this.selectLanguage }));
+    }
+}
+// For some reason Styleguidist breaks unless this comes after
+// the default export
+export const LangCurrWrapper = styled('div') `
+  background: #f5f5f5;
+`;
+export const SelectorBody = styled('section') ``;
+export const Title = styled('h1') ``;
+//# sourceMappingURL=ChannelSelector.js.map

package/ChannelSelector/ChannelSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSelector.js","sourceRoot":"","sources":["ChannelSelector.tsx"],"names":[],"mappings":"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"}