@ebay/ui-core-react 7.3.0 → 7.3.2

package/dist/ebay-svg/symbols.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const symbols: React.JSX.Element[];
+//# sourceMappingURL=symbols.d.ts.map

package/dist/ebay-svg/symbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../src/ebay-svg/symbols.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,OAAO,qBAiyBnB,CAAA"}

package/jest.config.js

@@ -0,0 +1,52 @@
+module.exports = {
+    'testEnvironment': 'jsdom',
+    'resolver': 'jest-pnp-resolver',
+    'moduleNameMapper': {
+        '\\.(css|less)$': 'identity-obj-proxy'
+    },
+    'transform': {
+        '^.+\\.tsx?$': 'ts-jest'
+    },
+    'testRegex': '(/__tests__/.*(spec))\\.(tsx?)$',
+    'transformIgnorePatterns': [
+        '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$',
+        '^.+\\.module\\.(css|less)$'
+    ],
+    'moduleFileExtensions': [
+        'ts',
+        'tsx',
+        'js',
+        'json'
+    ],
+    'modulePathIgnorePatterns': [
+        '<rootDir>/build/',
+        '<rootDir>/.yarn-cache/v2/', // ignore yarn cache to make it pass Altus CI
+        "<rootDir>/build-ebay/", // ignore build-ebay injected on CI
+    ],
+    // A set of global variables that need to be available in all test environments
+    globals: {
+        'ts-jest': {
+            diagnostics: false, // hide non-essential info
+            isolatedModules: true // skip type checks
+        }
+    },
+    reporters: [
+        'default',
+        'jest-junit'
+    ],
+    'collectCoverageFrom': [
+        'src/**/*.{ts,tsx}',
+        '!**/__tests__/**/*.{ts,tsx}', // exclude test files
+        '!src/components/*/index.ts', // exclude components re-exporter file
+        '!src/**/*.stories.tsx',
+        '!src/**/index.d.ts',
+        '!src/config.ts',
+        '!**/node_modules/**'
+    ],
+    'coverageReporters': [
+        'json', 'lcov', 'text', 'cobertura'
+    ],
+    setupFilesAfterEnv: [
+        '<rootDir>/config/jest/setup-tests.ts'
+    ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebay/ui-core-react",
-  "version": "7.3.0",
+  "version": "7.3.2",
   "description": "Skin components build off React",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

package/src/common/__mocks__/random-id.ts

@@ -0,0 +1,2 @@
+export const randomId = (): string => 'abc123'
+export const useRandomId = (): string => 'abc123'

package/src/common/component-utils/array.polyfill.flat.ts

@@ -0,0 +1,34 @@
+/**
+ * adapted from:
+ * https://github.com/behnammodi/polyfill/blob/master/array.polyfill.js
+ * Array.prototype.flat()
+ * version 0.0.0
+ * Feature            Chrome  Firefox Internet Explorer   Opera    Safari    Edge
+ * Basic support      69      62      (No)                  56    12      (No)
+ * -------------------------------------------------------------------------------
+ */
+if (!Array.prototype.flat) {
+    // eslint-disable-next-line no-extend-native
+    Object.defineProperty(Array.prototype, 'flat', {
+        configurable: true,
+        writable: true,
+        value: function (d) {
+            const depthArg =
+                typeof d === 'undefined' ? 1 : Number(d) || 0
+            const result = []
+            const forEach = result.forEach
+
+            const flatDeep = (arr, depth) =>
+                forEach.call(arr, val => {
+                    if (depth > 0 && Array.isArray(val)) {
+                        flatDeep(val, depth - 1)
+                    } else {
+                        result.push(val)
+                    }
+                })
+
+            flatDeep(this, depthArg)
+            return result
+        }
+    })
+}

package/src/common/component-utils/forwardRef.tsx

@@ -0,0 +1,15 @@
+import React, { FC, forwardRef } from 'react'
+
+const getDisplayName = <Props, >(Component: FC<Props>) => Component.displayName || Component.name || 'Component'
+
+// Typescript will automatically find the return type crom forwardRef() function
+// Disabling eslint for this use case
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const withForwardRef = <Props, >(Component: FC<Props>) => {
+    const ForwardRef = forwardRef<FC<Props>, Props>((props, ref) =>
+        <Component {...props} forwardedRef={ref} />)
+
+    ForwardRef.displayName = getDisplayName<Props>(Component)
+
+    return ForwardRef
+}

package/src/common/component-utils/index.ts

@@ -0,0 +1,2 @@
+export * from './forwardRef'
+export * from './utils'

package/src/common/component-utils/utils.ts

@@ -0,0 +1,23 @@
+import { Children, FC, ReactElement, ReactNode } from 'react'
+import './array.polyfill.flat' // for Mobile Safari 11
+
+export function findComponent(nodes: ReactNode = [], componentType: FC): ReactElement | undefined {
+    const elements = Children.toArray(nodes) as ReactElement[]
+    return elements.find(({ type }) => type === componentType) || null
+}
+
+export function excludeComponent(nodes: ReactNode = [], componentType: FC): ReactElement[] {
+    const elements = Children.toArray(nodes) as ReactElement[]
+    return elements.filter(({ type }) => type !== componentType)
+}
+
+export function filterByType(nodes: ReactNode = [], componentType: FC | FC[]): ReactElement[] {
+    const elements = Children.toArray(nodes) as ReactElement[]
+    const types = [componentType].flat()
+    return elements.filter(({ type }) => types.includes(type as any))
+}
+
+export function filterBy(nodes: ReactNode = [], predicate: (el: ReactElement) => boolean): ReactElement[] {
+    const elements = Children.toArray(nodes) as ReactElement[]
+    return elements.filter(predicate)
+}

package/src/common/debounce.ts

@@ -0,0 +1,11 @@
+export function debounce<F extends(...args: Parameters<F>) => ReturnType<F>>(
+    fn: F,
+    ms: number
+): (...args: Parameters<F>) => void {
+    let timer: ReturnType<typeof setTimeout>
+
+    return (...args) => {
+        clearTimeout(timer)
+        timer = setTimeout(() => fn(...args), ms)
+    }
+}

package/src/common/event-utils/__tests__/helpers.ts

@@ -0,0 +1,4 @@
+import { EventType } from '@testing-library/react'
+
+export type eventtype = Lowercase<EventType>
+export const eventOfType = (type: eventtype) => expect.objectContaining({ type })

package/src/common/event-utils/__tests__/use-key-press.spec.tsx

@@ -0,0 +1,30 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom'
+import { fireEvent } from '@testing-library/react'
+import useKeyPress from '../use-key-press'
+
+
+describe('useKeyPress', () => {
+    it('should return [false,false] by default', () => {
+        const { result } = renderHook(() => useKeyPress())
+
+        expect(result.current).toEqual([false, false])
+    })
+    it('should return [true,false] on arrow-up', () => {
+        const { result } = renderHook(() => useKeyPress())
+
+        act(() => {
+            fireEvent.keyDown(window, { key: 'ArrowUp' })
+        })
+
+        expect(result.current).toEqual([true, false])
+    })
+    it('should return [false,true] on arrow-down', () => {
+        const { result } = renderHook(() => useKeyPress())
+
+        act(() => {
+            fireEvent.keyDown(window, { key: 'ArrowDown' })
+        })
+
+        expect(result.current).toEqual([false, true])
+    })
+})

package/src/common/event-utils/__tests__/use-roving-index.spec.tsx

@@ -0,0 +1,81 @@
+import React, { FC } from 'react'
+import { act, renderHook } from '@testing-library/react-hooks/dom'
+import { fireEvent } from '@testing-library/react'
+import useRovingIndex from '../use-roving-index'
+
+const TestComponent: FC = () => <div />
+
+const children = [
+    <div />,
+    <TestComponent />,
+    <TestComponent />,
+    <div />
+]
+
+describe('useRovingIndex', () => {
+    it('should return undefined by default', () => {
+        const { result } = renderHook(() => useRovingIndex(children, TestComponent))
+
+        expect(result.current[0]).toBeUndefined()
+        expect(typeof result.current[1]).toEqual('function')
+    })
+
+    it('should update index', () => {
+        const { result } = renderHook(() => useRovingIndex(children, TestComponent))
+
+        act(() => {
+            result.current[1](0)
+        })
+
+        expect(result.current[0]).toEqual(0)
+    })
+
+    it('should ignore non-focusable elements', () => {
+        const { result, rerender } = renderHook(() => useRovingIndex(children, TestComponent))
+
+        act(() => {
+            result.current[1](0)
+        })
+        rerender()
+
+        act(() => {
+            fireEvent.keyDown(window, { key: 'ArrowDown' })
+        })
+        expect(result.current[0]).toEqual(0)
+        rerender()
+
+        act(() => {
+            fireEvent.keyDown(window, { key: 'ArrowDown' })
+        })
+
+        expect(result.current[0]).toEqual(0)
+    })
+
+    it('should update index on keyDown', () => {
+        const { result, rerender } = renderHook(() => useRovingIndex(children, TestComponent))
+
+        act(() => {
+            result.current[1](1)
+        })
+        rerender()
+
+        act(() => {
+            fireEvent.keyDown(window, { key: 'ArrowDown' })
+        })
+        expect(result.current[0]).toEqual(2)
+    })
+
+    it('should update index on keyDown', () => {
+        const { result, rerender } = renderHook(() => useRovingIndex(children, TestComponent))
+
+        act(() => {
+            result.current[1](2)
+        })
+        rerender()
+
+        act(() => {
+            fireEvent.keyDown(window, { key: 'ArrowUp' })
+        })
+        expect(result.current[0]).toEqual(1)
+    })
+})

package/src/common/event-utils/index.ts

@@ -0,0 +1,128 @@
+/*
+* Based on https://github.com/eBay/ebayui-core/edit/master/src/common/event-utils/index.js
+*/
+
+import React from 'react'
+import { Key } from './types'
+
+type Callback = () => void
+
+/**
+ * Generic keydown handler used by more specific cases
+ * @param {Array} keyList: List of acceptable keys
+ * @param {KeyboardEvent} e
+ * @param {Function} callback
+ */
+function handleKeydown(keyList: Key[], e: React.KeyboardEvent, callback: Callback = () => {}): void {
+    if (keyList.includes(e.key as Key)) {
+        callback()
+    }
+}
+
+// inverse of found keys
+function handleNotKeydown(keyList: Key[], e: React.KeyboardEvent, callback: Callback = () => {}): void {
+    if (!keyList.includes(e.key as Key)) {
+        callback()
+    }
+}
+
+export function handleEnterKeydown(e: React.KeyboardEvent, callback: Callback): void {
+    if (e.key === 'Enter') {
+        callback()
+    }
+}
+
+export function handleActionKeydown(e: React.KeyboardEvent, callback: Callback): void {
+    if (isActionKey(e.key as Key)) {
+        callback()
+    }
+}
+
+export function isActionKey(key: Key): boolean {
+    return [' ', 'Enter'].includes(key)
+}
+
+export function handleEscapeKeydown(e: React.KeyboardEvent, callback: Callback): void {
+    handleKeydown(['Esc', 'Escape'], e, callback)
+}
+
+export function handleUpDownArrowsKeydown(e: React.KeyboardEvent, callback: Callback): void {
+    handleKeydown(['Up', 'ArrowUp', 'Down', 'ArrowDown'], e, callback)
+}
+
+export function handleLeftRightArrowsKeydown(e: React.KeyboardEvent, callback: Callback): void {
+    handleKeydown(['Left', 'ArrowLeft', 'Right', 'ArrowRight'], e, callback)
+}
+
+// only fire for character input, not modifier/meta keys (enter, escape, backspace, tab, etc.)
+export function handleTextInput(e: React.KeyboardEvent, callback: Callback): void {
+    const keyList: Key[] = [
+        // Edge
+        'Esc',
+        'Left',
+        'Up',
+        'Right',
+        'Down',
+        // Browsers
+        'Tab',
+        'Enter',
+        'Shift',
+        'Control',
+        'Alt',
+        'CapsLock',
+        'Escape',
+        'ArrowLeft',
+        'ArrowUp',
+        'ArrowRight',
+        'ArrowDown',
+        'Meta'
+    ]
+
+    handleNotKeydown(keyList, e, callback)
+}
+
+export function preventDefaultIfHijax(e: React.KeyboardEvent, hijax: boolean): void {
+    if (hijax) {
+        e.preventDefault()
+    }
+}
+
+type Handler = (e: KeyboardEvent | Event) => void
+
+const handlers: Handler[] = []
+
+export function addEventListener(_: unknown, handler: Handler): void {
+    if (handlers.length === 0) {
+        window.addEventListener('resize', handleResize)
+    }
+    handlers.push(handler)
+}
+export function removeEventListener(_: unknown, handler: Handler): void {
+    if (handlers.length === 1) {
+        window.removeEventListener('resize', handleResize)
+    }
+    handlers.splice(handlers.indexOf(handler), 1)
+}
+export function handleResize(e: KeyboardEvent | Event): void {
+    window.removeEventListener('resize', handleResize)
+    const callback = () => {
+        if (handlers.length) {
+            handlers.forEach(handler => handler(e))
+            window.addEventListener('resize', handleResize)
+        }
+    }
+    if (window.requestAnimationFrame) {
+        window.requestAnimationFrame(callback)
+    } else {
+        window.setTimeout(callback, 16)
+    }
+}
+
+export function wrapEvent(parentEventHandler: Handler = () => {}, localEventHandler: Handler) {
+    return (e: KeyboardEvent): void => {
+        parentEventHandler(e)
+        if (!e.defaultPrevented) {
+            return localEventHandler(e)
+        }
+    }
+}

package/src/common/event-utils/types.ts

@@ -0,0 +1,38 @@
+import { ChangeEvent, KeyboardEvent, MouseEvent, FocusEvent, SyntheticEvent } from 'react'
+
+type ModifierKeys = 'Alt' | 'AltGraph' | 'Control' | 'Shift' | 'CapsLock' | 'Meta'
+// | 'Fn' | 'FnLock' | 'Hyper' | 'NumLock' | 'ScrollLock' | 'Super' | 'Symbol' | 'SymbolLock'
+type NavigationKeys = 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'Enter' | 'Tab' | ' ' | 'Escape'
+    | 'End' | 'Home' | 'PageDown' | 'PageUp'
+type NavigationKeysEdge = 'Down' | 'Left' | 'Right' | 'Up' | 'Esc'
+// type FunctionKeys = 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' |
+// 'F13' | 'F14' | 'F15' | 'F16' | 'F17' | 'F18' | 'F19' | 'F20' | 'Soft1' | 'Soft2' | 'Soft3' | 'Soft4'
+// type NumericKeypadKeys = 'Decimal' | 'Key11' | 'Key12' | 'Multiply' | 'Add' | 'Clear' | 'Divide' | 'Subtract' |
+// 'Separator' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
+
+export type Key = ModifierKeys | NavigationKeys | NavigationKeysEdge
+
+type BaseEventHandler<E extends SyntheticEvent<any>, P> = (event: E, props?: P) => void;
+
+export type EbayEventHandler<ElementType = Element, PropsObject = Record<string, any>> =
+    BaseEventHandler<SyntheticEvent<ElementType>, PropsObject>;
+export type EbayMouseEventHandler<ElementType = Element, PropsObject = Record<string, any>> =
+    BaseEventHandler<MouseEvent<ElementType>, PropsObject>;
+export type EbayKeyboardEventHandler<ElementType = Element, PropsObject = Record<string, any>> =
+    BaseEventHandler<KeyboardEvent<ElementType>, PropsObject>;
+export type EbayChangeEventHandler<ElementType = Element, PropsObject = Record<string, any>> =
+    BaseEventHandler<ChangeEvent<ElementType>, PropsObject>;
+export type EbayFocusEventHandler<ElementType = Element, PropsObject = Record<string, any>> =
+    BaseEventHandler<FocusEvent<ElementType>, PropsObject>;
+/*
+    type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>;
+    type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>;
+    type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>;
+    type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>;
+    type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>;
+    type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>;
+    type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>;
+    type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>;
+    type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>;
+    type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>;
+*/

package/src/common/event-utils/use-key-press.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+
+const useKeyPress = (): [boolean, boolean] => {
+    const [arrowUpPressed, setArrowUpPressed] = useState(false)
+    const [arrowDownPressed, setArrowDownPressed] = useState(false)
+
+    const upHandler = ({ key }) => {
+        const fn = {
+            ArrowUp: setArrowUpPressed,
+            ArrowDown: setArrowDownPressed
+        }[key]
+
+        if (fn) fn(false)
+    }
+
+    const downHandler = ({ key }) => {
+        const fn = {
+            ArrowUp: setArrowUpPressed,
+            ArrowDown: setArrowDownPressed
+        }[key]
+
+        if (fn) fn(true)
+    }
+
+    useEffect(() => {
+        window.addEventListener('keydown', downHandler)
+        window.addEventListener('keyup', upHandler)
+
+        return () => {
+            window.removeEventListener('keydown', downHandler)
+            window.removeEventListener('keyup', upHandler)
+        }
+    }, [])
+
+    return [arrowUpPressed, arrowDownPressed]
+}
+
+export default useKeyPress

package/src/common/event-utils/use-roving-index.ts

@@ -0,0 +1,41 @@
+import { Children, Dispatch, FC, ReactElement, ReactNode, SetStateAction, useEffect, useState } from 'react'
+import useKeyPress from './use-key-press'
+
+const useRovingIndex = (
+    children: ReactNode,
+    FocusableType: FC,
+    defaultValue?: number
+): [number, Dispatch<SetStateAction<number>>] => {
+    const [rovingIndex, setRovingIndex] = useState(defaultValue)
+    const [arrowUpPressed, arrowDownPressed] = useKeyPress()
+
+    const rovingIndexArray = Children
+        .toArray(children)
+        .reduce<number[]>((focusables, child: ReactElement, i) =>
+            child.type === FocusableType ? [...focusables, i] : focusables, [])
+
+    const currentIndex = rovingIndexArray.indexOf(rovingIndex)
+
+    const previousOrCurrent = () => {
+        if (currentIndex === -1) return rovingIndex
+
+        const previousRovingIndex = rovingIndexArray[currentIndex - 1]
+        return previousRovingIndex === undefined ? rovingIndex : previousRovingIndex
+    }
+    const nextOrCurrent = () => {
+        if (currentIndex === -1) return rovingIndex
+        const nextRovingIndex = rovingIndexArray[currentIndex + 1]
+
+        return nextRovingIndex === undefined ? rovingIndex : nextRovingIndex
+    }
+
+    useEffect(() => {
+        if (arrowUpPressed) setRovingIndex(previousOrCurrent())
+        if (arrowDownPressed) setRovingIndex(nextOrCurrent())
+    }, [arrowUpPressed, arrowDownPressed])
+
+
+    return [rovingIndex, setRovingIndex]
+}
+
+export default useRovingIndex