@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-dialog-base/__tests__/server.spec.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { DialogDefaultProps, DialogOpen, HeaderFooterDialog, HeaderFooterDialogDefaultProps } from './mocks'
+
+describe('dialog-base', () => {
+    it('renders basic version', async () => {
+        const { getByRole, getByLabelText, getByText } = await render(<HeaderFooterDialog open />)
+
+        expect(getByRole('dialog', { hidden: true })).not.toHaveAttribute('hidden')
+        expect(getByLabelText(DialogDefaultProps.a11yCloseText)).toHaveClass('lightbox-dialog__close')
+        expect(getByText(DialogDefaultProps.children)).toHaveClass('lightbox-dialog__main')
+    })
+
+    it('renders with header and footer', async () => {
+        const { getByRole, getByLabelText, getByText, container } = await render(<HeaderFooterDialog open />)
+
+        expect(getByRole('dialog', { hidden: true })).not.toHaveAttribute('hidden')
+        expect(getByLabelText(HeaderFooterDialogDefaultProps.a11yCloseText)).toHaveClass('lightbox-dialog__close')
+        expect(getByText(HeaderFooterDialogDefaultProps.children)).toHaveClass('lightbox-dialog__main')
+        expect(container.querySelector('.lightbox-dialog__header')).toHaveTextContent(HeaderFooterDialogDefaultProps.header.props.children)
+        expect(getByText(HeaderFooterDialogDefaultProps.footer.props.children)).toHaveClass('lightbox-dialog__footer')
+    })
+
+    it('renders in open state', async () => {
+        const { getByRole } = await render(<DialogOpen />)
+        expect(getByRole('dialog', { hidden: true })).not.toHaveAttribute('hidden')
+    })
+
+    it('renders non modal', async () => {
+        const { getByRole } = await render(<DialogOpen isModal={false} />)
+        expect(getByRole('dialog', { hidden: true })).toHaveAttribute('aria-live', 'polite')
+    })
+})

package/src/ebay-dialog-base/components/animation.ts

@@ -0,0 +1,144 @@
+import { useLayoutEffect, useRef } from 'react'
+
+interface AnimationData {
+    dialog: React.RefObject<HTMLElement>;
+    waitFor: React.RefObject<HTMLElement>[];
+    classPrefix?: string;
+    onTransitionEnd: () => void;
+}
+
+type CancelFunction = () => void;
+
+interface DialogAnimationHookProps {
+    open?: boolean;
+    transitionElement?: TransitionElement;
+    classPrefix: string;
+    dialogRef: React.RefObject<HTMLElement>;
+    dialogWindowRef: React.RefObject<HTMLElement>;
+    enabled?: boolean;
+    onTransitionEnd: () => void
+}
+
+export type TransitionElement = 'window' | 'root';
+
+export function useDialogAnimation({
+    open,
+    classPrefix,
+    transitionElement,
+    dialogRef,
+    dialogWindowRef,
+    enabled,
+    onTransitionEnd
+}: DialogAnimationHookProps): void {
+    const previousOpenValue = useRef(open)
+
+    useLayoutEffect(() => {
+        if (!enabled) {
+            return
+        }
+
+        let transitionElements = [dialogWindowRef, dialogRef]
+
+        if (transitionElement === 'window') {
+            transitionElements = [dialogWindowRef]
+        } else if (transitionElement === 'root') {
+            transitionElements = [dialogRef]
+        }
+
+        let cancelCurrentAnimation: () => void
+
+        if (open) {
+            cancelCurrentAnimation = showAnimation({
+                dialog: dialogRef,
+                waitFor: transitionElements,
+                classPrefix,
+                onTransitionEnd
+            })
+        // Trigger the hide animation only when that "open" value changed to make sure it doesn't flicker the dialog.
+        // The error was visible in StrictMode where the component renders twice.
+        } else if (previousOpenValue.current !== open) {
+            cancelCurrentAnimation = hideAnimation({
+                dialog: dialogRef,
+                waitFor: transitionElements,
+                classPrefix,
+                onTransitionEnd
+            })
+        }
+
+        previousOpenValue.current = open
+
+        return () => {
+            if (cancelCurrentAnimation) {
+                cancelCurrentAnimation()
+            }
+        }
+    }, [open, enabled])
+}
+
+function showAnimation({ dialog, waitFor, classPrefix, onTransitionEnd }: AnimationData): CancelFunction {
+    return transition(dialog, waitFor, `${classPrefix}--show`, onTransitionEnd)
+}
+
+function hideAnimation({ dialog, waitFor, classPrefix, onTransitionEnd }: AnimationData): CancelFunction {
+    return transition(dialog, waitFor, `${classPrefix}--hide`, onTransitionEnd)
+}
+
+function transition(
+    element: React.RefObject<HTMLElement>,
+    waitFor: React.RefObject<HTMLElement>[],
+    className: string,
+    onTransitionEnd: () => void
+): CancelFunction {
+    if (!element.current || !className) {
+        return
+    }
+
+    let ran = 0
+    const pending = waitFor ? waitFor.length : 0
+    const initClass = `${className}-init`
+
+    element.current.classList.add(initClass)
+
+    return nextFrame(() => {
+        if (!element.current) {
+            return
+        }
+
+        element.current.classList.add(className)
+        element.current.classList.remove(initClass)
+
+        waitFor.forEach((ref) => {
+            const listener = () => {
+                if (++ran === pending) {
+                    element.current?.classList.remove(className)
+                    onTransitionEnd()
+                    ref.current?.removeEventListener('transitionend', listener)
+                }
+            }
+
+            ref.current.addEventListener('transitionend', listener, { once: true })
+        })
+    })
+}
+
+function nextFrame(callback: () => void): CancelFunction {
+    let frame: number
+    let cancelFrame: (n: number) => void
+
+    if (window.requestAnimationFrame) {
+        frame = window.requestAnimationFrame(() => {
+            frame = window.requestAnimationFrame(callback)
+        })
+        cancelFrame = window.cancelAnimationFrame
+    } else {
+        frame = window.setTimeout(callback, 26) // 16ms to simulate RAF, 10ms to ensure called after the frame.
+        cancelFrame = window.clearTimeout
+    }
+
+    return () => {
+        if (frame) {
+            cancelFrame(frame)
+            frame = undefined
+        }
+    }
+}

