@ebay/ui-core-react 7.3.0 → 7.3.2

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

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

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

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

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

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

package/src/ebay-signal/signal.tsx

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

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

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

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

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

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