@ebay/ui-core-react 7.3.0 → 7.3.2

package/src/ebay-pagination/helpers.ts

@@ -0,0 +1,119 @@
+import {
+    MAX_PAGES,
+    MIN_PAGES,
+    MIN_VISIBLE_ITEMS,
+    TRAILING_SPACE_WITH_DOT,
+    LEADING_SPACE_WITH_DOT
+} from './const'
+import { ItemState, PaginationVariant } from './types'
+
+export function pageNumbersAround(
+    totalPages: number,
+    selectedPage: number,
+    maxVisiblePages: number = totalPages,
+    variant: PaginationVariant = null
+): ItemState[] {
+    const withDots = variant === 'show-last' || (variant === 'overflow' && totalPages > MAX_PAGES)
+    const hasLeadingDots = variant === 'overflow' && totalPages > MAX_PAGES
+    const visibleItems = Math.min(maxVisiblePages, totalPages)
+    const startIndexWithoutDots = Math.max(0, selectedPage - Math.ceil((visibleItems - 1) / 2))
+    const startIndexWithDots = visibleItems < MIN_VISIBLE_ITEMS ? selectedPage :
+        Math.max(0, selectedPage - Math.floor((visibleItems - 1) / 2))
+    const endIndex = (withDots ? startIndexWithDots : startIndexWithoutDots) + visibleItems
+    const closeToEnd = endIndex >= totalPages
+    const closeToFront = selectedPage <= MIN_VISIBLE_ITEMS
+
+    const visibleRangeWithDots = (start: number, end: number) => {
+        const items = visibleRange(totalPages, start, end)
+
+        if (visibleItems > 2) {
+            items[end - 2] = 'dots'
+            items[end - 1] = 'hidden'
+            items[totalPages - 1] = 'visible'
+        } else if (visibleItems > 1) {
+            items[end - 1] = 'dots'
+        }
+
+        return items
+    }
+
+    // middle show item[1] (...) and item[item.length - 1] (...)
+    const visibleRangeWithOverflowDots = (start: number, end: number) => {
+        // Following Dot
+        if (closeToFront) {
+            return visibleRangeWithDots(0, end)
+        // Leading Dot
+        } else if (closeToEnd) {
+            const items = visibleRange(totalPages, totalPages - TRAILING_SPACE_WITH_DOT, totalPages)
+            items[0] = 'visible'
+            items[1] = 'dots'
+            return items
+        }
+        // Middle case with Leading & Following Dots
+        const items = visibleRange(totalPages,
+            selectedPage - LEADING_SPACE_WITH_DOT,
+            selectedPage + LEADING_SPACE_WITH_DOT + 1
+        )
+        items[0] = 'visible'
+        items[1] = closeToFront ? 'visible' : 'dots'
+        items[totalPages - 2] = 'dots'
+        items[totalPages - 1] = 'visible'
+        return items
+    }
+
+    if (closeToEnd && totalPages <= MAX_PAGES) {
+        return visibleRange(totalPages, totalPages - visibleItems)
+    }
+
+    if (withDots) {
+        return hasLeadingDots ?
+            visibleRangeWithOverflowDots(startIndexWithDots, endIndex) :
+            visibleRangeWithDots(startIndexWithDots, endIndex)
+    }
+
+    return visibleRange(totalPages, startIndexWithoutDots, endIndex)
+}
+
+export function calcPageState(
+    selectedPage: number,
+    visiblePages: number,
+    totalPages: number,
+    variant: PaginationVariant = 'show-range'
+): ItemState[] {
+    if (selectedPage === -1) {
+        return []
+    }
+
+    const adjustedNumPages = variant === 'overflow' ? MAX_PAGES :
+        clamp(Math.min(totalPages, visiblePages), MIN_PAGES, MAX_PAGES)
+
+    return pageNumbersAround(totalPages, selectedPage - 1, adjustedNumPages, variant)
+}
+
+function clamp(n: number, min: number, max: number): number {
+    // eslint-disable-next-line no-nested-ternary
+    return n <= min ? min : n >= max ? max : n
+}
+
+function visibleRange(totalItems: number, start: number, end?: number): ItemState[] {
+    return Array<ItemState>(totalItems)
+        .fill('hidden')
+        .fill('visible', start, end)
+}
+
+/**
+ * Calculates the maximum width for an element within its container.
+ *
+ * Based on eBayUI Core Marko implementation.
+ * See https://github.com/eBay/ebayui-core/blob/v8.6.0/src/components/ebay-pagination/component.js#L119-L132
+ */
+export function getMaxWidth(el?: HTMLElement): number {
+    if (!el) {
+        return 0
+    }
+
+    el.style.width = '100vw'
+    const result = el.offsetWidth
+    el.style.width = null
+    return result
+}

