@jetshop/ui 5.13.0 → 5.13.10-0

package/Modal/Flyout/FlyoutTarget.test.js

@@ -1,84 +1,84 @@
-import React from 'react';
-import getComponentWithModalContext, {
-  defaultContext
-} from '../__test_utils__/getComponentWithModalContext';
-
-beforeEach(() => {
-  jest.resetModules();
-});
-
-const target = getComponentWithModalContext('Flyout/FlyoutTarget');
-
-xdescribe('FlyoutTarget', () => {
-  describe('renders null', () => {
-    let wrapper;
-    let unreachableChild = jest
-      .fn()
-      .mockReturnValue('This should never render');
-
-    afterEach(() => {
-      expect(wrapper.children().children()).toHaveLength(0);
-    });
-
-    it('when isOpen is false', () => {
-      const FlyoutTarget = target();
-      wrapper = mount(<FlyoutTarget>{unreachableChild}</FlyoutTarget>);
-    });
-
-    it('when isOpen is true but ID prop does not match modalId', () => {
-      const FlyoutTarget = target({
-        ...defaultContext,
-        modals: [
-          {
-            isOpen: true,
-            modalId: 'bar'
-          }
-        ]
-      });
-      wrapper = mount(<FlyoutTarget id="foo">{unreachableChild}</FlyoutTarget>);
-    });
-
-    it('when isOpen is true and ID matches, but `modalType` is not `flyout`', () => {
-      const FlyoutTarget = target({
-        ...defaultContext,
-        modals: [{ isOpen: true, modalId: 'foo', modalType: 'modal' }]
-      });
-      wrapper = mount(<FlyoutTarget id="foo">{unreachableChild}</FlyoutTarget>);
-    });
-  });
-
-  describe('renders a child component', () => {
-    let wrapper;
-    let FlyoutTarget;
-    let reachableChild = jest.fn().mockReturnValue('Hello from the inside!');
-
-    beforeEach(() => {
-      FlyoutTarget = target({
-        ...defaultContext,
-        modals: [{ isOpen: true, modalId: 'foo', modalType: 'flyout' }]
-      });
-    });
-
-    afterEach(() => {
-      expect(wrapper.children().children()).toHaveLength(1);
-    });
-
-    it('when isOpen is true, `modalId` and `id` prop match, and `modalType` is `flyout`', () => {
-      wrapper = mount(<FlyoutTarget id="foo">{reachableChild}</FlyoutTarget>);
-      expect(wrapper.children().text()).toBe('Hello from the inside!');
-    });
-    it('with `isOpen` prop passed', () => {
-      expect(wrapper.children().children().props().modals[0].isOpen).toBe(true);
-    });
-    it('with `modalType` prop passed', () => {
-      expect(wrapper.children().children().props().modals[0].modalType).toBe(
-        'flyout'
-      );
-    });
-    it('with `hideTarget` func passed', () => {
-      expect(wrapper.children().children().props().hideTarget).toBe(
-        defaultContext.hideTarget
-      );
-    });
-  });
-});
+import React from 'react';
+import getComponentWithModalContext, {
+  defaultContext
+} from '../__test_utils__/getComponentWithModalContext';
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+const target = getComponentWithModalContext('Flyout/FlyoutTarget');
+
+xdescribe('FlyoutTarget', () => {
+  describe('renders null', () => {
+    let wrapper;
+    let unreachableChild = jest
+      .fn()
+      .mockReturnValue('This should never render');
+
+    afterEach(() => {
+      expect(wrapper.children().children()).toHaveLength(0);
+    });
+
+    it('when isOpen is false', () => {
+      const FlyoutTarget = target();
+      wrapper = mount(<FlyoutTarget>{unreachableChild}</FlyoutTarget>);
+    });
+
+    it('when isOpen is true but ID prop does not match modalId', () => {
+      const FlyoutTarget = target({
+        ...defaultContext,
+        modals: [
+          {
+            isOpen: true,
+            modalId: 'bar'
+          }
+        ]
+      });
+      wrapper = mount(<FlyoutTarget id="foo">{unreachableChild}</FlyoutTarget>);
+    });
+
+    it('when isOpen is true and ID matches, but `modalType` is not `flyout`', () => {
+      const FlyoutTarget = target({
+        ...defaultContext,
+        modals: [{ isOpen: true, modalId: 'foo', modalType: 'modal' }]
+      });
+      wrapper = mount(<FlyoutTarget id="foo">{unreachableChild}</FlyoutTarget>);
+    });
+  });
+
+  describe('renders a child component', () => {
+    let wrapper;
+    let FlyoutTarget;
+    let reachableChild = jest.fn().mockReturnValue('Hello from the inside!');
+
+    beforeEach(() => {
+      FlyoutTarget = target({
+        ...defaultContext,
+        modals: [{ isOpen: true, modalId: 'foo', modalType: 'flyout' }]
+      });
+    });
+
+    afterEach(() => {
+      expect(wrapper.children().children()).toHaveLength(1);
+    });
+
+    it('when isOpen is true, `modalId` and `id` prop match, and `modalType` is `flyout`', () => {
+      wrapper = mount(<FlyoutTarget id="foo">{reachableChild}</FlyoutTarget>);
+      expect(wrapper.children().text()).toBe('Hello from the inside!');
+    });
+    it('with `isOpen` prop passed', () => {
+      expect(wrapper.children().children().props().modals[0].isOpen).toBe(true);
+    });
+    it('with `modalType` prop passed', () => {
+      expect(wrapper.children().children().props().modals[0].modalType).toBe(
+        'flyout'
+      );
+    });
+    it('with `hideTarget` func passed', () => {
+      expect(wrapper.children().children().props().hideTarget).toBe(
+        defaultContext.hideTarget
+      );
+    });
+  });
+});

