@ebay/ui-core-react 7.3.2 → 7.3.3

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

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

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

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

package/src/common/floating-label-utils/hooks.tsx

@@ -1,162 +0,0 @@
-import React, { useRef, useState, useEffect, FC, RefObject, useCallback, ReactNode, ComponentProps } from 'react'
-import classNames from 'classnames'
-
-type InputRef = RefObject<HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement> | any
-type FloatingLabelHookProps = {
-    type?: string;
-    inputId?: string;
-    ref?: InputRef;
-    disabled?: boolean;
-    label?: string;
-    inputSize?: 'default' | 'large';
-    inputValue?: ComponentProps<'input'>['value'];
-    className?: string;
-    placeholder?: string;
-    invalid?: boolean;
-    opaqueLabel?: boolean;
-    onMount?: () => void;
-}
-
-type FloatingLabelHookReturn = {
-    label: ReactNode;
-    onBlur: () => void;
-    onFocus: () => void;
-    Container: FC<{ children?: ReactNode }>;
-    ref: InputRef;
-    placeholder: string;
-}
-
-const classPrefix = 'floating-label__label'
-
-// input background in Skin 12, used for autofill detection
-const textboxElementBackgroundRGB = [
-    'rgb(245, 245, 245)', // DEPRECATED
-    'rgb(247, 247, 247)' // From skin version 12.6.0
-]
-
-// check for computed background color because of Chrome autofill bug
-// https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password/35783761#35783761
-const isAutofilled = (input: HTMLElement) =>
-    input && !textboxElementBackgroundRGB.includes(getComputedStyle(input).backgroundColor)
-
-const hasValue = (input: HTMLInputElement | HTMLOptionElement) => input?.value?.length > 0
-
-const isSelect = (element: HTMLInputElement | HTMLSelectElement) => element?.tagName === `SELECT`
-
-const setPlaceholder = (element: HTMLInputElement, value: string) => {
-    // For select elements we need to temporary remove the text of the first option
-    // when the element is not focused, so only the label is shown. We still need to
-    // maintain the width of the input so we manually change the "min-width"
-    // Inspired by the marko implementation: https://github.com/makeup/makeup-js/blob/master/packages/makeup-floating-label/src/index.js
-    if (isSelect(element) && !hasValue(element.querySelector(`option`))) {
-        element.style['min-width'] = ''
-        const beforeWidth = element.offsetWidth
-
-        element.querySelector(`option`).text = value
-
-        if (!value && beforeWidth > element.offsetWidth) {
-            element.style['min-width'] = `${beforeWidth}px`
-        }
-    }
-}
-
-const getPlaceholder = (element: HTMLInputElement) => {
-    if (isSelect(element)) {
-        return element.querySelector(`option`).text
-    }
-
-    return element?.placeholder
-}
-
-export function useFloatingLabel({
-    ref,
-    inputId,
-    className,
-    disabled,
-    label,
-    inputSize,
-    inputValue,
-    placeholder,
-    invalid,
-    opaqueLabel,
-    type,
-    onMount = () => {}
-} : FloatingLabelHookProps): FloatingLabelHookReturn {
-    const _internalInputRef = useRef(null)
-    const inputRef = () => ref || _internalInputRef
-    const [isFloating, setFloating] = useState(Boolean(inputValue))
-    const [shouldAnimate, setAnimate] = useState(false)
-    const [isFocused, setFocused] = useState(false)
-    const selectFirstOptionText = useRef(``)
-
-    const onBlur = () => {
-        setAnimate(true)
-        setFloating(hasValue(inputRef()?.current))
-        setFocused(false)
-        setPlaceholder(inputRef().current, ``)
-    }
-
-    const onFocus = () => {
-        setAnimate(true)
-        setFloating(true)
-        setFocused(true)
-        setPlaceholder(inputRef()?.current, selectFirstOptionText.current)
-    }
-
-    useEffect(() => {
-        if (!label) {
-            return
-        }
-        selectFirstOptionText.current = getPlaceholder(inputRef()?.current)
-        setPlaceholder(inputRef()?.current, ``)
-        onMount()
-    }, [])
-
-    useEffect(() => {
-        if (!label) {
-            return
-        }
-        setFloating(isFocused || hasValue(inputRef()?.current) || isAutofilled(inputRef()?.current?.parentNode))
-    }, [isFocused, inputValue])
-
-    const labelClassName = classNames(className, classPrefix, {
-        [`${classPrefix}--disabled`]: disabled,
-        [`${classPrefix}--animate`]: shouldAnimate,
-        [`${classPrefix}--inline`]: !isFloating && type !== 'date',
-        [`${classPrefix}--focus`]: isFocused,
-        [`${classPrefix}--invalid`]: invalid
-    })
-
-    const floatingLabelClassName = classNames(`floating-label`, {
-        'floating-label--large': inputSize === `large`,
-        'floating-label--opaque': opaqueLabel
-    })
-
-    const FragmentContainer = useCallback(({ children }) => <>{children}</>, [])
-    const FloatingLabelContainer: FC<{ children?: ReactNode }> = useCallback(
-        ({ children }) => <span className={floatingLabelClassName}>{children}</span>,
-        [floatingLabelClassName]
-    )
-
-    if (!label) {
-        return {
-            label: null,
-            Container: FragmentContainer,
-            onBlur: () => {},
-            onFocus: () => {},
-            ref: inputRef(),
-            placeholder
-        }
-    }
-
-    const labelElement = <label htmlFor={inputId} className={labelClassName}>{label}</label>
-
-    return {
-        label: labelElement,
-        Container: FloatingLabelContainer,
-        onBlur,
-        onFocus,
-        ref: inputRef(),
-        placeholder: !isFloating ? null : placeholder
-    }
-}

