@ebay/ui-core-react 7.3.2 → 7.3.3

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

@@ -1,33 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,234 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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)
-    })
-})