package/Modal/Flyout/FlyoutTrigger.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { ModalState } from '../ModalContext';
-export declare const FlyoutTrigger: React.SFC<{
-    id: string;
-    /** Whether to show a clickable semi-opaque Cover behind the flyout */
-    showCover?: boolean;
-    /** Whether to prevent the body from scrolling when flyout is open */
-    preventOverflow?: boolean;
-    /** Whether to able to close modal via Escape button */
-    canCloseOnEsc?: boolean;
-    coverStyles?: {};
-    children: (args: Pick<ModalState, 'hideTarget' | 'isOpen'> & {
-        showTarget: () => void;
-    }) => React.ReactNode;
-}>;
+import * as React from 'react';
+import { ModalState } from '../ModalContext';
+export declare const FlyoutTrigger: React.SFC<{
+    id: string;
+    /** Whether to show a clickable semi-opaque Cover behind the flyout */
+    showCover?: boolean;
+    /** Whether to prevent the body from scrolling when flyout is open */
+    preventOverflow?: boolean;
+    /** Whether to able to close modal via Escape button */
+    canCloseOnEsc?: boolean;
+    coverStyles?: {};
+    children: (args: Pick<ModalState, 'hideTarget' | 'isOpen'> & {
+        showTarget: () => void;
+    }) => React.ReactNode;
+}>;

package/Modal/Flyout/FlyoutTrigger.js

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import ModalContext from '../ModalContext';
-export const FlyoutTrigger = ({ id, children, showCover = true, preventOverflow = false, canCloseOnEsc = true, coverStyles }) => {
-    return (React.createElement(ModalContext.Consumer, null, ({ showTarget, hideTarget, modals }) => {
-        const open = () => showTarget(null, 'flyout', id, {
-            showCover,
-            coverStyles,
-            preventOverflow,
-            canCloseOnEsc
-        });
-        return children({
-            showTarget: open,
-            hideTarget,
-            isOpen: modals.some(({ modalId }) => modalId === id)
-        });
-    }));
-};
+import * as React from 'react';
+import ModalContext from '../ModalContext';
+export const FlyoutTrigger = ({ id, children, showCover = true, preventOverflow = false, canCloseOnEsc = true, coverStyles }) => {
+    return (React.createElement(ModalContext.Consumer, null, ({ showTarget, hideTarget, modals }) => {
+        const open = () => showTarget(null, 'flyout', id, {
+            showCover,
+            coverStyles,
+            preventOverflow,
+            canCloseOnEsc
+        });
+        return children({
+            showTarget: open,
+            hideTarget,
+            isOpen: modals.some(({ modalId }) => modalId === id)
+        });
+    }));
+};
 //# sourceMappingURL=FlyoutTrigger.js.map

package/Modal/Flyout/FlyoutTrigger.test.js

