@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-select/ebay-select.tsx

@@ -1,164 +0,0 @@
-import React, { ChangeEvent, cloneElement, ComponentProps, FC, useState, FocusEvent } from 'react'
-import classNames from 'classnames'
-import EbaySelectOption from './ebay-select-option'
-import { EbayIcon } from '../ebay-icon'
-import { filterByType, withForwardRef } from '../common/component-utils'
-import { useFloatingLabel } from '../common/floating-label-utils/hooks'
-import { EbayChangeEventHandler } from '../common/event-utils/types'
-
-const isControlled = value => typeof value !== 'undefined'
-
-type SelectValue = string | ReadonlyArray<string> | number;
-export type ChangeEventProps = { index: number, selected: string[] }
-export type EbaySelectProps = Omit<ComponentProps<'select'>, 'onChange'> & {
-    borderless?: boolean;
-    defaultValue?: SelectValue;
-    onChange?: EbayChangeEventHandler<HTMLSelectElement, ChangeEventProps>;
-    floatingLabel?: string;
-    forwardedRef?: React.Ref<HTMLSelectElement>;
-    inputSize?: 'default' | 'large';
-    invalid?: boolean;
-};
-
-const EbaySelect: FC<EbaySelectProps> = ({
-    value: controlledValue,
-    defaultValue,
-    className,
-    borderless,
-    name,
-    disabled,
-    onChange = () => {},
-    onBlur = () => {},
-    onFocus = () => {},
-    floatingLabel,
-    forwardedRef,
-    children,
-    inputSize,
-    invalid,
-    ...rest
-}) => {
-    const isFieldInvalid = invalid || rest['aria-invalid'] === 'true'
-    const [value, setValue] = useState<SelectValue>(defaultValue)
-    const {
-        label,
-        Container,
-        onBlur: onFloatingLabelBlur,
-        onFocus: onFloatingLabelFocus,
-        ref
-    } = useFloatingLabel({
-        ref: forwardedRef,
-        inputId: rest.id,
-        className: className,
-        disabled: disabled,
-        label: floatingLabel,
-        inputValue: controlledValue,
-        inputSize: inputSize,
-        invalid: isFieldInvalid
-    })
-
-    const handleSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
-        const { value: newValue, selectedIndex } = e.target
-
-        if (!isControlled(controlledValue)) {
-            setValue(newValue)
-        }
-
-        onChange(e, { index: selectedIndex, selected: [newValue] })
-    }
-
-    const handleBlur = (event: FocusEvent<HTMLSelectElement>) => {
-        onBlur(event)
-        onFloatingLabelBlur()
-    }
-
-    const handleFocus = (event: FocusEvent<HTMLSelectElement>) => {
-        onFocus(event)
-        onFloatingLabelFocus()
-    }
-
-    const selectClassName = classNames('select', className, {
-        'select--borderless': borderless,
-        'select--large': inputSize === `large`
-    })
-
-    return (
-        <Container>
-            {label}
-            <span className={selectClassName}>
-                <select
-                    {...rest}
-                    name={name}
-                    value={isControlled(controlledValue) ? controlledValue : value}
-                    disabled={disabled}
-                    onChange={handleSelectChange}
-                    onBlur={handleBlur}
-                    onFocus={handleFocus}
-                    ref={ref}
-                >
-                    {options(children)}
-                </select>
-                <EbayIcon name="chevronDown12" height="8" width="8" />
-            </span>
-        </Container>
-    )
-}
-
-export default withForwardRef<EbaySelectProps>(EbaySelect)
-
-function optionGroups(data) {
-    const optGroups = {}
-
-    data.forEach(opt => {
-        const option = opt.props
-        if (option.optgroup) {
-            if (!Object.prototype.hasOwnProperty.call(optGroups, option.optgroup)) {
-                optGroups[option.optgroup] = []
-            }
-            optGroups[option.optgroup].push(option)
-        }
-    })
-
-    return optGroups
-}
-
-function options(children) {
-    const renderedGroups = []
-    const allOptions = []
-    let optGroups = {}
-    let withinGroup = false
-
-    const childrenOpts = filterByType(children, EbaySelectOption).map(c => cloneElement(c, {}))
-
-    if (childrenOpts) {
-        optGroups = optionGroups(childrenOpts)
-        let currentGroupName
-        childrenOpts.forEach((option, idx) => {
-            const { value, optionClassName, children: optionChildren, optgroup } = option.props
-            withinGroup = optgroup && renderedGroups.indexOf(optgroup) === -1
-
-            if (withinGroup) { // This will always be true when the very first group is encountered.
-                currentGroupName = optgroup
-                const currentGroupOptions = optGroups[currentGroupName]
-                const opts = currentGroupOptions.map((groupOption) => (
-                    <EbaySelectOption
-                        key={`opt-${groupOption.value}`}
-                        value={groupOption.value}
-                        className={groupOption.optionClassName}>
-                        {groupOption.children}
-                    </EbaySelectOption>))
-                allOptions.push(<optgroup key={idx} label={optgroup}>{opts}</optgroup>)
-                renderedGroups.push(optgroup)
-            } else if (!optgroup) {
-                /**
-                 * The check below is necessary because we could still be in a group which has already
-                 * been added to the renderedGroups array. In that case it will be skipped.
-                 */
-                allOptions.push(
-                    <EbaySelectOption key={idx} value={value} className={optionClassName}>
-                        {optionChildren}
-                    </EbaySelectOption>)
-            }
-        })
-        return allOptions
-    }
-}