package/src/ebay-pagination/index.ts

@@ -0,0 +1,3 @@
+export { default as EbayPagination } from './pagination'
+export { default as EbayPaginationItem } from './pagination-item'
+export type { PaginationVariant } from './types'

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

@@ -0,0 +1,126 @@
+import React, { FC, Key, ReactNode, RefObject, StyleHTMLAttributes, ComponentProps } from 'react'
+import { EbayIcon } from '../ebay-icon'
+import { withForwardRef } from '../common/component-utils'
+import classNames from 'classnames'
+import { EbayEventHandler } from '../common/event-utils/types'
+
+export type PaginationItemType = 'previous' | 'next' | 'page' | 'separator'
+type HtmlProps = Omit<ComponentProps<'button'>, 'type'> & ComponentProps<'a'> & ComponentProps<'li'>
+export type PaginationItemProps = HtmlProps & {
+    pageIndex?: number;
+    key?: Key;
+    type?: PaginationItemType;
+    current?: boolean;
+    disabled?: boolean;
+    href?: string;
+    hide?: boolean;
+    a11yPreviousText?: string;
+    a11yNextText?: string;
+    onPrevious?: EbayEventHandler;
+    onNext?: EbayEventHandler;
+    onSelect?: EbayEventHandler<{ value: string, index: number }>;
+    style?: StyleHTMLAttributes<HTMLButtonElement & HTMLAnchorElement>;
+    forwardedRef?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
+    children?: ReactNode;
+};
+
+const EbayPaginationItem: FC<PaginationItemProps> = ({
+    pageIndex = 0,
+    key,
+    current,
+    disabled,
+    type = 'page',
+    href,
+    hide,
+    children,
+    a11yPreviousText = 'Previous page',
+    a11yNextText = 'Next page',
+    onSelect,
+    onNext,
+    onPrevious,
+    className,
+    style,
+    forwardedRef,
+    ...rest
+}) => {
+    const handlePageNumber = (e) => {
+        onSelect(e, { value: e.currentTarget?.innerText || '', index: pageIndex })
+    }
+
+    const handleNextPage = (e) => {
+        if (!e.currentTarget.getAttribute('aria-disabled')) {
+            onNext(e)
+        }
+    }
+
+    const handlePreviousPage = (e) => {
+        if (!e.currentTarget.getAttribute('aria-disabled')) {
+            onPrevious(e)
+        }
+    }
+    const isAnchor = !!href
+    const ButtonOrAnchor = isAnchor ? 'a' : 'button'
+    const iconClassName = isAnchor ? 'icon-link' : 'icon-btn'
+    const arrowStyle = { ...style, minWidth: '40px' }
+    switch (type) {
+        case 'previous':
+            return (
+                <ButtonOrAnchor
+                    {...rest}
+                    ref={forwardedRef}
+                    aria-disabled={disabled ? 'true' : undefined}
+                    aria-label={a11yPreviousText}
+                    href={disabled ? undefined : href}
+                    className={classNames(iconClassName, 'pagination__previous')}
+                    style={arrowStyle}
+                    onClick={handlePreviousPage}
+                >
+                    <EbayIcon name="arrowLeft16" />
+                </ButtonOrAnchor >
+            )
+        case 'next':
+            return (
+                <ButtonOrAnchor
+                    {...rest}
+                    ref={forwardedRef}
+                    aria-disabled={disabled ? 'true' : undefined}
+                    aria-label={a11yNextText}
+                    href={disabled ? undefined : href}
+                    className={classNames(iconClassName, 'pagination__next')}
+                    style={arrowStyle}
+                    onClick={handleNextPage}
+                >
+                    <EbayIcon name="arrowRight16" />
+                </ButtonOrAnchor >
+            )
+        case 'separator':
+            return (
+                <span
+                    key={key}
+                    style={style}
+                    className="pagination__item"
+                    ref={forwardedRef}
+                    role="separator">
+                    {children}
+                </span>
+            )
+        default:
+            return (
+                <li {...rest} hidden={hide}>
+                    <ButtonOrAnchor
+                        ref={forwardedRef}
+                        aria-current={current ? 'page' : undefined}
+                        href={href}
+                        className="pagination__item"
+                        style={style}
+                        key={key}
+                        onClick={handlePageNumber}
+                    >
+                        {children}
+                    </ButtonOrAnchor>
+                </li >
+            )
+    }
+}
+
+export default withForwardRef(EbayPaginationItem)