@@ -1,72 +1,72 @@
-import React from 'react';
-import getComponentWithModalContext, {
-  defaultContext
-} from '../__test_utils__/getComponentWithModalContext';
-
-beforeEach(() => {
-  jest.resetModules();
-});
-
-const trigger = getComponentWithModalContext(
-  'Flyout/FlyoutTrigger',
-  'FlyoutTrigger'
-);
-
-xdescribe('DrawerTrigger', () => {
-  let funcAsChild = jest.fn().mockReturnValue(<div>Rendered child</div>);
-
-  it('renders a Consumer', () => {
-    const DrawerTrigger = trigger();
-    const wrapper = mount(<DrawerTrigger>{funcAsChild}</DrawerTrigger>);
-    expect(wrapper.find('Consumer')).toHaveLength(1);
-  });
-
-  describe('takes a func as child prop', () => {
-    it('calls it with `showTarget`, `hideTarget`, and `isOpen`', () => {
-      const DrawerTrigger = trigger();
-
-      mount(<DrawerTrigger id="foo">{funcAsChild}</DrawerTrigger>);
-      expect(funcAsChild).toHaveBeenCalledWith(
-        expect.objectContaining({
-          showTarget: expect.any(Function),
-          hideTarget: defaultContext.hideTarget,
-          isOpen: defaultContext.isOpen
-        })
-      );
-    });
-  });
-
-  describe('calls `showTarget`', () => {
-    it('with `id` passed via prop', () => {
-      const TRIGGER_ID = 'foo';
-      const DrawerTrigger = trigger();
-      const wrapper = mount(
-        <DrawerTrigger id={TRIGGER_ID}>
-          {({ showTarget }) => <div onClick={showTarget}>hello</div>}
-        </DrawerTrigger>
-      );
-      wrapper.find('div').simulate('click');
-      expect(defaultContext.showTarget).toHaveBeenLastCalledWith(
-        null,
-        'flyout',
-        TRIGGER_ID,
-        expect.any(Object)
-      );
-    });
-    it('with `showCover` passed via prop', () => {
-      const DrawerTrigger = trigger();
-      const wrapper = mount(
-        <DrawerTrigger id="foo" showCover={false}>
-          {({ showTarget }) => <div onClick={showTarget}>hello</div>}
-        </DrawerTrigger>
-      );
-      wrapper.find('div').simulate('click');
-      expect(defaultContext.showTarget).toHaveBeenLastCalledWith(
-        null,
-        'flyout',
-        'foo',
-        expect.objectContaining({ showCover: false })
-      );
-    });
-  });
-});
+import React from 'react';
+import getComponentWithModalContext, {
+  defaultContext
+} from '../__test_utils__/getComponentWithModalContext';
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+const trigger = getComponentWithModalContext(
+  'Flyout/FlyoutTrigger',
+  'FlyoutTrigger'
+);
+
+xdescribe('DrawerTrigger', () => {
+  let funcAsChild = jest.fn().mockReturnValue(<div>Rendered child</div>);
+
+  it('renders a Consumer', () => {
+    const DrawerTrigger = trigger();
+    const wrapper = mount(<DrawerTrigger>{funcAsChild}</DrawerTrigger>);
+    expect(wrapper.find('Consumer')).toHaveLength(1);
+  });
+
+  describe('takes a func as child prop', () => {
+    it('calls it with `showTarget`, `hideTarget`, and `isOpen`', () => {
+      const DrawerTrigger = trigger();
+
+      mount(<DrawerTrigger id="foo">{funcAsChild}</DrawerTrigger>);
+      expect(funcAsChild).toHaveBeenCalledWith(
+        expect.objectContaining({
+          showTarget: expect.any(Function),
+          hideTarget: defaultContext.hideTarget,
+          isOpen: defaultContext.isOpen
+        })
+      );
+    });
+  });
+
+  describe('calls `showTarget`', () => {
+    it('with `id` passed via prop', () => {
+      const TRIGGER_ID = 'foo';
+      const DrawerTrigger = trigger();
+      const wrapper = mount(
+        <DrawerTrigger id={TRIGGER_ID}>
+          {({ showTarget }) => <div onClick={showTarget}>hello</div>}
+        </DrawerTrigger>
+      );
+      wrapper.find('div').simulate('click');
+      expect(defaultContext.showTarget).toHaveBeenLastCalledWith(
+        null,
+        'flyout',
+        TRIGGER_ID,
+        expect.any(Object)
+      );
+    });
+    it('with `showCover` passed via prop', () => {
+      const DrawerTrigger = trigger();
+      const wrapper = mount(
+        <DrawerTrigger id="foo" showCover={false}>
+          {({ showTarget }) => <div onClick={showTarget}>hello</div>}
+        </DrawerTrigger>
+      );
+      wrapper.find('div').simulate('click');
+      expect(defaultContext.showTarget).toHaveBeenLastCalledWith(
+        null,
+        'flyout',
+        'foo',
+        expect.objectContaining({ showCover: false })
+      );
+    });
+  });
+});

package/Modal/Flyout/index.d.ts

