@ebay/ui-core-react 7.3.2 → 7.3.3

package/src/ebay-carousel/carousel-control-button.tsx

@@ -1,45 +0,0 @@
-import React, { FC, SyntheticEvent } from 'react'
-import classNames from 'classnames'
-import { EbayIcon, Icon } from '../ebay-icon'
-import { CarouselControlType, MovementDirection } from './types'
-
-type CarouselControlProps = {
-    label?: string;
-    hidden?: boolean;
-    type: CarouselControlType;
-    disabled?: boolean;
-    onClick: (event: SyntheticEvent<HTMLButtonElement>, { direction }) => void;
-}
-
-const icon: Record<CarouselControlType, Icon> = {
-    prev: 'chevronLeft12',
-    next: 'chevronRight12'
-}
-
-const typeToDirection: Record<CarouselControlType, MovementDirection> = {
-    prev: 'LEFT',
-    next: 'RIGHT'
-}
-
-const CarouselControlButton: FC<CarouselControlProps> = ({ type, label, hidden, disabled, onClick }) => {
-    const handleOnClick = (event: SyntheticEvent<HTMLButtonElement>) => {
-        onClick(event, { direction: typeToDirection[type] })
-    }
-
-    return (
-        <button
-            className={classNames('carousel__control', `carousel__control--${type}`)}
-            aria-label={label}
-            aria-disabled={disabled}
-            disabled={disabled}
-            onClick={handleOnClick}>
-            <EbayIcon
-                className={classNames('icon', `icon--carousel-${type}`)}
-                focusable={false}
-                name={icon[type]}
-                aria-hidden={hidden} />
-        </button>
-    )
-}
-
-export default CarouselControlButton

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

@@ -1,52 +0,0 @@
-import React, {
-    ComponentProps,
-    FC,
-    RefObject,
-    useImperativeHandle,
-    useRef,
-    useState
-} from 'react'
-import { withForwardRef } from '../common/component-utils'
-import { getRelativeRects } from './helpers'
-import { ListItemRef } from './types'
-
-type ListProps = ComponentProps<'li'>
-type CarouselItemProps = ListProps & {
-    slideWidth?: number;
-    offset?: number;
-    className?: string;
-    forwardedRef?: RefObject<ListItemRef>
-};
-
-
-const EbayCarouselItem: FC<CarouselItemProps> = ({ slideWidth, offset, forwardedRef, children, ...rest }) => {
-    const itemRef = useRef()
-    const [isVisible, setIsVisible] = useState(false)
-
-    useImperativeHandle(forwardedRef, () => {
-        if (!itemRef.current) return
-
-        const { left, right } = getRelativeRects(itemRef.current)
-        const fullyVisible = left === undefined ||
-            (left - offset >= -0.01 && right - offset <= slideWidth + 0.01)
-
-        setIsVisible(fullyVisible)
-
-        return {
-            left,
-            right,
-            fullyVisible
-        }
-    }, [slideWidth, offset])
-
-    return (
-        <li
-            ref={itemRef}
-            aria-hidden={!isVisible}
-            {...rest}>
-            {children}
-        </li>
-    )
-}
-
-export default withForwardRef(EbayCarouselItem)

package/src/ebay-carousel/carousel-list.tsx

