@ebay/ui-core-react 7.3.1 → 7.3.2

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

@@ -0,0 +1,160 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { Meta } from '@storybook/react'
+import { EbayIcon } from '../../ebay-icon'
+import { EbayTab, EbayTabPanel, EbayTabs } from '../../ebay-tabs'
+import { EbayMenu, EbayMenuItem as Item, EbayMenuSeparator as Separator } from '../index'
+
+const story = {
+    component: EbayMenu,
+    title: 'building blocks/ebay-menu'
+} satisfies Meta<typeof EbayMenu>
+
+export const Default = () => (
+    <>
+        <EbayMenu onClick={action('click')} onKeyDown={action('key down')}>
+            <Item>Item 1 that has very long text</Item>
+            <Item>Item 2</Item>
+            <Item>Item 3</Item>
+        </EbayMenu>
+    </>
+)
+
+export const Radio = () => (
+    <>
+        <EbayTabs>
+            <EbayTab>Menu.checked</EbayTab>
+            <EbayTabPanel>
+                <EbayMenu
+                    type="radio"
+                    checked={1}
+                    onKeyDown={action('key down')}
+                    // Test TS complier errors here:
+                    onChange={(e, { index, checked }) => action('change')(e, { index, checked })}
+                    onSelect={(e, { index, checked }) => action('select')(e, { index, checked })}
+                >
+                    <Item>item 0</Item>
+                    <Item>Prechecked on menu level</Item>
+                    <Item>item 2</Item>
+                </EbayMenu>
+            </EbayTabPanel>
+
+            <EbayTab>Item.checked</EbayTab>
+            <EbayTabPanel>
+                <EbayMenu
+                    type="radio"
+                    onKeyDown={action('key down')}
+                    onChange={action('change')}
+                    onSelect={action('select')}
+                >
+                    <Item checked>Prechecked on item level</Item>
+                    <Item>item 1</Item>
+                    <Item>item 2</Item>
+                </EbayMenu>
+            </EbayTabPanel>
+
+            <EbayTab>Menu.checked+Item.checked</EbayTab>
+            <EbayTabPanel>
+                <EbayMenu
+                    type="radio"
+                    checked={1}
+                    onKeyDown={action('key down')}
+                    onChange={action('change')}
+                    onSelect={action('select')}
+                >
+                    <Item checked>Prechecked on item level</Item>
+                    <Item>Prechecked on menu level</Item>
+                    <Item>item 2</Item>
+                </EbayMenu>
+            </EbayTabPanel>
+        </EbayTabs>
+    </>
+)
+
+export const Checkbox = () => (
+    <>
+        <EbayMenu
+            type="checkbox"
+            onKeyDown={action('key down')}
+            onChange={action('change')}
+            onSelect={action('select')}
+        >
+            <Item value="item 1" checked>
+                item 1
+            </Item>
+            <Item value="item 2">item 2</Item>
+            <Item value="item 3" checked>
+                item 3
+            </Item>
+        </EbayMenu>
+    </>
+)
+
+export const WithSeparator = () => (
+    <>
+        <EbayMenu>
+            <Item>item 1 that has very long text</Item>
+            <Item>Item 2</Item>
+            <Separator />
+            <Item>Item 3</Item>
+            <Item>Item 4</Item>
+            <Item>Item 5</Item>
+        </EbayMenu>
+    </>
+)
+
+export const WithDisabledItem = () => (
+    <>
+        <EbayMenu>
+            <Item>item 1 that has very long text</Item>
+            <Item disabled>Item 2</Item>
+            <Item>Item 3</Item>
+        </EbayMenu>
+    </>
+)
+
+export const WithBadges = () => (
+    <>
+        <EbayMenu>
+            <Item badgeNumber={5} badgeAriaLabel="item 1 (5 unread items)">
+                item 1
+            </Item>
+            <Item badgeNumber={23} aria-label="item 2 (23 unread items)">
+                item 2
+            </Item>
+            <Item>item 3</Item>
+        </EbayMenu>
+    </>
+)
+
+export const WithIcons = () => (
+    <>
+        <EbayMenu>
+            <Item>
+                <EbayIcon name="confirmation16" style={{ marginRight: '8px' }} /> Confirmed
+            </Item>
+            <Item value="item 2">
+                <EbayIcon name="attention16" style={{ marginRight: '8px' }} /> Not yet confirmed
+            </Item>
+            <Item value="item 3">
+                <EbayIcon name="attention16" style={{ marginRight: '8px' }} /> Not yet confirmed
+            </Item>
+        </EbayMenu>
+    </>
+)
+
+export const DivContainer = {
+    render: () => (
+        <>
+            <EbayMenu baseEl="div">
+                <Item>Item 1 that has very long text</Item>
+                <Item>Item 2</Item>
+                <Item>Item 3</Item>
+            </EbayMenu>
+        </>
+    ),
+
+    name: 'Div container'
+}
+
+export default story