package/src/ebay-select/index.ts

@@ -1,2 +0,0 @@
-export { default as EbaySelect, type EbaySelectProps, type ChangeEventProps } from './ebay-select'
-export { default as EbaySelectOption } from './ebay-select-option'

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

@@ -1,26 +0,0 @@
-import React from 'react'
-import { EbaySignal, SignalStatus } from '../index'
-import { render } from '@testing-library/react'
-
-describe('<EbaySignal>', () => {
-    const statusInputs: SignalStatus[] = ['neutral', 'trustworthy', 'time-sensitive', 'recent']
-    it(`renders default with neutral status if no status is available`, async () => {
-        const text = 'Default'
-        const { getByText } = await render(<EbaySignal>{text}</EbaySignal>)
-        const el = getByText(text)
-        expect(el).toBeInTheDocument()
-        expect(el).toHaveClass('signal')
-        expect(el).toHaveClass(`signal--neutral`)
-    })
-
-    statusInputs.forEach((thisStatusInput) => {
-        it(`renders default with ${thisStatusInput} status`, async () => {
-            const status = thisStatusInput
-            const { getByText } = await render(<EbaySignal status={status}>{status}</EbaySignal>)
-            const el = getByText(status)
-            expect(el).toBeInTheDocument()
-            expect(el).toHaveClass('signal')
-            expect(el).toHaveClass(`signal--${status}`)
-        })
-    })
-})

package/src/ebay-signal/__tests__/index.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { EbaySignal } from '../index'
-
-export default {
-    component: EbaySignal,
-    title: 'graphics & icons/ebay-signal'
-}
-
-export const defaultCase = () => (
-    <>
-        <EbaySignal>Default</EbaySignal>
-    </>
-)
-
-export const trustworthy = () => (
-    <>
-        <EbaySignal status="trustworthy">Trustworthy</EbaySignal>
-    </>
-)
-
-export const recent = () => (
-    <>
-        <EbaySignal status="recent">Recent</EbaySignal>
-    </>
-)
-
-export const timeSensitive = () => (
-    <>
-        <EbaySignal status="time-sensitive">Time-Sensitive</EbaySignal>
-    </>
-)
-
-export const neutral = () => (
-    <>
-        <EbaySignal status="neutral">Neutral</EbaySignal>
-    </>
-)

package/src/ebay-signal/index.ts

@@ -1 +0,0 @@
-export { default as EbaySignal, type SignalStatus } from './signal'

package/src/ebay-signal/signal.tsx

@@ -1,15 +0,0 @@
-import React, { FC, ComponentProps } from 'react'
-import classNames from 'classnames'
-
-export type SignalStatus = 'neutral' | 'trustworthy' | 'time-sensitive' | 'recent'
-
-type Props = ComponentProps<'span'> & {
-    status?: SignalStatus
-};
-
-const EbaySignal: FC<Props> = ({ status = 'neutral', ...rest }) => {
-    const className = classNames(`signal signal--${status}`, rest.className)
-    return <span {...rest} className={className} />
-}
-
-export default EbaySignal

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