@@ -1,102 +0,0 @@
-import React, {
-    FC, ReactNode,
-    Children, useEffect,
-    useRef, RefObject, useCallback, useState
-} from 'react'
-import classNames from 'classnames'
-import { isNativeScrolling, alterChildren, getClosestIndex } from './helpers'
-import { scrollTransition } from './scroll-to-transition'
-import { ListItemRef } from './types'
-
-type CarouselListProps = {
-    gap?: number;
-    itemsPerSlide: number;
-    slideWidth: number;
-    offset: number;
-    activeIndex: number;
-    nextControlDisabled?: boolean;
-    className?: string;
-    itemsRef?: RefObject<Array<ListItemRef | null>>;
-    children: ReactNode;
-    onSetActiveIndex: (index: number) => void
-    onScroll?: ({ index }) => void;
-};
-
-const CarouselList: FC<CarouselListProps> = ({
-    gap = 16,
-    itemsPerSlide,
-    slideWidth,
-    offset,
-    activeIndex,
-    nextControlDisabled,
-    className,
-    itemsRef,
-    children,
-    onSetActiveIndex,
-    onScroll
-}) => {
-    const [translateLeft, setTranslateLeft] = useState(0)
-    const [skipScrolling, setSkipScrolling] = useState(false)
-    const [scrollTransitioning, setScrollTransitioning] = useState(false)
-    const listRef = useRef<HTMLUListElement | null>(null)
-    const scrollTimeout = useRef(null)
-
-    useEffect(() => {
-        const size = Children.count(children)
-
-        if (!size || !listRef.current) return
-
-        if (skipScrolling) {
-            setSkipScrolling(false)
-
-            return
-        }
-
-        const list = listRef.current
-        const isNativeScroll = isNativeScrolling(list)
-
-        if (isNativeScroll) {
-            setScrollTransitioning(true)
-            scrollTransition(list, offset, () => setScrollTransitioning(false))
-        } else {
-            setTranslateLeft(offset)
-        }
-    }, [offset])
-
-    const handleFinishScrolling = useCallback(() => {
-        const scrollLeft = listRef.current.scrollLeft
-        const closest = getClosestIndex(scrollLeft, itemsRef.current, slideWidth, itemsPerSlide, gap)
-        if (closest !== activeIndex) {
-            setSkipScrolling(true)
-            onSetActiveIndex(closest)
-            onScroll({ index: closest })
-        }
-    }, [listRef.current, itemsRef.current, slideWidth, activeIndex, onSetActiveIndex])
-
-    const handleScroll = () => {
-        if (scrollTimeout.current) {
-            clearTimeout(scrollTimeout.current)
-        }
-        scrollTimeout.current = setTimeout(() => {
-            if (!scrollTransitioning) {
-                handleFinishScrolling()
-            }
-        }, 640)
-    }
-
-    return (
-        <div className={classNames('carousel__viewport', {
-            'carousel__viewport--mask': !nextControlDisabled
-        }, className)}>
-            <ul
-                className="carousel__list"
-                ref={listRef}
-                onScroll={handleScroll}
-                style={{ transform: `translate3d(${-translateLeft}px, 0, 0)` }}>
-                {alterChildren(children, itemsRef, itemsPerSlide, slideWidth, offset, gap)}
-            </ul>
-        </div>
-    )
-}
-
-export default CarouselList

package/src/ebay-carousel/carousel.tsx