package/src/common/notice-utils/notice-content.tsx

@@ -1,19 +0,0 @@
-import React, { FC, ReactNode } from 'react'
-import cx from 'classnames'
-
-export type NoticeContentProps = {
-    type: 'inline' | 'section' | 'page';
-    className?: string;
-    children?: ReactNode;
-}
-
-const NoticeContent: FC<NoticeContentProps> = ({ className, type, children }) => {
-    const ContentTag = type === 'inline' ? 'span' : 'div'
-    return (
-        <ContentTag className={cx(className, `${type}-notice__main`)}>
-            {children}
-        </ContentTag>
-    )
-}
-
-export default NoticeContent

package/src/common/notice-utils/notice-cta.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react'
-import cx from 'classnames'
-
-type Props = React.HTMLProps<HTMLDivElement> & {
-    type: 'window' | 'section' | 'page';
-    className?: string;
-}
-
-const NoticeCTA: FC<Props> = ({ className, type, children, ...rest }) => (
-    <p className={cx(className, `${type}-notice__cta`)} {...rest}>
-        {children}
-    </p>
-)
-
-export default NoticeCTA

package/src/common/notice-utils/notice-footer.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react'
-import cx from 'classnames'
-
-type Props = React.HTMLProps<HTMLDivElement> & {
-    type: 'window' | 'section' | 'page';
-    className?: string;
-}
-
-const NoticeFooter: FC<Props> = ({ className, type, children, ...rest }) => (
-    <div className={cx(className, `${type}-notice__footer`)} {...rest}>
-        {children}
-    </div>
-)
-
-export default NoticeFooter

package/src/common/notice-utils/notice-title.tsx

@@ -1,19 +0,0 @@
-import React, { FC } from 'react'
-import cx from 'classnames'
-
-type Props = React.HTMLProps<HTMLHeadingElement> & {
-    type: 'window' | 'section' | 'page';
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    className?: string;
-}
-
-const NoticeTitle: FC<Props> = ({ className, type, as, children, ...rest }) => {
-    const HeadingTag = as || `h2`
-    return (
-        <HeadingTag className={cx(className, `${type}-notice__title`)} {...rest}>
-            {children}
-        </HeadingTag>
-    )
-}
-
-export default NoticeTitle

package/src/common/random-id.ts

@@ -1,14 +0,0 @@
-import { useEffect, useState } from 'react'
-
-export const randomId = (): string => Math.random().toString(16).slice(-4)
-
-export const useRandomId = (): string => {
-    const [id, setId] = useState('')
-
-    useEffect(() => {
-        setId(randomId())
-    }, [])
-
-    return id
-}
-

package/src/common/range.ts

@@ -1,2 +0,0 @@
-export const range = (start:number, stop:number, step = 1):number[] =>
-    Array(Math.ceil(((stop + 1) - start) / step)).fill(start).map((x, y) => x + y * step)

package/src/common/tooltip-utils/constants.ts

