@ebay/ui-core-react 7.3.2 → 7.3.3

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

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

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

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

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

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

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

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

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