@dropins/tools 0.21.1 → 0.21.2-alpha2

package/components/Input/Input.test.jsx

@@ -0,0 +1,111 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { Input } from '@adobe/elsie/components/Input';
+import { Search } from '@adobe/elsie/icons';
+import { fireEvent, render } from '@adobe/elsie/lib/tests';
+import { Icon } from '..';
+jest.useFakeTimers();
+describe('Base/Components/Input', () => {
+    test('renders', () => {
+        const { container } = render(<Input id="dropin-input-1"/>);
+        const elem = container.querySelector('.dropin-input');
+        expect(!!elem).toEqual(true);
+        expect(container).toMatchSnapshot();
+    });
+    test('renders with random id', () => {
+        const { container } = render(<Input />);
+        const elem = container.querySelector('.dropin-input');
+        expect(!!elem).toEqual(true);
+        expect(elem?.id).toMatch(new RegExp(`^dropin-input-?`));
+    });
+    test('triggers onValue()', () => {
+        const mockFn = jest.fn();
+        const { container } = render(<Input name="input" onValue={mockFn}/>);
+        const field = container.querySelector('.dropin-input');
+        fireEvent.input(field, {
+            target: { value: 'test' },
+        });
+        jest.runAllTimers();
+        expect(mockFn).toBeCalledWith('test');
+    });
+    test('renders the correct shape for default variant', () => {
+        const { container } = render(<Input name="input" aria-label="Text Input"/>);
+        const elem = container.querySelector('.dropin-input-container');
+        expect(elem).toMatchSnapshot();
+    });
+    test('renders the variants', () => {
+        const { container, rerender } = render(<Input name="input-primary" aria-label="Text Input" variant="primary"/>);
+        const primary = container.querySelector('.dropin-input-container');
+        expect(primary?.classList.contains('dropin-input-container--primary')).toBe(true);
+        rerender(<Input name="input-secondary" aria-label="Text Input" variant="secondary"/>);
+        const secondary = container.querySelector('.dropin-input-container');
+        expect(secondary?.classList.contains('dropin-input-container--secondary')).toBe(true);
+    });
+    test('renders icons', () => {
+        const { container } = render(<Input name="input" icon={<Icon source={Search} id="iconLeft"/>}/>);
+        const iconLeft = container.querySelector('#iconLeft');
+        expect(iconLeft).toBeTruthy();
+    });
+    test('renders the correct shape for size large', () => {
+        const { container } = render(<Input name="input" aria-label="Text Input" size="large"/>);
+        const elem = container.querySelector('.dropin-input--large');
+        expect(elem).toMatchSnapshot();
+    });
+    test('calls onUpdateError() when error is thrown in onValue()', () => {
+        const mockFn = jest.fn(() => {
+            throw new Error('Mock error!');
+        });
+        const { container } = render(<Input name="input" value={'test'} onValue={mockFn}/>);
+        const field = container.querySelector('.dropin-input');
+        fireEvent.input(field, { target: { value: 'test2' } });
+        jest.runAllTimers();
+        expect(field.value).toEqual('test2');
+    });
+    test('handles input update error with error handler given', () => {
+        const mockFn = jest.fn(() => {
+            throw new Error('Mock error!');
+        });
+        const mockErrorHandler = jest.fn();
+        const { container } = render(<Input name="input" onValue={mockFn} onUpdateError={mockErrorHandler}/>);
+        const field = container.querySelector('.dropin-input');
+        fireEvent.input(field, { target: { value: 'test' } });
+        jest.runAllTimers();
+        expect(field.value).toEqual('test');
+        expect(mockErrorHandler).toHaveBeenCalledTimes(1);
+        expect(mockErrorHandler.mock.calls[0][0]).toMatchInlineSnapshot(`[Error: Mock error!]`);
+    });
+    test('Update input when new string is introduced', () => {
+        const { container } = render(<Input name="input" value={'peanut'}/>);
+        const field = container.querySelector('.dropin-input');
+        fireEvent.input(field, { target: { value: 'almonds' } });
+        jest.runAllTimers();
+        expect(field.value).toEqual('almonds');
+    });
+    test('render errorField', () => {
+        const { container } = render(<Input name="input" error={true}/>);
+        const field = container.querySelector('.dropin-input__field-icon--error');
+        jest.runAllTimers();
+        expect(field).toBeTruthy();
+    });
+    test('render successField', () => {
+        const { container } = render(<Input name="input" success={true}/>);
+        const field = container.querySelector('.dropin-input__field-icon--success');
+        jest.runAllTimers();
+        expect(field).toBeTruthy();
+    });
+    test('input spaces are trimmed if leading/trailing spaces are present', () => {
+        const mockFn = jest.fn();
+        const { container } = render(<Input name="input" onValue={mockFn}/>);
+        const field = container.querySelector('.dropin-input');
+        fireEvent.input(field, {
+            target: { value: ' test    ' },
+        });
+        jest.runAllTimers();
+        expect(mockFn).toBeCalledWith('test');
+    });
+    test('floatingLabel is rendered when specified', () => {
+        const { container } = render(<Input name="input" floatingLabel={'Label'}/>);
+        const field = container.querySelector('.dropin-input__label--floating');
+        jest.runAllTimers();
+        expect(field).toBeTruthy();
+    });
+});