@@ -1,96 +0,0 @@
-import { PointerDirection, TooltipType } from './types'
-
-export const DEFAULT_POINTER_DIRECTION: PointerDirection = 'bottom'
-
-export const TYPE_ROLES: Record<TooltipType, string> = {
-    tooltip: 'tooltip',
-    tourtip: 'region',
-    infotip: ''
-}
-
-export const POINTER_STYLES: { [key in PointerDirection]: any } = {
-    left: {
-        transform: 'translateX(16px) translateY(-50%) scale3d(1,1,1)',
-        left: '100%',
-        right: 'auto',
-        top: '-6px',
-        bottom: 'auto'
-    },
-    'left-top': {
-        transform: 'translateX(16px) scale3d(1,1,1)',
-        left: '100%',
-        right: 'auto',
-        top: '-100%',
-        bottom: 'auto'
-    },
-    'left-bottom': {
-        transform: 'translateX(16px) scale3d(1,1,1)',
-        left: '100%',
-        right: 'auto',
-        top: 'auto',
-        bottom: '-10px'
-    },
-    right: {
-        transform: 'translateX(-16px) translateY(-50%) scale3d(1,1,1)',
-        left: 'auto',
-        right: '100%',
-        top: '-6px',
-        bottom: 'auto'
-    },
-    'right-top': {
-        transform: 'translateX(-16px) scale3d(1,1,1)',
-        left: 'auto',
-        right: '100%',
-        top: '-100%',
-        bottom: 'auto'
-    },
-    'right-bottom': {
-        transform: 'translateX(-16px) scale3d(1,1,1)',
-        left: 'auto',
-        right: '100%',
-        top: 'auto',
-        bottom: '-50%'
-    },
-    top: {
-        transform: 'translateX(-50%) scale3d(1,1,1)',
-        left: '50%',
-        right: 'auto',
-        top: 'calc(100% + 2px)',
-        bottom: 'auto'
-    },
-    'top-left': {
-        transform: 'scale3d(1,1,1)',
-        left: '-10px',
-        right: 'auto',
-        top: 'calc(100% + 2px)',
-        bottom: 'auto'
-    },
-    'top-right': {
-        transform: 'scale3d(1,1,1)',
-        left: 'auto',
-        right: '-10px',
-        top: 'calc(100% + 2px)',
-        bottom: 'auto'
-    },
-    'bottom-right': {
-        transform: 'scale3d(1,1,1)',
-        left: 'auto',
-        right: '-10px',
-        top: 'auto',
-        bottom: 'calc(100% + 12px)'
-    },
-    'bottom-left': {
-        transform: 'scale3d(1,1,1)',
-        left: '-10px',
-        right: 'auto',
-        top: 'auto',
-        bottom: 'calc(100% + 12px)'
-    },
-    bottom: {
-        transform: 'translateX(-50%) scale3d(1,1,1)',
-        left: '50%',
-        right: 'auto',
-        top: 'auto',
-        bottom: 'calc(100% + 12px)'
-    }
-}

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

@@ -1,7 +0,0 @@
-export { default as Tooltip, type TooltipProps } from './tooltip'
-export { default as TooltipHost } from './tooltip-host'
-export { default as TooltipContent } from './tooltip-content'
-export { default as TooltipFooter } from './tooltip-footer'
-export { useTooltip } from './use-tooltip'
-export type { TooltipType, PointerDirection } from './types'
-export { DEFAULT_POINTER_DIRECTION, POINTER_STYLES } from './constants'

package/src/common/tooltip-utils/tooltip-close-button.tsx

@@ -1,10 +0,0 @@
-import { FC } from 'react'
-
-/**
- * This is an empty component just to get extra property
- * for the button used in the EbayInfotipContent
- */
-
-const TooltipCloseButton: FC = () => null
-
-export default TooltipCloseButton

package/src/common/tooltip-utils/tooltip-content.tsx

