@ebay/ui-core-react 7.3.2 → 7.3.4

package/src/ebay-pagination/helpers.ts

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

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

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

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

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

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

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

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

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

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

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