package/components/Input/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@adobe/elsie/components/Input/Input';
+export { Input as default } from '@adobe/elsie/components/Input';
+//# sourceMappingURL=index.d.ts.map

package/components/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAC"}

package/components/Input/index.js

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/Input/Input';
+export { Input as default } from '@adobe/elsie/components/Input';

package/components/Modal/Modal.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent, HTMLAttributes } from 'preact/compat';
+import { VNode } from 'preact';
+import '@adobe/elsie/src/components/Modal/Modal.css';
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size' | 'title'> {
+    size?: 'small' | 'medium' | 'full';
+    title?: VNode;
+    centered?: boolean;
+    onClose?: () => void;
+    backgroundDim?: boolean;
+    clickToDismiss?: boolean;
+    escapeToDismiss?: boolean;
+    showCloseButton?: boolean;
+}
+export declare const Modal: FunctionComponent<ModalProps>;
+//# sourceMappingURL=Modal.d.ts.map

package/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACL,iBAAiB,EACjB,cAAc,EAGf,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE/B,OAAO,6CAA6C,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC9D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAyH/C,CAAC"}

package/components/Modal/Modal.jsx

@@ -0,0 +1,93 @@
+/*
+ADOBE CONFIDENTIAL
+Copyright 2023 Adobe
+All Rights Reserved.
+NOTICE: All information contained herein is, and remains
+the property of Adobe and its suppliers, if any. The intellectual
+and technical concepts contained herein are proprietary to Adobe
+and its suppliers and are protected by all applicable intellectual
+property laws, including trade secret and copyright laws.
+Dissemination of this information or reproduction of this material
+is strictly forbidden unless prior written permission is obtained
+from Adobe.
+*/
+import { useText } from '@adobe/elsie/i18n';
+import { classes } from '@adobe/elsie/lib';
+import { useCallback, useEffect, } from 'preact/compat';
+import { Button } from '../Button';
+import { Close as CloseSVG } from '@adobe/elsie/icons';
+import '@adobe/elsie/src/components/Modal/Modal.css';
+export const Modal = ({ size = 'small', title = null, centered = false, backgroundDim = true, clickToDismiss = true, escapeToDismiss = true, onClose, showCloseButton = true, className, children = null, ...props }) => {
+    const handleOnClose = useCallback(() => {
+        onClose?.();
+    }, [onClose]);
+    const translations = useText({
+        modalCloseLabel: 'Dropin.Modal.Close.label',
+    });
+    // Close on background click
+    useEffect(() => {
+        const handleOutsideClick = (event) => {
+            const modal = document.querySelector('.dropin-modal');
+            const modalBody = document.querySelector('.dropin-modal__body');
+            if (clickToDismiss &&
+                modal &&
+                modalBody &&
+                !modalBody.contains(event.target)) {
+                handleOnClose();
+            }
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [handleOnClose, clickToDismiss]);
+    // Close on ESC
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && escapeToDismiss) {
+                handleOnClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleOnClose, escapeToDismiss]);
+    // Prevent document scrolling
+    useEffect(() => {
+        const scrollingElement = document.scrollingElement;
+        const defaultOverflowValue = scrollingElement.style.overflow;
+        scrollingElement.style.overflow = 'hidden';
+        return () => {
+            scrollingElement.style.overflow = defaultOverflowValue;
+        };
+    }, []);
+    return (<div className={classes([
+            'dropin-modal',
+            ['dropin-modal--dim', backgroundDim],
+        ])}>
+      <div {...props} className={classes([
+            'dropin-modal__body',
+            [`dropin-modal__body--${size}`, size],
+            className,
+        ])}>
+        <div className={classes([
+            'dropin-modal__header',
+            ['dropin-modal__header-title', !!title],
+        ])}>
+          {title && (<div className={classes(['dropin-modal__header-title-content'])}>
+              {title}
+            </div>)}
+
+          {showCloseButton && (<Button aria-label={translations.modalCloseLabel} variant="tertiary" className="dropin-modal__header-close-button" onClick={handleOnClose} icon={<CloseSVG />}/>)}
+        </div>
+
+        <div className={classes([
+            'dropin-modal__content',
+            ['dropin-modal__body--centered', centered],
+        ])}>
+          {children}
+        </div>
+      </div>
+    </div>);
+};