@@ -1,62 +0,0 @@
-import React, { FC, CSSProperties, ReactNode } from 'react'
-import { EbayIcon } from '../../ebay-icon'
-import { excludeComponent, findComponent } from '../component-utils'
-import { PointerDirection, TooltipType } from './types'
-import { DEFAULT_POINTER_DIRECTION, POINTER_STYLES, TYPE_ROLES } from './constants'
-import TooltipCloseButton from './tooltip-close-button'
-import TooltipFooter from './tooltip-footer'
-
-export type TooltipContentProps = {
-    id?: string;
-    type?: TooltipType;
-    style?: CSSProperties;
-    pointer?: PointerDirection;
-    showCloseButton?: boolean;
-    a11yCloseText?: string;
-    onClose?: () => void;
-    children?: ReactNode;
-}
-
-const TooltipContent: FC<TooltipContentProps> = ({
-    id,
-    style,
-    pointer = DEFAULT_POINTER_DIRECTION,
-    children,
-    type = 'tooltip',
-    showCloseButton,
-    a11yCloseText,
-    onClose
-}) => {
-    const closeButton = findComponent(children, TooltipCloseButton)
-    const footer = findComponent(children, TooltipFooter)
-    const allChildrenExceptFooter = excludeComponent(children, TooltipFooter)
-
-    return (
-        <span
-            className={`${type}__overlay`}
-            id={id}
-            role={TYPE_ROLES[type] || null}
-            style={{ ...POINTER_STYLES[pointer], ...style }}>
-            <span className={`${type}__pointer ${type}__pointer--${pointer}`} />
-            <span className={`${type}__mask`}>
-                <span className={`${type}__cell`}>
-                    <span className={`${type}__content`}>{allChildrenExceptFooter}</span>
-                    {showCloseButton ? (
-                        <button
-                            {...closeButton?.props}
-                            className={`icon-btn icon-btn--transparent ${type}__close`}
-                            type="button"
-                            aria-label={a11yCloseText}
-                            onClick={onClose}
-                        >
-                            <EbayIcon name="close16" />
-                        </button>
-                    ) : null}
-                    {footer}
-                </span>
-            </span>
-        </span>
-    )
-}
-
-export default TooltipContent

package/src/common/tooltip-utils/tooltip-footer.tsx

@@ -1,15 +0,0 @@
-import React, { ComponentProps, FC } from 'react'
-import classNames from 'classnames'
-
-type TooltipFooterProps = ComponentProps<'div'> & {
-    type?: string;
-}
-
-const TooltipFooter: FC<TooltipFooterProps> = (
-    {
-        children,
-        className,
-        type = 'tourtip'
-    }) => (<div className={classNames(`${type}__footer`, className)}>{children}</div>)
-
-export default TooltipFooter

package/src/common/tooltip-utils/tooltip-host.tsx

@@ -1,24 +0,0 @@
-import { Children, cloneElement, FC, ReactElement, RefObject } from 'react'
-import classNames from 'classnames'
-
-export type TooltipHostProps = {
-    className?: string;
-    children?: ReactElement;
-    forwardedRef?: RefObject<any>;
-}
-
-const TooltipHost: FC<TooltipHostProps> = ({
-    children,
-    className,
-    forwardedRef,
-    ...rest
-}) => {
-    Children.only(children)
-    return cloneElement(children, {
-        ref: forwardedRef,
-        ...rest,
-        className: classNames(className, children.props.className)
-    })
-}
-
-export default TooltipHost

package/src/common/tooltip-utils/tooltip.tsx

@@ -1,49 +0,0 @@
-import React, { cloneElement, ComponentProps, FC, RefObject } from 'react'
-import classNames from 'classnames'
-import { withForwardRef } from '../component-utils/forwardRef'
-import { findComponent, excludeComponent } from '../component-utils'
-import { TooltipType } from './types'
-import TooltipHost from './tooltip-host'
-
-export type TooltipProps = ComponentProps<'span'> & {
-    type?: TooltipType;
-    isExpanded?: boolean;
-    forwardedRef?: RefObject<HTMLSpanElement>;
-}
-
-const Tooltip: FC<TooltipProps> = ({
-    className,
-    type,
-    isExpanded,
-    children,
-    forwardedRef,
-    ...rest
-}) => {
-    const originalHostComponent = findComponent(children, TooltipHost)
-    const content = excludeComponent(children, TooltipHost)[0]
-
-    if (!originalHostComponent) {
-        throw new Error(`Tooltip: Please use a TooltipHost that defines the host of the tooltip`)
-    }
-
-    const host = cloneElement(originalHostComponent, {
-        className: `${type}__host`,
-        'aria-expanded': isExpanded,
-        'aria-describedby': content?.props?.id,
-        ...originalHostComponent.props
-    })
-
-    return (
-        <span
-            {...rest}
-            ref={forwardedRef}
-            className={classNames(className, type, {
-                [`${type}--expanded`]: isExpanded
-            })}>
-            {host}
-            {content}
-        </span>
-    )
-}
-
-export default withForwardRef(Tooltip)

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

@@ -1,7 +0,0 @@
-export type TooltipType = 'tooltip' | 'infotip' | 'tourtip'
-
-export type PointerDirection =
-    'top' | 'top-left' | 'top-right' |
-    'right' | 'right-bottom' | 'right-top' |
-    'bottom' | 'bottom-left' | 'bottom-right' |
-    'left' | 'left-bottom' | 'left-top'