@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-textbox/postfix-icon.tsx

@@ -1,21 +0,0 @@
-import React, { FC } from 'react'
-import { EbayTextboxIconProps } from './types'
-import { EbayIcon } from '../ebay-icon'
-import { EbayIconButton } from '../ebay-icon-button'
-
-const EbayTextboxPostfixIcon: FC<EbayTextboxIconProps> = ({
-    name,
-    buttonAriaLabel,
-    onClick = () => {},
-    ...rest
-}: EbayTextboxIconProps) => buttonAriaLabel ?
-    <EbayIconButton
-        aria-label={buttonAriaLabel}
-        icon={name}
-        transparent
-        onClick={onClick}
-        {...rest as any}
-    /> :
-    <EbayIcon name={name} {...rest as any} />
-
-export default EbayTextboxPostfixIcon

package/src/ebay-textbox/postfix-text.tsx

@@ -1,8 +0,0 @@
-import React, { FC } from 'react'
-import { EbayTextboxPostfixTextProps } from './types'
-
-const EbayTextboxPostfixText: FC<EbayTextboxPostfixTextProps> = (props: EbayTextboxPostfixTextProps) => (
-    <span {...props} />
-)
-
-export default EbayTextboxPostfixText

package/src/ebay-textbox/prefix-icon.tsx

@@ -1,12 +0,0 @@
-import React, { FC } from 'react'
-import { EbayIcon } from '../ebay-icon'
-import { EbayTextboxIconProps } from './types'
-
-const EbayTextboxPrefixIcon: FC<EbayTextboxIconProps> = ({
-    name,
-    ...rest
-}: EbayTextboxIconProps) => (
-    <EbayIcon name={name} {...rest as any} />
-)
-
-export default EbayTextboxPrefixIcon

package/src/ebay-textbox/prefix-text.tsx

@@ -1,8 +0,0 @@
-import React, { FC } from 'react'
-import { EbayTextboxPrefixTextProps } from './types'
-
-const EbayTextboxPrefixText: FC<EbayTextboxPrefixTextProps> = (props: EbayTextboxPrefixTextProps) => (
-    <span {...props} />
-)
-
-export default EbayTextboxPrefixText

package/src/ebay-textbox/textbox.tsx