package/src/ebay-pagination/pagination.tsx

@@ -0,0 +1,193 @@
+import React, {
+    Children, ComponentProps, FC, ReactElement,
+    cloneElement, useEffect, useRef, useState, createRef
+} from 'react'
+import {
+    EbayFakeMenuButton,
+    EbayFakeMenuButtonItem as Item
+} from '../ebay-fake-menu-button'
+import classNames from 'classnames'
+import { debounce } from '../common/debounce'
+import { calcPageState, getMaxWidth } from './helpers'
+import { filterBy } from '../common/component-utils'
+import { PaginationItemType } from './pagination-item'
+import { ItemState, PaginationVariant } from './types'
+import { EbayIcon } from '../ebay-icon'
+import { EbayEventHandler } from '../common/event-utils/types'
+
+export type PaginationProps = Omit<ComponentProps<'nav'>, 'onSelect'> & {
+    id?: string;
+    a11yPreviousText?: string;
+    a11yNextText?: string;
+    a11yCurrentText?: string;
+    onPrevious?: EbayEventHandler;
+    onNext?: EbayEventHandler;
+    onSelect?: EbayEventHandler<{ value: string, index: number }>;
+    variant?: PaginationVariant;
+    fluid?: boolean;
+};
+
+const EbayPagination: FC<PaginationProps> = ({
+    id = 'ebay-pagination',
+    className,
+    a11yCurrentText = 'Pagination - Current Page',
+    a11yPreviousText = 'Previous page',
+    a11yNextText = 'Next page',
+    variant = 'show-range',
+    fluid = false,
+    onPrevious = () => {},
+    onNext = () => {},
+    onSelect = () => {},
+    children,
+    ...rest
+}) => {
+    const paginationContainerRef = useRef<HTMLUnknownElement>(null)
+    const childPageRefs = useRef([])
+    childPageRefs.current = Children.map(children, createRef)
+    const totalPages = filterBy(children, ({ props }) => props.type === undefined || props.type === 'page').length
+    const itemWidthRef = useRef<number>(0)
+    const arrowWidthRef = useRef<number>(0)
+    const getNumOfVisiblePageItems = () => {
+        const pageArrowWidth = arrowWidthRef.current || childPageRefs.current[0]?.current?.offsetWidth
+        arrowWidthRef.current = pageArrowWidth // cache arrow width since it should be static
+
+        const pageItemWidth = itemWidthRef.current || childPageRefs.current[1]?.current?.offsetWidth
+        itemWidthRef.current = pageItemWidth // cache item width since it should be static
+
+        return pageItemWidth ?
+            Math.floor((getMaxWidth(paginationContainerRef.current) - pageArrowWidth * 2) / pageItemWidth) :
+            0
+    }
+
+    const [page, setPage] = useState<ItemState[]>([])
+    const [selectedIndex, setSelectedIndex] = useState<number>(0)
+    // selectedPageIndexFromDotMenu: override pageIndex on pagination with dot menu value
+    const updatePages = (selectedPageIndexFromDotMenu?: number) => {
+        const selectedPageIndex = selectedPageIndexFromDotMenu || childPageRefs.current.findIndex(pageRef =>
+            pageRef.current?.getAttribute('aria-current') === 'page'
+        )
+        const visiblePageItems = getNumOfVisiblePageItems()
+        const pageState = calcPageState(
+            selectedPageIndex,
+            visiblePageItems,
+            totalPages,
+            variant
+        )
+        setSelectedIndex(selectedPageIndex)
+        setPage(['hidden', ...pageState])
+    }
+
+    useEffect(() => {
+        const debouncedUpdate = debounce(updatePages, 16)
+
+        updatePages()
+        window.addEventListener('resize', () => debouncedUpdate())
+
+        return () => {
+            window.removeEventListener('resize', () => debouncedUpdate())
+        }
+    }, [children])
+
+    const createChildItems = (itemType: PaginationItemType): ReactElement[] => {
+        let pageIndex = 0
+        const firstDotItems : ReactElement[] = []
+        const secondDotItems : ReactElement[] = []
+        const allDotItems : ReactElement[] = []
+        const firstDot = page.indexOf('dots')
+        const lastDot = page.lastIndexOf('dots')
+
+        return Children.map(children, (item: ReactElement, index) => {
+            const { type = 'page', current, disabled, href, children: text } = item.props
+            const isDot = page[index] === 'dots'
+            const key = `${id}-item-${index}`
+            const hide = page[index] === 'hidden'
+            const isSeparator = isDot && type === 'page'
+            const newProps = {
+                current, disabled, href,
+                type: isSeparator ? 'separator' : type,
+                children: isDot ? <EbayIcon name="overflowHorizontal24" focusable={false} /> : text,
+                pageIndex: type === 'page' ? pageIndex++ : undefined,
+                key,
+                hide,
+                onPrevious, onNext, onSelect, a11yPreviousText, a11yNextText,
+                ref: childPageRefs.current[index]
+            }
+            // include hidden numbers & number of (...)itself
+            if ((hide || isDot) && type === 'page') {
+                const itemComponent = (
+                    <Item
+                        key={key}
+                        href={href}
+                        onClick={
+                            event => {
+                                if (!href) {
+                                    event.preventDefault()
+                                }
+                                const currentTarget = event.currentTarget as HTMLElement
+                                onSelect(event as any, { value: currentTarget?.innerText || '', index: pageIndex })
+                                updatePages(Number(currentTarget?.innerText))
+                            }
+                        }
+                    >
+                        {text}
+                    </Item>
+                )
+                if (firstDot === lastDot) {
+                    allDotItems.push(itemComponent)
+                }
+                if (selectedIndex - 2 > firstDot && index < selectedIndex) {
+                    firstDotItems.push(itemComponent)
+                }
+                if (selectedIndex + 2 < lastDot && index > selectedIndex) {
+                    secondDotItems.push(itemComponent)
+                }
+            }
+            if (itemType === 'page' && isDot && variant === 'overflow') {
+                let childComponent = allDotItems
+                if (firstDot !== lastDot) {
+                    childComponent = index === 2 ? firstDotItems : secondDotItems
+                }
+                return (
+                    <li key={key}>
+                        <span className="pagination__item" role="separator">
+                            <EbayFakeMenuButton
+                                a11yText="Menu"
+                                borderless
+                                variant="overflow"
+                                noToggleIcon
+                            >
+                                {childComponent}
+                            </EbayFakeMenuButton>
+                        </span>
+                    </li>
+                )
+            }
+            return itemType === type ? cloneElement(item, newProps) : null
+        })
+    }
+
+    const headingId = `${id}-pagination-heading`
+
+    return (
+        <nav
+            {...rest}
+            role="navigation"
+            className={classNames(className, 'pagination', { 'pagination--fluid': fluid })}
+            aria-labelledby={headingId}
+            ref={paginationContainerRef}
+        >
+            <span aria-live="polite" role="status">
+                <h2 className="clipped" id={headingId}>
+                    {a11yCurrentText}
+                </h2>
+            </span>
+            {createChildItems('previous')}
+            <ol className="pagination__items">
+                {createChildItems('page')}
+            </ol>
+            {createChildItems('next')}
+        </nav>
+    )
+}
+
+export default EbayPagination

