@ebay/ui-core-react 7.3.2 → 7.3.4

package/jest.config.js

@@ -1,52 +0,0 @@
-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/src/common/__mocks__/random-id.ts

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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
-    }
-}