@@ -1,209 +0,0 @@
-import React, {
-    cloneElement, ComponentProps, FC, Ref,
-    ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, SyntheticEvent,
-    useEffect, useState
-} from 'react'
-import classNames from 'classnames'
-import { findComponent, withForwardRef } from '../common/component-utils'
-import EbayTextboxPostfixIcon from './postfix-icon'
-import EbayTextboxPostfixText from './postfix-text'
-import EbayTextboxPrefixIcon from './prefix-icon'
-import EbayTextboxPrefixText from './prefix-text'
-import { useFloatingLabel } from '../common/floating-label-utils/hooks'
-import {
-    EbayChangeEventHandler,
-    EbayEventHandler,
-    EbayFocusEventHandler,
-    EbayKeyboardEventHandler, EbayMouseEventHandler
-} from '../common/event-utils/types'
-import type { Size } from './types'
-
-export const isControlled = (value?: unknown): boolean => typeof value !== 'undefined'
-
-type TextInputProps = ComponentProps<'input'> & ComponentProps<'textarea'>
-
-export type TextboxEventProps = { value: string }
-export type EbayTextboxProps = {
-    fluid?: boolean;
-    invalid?: boolean;
-    multiline?: boolean;
-    defaultValue?: string;
-    inputSize?: Size;
-    floatingLabel?: string;
-    onChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onInputChange?: EbayChangeEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onFocus?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onBlur?: EbayFocusEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onKeyPress?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onKeyUp?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onKeyDown?: EbayKeyboardEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onInvalid?: EbayEventHandler<HTMLTextAreaElement & HTMLInputElement, TextboxEventProps>;
-    onFloatingLabelInit?: () => void;
-    onButtonClick?: EbayKeyboardEventHandler<HTMLInputElement, TextboxEventProps> &
-        EbayMouseEventHandler<HTMLInputElement, TextboxEventProps>;
-    forwardedRef?: Ref<HTMLTextAreaElement | HTMLInputElement>;
-    opaqueLabel?: boolean;
-} & Omit<TextInputProps, 'onFocus' | 'onBlur' | 'onChange' | 'onKeyPress' | 'onKeyUp' | 'onKeyDown' | 'onInvalid'>;
-
-const EbayTextbox: FC<EbayTextboxProps> = ({
-    type = 'text',
-    invalid,
-    fluid,
-    multiline,
-    onChange = () => {},
-    onInputChange = () => {},
-    onFocus = () => {},
-    onBlur = () => {},
-    onKeyPress = () => {},
-    onKeyUp = () => {},
-    onKeyDown = () => {},
-    onInvalid = () => {},
-    onFloatingLabelInit = () => {},
-    onButtonClick = () => {},
-    autoFocus,
-    defaultValue = '',
-    value: controlledValue,
-    forwardedRef,
-    inputSize = 'default',
-    floatingLabel,
-    children,
-    placeholder,
-    opaqueLabel,
-    ...rest
-}) => {
-    const [value, setValue] = useState(defaultValue)
-    const [inputValue, setInputValue] = useState(defaultValue)
-    const {
-        label,
-        Container,
-        onBlur: onFloatingLabelBlur,
-        onFocus: onFloatingLabelFocus,
-        ref,
-        placeholder: floatingLabelPlaceholder
-    } = useFloatingLabel({
-        ref: forwardedRef,
-        inputId: rest.id,
-        className: rest.className,
-        disabled: rest.disabled,
-        label: floatingLabel,
-        inputSize,
-        inputValue: controlledValue || inputValue,
-        placeholder,
-        invalid,
-        type,
-        opaqueLabel,
-        onMount: onFloatingLabelInit
-    })
-
-    const handleFocus = (event?: FocusEvent<HTMLInputElement & HTMLTextAreaElement>) => {
-        onFocus(event, { value: event?.target?.value || defaultValue })
-        onFloatingLabelFocus()
-    }
-
-    const handleBlur = (event: FocusEvent<HTMLInputElement & HTMLTextAreaElement>) => {
-        const newValue = event.target?.value
-        onBlur(event, { value: newValue })
-        if (newValue !== value) {
-            onChange(event, { value: newValue })
-            setValue(newValue)
-        }
-        onFloatingLabelBlur()
-    }
-
-    const handleKeyPress = (event?: KeyboardEvent<HTMLInputElement & HTMLTextAreaElement>) => {
-        const textbox = event.target as any
-        onKeyPress(event, { value: textbox?.value })
-    }
-    const handleKeyUp = (event?: KeyboardEvent<HTMLInputElement & HTMLTextAreaElement>) => {
-        const textbox = event.target as any
-        onKeyUp(event, { value: textbox?.value })
-    }
-    const handleKeyDown = (event?: KeyboardEvent<HTMLInputElement & HTMLTextAreaElement>) => {
-        const textbox = event.target as any
-        onKeyDown(event, { value: textbox?.value })
-    }
-
-    const handleInvalid = (event?: SyntheticEvent<HTMLInputElement & HTMLTextAreaElement>) => {
-        const textbox = event.target as any
-        onInvalid(event, { value: textbox?.value })
-    }
-
-    const handleButtonClick = (event?: KeyboardEvent<HTMLInputElement> & MouseEvent<HTMLInputElement>) => {
-        onButtonClick(event, { value })
-    }
-
-    useEffect(() => {
-        if (autoFocus) {
-            handleFocus()
-        }
-    }, [])
-
-    const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement & HTMLInputElement>) => {
-        const newValue = e.target?.value
-
-        if (!isControlled(controlledValue)) {
-            setInputValue(newValue)
-        }
-
-        onInputChange(e, { value: newValue })
-    }
-
-    const Input = multiline ? 'textarea' : 'input'
-    const Wrapper = fluid ? 'div' : 'span'
-
-    const prefixIcon = findComponent(children, EbayTextboxPrefixIcon)
-    const prefixText = findComponent(children, EbayTextboxPrefixText)
-    const prefixId = prefixText?.props?.id
-    const postfixIcon = findComponent(children, EbayTextboxPostfixIcon)
-    const postfixText = findComponent(children, EbayTextboxPostfixText)
-    const postfixId = postfixText?.props?.id
-
-    const wrapperClassName = classNames('textbox', rest.className, {
-        'textbox--fluid': fluid,
-        'textbox--large': inputSize === 'large',
-        /** start remove after `:has` support */
-        'textbox--disabled': rest.disabled,
-        'textbox--invalid': invalid,
-        'textbox--readonly': rest.readOnly
-        /** end remove after `:has` support */
-    })
-
-    return (
-        <Container>
-            {label}
-            <Wrapper className={wrapperClassName}>
-                {prefixIcon}
-                {prefixText}
-                <Input
-                    aria-describedby={[prefixId, postfixId].filter(Boolean).join(' ') || undefined}
-                    {...rest}
-                    className="textbox__control"
-                    type={type}
-                    aria-invalid={invalid}
-                    value={isControlled(controlledValue) ? controlledValue : inputValue}
-                    onChange={handleInputChange}
-                    onBlur={handleBlur}
-                    onFocus={handleFocus}
-                    onKeyPress={handleKeyPress}
-                    onKeyUp={handleKeyUp}
-                    onKeyDown={handleKeyDown}
-                    onInvalid={handleInvalid}
-                    autoFocus={autoFocus}
-                    ref={ref}
-                    placeholder={floatingLabelPlaceholder}
-                />
-                {postfixText}
-                {postfixIcon && cloneElement(postfixIcon, {
-                    ...postfixIcon.props,
-                    onClick: (e) => {
-                        const { onClick: iconClick = () => {} } = postfixIcon.props
-                        iconClick(e)
-                        handleButtonClick(e)
-                    }
-                })}
-            </Wrapper>
-        </Container>
-    )
-}
-
-export default withForwardRef<EbayTextboxProps>(EbayTextbox)