package/src/ebay-dialog-base/components/dialog-actions.tsx

@@ -0,0 +1,9 @@
+import React, { FC, ReactNode } from 'react'
+
+type EbayDialogActionsProps = {
+    children?: ReactNode;
+}
+
+const EbayDialogActions:FC<EbayDialogActionsProps> = ({ children }) => <>{children}</>
+
+export default EbayDialogActions

package/src/ebay-dialog-base/components/dialog-close-button.tsx

@@ -0,0 +1,9 @@
+import React, { FC, ReactNode } from 'react'
+
+type EbayDialogCloseButtonProps = {
+    children?: ReactNode;
+}
+
+const EbayDialogCloseButton: FC<EbayDialogCloseButtonProps> = ({ children }) => <>{children}</>
+
+export default EbayDialogCloseButton

package/src/ebay-dialog-base/components/dialog-footer.tsx

@@ -0,0 +1,9 @@
+import React, { FC, ReactNode } from 'react'
+
+type EbayDialogFooterProps = {
+    children?: ReactNode;
+}
+
+const EbayDialogFooter:FC<EbayDialogFooterProps> = ({ children }) => <>{children}</>
+
+export default EbayDialogFooter

package/src/ebay-dialog-base/components/dialog-header.tsx

@@ -0,0 +1,10 @@
+import React, { FC, ComponentProps } from 'react'
+
+type Props = ComponentProps<'h2'>
+
+const EbayDialogHeader:FC<Props> = ({
+    children,
+    ...rest
+}) => <h2 {...rest}>{children}</h2>
+
+export default EbayDialogHeader

package/src/ebay-dialog-base/components/dialog-previous-button.tsx

@@ -0,0 +1,23 @@
+import React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react'
+import classNames from 'classnames'
+import { EbayIconButton } from '../../ebay-icon-button'
+import { Icon } from '../../ebay-icon'
+
+type EbayDialogPreviousButtonProps = {
+    icon?: Icon;
+    className?: string
+    onClick?: MouseEventHandler & KeyboardEventHandler
+}
+
+const EbayDialogPreviousButton: FC<EbayDialogPreviousButtonProps> = ({
+    className,
+    icon,
+    ...rest
+}: EbayDialogPreviousButtonProps) => (
+    <EbayIconButton
+        {...rest}
+        icon={icon || 'chevronLeft16'}
+        className={classNames(className, 'lightbox-dialog__prev')} />
+)
+
+export default EbayDialogPreviousButton