package/src/ebay-pagination/types.ts

@@ -0,0 +1,2 @@
+export type ItemState = 'visible' | 'hidden' | 'dots'
+export type PaginationVariant = 'show-last' | 'show-range' | 'overflow'

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import { EbayDialogCloseButton, EbayDialogHeader } from '../../ebay-dialog-base'
+import { EbayPanelDialog } from '../index'
+
+jest.mock('../../common/random-id')
+
+const closeSpy = jest.fn()
+const openSpy = jest.fn()
+const openDialog = () =>
+    render(
+        <EbayPanelDialog
+            animated={false}
+            open
+            onOpen={openSpy}
+            onClose={closeSpy}
+            a11yCloseText="Close"
+        >
+            <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" />
+            <EbayDialogCloseButton>X</EbayDialogCloseButton>
+        </EbayPanelDialog>
+    )
+
+describe('<EbayPanelDialog>', () => {
+    it('should trigger onOpen when dialog appears', () => {
+        openDialog()
+        expect(openSpy).toHaveBeenCalled()
+    })
+
+    it('should have close button', () => {
+        openDialog()
+        expect(document.querySelector(`button.panel-dialog__close`)).toBeInTheDocument()
+    })
+
+    it('should focus on close button', () => {
+        openDialog()
+        expect(document.querySelector('button.panel-dialog__close')).toHaveFocus()
+    })
+
+    it('should trigger onClose when close button is clicked', () => {
+        openDialog()
+        fireEvent.click(document.querySelector(`button.panel-dialog__close`))
+        expect(closeSpy).toHaveBeenCalled()
+    })
+})

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