@@ -1,151 +0,0 @@
-import React, { useState } from 'react'
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import { EbaySnackbarDialog, EbaySnackbarDialogAction } from '../index'
-
-jest.useFakeTimers()
-
-describe('<EbaySnackbarDialog />', () => {
-    function openSnackbar() {
-        const button = screen.getByText('Open')
-        fireEvent.click(button)
-    }
-
-    beforeEach(() => {
-        const Component = () => {
-            const [open, setOpen] = useState(false)
-            return (
-                <>
-                    <button onClick={() => setOpen(true)}>Open</button>
-                    {/* We switch off animation so we can test DOM elements presence or not */}
-                    <EbaySnackbarDialog open={open} animated={false}>
-                        <p>Snackbar text</p>
-                        <EbaySnackbarDialogAction>Action</EbaySnackbarDialogAction>
-                    </EbaySnackbarDialog>
-                </>
-            )
-        }
-
-        render(<Component />)
-    })
-
-    it('should open the snackbar', () => {
-        openSnackbar()
-
-        expect(screen.getByText('Snackbar text')).toBeInTheDocument()
-    })
-
-    it(`should close the snackbar on clicking the action`, () => {
-        openSnackbar()
-
-        const action = screen.getByText('Action')
-        fireEvent.click(action)
-        expect(action).not.toBeInTheDocument()
-    })
-
-    it(`should close the snackbar after 6 seconds`, () => {
-        openSnackbar()
-
-        const snackbar = screen.getByText('Snackbar text')
-
-        jest.advanceTimersByTime(3000 /* 3 seconds */)
-
-        // Make sure that after 3 seconds is still open
-        expect(snackbar).toBeInTheDocument()
-
-        act(() => {
-            jest.advanceTimersByTime(3000 /* 3 seconds */)
-        })
-
-        expect(snackbar).not.toBeInTheDocument()
-    })
-
-    it(`should not close when the element is focused`, () => {
-        openSnackbar()
-
-        const snackbar = screen.getByText('Snackbar text')
-
-        fireEvent.focus(snackbar)
-
-        jest.advanceTimersByTime(7000 /* 7 seconds */)
-
-        expect(snackbar).toBeInTheDocument()
-    })
-
-    it(`should close on blur after 6 seconds`, () => {
-        openSnackbar()
-        const snackbar = screen.getByText('Snackbar text')
-        fireEvent.focus(snackbar)
-        jest.advanceTimersByTime(7000 /* 7 seconds */)
-        expect(snackbar).toBeInTheDocument()
-
-        fireEvent.blur(snackbar)
-
-        act(() => {
-            jest.advanceTimersByTime(7000 /* 7 seconds */)
-        })
-
-        expect(snackbar).not.toBeInTheDocument()
-    })
-
-    it(`should not close when the mouse enter the snackbar`, () => {
-        openSnackbar()
-
-        const snackbar = screen.getByText('Snackbar text')
-
-        fireEvent.mouseEnter(snackbar)
-
-        jest.advanceTimersByTime(7000 /* 7 seconds */)
-
-        expect(snackbar).toBeInTheDocument()
-    })
-
-    it(`should close on mouse leave after 6 seconds`, () => {
-        openSnackbar()
-        const snackbar = screen.getByText('Snackbar text')
-        fireEvent.mouseEnter(snackbar)
-        jest.advanceTimersByTime(7000 /* 7 seconds */)
-        expect(snackbar).toBeInTheDocument()
-
-        fireEvent.mouseLeave(snackbar)
-
-        act(() => {
-            jest.advanceTimersByTime(7000 /* 7 seconds */)
-        })
-
-        expect(snackbar).not.toBeInTheDocument()
-    })
-
-    it(`should not close when the snackbar is on focus but the mouse leave`, () => {
-        openSnackbar()
-        const snackbar = screen.getByText('Snackbar text')
-        fireEvent.mouseEnter(snackbar)
-        fireEvent.focus(snackbar)
-        jest.advanceTimersByTime(7000 /* 7 seconds */)
-        expect(snackbar).toBeInTheDocument()
-
-        fireEvent.mouseLeave(snackbar)
-
-        act(() => {
-            jest.advanceTimersByTime(7000 /* 7 seconds */)
-        })
-
-        expect(snackbar).toBeInTheDocument()
-    })
-
-    it(`should not close when the snackbar is on mouse enter but the focus got lost`, () => {
-        openSnackbar()
-        const snackbar = screen.getByText('Snackbar text')
-        fireEvent.mouseEnter(snackbar)
-        fireEvent.focus(snackbar)
-        jest.advanceTimersByTime(7000 /* 7 seconds */)
-        expect(snackbar).toBeInTheDocument()
-
-        fireEvent.blur(snackbar)
-
-        act(() => {
-            jest.advanceTimersByTime(7000 /* 7 seconds */)
-        })
-
-        expect(snackbar).toBeInTheDocument()
-    })
-})

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