package/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/preact';
+import { ModalProps } from './Modal';
+declare const meta: Meta<ModalProps>;
+type Story = StoryObj<ModalProps>;
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="small" title={<h4>Modal Title</h4>}>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+export declare const SmallModal: Story;
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="medium" centered={true} title={<h3>Medium modal</h3>}>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+export declare const MediumModal: Story;
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="full">
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+export declare const FullModal: Story;
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="full" centered={true}>
+ *      Lorem ipsum...
+ * </Modal>
+ * ```
+ */
+export declare const OverflowingChildren: Story;
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="medium" title={<h3 style={{marginTop: 0}}>{`Howdy! This is the modal title`.repeat(5)}</h3>}>
+ *      Howdy! This is the modal content.
+ * </Modal>
+ * ```
+ */
+export declare const OverflowingTitle: Story;
+export default meta;
+//# sourceMappingURL=Modal.stories.d.ts.map

package/components/Modal/Modal.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAsB,UAAU,EAAE,MAAM,SAAS,CAAC;AAKzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAsE1B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAElC;;;;;;;;GAQG;AAEH,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC;AAEF;;;;;;;;GAQG;AAEH,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Modal/Modal.stories.jsx

@@ -0,0 +1,189 @@
+import { expect } from '@storybook/jest';
+import { Modal as component } from './Modal';
+import { useState } from 'preact/hooks';
+import { Button } from '../Button';
+import { userEvent, within } from '@storybook/testing-library';
+const meta = {
+    title: 'Components/Modal',
+    component,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        children: {
+            description: 'Content',
+            control: { type: 'text' },
+            defaultValue: { summary: '<empty string>' },
+        },
+        size: {
+            description: 'Modal size',
+            control: { type: 'radio' },
+            options: ['small', 'medium', 'full'],
+            defaultValue: { summary: 'small' },
+        },
+        title: {
+            description: 'Title',
+            control: { type: 'text' },
+            defaultValue: { summary: '<empty string>' },
+        },
+        centered: {
+            description: 'Content inside modal is centered',
+            type: 'boolean',
+            defaultValue: { summary: 'false' },
+        },
+        onClose: {
+            description: 'On close modal callback',
+            control: { type: 'null' },
+            defaultValue: { summary: 'null' },
+        },
+        backgroundDim: {
+            description: 'Background behind modal content is dimmed',
+            type: 'boolean',
+            defaultValue: { summary: 'true' },
+        },
+        clickToDismiss: {
+            description: 'Enable click on background to dismiss the modal',
+            type: 'boolean',
+            defaultValue: { summary: 'true' },
+        },
+        escapeToDismiss: {
+            description: 'Enable ESCAPE key press to dismiss the modal',
+            type: 'boolean',
+            defaultValue: { summary: 'true' },
+        },
+        showCloseButton: {
+            description: 'Show close button',
+            type: 'boolean',
+            defaultValue: { summary: 'true' },
+        },
+    },
+    decorators: [
+        (Story, attrs) => {
+            const [active, setActive] = useState(false);
+            attrs.args.onClose = () => setActive(false);
+            return (<div>
+          <Button onClick={() => setActive(true)}>Open Modal</Button>
+
+          {active && Story()}
+        </div>);
+        },
+    ],
+};
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="small" title={<h4>Modal Title</h4>}>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+export const SmallModal = {
+    args: {
+        size: 'small',
+        children: "👋 Howdy, I'm Howdy!",
+        title: <h4>Small modal</h4>,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button'));
+        const modal = document.querySelector('.dropin-modal__body');
+        await expect(modal).toBeVisible();
+        await expect(await canvas.findByText('Small modal')).toBeVisible();
+        const closeButton = document.querySelector('.dropin-modal__header-close-button');
+        await userEvent.click(closeButton);
+        await expect(modal).not.toBeVisible();
+        await expect(canvas.getByText('Open Modal')).toBeVisible();
+    },
+};
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="medium" centered={true} title={<h3>Medium modal</h3>}>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+export const MediumModal = {
+    args: {
+        size: 'medium',
+        centered: true,
+        children: "👋 Howdy, I'm Howdy!",
+        title: <h3>Medium modal</h3>,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button'));
+        const modal = document.querySelector('.dropin-modal__body');
+        await expect(modal).toBeVisible();
+        await expect(await canvas.findByText('Medium modal')).toBeVisible();
+        const closeButton = document.querySelector('.dropin-modal__header-close-button');
+        await userEvent.click(closeButton);
+        await expect(modal).not.toBeVisible();
+        await expect(canvas.getByText('Open Modal')).toBeVisible();
+    },
+};
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="full">
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+export const FullModal = {
+    args: {
+        size: 'full',
+        children: "👋 Howdy, I'm Howdy!",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button'));
+        const modal = document.querySelector('.dropin-modal__body');
+        await expect(modal).toBeVisible();
+        const closeButton = document.querySelector('.dropin-modal__header-close-button');
+        await userEvent.click(closeButton);
+        await expect(modal).not.toBeVisible();
+        await expect(canvas.getByText('Open Modal')).toBeVisible();
+    },
+};
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="full" centered={true}>
+ *      Lorem ipsum...
+ * </Modal>
+ * ```
+ */
+export const OverflowingChildren = {
+    args: {
+        size: 'full',
+        centered: true,
+        children: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt neque gravida ligula malesuada bibendum et quis enim. Mauris sed nunc odio. Sed ornare nec nulla at fringilla. Cras egestas laoreet mi, sit amet tristique ipsum. Quisque facilisis ante et nisi hendrerit, et cursus est iaculis. Vestibulum nec erat eleifend, convallis velit quis, pharetra est. Nam augue dolor, blandit ac suscipit pretium, efficitur ut mi. Donec et suscipit ipsum, vel ultricies felis. Maecenas vestibulum velit mauris, ut sagittis arcu auctor maximus. Nullam gravida eget felis ac iaculis. Ut a consectetur ipsum, ac cursus magna. Quisque tempus tempus magna at vehicula. Duis ac imperdiet purus, finibus aliquet enim. Sed vel diam pretium, blandit risus vel, convallis mauris. Mauris consectetur iaculis diam. 
+        `.repeat(15),
+    },
+};
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="medium" title={<h3 style={{marginTop: 0}}>{`Howdy! This is the modal title`.repeat(5)}</h3>}>
+ *      Howdy! This is the modal content.
+ * </Modal>
+ * ```
+ */
+export const OverflowingTitle = {
+    args: {
+        size: 'medium',
+        children: `Howdy! This is the modal content.`,
+        title: (<h3 style={{ marginTop: 0 }}>
+        {`Howdy! This is the modal title`.repeat(5)}
+      </h3>),
+    },
+};
+export default meta;

package/components/Modal/Modal.test.d.ts

@@ -0,0 +1,3 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+export {};
+//# sourceMappingURL=Modal.test.d.ts.map

package/components/Modal/Modal.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.test.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.test.tsx"],"names":[],"mappings":"AAAA,6DAA6D"}

package/components/Modal/Modal.test.jsx

@@ -0,0 +1,85 @@
+/** https://preactjs.com/guide/v10/preact-testing-library/ */
+import { fireEvent, render } from '@adobe/elsie/lib/tests';
+import { Modal } from '@adobe/elsie/components';
+describe('Foundations/Assets/Modal', () => {
+    test('renders if empty', () => {
+        // @ts-ignore
+        document.scrollingElement = document.documentElement;
+        const { container } = render(<Modal />);
+        const elem = container.querySelector('.dropin-modal');
+        expect(elem).toMatchSnapshot();
+    });
+    test('renders with size and children', () => {
+        const { container } = render(<Modal size="full">
+        <p>Modal test</p>
+      </Modal>);
+        const elem = container.querySelector('.dropin-modal');
+        expect(elem).toMatchSnapshot();
+    });
+    test('renders with multiple props', () => {
+        const { container } = render(<Modal size="small" centered={true} backgroundDim={true} clickToDismiss={true} showCloseButton={false}>
+        <p>Modal test</p>
+        <div>
+          <h5>Test title</h5>
+        </div>
+      </Modal>);
+        const elem = container.querySelector('.dropin-modal');
+        expect(elem).toMatchSnapshot();
+    });
+    test('renders with title', () => {
+        const title = <h4>Modal Title</h4>;
+        const { container } = render(<Modal size="full" title={title}>
+        <p>Modal test</p>
+      </Modal>);
+        const elem = container.querySelector('.dropin-modal');
+        expect(elem).toMatchSnapshot();
+    });
+    test('click background to dismiss', () => {
+        const mockCallBack = jest.fn();
+        const { container } = render(<Modal clickToDismiss={true} onClose={mockCallBack}>
+        <p>Modal test</p>
+      </Modal>);
+        const modalElement = container.querySelector('.dropin-modal');
+        const modalBodyElement = container.querySelector('.dropin-modal__body');
+        if (modalElement && modalBodyElement) {
+            const { top, left } = modalElement.getBoundingClientRect();
+            fireEvent.mouseDown(modalElement, {
+                clientX: left + 1,
+                clientY: top + 1,
+            });
+        }
+        expect(mockCallBack).toBeCalled();
+    });
+    test('click background if dismiss disabled', () => {
+        const mockCallBack = jest.fn();
+        const { container } = render(<Modal clickToDismiss={false} onClose={mockCallBack}>
+        <p>Modal test</p>
+      </Modal>);
+        const modalElement = container.querySelector('.dropin-modal');
+        const modalBodyElement = container.querySelector('.dropin-modal__body');
+        if (modalElement && modalBodyElement) {
+            const { top, left } = modalElement.getBoundingClientRect();
+            fireEvent.mouseDown(modalElement, {
+                clientX: left + 1,
+                clientY: top + 1,
+            });
+        }
+        expect(mockCallBack).toBeCalledTimes(0);
+    });
+    test('close on ESC key', () => {
+        const mockCallBack = jest.fn();
+        render(<Modal escapeToDismiss={true} onClose={mockCallBack}>
+        <p>Modal test</p>
+      </Modal>);
+        fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        expect(mockCallBack).toHaveBeenCalled();
+    });
+    test('close on ESC key if disabled', () => {
+        const mockCallBack = jest.fn();
+        render(<Modal escapeToDismiss={false} onClose={mockCallBack}>
+        <p>Modal test</p>
+      </Modal>);
+        fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        expect(mockCallBack).toBeCalledTimes(0);
+    });
+});

package/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/Modal/Modal';
+//# sourceMappingURL=index.d.ts.map

package/components/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAcA,cAAc,qCAAqC,CAAC"}

package/components/Modal/index.js

@@ -0,0 +1,14 @@
+/*
+ADOBE CONFIDENTIAL
+Copyright 2023 Adobe
+All Rights Reserved.
+NOTICE: All information contained herein is, and remains
+the property of Adobe and its suppliers, if any. The intellectual
+and technical concepts contained herein are proprietary to Adobe
+and its suppliers and are protected by all applicable intellectual
+property laws, including trade secret and copyright laws.
+Dissemination of this information or reproduction of this material
+is strictly forbidden unless prior written permission is obtained
+from Adobe.
+*/
+export * from '@adobe/elsie/components/Modal/Modal';

package/components/Picker/Picker.d.ts

@@ -0,0 +1,26 @@
+import '@adobe/elsie/components/Picker/Picker.css';
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+export interface PickerOption {
+    value: string | null;
+    text?: string;
+    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+    disabled?: boolean;
+}
+export interface PickerProps extends Omit<HTMLAttributes<HTMLSelectElement>, 'value' | 'size' | 'icon'> {
+    id?: string;
+    name?: string;
+    value?: string | null;
+    placeholder?: string;
+    variant?: 'primary' | 'secondary';
+    size?: 'medium' | 'large';
+    floatingLabel?: string;
+    icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+    options?: PickerOption[];
+    defaultOption?: PickerOption;
+    disabled?: boolean;
+    error?: boolean;
+    handleSelect?: (event: Event) => void;
+}
+export declare const Picker: FunctionComponent<PickerProps>;
+//# sourceMappingURL=Picker.d.ts.map

package/components/Picker/Picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../src/components/Picker/Picker.tsx"],"names":[],"mappings":"AACA,OAAO,2CAA2C,CAAC;AAGnD,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,cAAc,EAAuB,MAAM,eAAe,CAAC;AAGpE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA+IjD,CAAC"}