package/src/ebay-dialog-base/components/dialogBase.tsx

@@ -0,0 +1,234 @@
+import React, {
+    FC,
+    HTMLProps,
+    RefObject,
+    useEffect,
+    useRef,
+    useState,
+    ReactElement,
+    cloneElement,
+    MouseEventHandler,
+    ReactNode,
+    KeyboardEvent,
+    KeyboardEventHandler
+} from 'react'
+import classNames from 'classnames'
+import * as screenreaderTrap from 'makeup-screenreader-trap'
+import * as keyboardTrap from 'makeup-keyboard-trap'
+import { EbayIcon } from '../../ebay-icon'
+import { randomId } from '../../common/random-id'
+import { useDialogAnimation, TransitionElement } from './animation'
+
+
+export type WindowType = 'compact'
+type ClassPrefix = 'fullscreen-dialog' | 'lightbox-dialog' | 'panel-dialog'
+    | 'drawer-dialog' | 'toast-dialog' | 'alert-dialog' | 'confirm-dialog'
+    | 'snackbar-dialog'
+type ButtonPosition = 'top' | 'right' | 'bottom' | 'left' | 'hidden'
+
+
+export interface DialogBaseProps<T> extends HTMLProps<T> {
+    baseEl?: 'div' | 'span' | 'aside';
+    open?: boolean;
+    classPrefix?: ClassPrefix;
+    windowClass?: string;
+    windowType?: WindowType;
+    header?: ReactElement;
+    footer?: ReactElement;
+    actions?: ReactElement;
+    isModal?: boolean;
+    top?: ReactElement;
+    buttonPosition?: ButtonPosition;
+    ariaLabelledby?: string;
+    a11yCloseText?: string;
+    onOpen?: () => void;
+    onCloseBtnClick?: MouseEventHandler & KeyboardEventHandler;
+    onBackgroundClick?: MouseEventHandler;
+    mainId?: string;
+    ignoreEscape?: boolean;
+    closeButton?: ReactElement;
+    previousButton?: ReactElement;
+    focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
+    animated?: boolean;
+    closeButtonClass?: string;
+    transitionElement?: TransitionElement;
+    children?: ReactNode;
+}
+
+export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
+    baseEl: Container = 'div',
+    classPrefix = 'drawer-dialog',
+    windowClass,
+    windowType,
+    mainId,
+    top,
+    header,
+    buttonPosition = 'right',
+    children,
+    ariaLabelledby,
+    a11yCloseText,
+    onCloseBtnClick = () => {},
+    footer,
+    actions,
+    onScroll,
+    open = false,
+    onOpen = () => {},
+    onBackgroundClick = () => {},
+    ignoreEscape,
+    closeButton,
+    previousButton,
+    isModal,
+    role = 'dialog',
+    focus,
+    transitionElement,
+    animated,
+    closeButtonClass,
+    ...props
+}) => {
+    const dialogRef = useRef(null)
+    const drawerBaseEl = useRef(null)
+    const closeButtonRef = useRef(null)
+
+    const [rId, setRandomId] = useState('')
+
+    useEffect(() => {
+        setRandomId(randomId())
+    }, [])
+
+    useEffect(() => {
+        let timeout: number
+        const handleBackgroundClick = (e: React.MouseEvent) => {
+            if (drawerBaseEl.current && !drawerBaseEl.current.contains(e.target)) {
+                onBackgroundClick(e)
+            }
+        }
+        if (open && buttonPosition !== 'hidden') {
+            // On React 18 useEffect hooks runs synchronous instead of asynchronous as React 17 or prior
+            // causing the event listener to be attached to the document at the same time that the dialog
+            // opens. Adding a timeout so the event is attached after the click event that opened the modal
+            // is finished.
+            timeout = window.setTimeout(() => {
+                document.addEventListener('click', handleBackgroundClick as any, false)
+            })
+        }
+        return () => {
+            clearTimeout(timeout)
+            document.removeEventListener('click', handleBackgroundClick as any, false)
+        }
+    }, [onBackgroundClick, open])
+
+    useEffect(() => {
+        if (open && isModal) {
+            screenreaderTrap.trap(drawerBaseEl.current)
+            keyboardTrap.trap(drawerBaseEl.current)
+        } else {
+            screenreaderTrap.untrap()
+            keyboardTrap.untrap()
+        }
+        return () => {
+            screenreaderTrap.untrap()
+            keyboardTrap.untrap()
+        }
+    }, [open, isModal])
+
+    useDialogAnimation({
+        open,
+        classPrefix,
+        transitionElement,
+        dialogRef,
+        dialogWindowRef: drawerBaseEl,
+        enabled: animated,
+        onTransitionEnd: () => handleFocus(open)
+    })
+
+    const onKeyDown = (event: KeyboardEvent) => {
+        if (!ignoreEscape && event.key === 'Escape') {
+            event.stopPropagation()
+            onCloseBtnClick(event)
+        }
+    }
+
+    useEffect(() => {
+        // For animated dialogs we handle the focus on transitionEnd event
+        if (!animated) {
+            handleFocus(open)
+        }
+        if (open) {
+            onOpen()
+        }
+    }, [open])
+
+    function handleFocus(isOpen: boolean) {
+        if (isOpen) {
+            if (focus) {
+                focus.current?.focus()
+            } else if (isModal) {
+                closeButtonRef.current?.focus()
+            }
+            document.addEventListener('keydown', onKeyDown as any, false)
+            return () => document.removeEventListener('keydown', onKeyDown as any, false)
+        }
+    }
+
+    const closeButtonContent = buttonPosition !== 'hidden' && (
+        <button
+            ref={closeButtonRef}
+            className={classNames(`icon-btn`, closeButtonClass, `${classPrefix}__close`, {
+                'icon-btn--transparent': classPrefix === `toast-dialog`
+            })}
+            type="button"
+            aria-label={a11yCloseText}
+            onClick={onCloseBtnClick}
+        >
+            {closeButton || <EbayIcon name="close16" />}
+        </button>
+    )
+
+    const windowClassName = windowType ? `${classPrefix}__${windowType}-window` : `${classPrefix}__window`
+
+    const dialogTitleId = header?.props?.id || `dialog-title-${rId}`
+    const dialogLabelledBy = ariaLabelledby || dialogTitleId
+    const dialogHeader = header ? cloneElement(header, { ...header.props, id: dialogTitleId }) : null
+
+    return (
+        <Container
+            {...props}
+            aria-labelledby={dialogLabelledBy}
+            aria-modal="true"
+            role={role}
+            hidden={!open}
+            className={classNames(classPrefix, props.className)}
+            aria-live={!isModal ? 'polite' : undefined}
+            ref={dialogRef}
+            onKeyDown={onKeyDown}
+        >
+            <div className={classNames(windowClassName, windowClass)} ref={drawerBaseEl}>
+                {top}
+                {dialogHeader && (
+                    <div className={`${classPrefix}__header`}>
+                        {previousButton}
+                        {buttonPosition === 'right' && dialogHeader}
+                        {buttonPosition !== 'bottom' && closeButtonContent}
+                        {(buttonPosition === 'left' || buttonPosition === 'hidden') && dialogHeader}
+                    </div>
+                )}
+                <div id={mainId} className={`${classPrefix}__main`} onScroll={onScroll}>
+                    {children}
+                </div>
+                {actions ? (
+                    <div className={`${classPrefix}__actions`}>
+                        {actions}
+                    </div>
+                ) : null}
+                {footer || buttonPosition === 'bottom' ? (
+                    <div className={`${classPrefix}__footer`}>
+                        {footer}
+                        {buttonPosition === 'bottom' && closeButtonContent}
+                    </div>
+                ) : null}
+            </div>
+        </Container>
+    )
+}
+
+export default DialogBase