@@ -1,83 +0,0 @@
-import React, { useState } from 'react'
-import { EbayButton } from '../../ebay-button'
-import { EbaySnackbarDialog, EbaySnackbarDialogAction } from '../index'
-
-export default {
-    title: 'dialogs/ebay-snackbar-dialog'
-}
-
-export const Default = () => {
-    const TestComponent = () => {
-        const [open, setOpen] = useState(false)
-
-        return (
-            <>
-                <EbayButton onClick={() => setOpen(!open)}>Open Snackbar</EbayButton>
-                <EbaySnackbarDialog open={open} onClose={() => setOpen(false)}>
-                    <p>1 item deleted from watch list.</p>
-                </EbaySnackbarDialog>
-            </>
-        )
-    }
-
-    return (
-        <>
-            <TestComponent />
-        </>
-    )
-}
-
-export const WithAction = {
-    render: () => {
-        const TestComponent = () => {
-            const [open, setOpen] = useState(false)
-
-            return (
-                <>
-                    <EbayButton onClick={() => setOpen(!open)}>Open Snackbar</EbayButton>
-                    <EbaySnackbarDialog open={open} onClose={() => setOpen(false)}>
-                        <p>1 item deleted from watch list.</p>
-                        <EbaySnackbarDialogAction accessKey="U">Undo</EbaySnackbarDialogAction>
-                    </EbaySnackbarDialog>
-                </>
-            )
-        }
-
-        return (
-            <>
-                <TestComponent />
-            </>
-        )
-    },
-
-    name: 'With action'
-}
-
-export const WithColumnLayout = {
-    render: () => {
-        const TestComponent = () => {
-            const [open, setOpen] = useState(false)
-
-            return (
-                <>
-                    <EbayButton onClick={() => setOpen(!open)}>Open Snackbar</EbayButton>
-                    <EbaySnackbarDialog open={open} onClose={() => setOpen(false)} layout="column">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                            incididunt ut labore et dolore magna aliqua.
-                        </p>
-                        <EbaySnackbarDialogAction accessKey="U">Undo</EbaySnackbarDialogAction>
-                    </EbaySnackbarDialog>
-                </>
-            )
-        }
-
-        return (
-            <>
-                <TestComponent />
-            </>
-        )
-    },
-
-    name: 'With column layout'
-}

package/src/ebay-snackbar-dialog/components/ebay-snackbar-dialog-action.tsx

@@ -1,12 +0,0 @@
-import classNames from 'classnames'
-import React, { ComponentProps, ReactElement } from 'react'
-
-export const EbaySnackbarDialogAction = ({
-    className,
-    children,
-    ...rest
-}: ComponentProps<'button'>): ReactElement => (
-    <button className={classNames(className, 'fake-link')} {...rest}>
-        {children}
-    </button>
-)

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