package/src/ebay-textbox/types.ts

@@ -1,18 +0,0 @@
-import { ComponentProps, KeyboardEvent, MouseEvent } from 'react'
-import type { Icon } from '../ebay-icon'
-
-export type Size = 'default' | 'large'
-
-export type EbayTextboxIconProps = ComponentProps<'button'> & ComponentProps<'a'> & {
-    name: Icon
-    buttonAriaLabel?: string
-    onClick?: (e: KeyboardEvent | MouseEvent) => void
-}
-
-export type EbayTextboxPrefixTextProps = ComponentProps<'span'> & {
-    id: string
-}
-
-export type EbayTextboxPostfixTextProps = ComponentProps<'span'> & {
-    id: string
-}

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

@@ -1,41 +0,0 @@
-import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { EbayDialogHeader } from '../../ebay-dialog-base'
-import { EbayToast } from '../index'
-
-jest.mock('../../common/random-id')
-
-describe('<EbayToast>', () => {
-    const closeToastHandler = jest.fn()
-
-    beforeEach(() => {
-        render(
-            <EbayToast
-                open
-                onClose={closeToastHandler}
-            >
-                <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" />
-            </EbayToast>
-        )
-    })
-
-    it('should have close button', () => {
-        expect(document.querySelector('button.toast-dialog__close')).toBeInTheDocument()
-    })
-
-    it('should not focus on close button', () => {
-        expect(document.querySelector('button.toast-dialog__close')).not.toHaveFocus()
-    })
-
-    it('should trigger onClose when close button is clicked', () => {
-        fireEvent.click(document.querySelector('button.toast-dialog__close'))
-        expect(closeToastHandler).toHaveBeenCalled()
-    })
-})