package/src/ebay-dialog-base/dialog-base-with-state.tsx

@@ -0,0 +1,61 @@
+import React, { Children, ReactElement } from 'react'
+import { RemoveScroll } from 'react-remove-scroll'
+import { DialogBase, DialogBaseProps } from './components/dialogBase'
+import {
+    EbayDialogCloseButton,
+    EbayDialogFooter,
+    EbayDialogHeader,
+    EbayDialogActions,
+    EbayDialogPreviousButton
+} from './index'
+
+export const DialogBaseWithState = ({
+    isModal,
+    open,
+    children,
+    animated = true,
+    ...rest
+}: DialogBaseProps<HTMLElement>): ReactElement => {
+    const shouldRenderModal = isModal !== false
+
+    const childrenArray = Children.toArray(children) as ReactElement[]
+    const header = childrenArray.find((child: ReactElement) => child.type === EbayDialogHeader)
+    const footer = childrenArray.find((child: ReactElement) => child.type === EbayDialogFooter)
+    const actions = childrenArray.find((child: ReactElement) => child.type === EbayDialogActions)
+    const closeButton = childrenArray.find((child: ReactElement) => child.type === EbayDialogCloseButton)
+    const previousButton = childrenArray.find((child: ReactElement) => child.type === EbayDialogPreviousButton)
+    const content = childrenArray.filter((child: ReactElement) =>
+        ![
+            EbayDialogHeader,
+            EbayDialogFooter,
+            EbayDialogCloseButton,
+            EbayDialogActions,
+            EbayDialogPreviousButton
+        ].some(c => c === child.type))
+
+    const dialogBase = (
+        <DialogBase
+            {...rest}
+            open={open}
+            isModal={shouldRenderModal}
+            header={header}
+            footer={footer}
+            actions={actions}
+            closeButton={closeButton}
+            previousButton={previousButton}
+            animated={animated}
+        >
+            {content}
+        </DialogBase>
+    )
+
+    const renderOverLay = () => shouldRenderModal ? (
+        <RemoveScroll enabled={open}>
+            {dialogBase}
+        </RemoveScroll>
+    ) : dialogBase
+
+    return animated || open ? renderOverLay() : null
+}
+
+export default DialogBaseWithState

