@ebay/ui-core-react 7.3.0 → 7.3.2

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

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

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

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

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

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

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

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

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

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

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