package/src/ebay-toast-dialog/__tests__/index.stories.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from 'react'
-import { EbayButton } from '../../ebay-button'
-import { EbayDialogFooter, EbayDialogHeader } from '../../ebay-dialog-base'
-import { EbayToast } from '../index'
-import { action } from '@storybook/addon-actions'
-
-export default {
-    title: 'dialogs/ebay-toast-dialog'
-}
-
-export const Default = () => {
-    const TestComponent = () => {
-        const [open, setOpen] = useState(false)
-
-        return (
-            <>
-                <EbayButton onClick={() => setOpen(!open)}>Open Toast</EbayButton>
-                <EbayToast open={open} a11yCloseText="Close EbayToast" onClose={() => setOpen(false)}>
-                    <EbayDialogHeader>Toast Dialog Heading</EbayDialogHeader>
-                    <EbayDialogFooter>
-                        <EbayButton priority="primary" onClick={() => setOpen(false)} accessKey="c">
-                            Close Dialog
-                        </EbayButton>
-                    </EbayDialogFooter>
-                    <p>Press `Control-Option-c` (Mac) to activate CTA button</p>
-                    <p>
-                        <a href="http://www.ebay.com">www.ebay.com</a>
-                    </p>
-                </EbayToast>
-
-                <p>
-                    For more info, please visit our <a href="http://pages.ebay.com/help">Help page</a>
-                </p>
-                <p>
-                    Please check <a href="https://www.ebay.de/myb/PurchaseHistory">My eBay page</a> for more
-                    details{' '}
-                </p>
-            </>
-        )
-    }
-
-    return (
-        <>
-            <TestComponent />
-        </>
-    )
-}
-
-export const AlwaysOpened = {
-    render: () => {
-        const TestComponent = () => (
-            <>
-                <EbayToast open a11yCloseText="Close EbayToast" onClose={action('X-button clicked.')}>
-                    <EbayDialogHeader>Toast Dialog Heading</EbayDialogHeader>
-                    <EbayDialogFooter>
-                        <EbayButton priority="primary" onClick={action('Button clicked.')} accessKey="v">
-                            View Account
-                        </EbayButton>
-                    </EbayDialogFooter>
-                    <p>Press `Control-Option-v` (Mac) to activate CTA button</p>
-                    <p>
-                        <a href="http://www.ebay.com">www.ebay.com</a>
-                    </p>
-                </EbayToast>
-
-                <p>
-                    For more info, please visit our <a href="http://pages.ebay.com/help">Help page</a>
-                </p>
-                <p>
-                    Please check <a href="https://www.ebay.de/myb/PurchaseHistory">My eBay page</a> for more
-                    details{' '}
-                </p>
-            </>
-        )
-
-        return (
-            <>
-                <TestComponent />
-            </>
-        )
-    },
-
-    name: 'AlwaysOpened'
-}
-
-export const WithAnimation = {
-    render: () => {
-        const TestComponent = () => {
-            const [open, setOpen] = useState(false)
-
-            return (
-                <>
-                    <EbayButton onClick={() => setOpen(!open)}>Open Toast</EbayButton>
-                    <EbayToast
-                        open={open}
-                        a11yCloseText="Close EbayToast"
-                        onClose={() => setOpen(false)}
-                        animated
-                    >
-                        <EbayDialogHeader>Toast Dialog Heading</EbayDialogHeader>
-                        <EbayDialogFooter>
-                            <EbayButton priority="primary" onClick={() => setOpen(false)}>
-                                View Account
-                            </EbayButton>
-                        </EbayDialogFooter>
-                        <p>Toast dialog paragraph text.</p>
-                        <p>
-                            <a href="http://www.ebay.com">www.ebay.com</a>
-                        </p>
-                    </EbayToast>
-
-                    <p>
-                        For more info, please visit our <a href="http://pages.ebay.com/help">Help page</a>
-                    </p>
-                    <p>
-                        Please check <a href="https://www.ebay.de/myb/PurchaseHistory">My eBay page</a> for more
-                        details{' '}
-                    </p>
-                </>
-            )
-        }
-
-        return (
-            <>
-                <TestComponent />
-            </>
-        )
-    },
-
-    name: 'WithAnimation'
-}

package/src/ebay-toast-dialog/components/toast.tsx

@@ -1,26 +0,0 @@
-import React, { MouseEventHandler, KeyboardEventHandler, FC } from 'react'
-import classNames from 'classnames'
-import { DialogBaseWithState, DialogBaseProps } from '../../ebay-dialog-base'
-
-export type EbayToastProps = DialogBaseProps<HTMLElement> & {
-  onClose?: MouseEventHandler<HTMLButtonElement> & KeyboardEventHandler;
-};
-
-export const EbayToast: FC<EbayToastProps> = ({
-    className,
-    onClose = () => {},
-    ...rest
-}) => (
-    <DialogBaseWithState
-        {...rest}
-        isModal={false}
-        baseEl="aside"
-        classPrefix="toast-dialog"
-        buttonPosition="right"
-        transitionElement="root"
-        className={classNames(className, 'toast-dialog--transition')}
-        onCloseBtnClick={onClose}
-    />
-)
-
-export default EbayToast

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

@@ -1 +0,0 @@
-export { default as EbayToast } from './components/toast'

package/src/ebay-tooltip/__tests__/index.spec.tsx