@@ -1,2 +1,2 @@
-export { FlyoutTrigger } from './FlyoutTrigger';
-export { FlyoutTarget } from './FlyoutTarget';
+export { FlyoutTrigger } from './FlyoutTrigger';
+export { FlyoutTarget } from './FlyoutTarget';

package/Modal/Flyout/index.js

@@ -1,3 +1,3 @@
-export { FlyoutTrigger } from './FlyoutTrigger';
-export { FlyoutTarget } from './FlyoutTarget';
+export { FlyoutTrigger } from './FlyoutTrigger';
+export { FlyoutTarget } from './FlyoutTarget';
 //# sourceMappingURL=index.js.map

package/Modal/ModalContext.d.ts

@@ -1,26 +1,26 @@
-import React from 'react';
-export interface ModalState {
-    /** If modalType is modal, render this component at the modalRoot */
-    modalComponent?: React.ReactNode;
-    /** The type of modal to display */
-    modalType: 'modal' | 'flyout' | 'drawer';
-    /** An ID used to identify which flyout to display */
-    modalId?: string;
-    /** Called when a modal is requested */
-    showTarget(...args: any[]): void;
-    /** Called when a modal is dismissed */
-    hideTarget(...args: any[]): void;
-    /** Whether a modal is open */
-    isOpen: boolean;
-    /** props to be passed on to the displayed modalComponent */
-    props?: any;
-}
-export interface ModalContextProps {
-    /** Called when a modal is requested */
-    showTarget(...args: any[]): void;
-    /** Called when a modal is dismissed */
-    hideTarget(...args: any[]): void;
-    modals: ModalState[];
-}
-declare const ModalContext: React.Context<ModalContextProps>;
-export default ModalContext;
+import React from 'react';
+export interface ModalState {
+    /** If modalType is modal, render this component at the modalRoot */
+    modalComponent?: React.ReactNode;
+    /** The type of modal to display */
+    modalType: 'modal' | 'flyout' | 'drawer';
+    /** An ID used to identify which flyout to display */
+    modalId?: string;
+    /** Called when a modal is requested */
+    showTarget(...args: any[]): void;
+    /** Called when a modal is dismissed */
+    hideTarget(...args: any[]): void;
+    /** Whether a modal is open */
+    isOpen: boolean;
+    /** props to be passed on to the displayed modalComponent */
+    props?: any;
+}
+export interface ModalContextProps {
+    /** Called when a modal is requested */
+    showTarget(...args: any[]): void;
+    /** Called when a modal is dismissed */
+    hideTarget(...args: any[]): void;
+    modals: ModalState[];
+}
+declare const ModalContext: React.Context<ModalContextProps>;
+export default ModalContext;

package/Modal/ModalContext.js

@@ -1,9 +1,9 @@
-import { createContext } from 'react';
-const initialModalState = {
-    showTarget: null,
-    hideTarget: null,
-    modals: []
-};
-const ModalContext = createContext(initialModalState);
-export default ModalContext;
+import { createContext } from 'react';
+const initialModalState = {
+    showTarget: null,
+    hideTarget: null,
+    modals: []
+};
+const ModalContext = createContext(initialModalState);
+export default ModalContext;
 //# sourceMappingURL=ModalContext.js.map

package/Modal/ModalProvider.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-declare const ModalProvider: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
-export default ModalProvider;
+import React from 'react';
+declare const ModalProvider: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default ModalProvider;

package/Modal/ModalProvider.js