package/src/ebay-menu/index.ts

@@ -0,0 +1,11 @@
+export { default as EbayMenu } from './menu'
+export { default as EbayMenuItem, type MenuItemProps } from './menu-item'
+export { default as EbayMenuSeparator } from './menu-item-separator'
+export type {
+    EbayMenuType,
+    EbayMenuPriority,
+    EbayMenuKeyDownEventHandler,
+    EbayMenuChangeEventHandler,
+    EbayMenuSelectEventHandler,
+    EbayMenuProps
+} from './types'

package/src/ebay-menu/menu-item-separator.tsx

@@ -0,0 +1,17 @@
+import React, { ComponentProps, FC } from 'react'
+import classNames from 'classnames'
+
+type Props = ComponentProps<'hr'>
+
+const EbayMenuItemSeparator: FC<Props> = ({
+    className,
+    ...rest
+}) => (
+    <hr
+        {...rest}
+        className={classNames(className, 'menu__separator')}
+        role="separator"
+    />
+)
+
+export default EbayMenuItemSeparator

package/src/ebay-menu/menu-item.tsx

@@ -0,0 +1,69 @@
+import React, { ComponentProps, FC, useEffect, useRef } from 'react'
+import classNames from 'classnames'
+import { EbayBadge } from '../ebay-badge'
+import { EbayIcon } from '../ebay-icon'
+import { EbayMenuType } from './types'
+
+export type MenuItemProps = ComponentProps<'div'> & {
+    type?: EbayMenuType;
+    focused?: boolean;
+    tabIndex?: number;
+    checked?: boolean;
+    value?: string;
+    disabled?: boolean;
+    badgeNumber?: number;
+    badgeAriaLabel?: string;
+}
+
+const EbayMenuItem: FC<MenuItemProps> = ({
+    className,
+    checked,
+    type,
+    focused = false,
+    tabIndex,
+    disabled,
+    badgeNumber,
+    badgeAriaLabel,
+    children,
+    ...rest
+}) => {
+    const ref = useRef(null)
+    const hasBadge = badgeNumber !== undefined
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current.focus()
+        }
+    }, [ref, focused])
+
+    const checkable: EbayMenuType[] = ['radio', 'checkbox']
+
+    return (
+        <div
+            aria-label={badgeAriaLabel}
+            {...rest}
+            ref={ref}
+            className={classNames(className, 'menu__item', hasBadge && 'menu__item--badged')}
+            role={roleFromType(type)}
+            aria-checked={checkable.includes(type) ? checked : undefined}
+            aria-disabled={disabled}
+            tabIndex={focused ? 0 : tabIndex}
+        >
+            <span aria-hidden={hasBadge}>
+                {children}
+                {hasBadge && <EbayBadge type="menu" number={badgeNumber} />}
+            </span>
+            <EbayIcon name="tick16" />
+        </div>
+    )
+}
+
+function roleFromType(type: EbayMenuType) {
+    const roles: Record<EbayMenuType, string> = {
+        radio: 'menuitemradio',
+        checkbox: 'menuitemcheckbox'
+    }
+    return roles[type] || 'menuitem'
+}
+
+export default EbayMenuItem