@@ -1,137 +0,0 @@
-import React, { Children, ComponentProps, FC, SyntheticEvent, useEffect, useRef, useState } from 'react'
-import classNames from 'classnames'
-import CarouselControlButton from './carousel-control-button'
-import CarouselList from './carousel-list'
-import { ListItemRef } from './types'
-import { getMaxOffset, getNextIndex, getOffset, getSlide } from './helpers'
-import { debounce } from '../common/debounce'
-
-export type CarouselProps = ComponentProps<'div'> & {
-    className?: string;
-    gap?: number;
-    index?: number; // Scroll to index slide
-    imageTreatment?: boolean; // Image slide?
-    itemsPerSlide?: number; // number of slides to be displayed
-    a11yPreviousText?: string;
-    a11yNextText?: string;
-    onNext?: (event: React.SyntheticEvent) => void;
-    onPrevious?: (event: React.SyntheticEvent) => void;
-    onScroll?: ({ index }) => void;
-    onSlide?: ({ slide }) => void;
-    onPlay?: (event: React.SyntheticEvent) => void
-    onPause?: (event: React.SyntheticEvent) => void
-};
-
-// TO-DO:
-// Image slides
-// Auto play (+ onPlay/onPause callbacks)
-
-const EbayCarousel: FC<CarouselProps> = ({
-    gap = 16,
-    index = 0,
-    itemsPerSlide: _itemsPerSlide,
-    a11yPreviousText,
-    a11yNextText,
-    onScroll = () => {},
-    onNext = () => {},
-    onPrevious = () => {},
-    onSlide = () => {},
-    className,
-    children,
-    ...rest
-}) => {
-    const [activeIndex, setActiveIndex] = useState(index)
-    const [slideWidth, setSlideWidth] = useState(0)
-    const [offset, setOffset] = useState(0)
-    const containerRef = useRef<HTMLDivElement | null>(null)
-    const itemsRef = useRef<Array<ListItemRef | null>>([])
-    const itemCount = Children.count(children)
-    const itemsPerSlide = Math.floor(_itemsPerSlide) || undefined
-    const isSingleSlide = itemCount <= itemsPerSlide
-    const prevControlDisabled = isSingleSlide || offset === 0
-    const nextControlDisabled =
-        isSingleSlide || (offset === getMaxOffset(itemsRef.current, slideWidth))
-
-    const handleResize = () => {
-        if (!containerRef.current) return
-
-        const { width: containerWidth } = containerRef.current.getBoundingClientRect()
-        setSlideWidth(containerWidth)
-    }
-
-    useEffect(() => {
-        window.addEventListener('resize', debounce(handleResize, 16))
-
-        return () => {
-            window.removeEventListener('resize', debounce(handleResize, 16))
-        }
-    }, [])
-
-    useEffect(() => {
-        setOffset(getOffset(itemsRef.current, activeIndex, slideWidth))
-    }, [activeIndex, slideWidth])
-
-    useEffect(() => {
-        if (index >= 0 && index <= itemCount - 1) {
-            setActiveIndex(index)
-        }
-    }, [index])
-
-    useEffect(() => {
-        itemsRef.current = itemsRef.current.splice(0, itemCount)
-    }, [children])
-
-    useEffect(() => {
-        const { width: containerWidth } = containerRef.current.getBoundingClientRect()
-        setSlideWidth(containerWidth)
-    }, [containerRef.current])
-
-    const handleControlClick = (event: SyntheticEvent<HTMLButtonElement>, { direction }) => {
-        const nextIndex = getNextIndex(direction, activeIndex, itemsRef.current, slideWidth, itemsPerSlide)
-        const slide = getSlide(activeIndex, itemsPerSlide, nextIndex)
-        setActiveIndex(nextIndex)
-        if (direction === 'LEFT') {
-            onPrevious(event)
-        } else {
-            onNext(event)
-        }
-        onSlide({ slide })
-    }
-
-    return (
-        <div
-            className={classNames('carousel', className,
-                {
-                    'carousel--slides': itemsPerSlide,
-                    'carousel--peek': itemsPerSlide % 1 === 0
-                })}
-            {...rest}>
-            <div ref={containerRef} className="carousel__container">
-                <CarouselControlButton
-                    label={a11yPreviousText}
-                    type="prev"
-                    disabled={prevControlDisabled}
-                    onClick={handleControlClick} />
-                <CarouselList
-                    itemsRef={itemsRef}
-                    offset={offset}
-                    gap={gap}
-                    itemsPerSlide={itemsPerSlide}
-                    nextControlDisabled={nextControlDisabled}
-                    activeIndex={activeIndex}
-                    onScroll={onScroll}
-                    onSetActiveIndex={setActiveIndex}
-                    slideWidth={slideWidth}>
-                    {children}
-                </CarouselList>
-                <CarouselControlButton
-                    type="next"
-                    label={a11yNextText}
-                    disabled={nextControlDisabled}
-                    onClick={handleControlClick} />
-            </div>
-        </div>
-    )
-}
-
-export default EbayCarousel