@@ -1,83 +1,83 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import ModalContext from './ModalContext';
-import ReactModal from 'react-modal';
-import { css } from 'linaria';
-const preventBodyScrollStyle = css `
-  overflow: hidden;
-`;
-const ModalProvider = ({ children }) => {
-    const [modals, setModals] = useState([]);
-    function showTarget(modalComponent, modalType, modalId, props = {}) {
-        setModals((prevModals) => {
-            const newModals = [...prevModals];
-            const modalProps = {
-                modalComponent,
-                modalId,
-                modalType,
-                isOpen: true,
-                props,
-                showTarget,
-                hideTarget: () => hideTarget(modalId)
-            };
-            // Check if modal with same id already exists
-            const matchIndex = newModals.findIndex((modal) => modal.modalId === modalId);
-            if (matchIndex >= 0)
-                newModals[matchIndex] = modalProps;
-            else
-                newModals.push(modalProps);
-            return newModals;
-        });
-    }
-    function hideTarget(modalId) {
-        setModals((prevModals) => {
-            const newModals = [...prevModals];
-            // Calling hideTarget directly from a MouseEvent passes down an event
-            // object. Therefore we have to check if the passed prop is a string.
-            if (modalId && typeof modalId === 'string') {
-                // Removing the modal based on modalId if opened
-                const matchIndex = newModals.findIndex((modal) => modal.modalId === modalId);
-                if (matchIndex >= 0)
-                    newModals.splice(matchIndex, 1);
-            }
-            else {
-                // Removing the last opened modal
-                newModals.pop();
-            }
-            return newModals;
-        });
-    }
-    // Handling modal close on Escape button
-    const handleKeydown = useCallback((e) => {
-        if (e.key !== 'Escape' || modals.length === 0)
-            return;
-        const lastModal = modals[modals.length - 1];
-        if (!lastModal.props.canCloseOnEsc)
-            return;
-        hideTarget();
-    }, [modals]);
-    useEffect(() => {
-        ReactModal.setAppElement('#root');
-    }, []);
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeydown);
-        return () => document.removeEventListener('keydown', handleKeydown);
-    }, [handleKeydown]);
-    // Disabling scrolling when relevant
-    useEffect(() => {
-        const preventOverflow = modals.some((modal) => modal.props.preventOverflow ||
-            (modal.modalType === 'drawer' && modal.isOpen));
-        if (preventOverflow)
-            document.body.classList.add(preventBodyScrollStyle);
-        else
-            document.body.classList.remove(preventBodyScrollStyle);
-        return () => document.body.classList.remove(preventBodyScrollStyle);
-    }, [modals]);
-    const initialState = {
-        showTarget,
-        hideTarget,
-        modals
-    };
-    return (React.createElement(ModalContext.Provider, { value: initialState }, children));
-};
-export default ModalProvider;
+import React, { useEffect, useState, useCallback } from 'react';
+import ModalContext from './ModalContext';
+import ReactModal from 'react-modal';
+import { css } from 'linaria';
+const preventBodyScrollStyle = css `
+  overflow: hidden;
+`;
+const ModalProvider = ({ children }) => {
+    const [modals, setModals] = useState([]);
+    function showTarget(modalComponent, modalType, modalId, props = {}) {
+        setModals((prevModals) => {
+            const newModals = [...prevModals];
+            const modalProps = {
+                modalComponent,
+                modalId,
+                modalType,
+                isOpen: true,
+                props,
+                showTarget,
+                hideTarget: () => hideTarget(modalId)
+            };
+            // Check if modal with same id already exists
+            const matchIndex = newModals.findIndex((modal) => modal.modalId === modalId);
+            if (matchIndex >= 0)
+                newModals[matchIndex] = modalProps;
+            else
+                newModals.push(modalProps);
+            return newModals;
+        });
+    }
+    function hideTarget(modalId) {
+        setModals((prevModals) => {
+            const newModals = [...prevModals];
+            // Calling hideTarget directly from a MouseEvent passes down an event
+            // object. Therefore we have to check if the passed prop is a string.
+            if (modalId && typeof modalId === 'string') {
+                // Removing the modal based on modalId if opened
+                const matchIndex = newModals.findIndex((modal) => modal.modalId === modalId);
+                if (matchIndex >= 0)
+                    newModals.splice(matchIndex, 1);
+            }
+            else {
+                // Removing the last opened modal
+                newModals.pop();
+            }
+            return newModals;
+        });
+    }
+    // Handling modal close on Escape button
+    const handleKeydown = useCallback((e) => {
+        if (e.key !== 'Escape' || modals.length === 0)
+            return;
+        const lastModal = modals[modals.length - 1];
+        if (!lastModal.props.canCloseOnEsc)
+            return;
+        hideTarget();
+    }, [modals]);
+    useEffect(() => {
+        ReactModal.setAppElement('#root');
+    }, []);
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeydown);
+        return () => document.removeEventListener('keydown', handleKeydown);
+    }, [handleKeydown]);
+    // Disabling scrolling when relevant
+    useEffect(() => {
+        const preventOverflow = modals.some((modal) => modal.props.preventOverflow ||
+            (modal.modalType === 'drawer' && modal.isOpen));
+        if (preventOverflow)
+            document.body.classList.add(preventBodyScrollStyle);
+        else
+            document.body.classList.remove(preventBodyScrollStyle);
+        return () => document.body.classList.remove(preventBodyScrollStyle);
+    }, [modals]);
+    const initialState = {
+        showTarget,
+        hideTarget,
+        modals
+    };
+    return (React.createElement(ModalContext.Provider, { value: initialState }, children));
+};
+export default ModalProvider;
 //# sourceMappingURL=ModalProvider.js.map