package/src/ebay-menu/menu.tsx

@@ -0,0 +1,174 @@
+import React, {
+    Children,
+    cloneElement,
+    FC,
+    KeyboardEvent,
+    MouseEvent,
+    ReactElement,
+    useEffect,
+    useState
+} from 'react'
+import classNames from 'classnames'
+import useRovingIndex from '../common/event-utils/use-roving-index'
+import { isActionKey } from '../common/event-utils'
+import { withForwardRef } from '../common/component-utils'
+import EbayMenuItem, { MenuItemProps } from './menu-item'
+import { Key } from '../common/event-utils/types'
+import type { EbayMenuProps } from './types'
+
+const EbayMenu: FC<EbayMenuProps> = ({
+    baseEl: Container = 'span',
+    type,
+    priority = 'secondary',
+    checked,
+    className,
+    autofocus,
+    onClick = () => {},
+    onKeyDown = () => {},
+    onChange = () => {},
+    onSelect = () => {},
+    forwardedRef,
+    children,
+    ...rest
+}) => {
+    const childrenArray = Children.toArray(children) as ReactElement[]
+    const [focusedIndex, setFocusedIndex] = useRovingIndex(children, EbayMenuItem, autofocus === true ? 0 : undefined)
+    const [checkedIndexes, setCheckedIndexes] = useState<boolean[]>(childrenArray.map(() => false))
+
+    const valuesFromChecked = (indexes: boolean[]): string[] =>
+        childrenArray.reduce((values, item, i) =>
+            indexes[i] ? [...values, item.props.value] : values, [])
+
+    const indexesFromChecked = (indexes: boolean[]): number[] =>
+        indexes.reduce((all, value, i) => value ? [...all, i] : all, [])
+
+    const eventProps = (index: number, indexes: boolean[]) => ({
+        index,
+        checked: indexesFromChecked(indexes)
+    })
+    const checkboxEventProps = (index: number, indexes: boolean[]) => ({
+        ...eventProps(index, indexes),
+        indexes: indexesFromChecked(indexes),
+        checkedValues: valuesFromChecked(indexes)
+    })
+
+    const updateIndex = (index: number, value: boolean, resetOthers = false): boolean[] | void => {
+        let anyChanges = false
+        const newValues = checkedIndexes.map((indexChecked, i) => {
+            const defaultValue = resetOthers ? false : indexChecked
+            if (index === i) {
+                if (indexChecked !== value) {
+                    anyChanges = true
+                }
+                return value
+            }
+            return defaultValue
+        })
+        if (anyChanges) {
+            setCheckedIndexes(newValues)
+            return newValues
+        }
+    }
+    const selectIndex = (index: number): boolean[] | void => {
+        switch (type) {
+            case 'radio':
+                return updateIndex(index, true, true)
+            case 'checkbox':
+                return updateIndex(index, !checkedIndexes[index], false)
+            default:
+                return checkedIndexes.map((_, i) => i === index)
+        }
+    }
+
+    useEffect(() => {
+        if (type === 'radio') {
+            if (checked === undefined) {
+                const checkedIndex = childrenArray.findIndex(child => child.props.checked)
+                if (checkedIndex > -1) {
+                    selectIndex(checkedIndex)
+                }
+            } else {
+                selectIndex(checked)
+            }
+        } else if (type === 'checkbox') {
+            setCheckedIndexes(childrenArray.map(child => Boolean(child.props.checked)))
+        }
+    }, [])
+
+    const handleChange = (
+        e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>,
+        index: number,
+        newValues: boolean[]
+    ) => {
+        switch (type) {
+            case 'radio':
+            case 'checkbox':
+                return onChange(e, checkboxEventProps(index, newValues))
+            default:
+                return onSelect(e, eventProps(index, newValues))
+        }
+    }
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLElement>, index: number) => {
+        let newValues
+        if (isActionKey(e.key as Key)) {
+            newValues = selectIndex(index)
+            if (newValues) {
+                handleChange(e, index, newValues)
+            }
+        }
+        switch (type) {
+            case 'radio':
+            case 'checkbox':
+                return onKeyDown(e, checkboxEventProps(index, newValues || checkedIndexes))
+            default:
+                return onKeyDown(e, eventProps(index, newValues || checkedIndexes))
+        }
+    }
+
+    const handleClick = (e: MouseEvent<HTMLElement>, index: number) => {
+        setFocusedIndex(index)
+        const newValues = selectIndex(index)
+        if (newValues) {
+            handleChange(e, index, newValues)
+        }
+    }
+
+    return (
+        <Container {...rest} className={classNames(className, 'menu')}>
+            <div className="menu__items" role="menu" ref={forwardedRef}>
+                {childrenArray.map((child: ReactElement, i) => {
+                    const {
+                        onClick: onItemClick = () => {},
+                        onFocus: onItemFocus = () => {},
+                        onKeyDown: onItemKeyDown = () => {},
+                        ...itemRest
+                    }: MenuItemProps = child.props
+
+                    return cloneElement(child, {
+                        ...itemRest,
+                        type,
+                        focused: i === focusedIndex,
+                        tabIndex: focusedIndex === undefined ? 0 : -1,
+                        checked: checkedIndexes[i],
+                        onFocus: e => {
+                            setFocusedIndex(i)
+                            onItemFocus(e)
+                        },
+                        onClick: e => {
+                            handleClick(e, i)
+                            onItemClick(e)
+                            onClick(e)
+                        },
+                        onKeyDown: e => {
+                            handleKeyDown(e, i)
+                            onItemKeyDown(e)
+                        }
+                    } as MenuItemProps)
+                })}
+            </div>
+        </Container>
+    )
+}
+
+export default withForwardRef(EbayMenu)