package/src/ebay-carousel/helpers.ts

@@ -1,159 +0,0 @@
-import { Children, cloneElement, ReactElement, ReactNode, RefObject } from 'react'
-import { ListItemRef, MovementDirection, RelativeRect } from './types'
-
-export function getRelativeRects(el: Element): RelativeRect {
-    const parent = el.parentElement
-    const currentLeft = parent
-        ? parent.firstElementChild.getBoundingClientRect().left
-        : 0
-    const { left, right } = el.getBoundingClientRect()
-
-    return {
-        left: left - currentLeft,
-        right: right - currentLeft
-    }
-}
-
-export const isNativeScrolling = (el: Element): boolean => getComputedStyle(el).overflowX !== 'visible'
-
-export const getMaxOffset = (items: ListItemRef[], slideWidth: number): number => {
-    if (!items.length) {
-        return 0
-    }
-
-    const lastEl = items[items.length - 1]
-    return Math.max(lastEl.right - slideWidth, 0) || 0
-}
-
-export const getOffset = (items: ListItemRef[], index: number, slideWidth: number): number => {
-    if (!items.length) {
-        return 0
-    }
-
-    return Math.min(items[index].left, getMaxOffset(items, slideWidth)) || 0
-}
-
-export const alterChildren = (
-    children: ReactNode,
-    itemsRef: RefObject<Array<ListItemRef | null>>,
-    itemsPerSlide?: number,
-    slideWidth?: number,
-    offset?: number,
-    gap?: number): ReactElement[] => Children.map(children, (item: ReactElement, index) => {
-    const { style = {} } = item.props
-    let itemWidth
-
-    if (itemsPerSlide) {
-        const itemsInSlide = itemsPerSlide + (itemsPerSlide % 1)
-        itemWidth = `calc(${100 / itemsInSlide}% - ${((itemsInSlide - 1) * gap) / itemsInSlide}px)`
-    }
-    const isStartOfSlide = itemsPerSlide ? index % itemsPerSlide === 0 : true
-
-    return cloneElement(item, {
-        ...item.props,
-        slideWidth,
-        offset,
-        ref: el => {
-            itemsRef.current[index] = el
-        },
-        className: isStartOfSlide ? 'carousel__snap-point' : item.props.className,
-        style: {
-            ...style,
-            width: itemWidth || style.width,
-            marginRight: gap && index !== Children.count(children) - 1 ? `${gap}px` : style.marginRight
-        }
-    })
-})
-/**
- * Ensures that an index is valid.
- */
-const normalizeIndex = (index: number, items?: ListItemRef[], itemsPerSlide?: number): number => {
-    if (index > 0) {
-        let result = index
-        result %= items.length || 1 // Ensure index is within bounds.
-        result -= result % (itemsPerSlide || 1) // Round index to the nearest valid slide index.
-        result = Math.abs(result) // Ensure positive value.
-        return result
-    }
-
-    return 0
-}
-
-/**
- * Gets the slide for a given index.
- * Defaults to the current index if none provided.
- */
-export const getSlide = (activeIndex: number, itemsPerSlide?: number, nextIndex = activeIndex): undefined | number => {
-    if (!itemsPerSlide) {
-        return
-    }
-
-    return Math.ceil(nextIndex / itemsPerSlide)
-}
-
-const getDelta = (direction: MovementDirection): number => direction === 'LEFT' ? -1 : 1
-
-export const getNextIndex = (
-    direction: MovementDirection,
-    activeIndex: number,
-    items?: ListItemRef[],
-    slideWidth?: number,
-    itemsPerSlide?: number): number => {
-    let i = activeIndex
-    let item
-
-    // If going backward from 0, we go to the end.
-    if (direction === 'LEFT' && i === 0) {
-        i = items.length - 1
-    } else {
-        // Find the index of the next item that is not fully in view.
-        do {
-            const delta = getDelta(direction)
-            item = items[i += delta]
-        } while (item && item.fullyVisible)
-
-        if (direction === 'LEFT' && !itemsPerSlide) {
-            // If going left without items per slide, go as far left as possible while keeping this item fully in view.
-            const targetOffset = item.right - slideWidth
-            do {
-                item = items[--i]
-            } while (item && item.left >= targetOffset)
-            i += 1
-        }
-    }
-
-    return normalizeIndex(i, items, itemsPerSlide)
-}
-
-export const getClosestIndex = (
-    scrollLeft: number,
-    items: ListItemRef[],
-    slideWidth: number,
-    itemsPerSlide = 1,
-    gap?: number): number => {
-    let closest
-
-    if (scrollLeft >= getMaxOffset(items, slideWidth) - gap) {
-        closest = items.length - 1
-    } else {
-        // Find the closest item using a binary search on each carousel slide.
-        const totalItems = items.length
-        let low = 0
-        let high = Math.ceil(totalItems / itemsPerSlide) - 1
-
-        while (high - low > 1) {
-            const mid = Math.floor((low + high) / 2)
-            if (scrollLeft > items[mid * itemsPerSlide].left) {
-                low = mid
-            } else {
-                high = mid
-            }
-        }
-
-        const deltaLow = Math.abs(scrollLeft - items[low * itemsPerSlide].left)
-        const deltaHigh = Math.abs(scrollLeft - items[high * itemsPerSlide].left)
-        closest = normalizeIndex((deltaLow > deltaHigh ? high : low) * itemsPerSlide, items, itemsPerSlide)
-    }
-
-    return closest
-}