@@ -1,183 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { EbayTooltip, EbayTooltipContent, EbayTooltipHost } from '../index'
-
-jest.useFakeTimers()
-
-const renderComponent = (props = {}) =>
-    render(
-        <EbayTooltip {...props}>
-            <EbayTooltipHost>
-                <button>Info</button>
-            </EbayTooltipHost>
-            <EbayTooltipContent>
-                <p>Info content</p>
-            </EbayTooltipContent>
-        </EbayTooltip>
-    )
-
-const checkIsExpanded = (wrapper) => {
-    expect(wrapper.container.querySelector('.tooltip--expanded')).toBeInTheDocument()
-    expect(wrapper.container.querySelector('button[aria-expanded=true]')).toBeInTheDocument()
-}
-
-const checkIsCollapsed = (wrapper) => {
-    expect(wrapper.container.querySelector('.tooltip--expanded')).not.toBeInTheDocument()
-    expect(wrapper.container.querySelector('button[aria-expanded=true]')).not.toBeInTheDocument()
-}
-
-describe('<EbayTooltip>', () => {
-    describe('on tooltip mouse enter', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const { getByText } = renderComponent({ onMouseEnter: spy })
-            fireEvent.mouseEnter(getByText('Info content'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-
-        it('should expand the tooltip', () => {
-            const wrapper = renderComponent()
-            fireEvent.mouseEnter(wrapper.getByText('Info content'))
-            checkIsExpanded(wrapper)
-        })
-
-        it('should not expand the tooltip with noHover', () => {
-            const wrapper = renderComponent({ noHover: true })
-            fireEvent.mouseEnter(wrapper.getByText('Info content'))
-            checkIsCollapsed(wrapper)
-        })
-    })
-
-    describe('on tooltip mouse leave', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onMouseLeave: spy })
-            fireEvent.mouseLeave(wrapper.getByText('Info content'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-
-        it('should collapse the tooltip', () => {
-            const wrapper = renderComponent()
-            fireEvent.mouseLeave(wrapper.getByText('Info content'))
-            jest.runAllTimers()
-            checkIsCollapsed(wrapper)
-        })
-
-        it('should not collapse the tooltip with noHover', () => {
-            const wrapper = renderComponent({ noHover: true })
-            const content = wrapper.getByText('Info content')
-            fireEvent.focus(content)
-            fireEvent.mouseLeave(content)
-            checkIsExpanded(wrapper)
-        })
-    })
-
-    describe('on tooltip focus', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onFocus: spy })
-            fireEvent.focus(wrapper.getByText('Info'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-
-        it('should expand the tooltip', () => {
-            const wrapper = renderComponent()
-            fireEvent.focus(wrapper.getByText('Info'))
-            checkIsExpanded(wrapper)
-        })
-
-        it('should expand the tooltip even with noHover', () => {
-            const wrapper = renderComponent({ noHover: true })
-            fireEvent.focus(wrapper.getByText('Info'))
-            checkIsExpanded(wrapper)
-        })
-    })
-
-    describe('on tooltip blur', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onBlur: spy })
-            fireEvent.blur(wrapper.getByText('Info'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-
-        it('should collapse the tooltip', () => {
-            const wrapper = renderComponent()
-            fireEvent.blur(wrapper.getByText('Info'))
-            checkIsCollapsed(wrapper)
-        })
-    })
-
-    describe('on tooltip expanded', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onExpand: spy })
-            fireEvent.focus(wrapper.getByText('Info'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-    })
-
-    describe('on tooltip collapsed', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            const wrapper = renderComponent({ onCollapse: spy })
-            fireEvent.blur(wrapper.getByText('Info'))
-
-            expect(spy).toHaveBeenCalled()
-        })
-    })
-
-    describe('on using the tooltip with no host', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(
-                    <EbayTooltip>
-                        <button>Test</button>
-                    </EbayTooltip>
-                )
-            }).toThrowError(`EbayTooltip: Please use a EbayTooltipHost that defines the host of the tooltip`)
-            ;(console.error as jest.Mock).mockRestore()
-        })
-    })
-
-    describe('on using the tooltip with no content', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(
-                    <EbayTooltip>
-                        <EbayTooltipHost>
-                            <a>Test</a>
-                        </EbayTooltipHost>
-                    </EbayTooltip>
-                )
-            }).toThrowError(`EbayTooltip: Please use a EbayTooltipContent that defines the content of the tooltip`)
-            ;(console.error as jest.Mock).mockRestore()
-        })
-    })
-
-    describe('on using more than one element in the host', () => {
-        it('should throw an error', () => {
-            jest.spyOn(console, 'error').mockImplementation(() => null)
-            expect(() => {
-                render(
-                    <EbayTooltip>
-                        {/* @ts-ignore: Forcing error to test assertion */}
-                        <EbayTooltipHost>
-                            <a>Test</a>
-                            <button>Test</button>
-                        </EbayTooltipHost>
-                        <EbayTooltipContent>Content</EbayTooltipContent>
-                    </EbayTooltip>
-                )
-            }).toThrowError(`React.Children.only expected to receive a single React element child.`)
-            ;(console.error as jest.Mock).mockRestore()
-        })
-    })
-})