package/src/ebay-menu/types.ts

@@ -0,0 +1,30 @@
+import { ComponentProps, Ref } from 'react'
+import { EbayEventHandler, EbayKeyboardEventHandler } from '../common/event-utils/types'
+
+export type EbayMenuType = 'radio' | 'checkbox'
+export type EbayMenuPriority = 'primary' | 'secondary' | 'none'
+
+type ContainerDivProps = Omit<ComponentProps<'div'>, 'onKeyDown' | 'onChange' | 'onSelect'>
+type ContainerSpanProps = Omit<ComponentProps<'span'>, 'onKeyDown' | 'onChange' | 'onSelect'>
+type SelectProps = {
+    index: number;
+    checked: number[];
+}
+type ChangeProps = SelectProps & {
+    indexes: number[];
+    checkedValues: string[];
+}
+export type EbayMenuKeyDownEventHandler = EbayKeyboardEventHandler<HTMLElement, SelectProps | ChangeProps>
+export type EbayMenuChangeEventHandler = EbayEventHandler<HTMLElement, ChangeProps>
+export type EbayMenuSelectEventHandler = EbayEventHandler<HTMLElement, SelectProps>
+export type EbayMenuProps = ContainerDivProps & ContainerSpanProps & {
+    type?: EbayMenuType;
+    priority?: EbayMenuPriority;
+    checked?: number;
+    autofocus?: boolean;
+    baseEl?: 'div' | 'span',
+    onKeyDown?: EbayMenuKeyDownEventHandler;
+    onChange?: EbayMenuChangeEventHandler;
+    onSelect?: EbayMenuSelectEventHandler;
+    forwardedRef?: Ref<HTMLDivElement>;
+}