package/src/ebay-carousel/index.ts

@@ -1,2 +0,0 @@
-export { default as EbayCarousel, type CarouselProps } from './carousel'
-export { default as EbayCarouselItem } from './carousel-item'

package/src/ebay-carousel/scroll-to-transition.ts

@@ -1,123 +0,0 @@
-// copy-pasted from @ebay/ebayui-core/dist/components/ebay-carousel/utils/scroll-transition
-// todo: replace with ebayui-core-react/ebay-carousel when it's ready
-
-/**
- * Checks on an interval to see if the element is scrolling.
- * When the scrolling has finished it then calls the function.
- *
- * @param {HTMLElement} el The element which scrolls.
- * @param {(offset: number)=>{}} fn The function to call after scrolling completes.
- * @return {function} A function to cancel the scroll listener.
- */
-type ReturnFunctionType = () => void
-const onScrollEnd = (el: HTMLElement, fn: (offset: number) => void): ReturnFunctionType => {
-    let timeout: any
-    let frame: number
-    let lastPos: number|undefined;
-
-    (function checkMoved() {
-        const { scrollLeft } = el
-        if (lastPos !== scrollLeft) {
-            lastPos = scrollLeft
-            timeout = setTimeout(() => {
-                frame = requestAnimationFrame(checkMoved)
-            }, 90)
-            return
-        }
-
-        fn(lastPos)
-    }())
-
-    return () => {
-        clearTimeout(timeout)
-        cancelAnimationFrame(frame)
-    }
-}
-
-const supportsScrollBehavior: boolean = typeof window !== 'undefined' && 'scrollBehavior' in document.body.style
-
-/**
- * Utility to animate scroll position of an element using an `ease-out` curve over 250ms.
- * Cancels the animation if the user touches back down.
- *
- * @param {HTMLElement} el The element to scroll.
- * @param {number} to The offset to animate to.
- * @param {function} fn A function that will be called after the transition completes.
- * @return {function} A function that cancels the transition.
- */
-export function scrollTransition(el: HTMLElement, to: number, fn: () => void): ReturnFunctionType {
-    if (supportsScrollBehavior) {
-        el.scrollTo({ left: to })
-        return onScrollEnd(el, fn)
-    }
-
-    let lastPosition: number
-    let cancelInterruptTransition: () => void
-
-    let frame = requestAnimationFrame(startTime => {
-        const { scrollLeft } = el
-        const distance = to - scrollLeft
-        const duration = 450;
-        (function animate(curTime) {
-            const delta = curTime - startTime
-            if (delta > duration) {
-                el.scrollLeft = to
-                cancel()
-                return fn()
-            }
-
-            el.scrollLeft = easeInOut(delta / duration) * distance + scrollLeft
-            frame = requestAnimationFrame(animate)
-        }(startTime))
-    })
-
-    // The animation can be interrupted by new touch events.
-    el.addEventListener('touchstart', handleTouchStart)
-
-    return cancel
-
-    function cancel() {
-        cancelAnimationFrame(frame)
-
-        if (lastPosition === undefined) {
-            cancelTouchStart()
-        } else {
-            if (cancelInterruptTransition) cancelInterruptTransition()
-            cancelTouchEnd()
-        }
-    }
-
-    function handleTouchStart() {
-        cancel()
-        lastPosition = el.scrollLeft
-        // If we were interrupted by a touch start we wait for a touch end to see if we moved.
-        el.addEventListener('touchend', handleTouchEnd)
-    }
-
-    function handleTouchEnd() {
-        cancelTouchEnd()
-        // If we haven't moved because of the interrupt we continue to transition.
-        if (lastPosition === el.scrollLeft) {
-            cancelInterruptTransition = scrollTransition(el, to, fn)
-        }
-    }
-
-    function cancelTouchStart() {
-        el.removeEventListener('touchstart', handleTouchStart)
-    }
-
-    function cancelTouchEnd() {
-        el.removeEventListener('touchend', handleTouchEnd)
-    }
-}
-
-/**
- * Ease out timing function.
- * Based on https://gist.github.com/gre/1650294.
- *
- * @param {number} val - A number between 0 and 1.
- * @return {number}
- */
-function easeInOut(val: number): number {
-    return val < 0.5 ? 2 * val * val : -1 + (4 - 2 * val) * val
-}

