@acusti/dropdown 0.46.0 → 0.47.0

package/src/Dropdown.tsx

@@ -1,733 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions */
-import { Style } from '@acusti/styling';
-import useIsOutOfBounds from '@acusti/use-is-out-of-bounds';
-import useKeyboardEvents, {
-    isEventTargetUsingKeyEvent,
-} from '@acusti/use-keyboard-events';
-import clsx from 'clsx';
-import * as React from 'react';
-
-import {
-    getActiveItemElement,
-    getItemElements,
-    ITEM_SELECTOR,
-    setActiveItem,
-} from './helpers.js';
-import {
-    BODY_CLASS_NAME,
-    BODY_MAX_HEIGHT_VAR,
-    BODY_MAX_WIDTH_VAR,
-    BODY_SELECTOR,
-    LABEL_CLASS_NAME,
-    LABEL_TEXT_CLASS_NAME,
-    ROOT_CLASS_NAME,
-    STYLES,
-    TRIGGER_CLASS_NAME,
-} from './styles.js';
-
-export type Item = {
-    element: HTMLElement | null;
-    event: Event | React.SyntheticEvent<HTMLElement>;
-    label: string;
-    value: string;
-};
-
-export type Props = {
-    /**
-     * Boolean indicating if the user can submit a value not already in the
-     * dropdown.
-     */
-    allowCreate?: boolean;
-    /**
-     * Boolean indicating if the user can submit an empty value (i.e. clear
-     * the value). Defaults to true.
-     */
-    allowEmpty?: boolean;
-    /**
-     * Can take a single React element or exactly two renderable children.
-     */
-    children: ChildrenTuple | React.JSX.Element;
-    className?: string;
-    disabled?: boolean;
-    /**
-     * Group identifier string links dropdowns together into a menu
-     * (like macOS top menubar).
-     */
-    group?: string;
-    hasItems?: boolean;
-    isOpenOnMount?: boolean;
-    isSearchable?: boolean;
-    keepOpenOnSubmit?: boolean;
-    label?: string;
-    /**
-     * Only usable in conjunction with {isSearchable: true}.
-     * Used as search input’s name.
-     */
-    name?: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => unknown;
-    onClose?: () => unknown;
-    onMouseDown?: (event: React.MouseEvent<HTMLElement>) => unknown;
-    onMouseUp?: (event: React.MouseEvent<HTMLElement>) => unknown;
-    onOpen?: () => unknown;
-    onSubmitItem?: (payload: Item) => void;
-    /**
-     * Only usable in conjunction with {isSearchable: true}.
-     * Used as search input’s placeholder.
-     */
-    placeholder?: string;
-    style?: React.CSSProperties;
-    /**
-     * Only usable in conjunction with {isSearchable: true}.
-     * Used as search input’s tabIndex.
-     */
-    tabIndex?: number;
-    /**
-     * Used as search input’s value if props.isSearchable === true
-     * Used to determine if value has changed to avoid triggering onSubmitItem if not
-     */
-    value?: string;
-};
-
-type ChildrenTuple = [React.ReactNode, React.ReactNode];
-
-type MousePosition = { clientX: number; clientY: number };
-
-type TimeoutID = ReturnType<typeof setTimeout>;
-
-const { Children, Fragment, useCallback, useEffect, useMemo, useRef, useState } = React;
-
-const noop = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
-
-const CHILDREN_ERROR =
-    '@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.';
-const TEXT_INPUT_SELECTOR =
-    'input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea';
-
-export default function Dropdown({
-    allowCreate,
-    allowEmpty = true,
-    children,
-    className,
-    disabled,
-    hasItems = true,
-    isOpenOnMount,
-    isSearchable,
-    keepOpenOnSubmit = !hasItems,
-    label,
-    name,
-    onClick,
-    onClose,
-    onMouseDown,
-    onMouseUp,
-    onOpen,
-    onSubmitItem,
-    placeholder,
-    style: styleFromProps,
-    tabIndex,
-    value,
-}: Props) {
-    const childrenCount = Children.count(children);
-    if (childrenCount !== 1 && childrenCount !== 2) {
-        if (childrenCount === 0) {
-            throw new Error(CHILDREN_ERROR + ' Received no children.');
-        }
-        console.error(`${CHILDREN_ERROR} Received ${childrenCount} children.`);
-    }
-
-    let trigger: React.ReactNode;
-    if (childrenCount > 1) {
-        trigger = (children as ChildrenTuple)[0];
-    }
-    const isTriggerFromProps = React.isValidElement(trigger);
-    const [isOpen, setIsOpen] = useState<boolean>(isOpenOnMount ?? false);
-    const [isOpening, setIsOpening] = useState<boolean>(!isOpenOnMount);
-    const [dropdownBodyElement, setDropdownBodyElement] = useState<HTMLDivElement | null>(
-        null,
-    );
-
-    const dropdownElementRef = useRef<HTMLDivElement | null>(null);
-    const inputElementRef = useRef<HTMLInputElement | null>(null);
-    const closingTimerRef = useRef<null | TimeoutID>(null);
-    const isOpeningTimerRef = useRef<null | TimeoutID>(null);
-    const currentInputMethodRef = useRef<'keyboard' | 'mouse'>('mouse');
-    const clearEnteredCharactersTimerRef = useRef<null | TimeoutID>(null);
-    const enteredCharactersRef = useRef<string>('');
-    const mouseDownPositionRef = useRef<MousePosition | null>(null);
-    const outOfBounds = useIsOutOfBounds(dropdownBodyElement);
-
-    const setDropdownOpenRef = useRef(() => setIsOpen(true));
-    const allowCreateRef = useRef(allowCreate);
-    const allowEmptyRef = useRef(allowEmpty);
-    const hasItemsRef = useRef(hasItems);
-    const isOpenRef = useRef(isOpen);
-    const isOpeningRef = useRef(isOpening);
-    const keepOpenOnSubmitRef = useRef(keepOpenOnSubmit);
-    const onCloseRef = useRef(onClose);
-    const onOpenRef = useRef(onOpen);
-    const onSubmitItemRef = useRef(onSubmitItem);
-    const valueRef = useRef(value);
-
-    useEffect(() => {
-        allowCreateRef.current = allowCreate;
-        allowEmptyRef.current = allowEmpty;
-        hasItemsRef.current = hasItems;
-        isOpenRef.current = isOpen;
-        isOpeningRef.current = isOpening;
-        keepOpenOnSubmitRef.current = keepOpenOnSubmit;
-        onCloseRef.current = onClose;
-        onOpenRef.current = onOpen;
-        onSubmitItemRef.current = onSubmitItem;
-        valueRef.current = value;
-    }, [
-        allowCreate,
-        allowEmpty,
-        hasItems,
-        isOpen,
-        isOpening,
-        keepOpenOnSubmit,
-        onClose,
-        onOpen,
-        onSubmitItem,
-        value,
-    ]);
-
-    const isMountedRef = useRef(false);
-
-    useEffect(() => {
-        if (!isMountedRef.current) {
-            isMountedRef.current = true;
-            // If isOpenOnMount, trigger onOpen right away
-            if (isOpenRef.current && onOpenRef.current) {
-                onOpenRef.current();
-            }
-            return;
-        }
-
-        if (isOpen && onOpenRef.current) {
-            onOpenRef.current();
-        } else if (!isOpen && onCloseRef.current) {
-            onCloseRef.current();
-        }
-    }, [isOpen]);
-
-    const closeDropdown = useCallback(() => {
-        setIsOpen(false);
-        setIsOpening(false);
-        mouseDownPositionRef.current = null;
-        if (closingTimerRef.current) {
-            clearTimeout(closingTimerRef.current);
-            closingTimerRef.current = null;
-        }
-    }, []);
-
-    const handleSubmitItem = useCallback(
-        (event: Event | React.SyntheticEvent<HTMLElement>) => {
-            const eventTarget = event.target as HTMLElement;
-            if (isOpenRef.current && !keepOpenOnSubmitRef.current) {
-                const keepOpen = eventTarget.closest(
-                    '[data-ukt-keep-open]',
-                ) as HTMLElement | null;
-                // Don’t close dropdown if event occurs w/in data-ukt-keep-open element
-                if (
-                    !keepOpen?.dataset.uktKeepOpen ||
-                    keepOpen.dataset.uktKeepOpen === 'false'
-                ) {
-                    // A short timeout before closing is better UX when user selects an item so dropdown
-                    // doesn’t close before expected. It also enables using <Link />s in the dropdown body.
-                    closingTimerRef.current = setTimeout(closeDropdown, 90);
-                }
-            }
-
-            if (!hasItemsRef.current) return;
-
-            const element = getActiveItemElement(dropdownElementRef.current);
-            if (!element && !allowCreateRef.current) {
-                // If not allowEmpty, don’t allow submitting an empty item
-                if (!allowEmptyRef.current) return;
-                // If we have an input element as trigger & the user didn’t clear the text, do nothing
-                if (inputElementRef.current?.value) return;
-            }
-
-            let itemLabel = element?.innerText ?? '';
-            if (inputElementRef.current) {
-                if (!element) {
-                    itemLabel = inputElementRef.current.value;
-                } else {
-                    inputElementRef.current.value = itemLabel;
-                }
-
-                if (
-                    inputElementRef.current ===
-                    inputElementRef.current.ownerDocument.activeElement
-                ) {
-                    inputElementRef.current.blur();
-                }
-            }
-
-            const nextValue = element?.dataset.uktValue ?? itemLabel;
-            // If parent is controlling Dropdown via props.value and nextValue is the same, do nothing
-            if (valueRef.current && valueRef.current === nextValue) return;
-
-            if (onSubmitItemRef.current) {
-                onSubmitItemRef.current({
-                    element,
-                    event,
-                    label: itemLabel,
-                    value: nextValue,
-                });
-            }
-        },
-        [closeDropdown],
-    );
-
-    const handleMouseMove = useCallback(
-        ({ clientX, clientY }: React.MouseEvent<HTMLElement>) => {
-            currentInputMethodRef.current = 'mouse';
-            const initialPosition = mouseDownPositionRef.current;
-            if (!initialPosition) return;
-            if (
-                Math.abs(initialPosition.clientX - clientX) < 12 &&
-                Math.abs(initialPosition.clientY - clientY) < 12
-            ) {
-                return;
-            }
-            setIsOpening(false);
-        },
-        [],
-    );
-
-    const handleMouseOver = useCallback((event: React.MouseEvent<HTMLElement>) => {
-        if (!hasItemsRef.current) return;
-
-        // If user isn’t currently using the mouse to navigate the dropdown, do nothing
-        if (currentInputMethodRef.current !== 'mouse') return;
-
-        // Ensure we have the dropdown root HTMLElement
-        const dropdownElement = dropdownElementRef.current;
-        if (!dropdownElement) return;
-
-        const itemElements = getItemElements(dropdownElement);
-        if (!itemElements) return;
-
-        const eventTarget = event.target as HTMLElement;
-        const item = eventTarget.closest(ITEM_SELECTOR) as HTMLElement | null;
-        const element = item ?? eventTarget;
-        for (const itemElement of itemElements) {
-            if (itemElement === element) {
-                setActiveItem({ dropdownElement, element });
-                return;
-            }
-        }
-    }, []);
-
-    const handleMouseOut = useCallback((event: React.MouseEvent<HTMLElement>) => {
-        if (!hasItemsRef.current) return;
-        const activeItem = getActiveItemElement(dropdownElementRef.current);
-        if (!activeItem) return;
-        const eventRelatedTarget = event.relatedTarget as HTMLElement;
-        if (activeItem !== event.target || activeItem.contains(eventRelatedTarget)) {
-            return;
-        }
-        // If user moused out of activeItem (not into a descendant), it’s no longer active
-        delete activeItem.dataset.uktActive;
-    }, []);
-
-    const handleMouseDown = useCallback(
-        (event: React.MouseEvent<HTMLElement>) => {
-            if (onMouseDown) onMouseDown(event);
-            if (isOpenRef.current) return;
-
-            setIsOpen(true);
-            setIsOpening(true);
-            mouseDownPositionRef.current = {
-                clientX: event.clientX,
-                clientY: event.clientY,
-            };
-            isOpeningTimerRef.current = setTimeout(() => {
-                setIsOpening(false);
-                isOpeningTimerRef.current = null;
-            }, 1000);
-        },
-        [onMouseDown],
-    );
-
-    const handleMouseUp = useCallback(
-        (event: React.MouseEvent<HTMLElement>) => {
-            if (onMouseUp) onMouseUp(event);
-            // If dropdown is still opening or isn’t open or is closing, do nothing
-            if (isOpeningRef.current || !isOpenRef.current || closingTimerRef.current) {
-                return;
-            }
-
-            const eventTarget = event.target as HTMLElement;
-            // If click was outside dropdown body, don’t trigger submit
-            if (!eventTarget.closest(BODY_SELECTOR)) {
-                // Don’t close dropdown if isOpening or search input is focused
-                if (
-                    !isOpeningRef.current &&
-                    inputElementRef.current !== eventTarget.ownerDocument.activeElement
-                ) {
-                    closeDropdown();
-                }
-                return;
-            }
-
-            // If dropdown has no items and click was within dropdown body, do nothing
-            if (!hasItemsRef.current) return;
-
-            handleSubmitItem(event);
-        },
-        [closeDropdown, handleSubmitItem, onMouseUp],
-    );
-
-    const handleKeyDown = useCallback(
-        (event: KeyboardEvent) => {
-            const { altKey, ctrlKey, key, metaKey } = event;
-            const eventTarget = event.target as HTMLElement;
-            const dropdownElement = dropdownElementRef.current;
-            if (!dropdownElement) return;
-
-            const onEventHandled = () => {
-                event.stopPropagation();
-                event.preventDefault();
-                currentInputMethodRef.current = 'keyboard';
-            };
-
-            const isEventTargetingDropdown = dropdownElement.contains(eventTarget);
-
-            if (!isOpenRef.current) {
-                // If dropdown is closed, don’t handle key events if event target isn’t within dropdown
-                if (!isEventTargetingDropdown) return;
-                // Open the dropdown on spacebar, enter, or if isSearchable and user hits the ↑/↓ arrows
-                if (
-                    key === ' ' ||
-                    key === 'Enter' ||
-                    (hasItemsRef.current && (key === 'ArrowUp' || key === 'ArrowDown'))
-                ) {
-                    onEventHandled();
-                    setIsOpen(true);
-                }
-                return;
-            }
-
-            const isTargetUsingKeyEvents = isEventTargetUsingKeyEvent(event);
-
-            // If dropdown isOpen + hasItems & eventTargetNotUsingKeyEvents, handle characters
-            if (hasItemsRef.current && !isTargetUsingKeyEvents) {
-                let isEditingCharacters =
-                    !ctrlKey && !metaKey && /^[A-Za-z0-9]$/.test(key);
-                // User could also be editing characters if there are already characters entered
-                // and they are hitting delete or spacebar
-                if (!isEditingCharacters && enteredCharactersRef.current) {
-                    isEditingCharacters = key === ' ' || key === 'Backspace';
-                }
-
-                if (isEditingCharacters) {
-                    onEventHandled();
-                    if (key === 'Backspace') {
-                        enteredCharactersRef.current = enteredCharactersRef.current.slice(
-                            0,
-                            -1,
-                        );
-                    } else {
-                        enteredCharactersRef.current += key;
-                    }
-
-                    setActiveItem({
-                        dropdownElement,
-                        // If props.allowCreate, only override the input’s value with an
-                        // exact text match so user can enter a value not in items
-                        isExactMatch: allowCreateRef.current,
-                        text: enteredCharactersRef.current,
-                    });
-
-                    if (clearEnteredCharactersTimerRef.current) {
-                        clearTimeout(clearEnteredCharactersTimerRef.current);
-                    }
-
-                    clearEnteredCharactersTimerRef.current = setTimeout(() => {
-                        enteredCharactersRef.current = '';
-                        clearEnteredCharactersTimerRef.current = null;
-                    }, 1500);
-
-                    return;
-                }
-            }
-
-            // If dropdown isOpen, handle submitting the value
-            if (key === 'Enter' || (key === ' ' && !inputElementRef.current)) {
-                onEventHandled();
-                handleSubmitItem(event);
-                return;
-            }
-
-            // If dropdown isOpen, handle closing it on escape or spacebar if !hasItems
-            if (
-                key === 'Escape' ||
-                (isEventTargetingDropdown && key === ' ' && !hasItemsRef.current)
-            ) {
-                // Close dropdown if hasItems or event target not using key events
-                if (hasItemsRef.current || !isTargetUsingKeyEvents) {
-                    closeDropdown();
-                }
-                return;
-            }
-
-            // Handle ↑/↓ arrows
-            if (hasItemsRef.current) {
-                if (key === 'ArrowUp') {
-                    onEventHandled();
-                    if (altKey || metaKey) {
-                        setActiveItem({ dropdownElement, index: 0 });
-                    } else {
-                        setActiveItem({ dropdownElement, indexAddend: -1 });
-                    }
-                    return;
-                }
-                if (key === 'ArrowDown') {
-                    onEventHandled();
-                    if (altKey || metaKey) {
-                        // Using a negative index counts back from the end
-                        setActiveItem({ dropdownElement, index: -1 });
-                    } else {
-                        setActiveItem({ dropdownElement, indexAddend: 1 });
-                    }
-                    return;
-                }
-            }
-        },
-        [closeDropdown, handleSubmitItem],
-    );
-
-    useKeyboardEvents({ ignoreUsedKeyboardEvents: false, onKeyDown: handleKeyDown });
-
-    const cleanupEventListenersRef = useRef<() => void>(noop);
-
-    const handleRef = useCallback(
-        (ref: HTMLDivElement | null) => {
-            dropdownElementRef.current = ref;
-            if (!ref) {
-                // If component was unmounted, cleanup handlers
-                cleanupEventListenersRef.current();
-                cleanupEventListenersRef.current = noop;
-                return;
-            }
-
-            const { ownerDocument } = ref;
-            let inputElement = inputElementRef.current;
-            // Check if trigger from props is a textual input or textarea element
-            if (isTriggerFromProps && !inputElement && ref.firstElementChild) {
-                if (ref.firstElementChild.matches(TEXT_INPUT_SELECTOR)) {
-                    inputElement = ref.firstElementChild as HTMLInputElement;
-                } else {
-                    inputElement =
-                        ref.firstElementChild.querySelector(TEXT_INPUT_SELECTOR);
-                }
-                inputElementRef.current = inputElement;
-            }
-
-            const handleGlobalMouseDown = ({ target }: MouseEvent) => {
-                const eventTarget = target as HTMLElement;
-                if (
-                    dropdownElementRef.current &&
-                    !dropdownElementRef.current.contains(eventTarget)
-                ) {
-                    // Close dropdown on an outside click
-                    closeDropdown();
-                }
-            };
-
-            const handleGlobalMouseUp = ({ target }: MouseEvent) => {
-                if (!isOpenRef.current || closingTimerRef.current) return;
-
-                // If still isOpening (gets set false 1s after open triggers), set it to false onMouseUp
-                if (isOpeningRef.current) {
-                    setIsOpening(false);
-                    if (isOpeningTimerRef.current) {
-                        clearTimeout(isOpeningTimerRef.current);
-                        isOpeningTimerRef.current = null;
-                    }
-                    return;
-                }
-
-                const eventTarget = target as HTMLElement;
-                // Only handle mouseup events from outside the dropdown here
-                if (!dropdownElementRef.current?.contains(eventTarget)) {
-                    closeDropdown();
-                }
-            };
-
-            // Close dropdown if any element is focused outside of this dropdown
-            const handleGlobalFocusIn = ({ target }: Event) => {
-                if (!isOpenRef.current) return;
-
-                const eventTarget = target as HTMLElement;
-                // If focused element is a descendant or a parent of the dropdown, do nothing
-                if (
-                    !dropdownElementRef.current ||
-                    dropdownElementRef.current.contains(eventTarget) ||
-                    eventTarget.contains(dropdownElementRef.current)
-                ) {
-                    return;
-                }
-
-                closeDropdown();
-            };
-
-            document.addEventListener('focusin', handleGlobalFocusIn);
-            document.addEventListener('mousedown', handleGlobalMouseDown);
-            document.addEventListener('mouseup', handleGlobalMouseUp);
-
-            if (ownerDocument !== document) {
-                ownerDocument.addEventListener('focusin', handleGlobalFocusIn);
-                ownerDocument.addEventListener('mousedown', handleGlobalMouseDown);
-                ownerDocument.addEventListener('mouseup', handleGlobalMouseUp);
-            }
-
-            // If dropdown should be open on mount, focus it
-            if (isOpenOnMount) {
-                ref.focus();
-            }
-
-            const handleInput = (event: Event) => {
-                const dropdownElement = dropdownElementRef.current;
-                if (!dropdownElement) return;
-
-                if (!isOpenRef.current) setIsOpen(true);
-
-                const input = event.target as HTMLInputElement;
-                const isDeleting =
-                    enteredCharactersRef.current.length > input.value.length;
-                enteredCharactersRef.current = input.value;
-                // When deleting text, if there’s already an active item and
-                // input isn’t empty, preserve the active item, else update it
-                if (
-                    isDeleting &&
-                    input.value.length &&
-                    getActiveItemElement(dropdownElement)
-                ) {
-                    return;
-                }
-
-                setActiveItem({
-                    dropdownElement,
-                    // If props.allowCreate, only override the input’s value with an
-                    // exact text match so user can enter a value not in items
-                    isExactMatch: allowCreateRef.current,
-                    text: enteredCharactersRef.current,
-                });
-            };
-
-            if (inputElement) {
-                inputElement.addEventListener('input', handleInput);
-            }
-
-            cleanupEventListenersRef.current = () => {
-                document.removeEventListener('focusin', handleGlobalFocusIn);
-                document.removeEventListener('mousedown', handleGlobalMouseDown);
-                document.removeEventListener('mouseup', handleGlobalMouseUp);
-
-                if (ownerDocument !== document) {
-                    ownerDocument.removeEventListener('focusin', handleGlobalFocusIn);
-                    ownerDocument.removeEventListener('mousedown', handleGlobalMouseDown);
-                    ownerDocument.removeEventListener('mouseup', handleGlobalMouseUp);
-                }
-
-                if (inputElement) {
-                    inputElement.removeEventListener('input', handleInput);
-                }
-            };
-        },
-        [closeDropdown, isOpenOnMount, isTriggerFromProps],
-    );
-
-    if (!isTriggerFromProps) {
-        if (isSearchable) {
-            trigger = (
-                <input
-                    autoComplete="off"
-                    className={TRIGGER_CLASS_NAME}
-                    defaultValue={value ?? ''}
-                    disabled={disabled}
-                    name={name}
-                    onFocus={setDropdownOpenRef.current}
-                    placeholder={placeholder}
-                    ref={inputElementRef}
-                    tabIndex={tabIndex}
-                    type="text"
-                />
-            );
-        } else {
-            trigger = (
-                <button className={TRIGGER_CLASS_NAME} tabIndex={0}>
-                    {trigger}
-                </button>
-            );
-        }
-    }
-
-    if (label) {
-        trigger = (
-            <label className={LABEL_CLASS_NAME}>
-                <div className={LABEL_TEXT_CLASS_NAME}>{label}</div>
-                {trigger}
-            </label>
-        );
-    }
-
-    const style = useMemo<React.CSSProperties>(
-        () => ({
-            ...styleFromProps,
-            ...(outOfBounds.maxHeight != null && outOfBounds.maxHeight > 0
-                ? {
-                      [BODY_MAX_HEIGHT_VAR]: `calc(${outOfBounds.maxHeight}px - var(--uktdd-body-buffer))`,
-                  }
-                : null),
-            ...(outOfBounds.maxWidth != null && outOfBounds.maxWidth > 0
-                ? {
-                      [BODY_MAX_WIDTH_VAR]: `calc(${outOfBounds.maxWidth}px - var(--uktdd-body-buffer))`,
-                  }
-                : null),
-        }),
-        [outOfBounds.maxHeight, outOfBounds.maxWidth, styleFromProps],
-    );
-
-    return (
-        <Fragment>
-            <Style href="@acusti/dropdown/Dropdown">{STYLES}</Style>
-            <div
-                className={clsx(ROOT_CLASS_NAME, className, {
-                    disabled,
-                    'is-open': isOpen,
-                    'is-searchable': isSearchable,
-                })}
-                onClick={onClick}
-                onMouseDown={handleMouseDown}
-                onMouseMove={handleMouseMove}
-                onMouseOut={handleMouseOut}
-                onMouseOver={handleMouseOver}
-                onMouseUp={handleMouseUp}
-                ref={handleRef}
-                style={style}
-            >
-                {trigger}
-                {isOpen ? (
-                    <div
-                        className={clsx(BODY_CLASS_NAME, {
-                            'calculating-position': !outOfBounds.hasLayout,
-                            'has-items': hasItems,
-                            'out-of-bounds-bottom':
-                                outOfBounds.bottom && !outOfBounds.top,
-                            'out-of-bounds-left': outOfBounds.left && !outOfBounds.right,
-                            'out-of-bounds-right': outOfBounds.right && !outOfBounds.left,
-                            'out-of-bounds-top': outOfBounds.top && !outOfBounds.bottom,
-                        })}
-                        ref={setDropdownBodyElement}
-                    >
-                        {childrenCount > 1 ? (children as ChildrenTuple)[1] : children}
-                    </div>
-                ) : null}
-            </div>
-        </Fragment>
-    );
-}