package/src/ebay-menu-button/__tests__/__snapshots__/render.spec.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EbayMenuButton rendering Default should render correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering Disabled should render correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering Priorities should render correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering Priorities should render correctly 2`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering Variants should render correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering Variants should render correctly 2`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering Variants should render correctly 3`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--16"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-overflow-vertical-16"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering WithIcon should render correctly 1`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--16"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-settings-16"
+  />
+</svg>
+`;
+
+exports[`EbayMenuButton rendering WithIcon should render correctly 2`] = `
+<svg
+  aria-hidden="true"
+  class="icon icon--12"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <use
+    xlink:href="#icon-chevron-down-12"
+  />
+</svg>
+`;

package/src/ebay-menu-button/__tests__/index.spec.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { EbayMenuButton, EbayMenuButtonItem } from '../index'
+
+const spy = jest.fn()
+
+describe('<EbayMenuButton>', () => {
+    describe('on button click', () => {
+        it('should fire onExpand event', () => {
+            const wrapper = render(
+                <EbayMenuButton onExpand={spy}>
+                    <EbayMenuButtonItem />
+                </EbayMenuButton>
+            )
+            fireEvent.click(wrapper.container.querySelector('button'))
+
+            expect(spy).toHaveBeenCalled()
+        })
+        it('should fire onCollapse event', () => {
+            const wrapper = render(
+                <EbayMenuButton onCollapse={spy}>
+                    <EbayMenuButtonItem />
+                </EbayMenuButton>
+            )
+
+            const button = wrapper.container.querySelector('button')
+            fireEvent.click(button)
+            fireEvent.click(button)
+
+            expect(spy).toHaveBeenCalled()
+        })
+    })
+
+    describe('on menu item click', () => {
+        it('should fire onSelect event', () => {
+            const wrapper = render(
+                <EbayMenuButton onSelect={spy}>
+                    <EbayMenuButtonItem value="first" />
+                    <EbayMenuButtonItem value="second" />
+                </EbayMenuButton>
+            )
+
+            const button = wrapper.container.querySelector('button')
+            fireEvent.click(button)
+            const item = screen.getAllByRole('menuitem')[1]
+            fireEvent.click(item)
+
+            const expectedEventProps = {
+                index: 1,
+                checked: [1]
+            }
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), expectedEventProps)
+        })
+    })
+
+    describe('type="radio"', () => {
+        it('should fire onChange event', () => {
+            const wrapper = render(
+                <EbayMenuButton type="radio" onChange={spy}>
+                    <EbayMenuButtonItem value="first" />
+                    <EbayMenuButtonItem value="second" />
+                </EbayMenuButton>
+            )
+
+            const button = wrapper.container.querySelector('button')
+            fireEvent.click(button)
+            const item = screen.getAllByRole('menuitemradio')[1]
+            fireEvent.click(item)
+
+            const expectedEventProps = {
+                index: 1,
+                indexes: [1],
+                checked: [1],
+                checkedValues: ['second']
+            }
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), expectedEventProps)
+        })
+    })
+
+    describe('type="checkbox"', () => {
+        it('should fire onChange event', () => {
+            const wrapper = render(
+                <EbayMenuButton type="checkbox" onChange={spy}>
+                    <EbayMenuButtonItem value="first" />
+                    <EbayMenuButtonItem value="second" />
+                </EbayMenuButton>
+            )
+
+            const button = wrapper.container.querySelector('button')
+            fireEvent.click(button)
+            const item = screen.getAllByRole('menuitemcheckbox')[1]
+            fireEvent.click(item)
+
+            const expectedEventProps = {
+                index: 1,
+                indexes: [1],
+                checked: [1],
+                checkedValues: ['second']
+            }
+
+            expect(spy).toHaveBeenCalledWith(expect.any(Object), expectedEventProps)
+        })
+    })
+})