package/src/ebay-carousel/types.ts

@@ -1,11 +0,0 @@
-export type CarouselControlType = 'prev' | 'next'
-
-export type MovementDirection = 'LEFT' | 'RIGHT' | 'NONE'
-
-export type RelativeRect = Pick<ClientRect, 'left'|'right'>
-
-export type ListItemRef = {
-    left: number;
-    right: number;
-    fullyVisible: boolean;
-}

package/src/ebay-checkbox/__tests__/index.spec.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { eventOfType } from '../../common/event-utils/__tests__/helpers'
-import { EbayCheckbox } from '../index'
-
-const { getByRole } = screen
-
-describe('<EbayCheckbox>', () => {
-    describe('on checkbox-button click', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            render(<EbayCheckbox aria-label="checkbox" value="123" onChange={spy} />)
-            const input = getByRole('checkbox')
-            fireEvent.click(input)
-            expect(spy).toHaveBeenCalledWith(eventOfType('change'), { value: '123', checked: true })
-        })
-    })
-    describe('on checkbox-button focus', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            render(<EbayCheckbox aria-label="checkbox" value="123" onFocus={spy} />)
-            const input = getByRole('checkbox')
-            fireEvent.focus(input)
-            expect(spy).toHaveBeenCalledWith(eventOfType('focus'), { value: '123', checked: false })
-        })
-    })
-    describe('on checkbox-button key down', () => {
-        it('should fire an event', () => {
-            const spy = jest.fn()
-            render(<EbayCheckbox aria-label="checkbox" value="123" onKeyDown={spy} />)
-            const input = getByRole('checkbox')
-            fireEvent.keyDown(input)
-            expect(spy).toHaveBeenCalledWith(eventOfType('keydown'), { value: '123', checked: false })
-        })
-    })
-})