@@ -0,0 +1,124 @@
+import React, { useState } from 'react'
+import { EbayPanelDialog } from '../index'
+import { EbayDialogCloseButton, EbayDialogHeader } from '../../ebay-dialog-base'
+import { action } from '@storybook/addon-actions'
+
+const story: any = {
+    component: EbayPanelDialog,
+    title: 'dialogs/ebay-panel-dialog'
+}
+
+const textParagraph = (
+    <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. Duis aute irure dolor in reprehenderit in
+        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+)
+
+export const _Default = () => {
+    const [open, setOpen] = useState(false)
+    return (
+        <div>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayPanelDialog
+                open={open}
+                onOpen={() => action('onOpen')()}
+                onClose={() => {
+                    action('onClose')()
+                    setOpen(false)
+                }}
+                a11yCloseText="Close"
+            >
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                {textParagraph}
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayPanelDialog>
+        </div>
+    )
+}
+
+export const _AlwaysOpened = () => (
+    <div>
+        <p>Some outside content...</p>
+        <EbayPanelDialog open a11yCloseText="Close panel">
+            <EbayDialogHeader>Heading</EbayDialogHeader>
+            {textParagraph}
+            <p>
+                <a href="http://www.ebay.com">www.ebay.com</a>
+            </p>
+        </EbayPanelDialog>
+    </div>
+)
+
+export const _FromRight = () => (
+    <div>
+        <p>Some outside content...</p>
+        <EbayPanelDialog position="end" open a11yCloseText="Close">
+            <EbayDialogHeader />
+            {textParagraph}
+        </EbayPanelDialog>
+    </div>
+)
+
+export const _CustomCloseButton = () => (
+    <div>
+        <p>Some outside content...</p>
+        <EbayPanelDialog open a11yCloseText="Close">
+            <EbayDialogHeader>Heading</EbayDialogHeader>
+            {textParagraph}
+            <EbayDialogCloseButton>X</EbayDialogCloseButton>
+        </EbayPanelDialog>
+    </div>
+)
+
+export const _WithAnimation = () => {
+    const [open, setOpen] = useState(false)
+    const close = () => setOpen(false)
+
+    return (
+        <>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayPanelDialog animated open={open} onClose={close} a11yCloseText="Close">
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                {textParagraph}
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayPanelDialog>
+        </>
+    )
+}
+
+export const _WithAnimationFromRight = () => {
+    const [open, setOpen] = useState(false)
+    const close = () => setOpen(false)
+
+    return (
+        <>
+            <button className="btn btn--secondary" onClick={() => setOpen(!open)}>
+                Open Dialog
+            </button>
+            <p>Some outside content...</p>
+            <EbayPanelDialog animated open={open} onClose={close} position="end" a11yCloseText="Close">
+                <EbayDialogHeader>Heading</EbayDialogHeader>
+                {textParagraph}
+                <p>
+                    <a href="http://www.ebay.com">www.ebay.com</a>
+                </p>
+            </EbayPanelDialog>
+        </>
+    )
+}
+
+export default story

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

@@ -0,0 +1 @@
+export { default as EbayPanelDialog } from './panel-dialog'

package/src/ebay-panel-dialog/panel-dialog.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import { DialogBaseProps, DialogBaseWithState } from '../ebay-dialog-base'
+
+const classPrefix = 'panel-dialog'
+
+type Position = 'start' | 'end'
+
+export interface Props<T = any> extends DialogBaseProps<T> {
+  open?: boolean;
+  animated?: boolean;
+  position?: Position;
+  onClose?: () => void;
+}
+
+const EbayPanelDialog: FC<Props> = ({
+    open,
+    animated,
+    position = 'start',
+    onClose = () => {},
+    className,
+    ...rest
+}) => (
+    <DialogBaseWithState
+        {...rest}
+        aria-label="Infotip"
+        classPrefix={classPrefix}
+        buttonPosition="right"
+        onCloseBtnClick={onClose}
+        onBackgroundClick={onClose}
+        animated={animated}
+        className={classNames(className, { [`${classPrefix}--mask-fade-slow`]: animated })}
+        windowClass={classNames(`${classPrefix}__window--slide`, {
+            [`${classPrefix}__window--end`]: position === 'end'
+        })}
+        open={open}
+    />
+)
+
+export default EbayPanelDialog