package/src/ebay-dialog-base/index.ts

@@ -0,0 +1,8 @@
+export { default as EbayDialogHeader } from './components/dialog-header'
+export { default as EbayDialogFooter } from './components/dialog-footer'
+export { default as EbayDialogCloseButton } from './components/dialog-close-button'
+export type { WindowType, DialogBaseProps } from './components/dialogBase'
+export { default as DialogBaseWithState } from './dialog-base-with-state'
+export { default as EbayDialogActions } from './components/dialog-actions'
+export { default as EbayDialogPreviousButton } from './components/dialog-previous-button'
+export { type TransitionElement, useDialogAnimation } from './components/animation'

package/src/ebay-drawer-dialog/__tests__/index.spec.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { EbayDrawerDialog } from '../index'
+import { EbayDialogHeader } from '../../ebay-dialog-base'
+
+jest.mock('../../common/random-id')
+
+const classPrefix = 'drawer-dialog'
+const closeDrawerHandler = jest.fn()
+let wrapper
+const renderComponent = (props?: any) => {
+    wrapper = render(
+        <EbayDrawerDialog open onClose={closeDrawerHandler} {...props}>
+            <EbayDialogHeader>Heading</EbayDialogHeader>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <input placeholder="Enter a value" />
+        </EbayDrawerDialog>
+    )
+}
+
+describe('<EbayDrawerDialog>', () => {
+    beforeEach(() => {
+        renderComponent()
+    })
+
+    it('should have close button', () => {
+        expect(document.querySelector(`button.${classPrefix}__close`)).toBeInTheDocument()
+    })
+
+    it('should trigger onClose when close button is clicked', () => {
+        const closeButton = document.querySelector(`button.${classPrefix}__close`)
+        fireEvent.click(closeButton)
+        expect(closeDrawerHandler).toHaveBeenCalled()
+    })
+
+    it('should not render close button when buttonPosition is set to hidden', () => {
+        renderComponent({ buttonPosition: 'hidden' })
+        const closeButton = wrapper.container.querySelector(`button.${classPrefix}__close`)
+        expect(closeButton).toBeNull()
+    })
+
+    it('should apply custom dialog window class', () => {
+        const windowClass = 'windowClassName'
+        renderComponent({ windowClass })
+        const dialogWindow = wrapper.container.querySelector('.drawer-dialog__window')
+        expect(dialogWindow.classList).toContain(windowClass)
+    })
+})