@@ -1,132 +0,0 @@
-import classNames from 'classnames'
-import React, { KeyboardEventHandler, MouseEventHandler, ReactElement, useEffect, useRef, useState } from 'react'
-import { DialogBaseProps, DialogBaseWithState, EbayDialogActions } from '../../ebay-dialog-base'
-import { EbaySnackbarDialogAction } from './ebay-snackbar-dialog-action'
-
-export type EbaySnackbarDialogProps = Omit<DialogBaseProps<HTMLElement>, 'a11yCloseText'> & {
-    layout?: 'row' | 'column';
-    onOpen?: () => void;
-    onClose?: () => void;
-    onAction?: MouseEventHandler<HTMLButtonElement> & KeyboardEventHandler;
-}
-
-const DEFAULT_TIMEOUT_LENGTH = 6000 // 6 seconds
-
-export const EbaySnackbarDialog = ({
-    className,
-    onOpen = () => {},
-    onClose = () => {},
-    layout,
-    open,
-    children,
-    onAction,
-    ...rest
-}: EbaySnackbarDialogProps): ReactElement => {
-    // We use this eventSet to track which event opened the snackbar and we make sure that
-    // we don't close the snackbar in an undesired moment.
-    // For example, the snackbar should stay open on focus even if the mouseLeave event happened.
-    const eventSet = useRef<Set<string>>(new Set())
-    const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
-    const [isOpen, setIsOpen] = useState(open)
-
-    const childrenArray = React.Children.toArray(children) as ReactElement[]
-    const action = childrenArray.find((child: ReactElement) => child.type === EbaySnackbarDialogAction)
-    const content = childrenArray.filter((child: ReactElement) => child.type !== EbaySnackbarDialogAction)
-
-    const cancelCurrentCloseRequest = () => {
-        clearTimeout(timeoutRef.current)
-    }
-
-    const closeDialog = () => {
-        setIsOpen(false)
-        onClose()
-    }
-
-    const requestToCloseDialog = () => {
-        // We will make a request to close the snackbar only
-        // when there is no pending opening event.
-        if (eventSet.current.size === 0) {
-            cancelCurrentCloseRequest()
-            timeoutRef.current = setTimeout(() => {
-                closeDialog()
-            }, DEFAULT_TIMEOUT_LENGTH)
-        }
-    }
-
-    const openDialog = () => {
-        setIsOpen(true)
-        onOpen()
-        requestToCloseDialog()
-    }
-
-    const handleFocus = () => {
-        cancelCurrentCloseRequest()
-        eventSet.current.add('focus')
-    }
-
-    const handleBlur = () => {
-        eventSet.current.delete('focus')
-        requestToCloseDialog()
-    }
-
-    const handleMouseEnter = () => {
-        cancelCurrentCloseRequest()
-        eventSet.current.add('mouseEnter')
-    }
-
-    const handleMouseLeave = () => {
-        eventSet.current.delete('mouseEnter')
-        requestToCloseDialog()
-    }
-
-    const handleAction = (event) => {
-        cancelCurrentCloseRequest()
-        onAction?.(event)
-        action?.props?.onClick?.(event)
-
-        closeDialog()
-    }
-
-    useEffect(() => () => {
-        // On unmount of the component we
-        // cancel the close request
-        cancelCurrentCloseRequest()
-    }, [])
-
-    // This useEffect is to make sure that the internal state is in sync with the "open" property.
-    useEffect(() => {
-        if (open) {
-            openDialog()
-        } else {
-            closeDialog()
-        }
-    }, [open])
-
-    return (
-        <DialogBaseWithState
-            {...rest}
-            open={isOpen}
-            isModal={false}
-            baseEl="aside"
-            classPrefix="snackbar-dialog"
-            transitionElement="root"
-            a11yCloseText=""
-            buttonPosition="hidden"
-            className={classNames(className, 'snackbar-dialog--transition')}
-            windowClass={layout === 'column' && 'snackbar-dialog__window--column'}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-        >
-            {content}
-            {action ? (
-                <EbayDialogActions>
-                    {React.cloneElement(action, {
-                        onClick: handleAction
-                    })}
-                </EbayDialogActions>
-            ) : null}
-        </DialogBaseWithState>
-    )
-}

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

@@ -1,2 +0,0 @@
-export { EbaySnackbarDialog, type EbaySnackbarDialogProps } from './components/ebay-snackbar-dialog'
-export { EbaySnackbarDialogAction } from './components/ebay-snackbar-dialog-action'