@acusti/dropdown 0.15.0 → 0.16.0

package/dist/Dropdown.js

@@ -3,12 +3,41 @@ import { Style } from '@acusti/styling';
 import useIsOutOfBounds from '@acusti/use-is-out-of-bounds';
 import classnames from 'classnames';
 import * as React from 'react';
-import { BODY_CLASS_NAME, BODY_SELECTOR, LABEL_CLASS_NAME, LABEL_TEXT_CLASS_NAME, ROOT_CLASS_NAME, STYLES, TRIGGER_CLASS_NAME, } from './styles.js';
-import { getActiveItemElement, getItemElements, ITEM_SELECTOR, KEY_EVENT_ELEMENTS, setActiveItem, } from './helpers.js';
+import {
+    BODY_CLASS_NAME,
+    BODY_SELECTOR,
+    LABEL_CLASS_NAME,
+    LABEL_TEXT_CLASS_NAME,
+    ROOT_CLASS_NAME,
+    STYLES,
+    TRIGGER_CLASS_NAME,
+} from './styles.js';
+import {
+    getActiveItemElement,
+    getItemElements,
+    ITEM_SELECTOR,
+    KEY_EVENT_ELEMENTS,
+    setActiveItem,
+} from './helpers.js';
 const { Children, Fragment, useCallback, useLayoutEffect, useRef, useState } = React;
-const noop = () => { };
-const CHILDREN_ERROR = '@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.';
-const Dropdown = ({ allowEmpty = true, children, className, disabled, hasItems = true, isOpenOnMount, isSearchable, label, name, onSubmitItem, placeholder, tabIndex, value, }) => {
+const noop = () => {};
+const CHILDREN_ERROR =
+    '@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.';
+const Dropdown = ({
+    allowEmpty = true,
+    children,
+    className,
+    disabled,
+    hasItems = true,
+    isOpenOnMount,
+    isSearchable,
+    label,
+    name,
+    onSubmitItem,
+    placeholder,
+    tabIndex,
+    value,
+}) => {
     const childrenCount = Children.count(children);
     if (childrenCount !== 1 && childrenCount !== 2) {
         if (childrenCount === 0) {
@@ -70,30 +99,39 @@ const Dropdown = ({ allowEmpty = true, children, className, disabled, hasItems =
             // doesn’t close before expected. It also enables using <Link />s in the dropdown body.
             closingTimerRef.current = setTimeout(closeDropdown, 90);
         }
-        if (!hasItemsRef.current)
-            return;
+        if (!hasItemsRef.current) return;
         const nextElement = getActiveItemElement(dropdownElementRef.current);
         if (!nextElement) {
             // If not allowEmpty, don’t allow submitting an empty item
-            if (!allowEmptyRef.current)
-                return;
+            if (!allowEmptyRef.current) return;
             // If we have an input element as trigger & the user didn’t clear the text, do nothing
-            if ((_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.value)
+            if (
+                (_a = inputElementRef.current) === null || _a === void 0
+                    ? void 0
+                    : _a.value
+            )
                 return;
         }
-        const label = (nextElement === null || nextElement === void 0 ? void 0 : nextElement.innerText) || '';
-        const nextValue = (nextElement === null || nextElement === void 0 ? void 0 : nextElement.dataset.uktValue) || label;
+        const label =
+            (nextElement === null || nextElement === void 0
+                ? void 0
+                : nextElement.innerText) || '';
+        const nextValue =
+            (nextElement === null || nextElement === void 0
+                ? void 0
+                : nextElement.dataset.uktValue) || label;
         const nextItem = { element: nextElement, value: nextValue };
         if (inputElementRef.current) {
             inputElementRef.current.value = label;
-            if (inputElementRef.current ===
-                inputElementRef.current.ownerDocument.activeElement) {
+            if (
+                inputElementRef.current ===
+                inputElementRef.current.ownerDocument.activeElement
+            ) {
                 inputElementRef.current.blur();
             }
         }
         // If parent is controlling Dropdown via props.value and nextValue is the same, do nothing
-        if (valueRef.current && valueRef.current === nextValue)
-            return;
+        if (valueRef.current && valueRef.current === nextValue) return;
         if (onSubmitItemRef.current) {
             onSubmitItemRef.current(nextItem);
         }
@@ -101,27 +139,24 @@ const Dropdown = ({ allowEmpty = true, children, className, disabled, hasItems =
     const handleMouseMove = useCallback(({ clientX, clientY }) => {
         currentInputMethodRef.current = 'mouse';
         const initialPosition = mouseDownPositionRef.current;
-        if (!initialPosition)
-            return;
-        if (Math.abs(initialPosition.clientX - clientX) < 12 &&
-            Math.abs(initialPosition.clientY - clientY) < 12) {
+        if (!initialPosition) return;
+        if (
+            Math.abs(initialPosition.clientX - clientX) < 12 &&
+            Math.abs(initialPosition.clientY - clientY) < 12
+        ) {
             return;
         }
         setIsOpening(false);
     }, []);
     const handleMouseOver = useCallback((event) => {
-        if (!hasItemsRef.current)
-            return;
+        if (!hasItemsRef.current) return;
         // If user isn’t currently using the mouse to navigate the dropdown, do nothing
-        if (currentInputMethodRef.current !== 'mouse')
-            return;
+        if (currentInputMethodRef.current !== 'mouse') return;
         // Ensure we have the dropdown root HTMLElement
         const dropdownElement = dropdownElementRef.current;
-        if (!dropdownElement)
-            return;
+        if (!dropdownElement) return;
         const itemElements = getItemElements(dropdownElement);
-        if (!itemElements)
-            return;
+        if (!itemElements) return;
         const eventTarget = event.target;
         const item = eventTarget.closest(ITEM_SELECTOR);
         const element = item || eventTarget;
@@ -136,282 +171,327 @@ const Dropdown = ({ allowEmpty = true, children, className, disabled, hasItems =
         }
     }, []);
     const cleanupEventListenersRef = useRef(noop);
-    const handleRef = useCallback((ref) => {
-        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 an input or textarea element
-        if (isTriggerFromProps && !inputElement && ref.firstElementChild) {
-            inputElement = ref.firstElementChild.querySelector('input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea');
-            inputElementRef.current = inputElement;
-        }
-        const handleMouseDown = ({ clientX, clientY, target }) => {
-            const eventTarget = target;
-            if (dropdownElementRef.current &&
-                !dropdownElementRef.current.contains(eventTarget)) {
-                // Close dropdown on an outside click
-                closeDropdown();
+    const handleRef = useCallback(
+        (ref) => {
+            dropdownElementRef.current = ref;
+            if (!ref) {
+                // If component was unmounted, cleanup handlers
+                cleanupEventListenersRef.current();
+                cleanupEventListenersRef.current = noop;
                 return;
             }
-            if (isOpenRef.current)
-                return;
-            setIsOpen(true);
-            setIsOpening(true);
-            mouseDownPositionRef.current = { clientX, clientY };
-            isOpeningTimerRef.current = setTimeout(() => {
-                setIsOpening(false);
-                isOpeningTimerRef.current = null;
-            }, 1000);
-        };
-        const handleMouseUp = ({ target }) => {
-            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 { ownerDocument } = ref;
+            let inputElement = inputElementRef.current;
+            // Check if trigger from props is an input or textarea element
+            if (isTriggerFromProps && !inputElement && ref.firstElementChild) {
+                inputElement = ref.firstElementChild.querySelector(
+                    'input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea',
+                );
+                inputElementRef.current = inputElement;
             }
-            const isTargetInBody = target.closest(BODY_SELECTOR);
-            // If mouseup is on dropdown body and there are no items, don’t close the dropdown
-            if (!hasItemsRef.current && isTargetInBody)
-                return;
-            // If mouseup is on an item, trigger submit item, else close the dropdown
-            if (isTargetInBody) {
-                handleSubmitItem();
-            }
-            else if (!inputElementRef.current ||
-                (dropdownElementRef.current &&
-                    dropdownElementRef.current.contains(ownerDocument.activeElement))) {
-                // If dropdown is searchable and ref is still focused, this won’t be invoked
-                closeDropdown();
-            }
-        };
-        const handleKeyDown = (event) => {
-            const { altKey, ctrlKey, key, metaKey } = event;
-            const eventTarget = event.target;
-            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 up/down arrows
-                if (key === ' ' ||
-                    key === 'Enter' ||
-                    (hasItemsRef.current &&
-                        (key === 'ArrowUp' || key === 'ArrowDown'))) {
-                    onEventHandled();
-                    setIsOpen(true);
+            const handleMouseDown = ({ clientX, clientY, target }) => {
+                const eventTarget = target;
+                if (
+                    dropdownElementRef.current &&
+                    !dropdownElementRef.current.contains(eventTarget)
+                ) {
+                    // Close dropdown on an outside click
+                    closeDropdown();
                     return;
                 }
-                return;
-            }
-            // If dropdown isOpen, hasItems, and not isSearchable, handle entering characters
-            if (hasItemsRef.current && !inputElementRef.current) {
-                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 input element came from props, only override the input’s value
-                        // with an exact text match so user can enter a value not in items
-                        isExactMatch: isTriggerFromPropsRef.current,
-                        text: enteredCharactersRef.current,
-                    });
-                    if (clearEnteredCharactersTimerRef.current) {
-                        clearTimeout(clearEnteredCharactersTimerRef.current);
+                if (isOpenRef.current) return;
+                setIsOpen(true);
+                setIsOpening(true);
+                mouseDownPositionRef.current = { clientX, clientY };
+                isOpeningTimerRef.current = setTimeout(() => {
+                    setIsOpening(false);
+                    isOpeningTimerRef.current = null;
+                }, 1000);
+            };
+            const handleMouseUp = ({ target }) => {
+                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;
                     }
-                    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();
-                return;
-            }
-            // If dropdown isOpen, handle closing it on escape or spacebar if !hasItems
-            if (key === 'Escape' ||
-                (isEventTargetingDropdown && key === ' ' && !hasItemsRef.current)) {
-                // If there are no items & event target element uses key events, don’t close it
-                if (!hasItemsRef.current &&
-                    (eventTarget.isContentEditable ||
-                        KEY_EVENT_ELEMENTS.has(eventTarget.tagName))) {
+                const isTargetInBody = target.closest(BODY_SELECTOR);
+                // If mouseup is on dropdown body and there are no items, don’t close the dropdown
+                if (!hasItemsRef.current && isTargetInBody) return;
+                // If mouseup is on an item, trigger submit item, else close the dropdown
+                if (isTargetInBody) {
+                    handleSubmitItem();
+                } else if (
+                    !inputElementRef.current ||
+                    (dropdownElementRef.current &&
+                        dropdownElementRef.current.contains(ownerDocument.activeElement))
+                ) {
+                    // If dropdown is searchable and ref is still focused, this won’t be invoked
+                    closeDropdown();
+                }
+            };
+            const handleKeyDown = (event) => {
+                const { altKey, ctrlKey, key, metaKey } = event;
+                const eventTarget = event.target;
+                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 up/down arrows
+                    if (
+                        key === ' ' ||
+                        key === 'Enter' ||
+                        (hasItemsRef.current &&
+                            (key === 'ArrowUp' || key === 'ArrowDown'))
+                    ) {
+                        onEventHandled();
+                        setIsOpen(true);
+                        return;
+                    }
                     return;
                 }
-                closeDropdown();
-                return;
-            }
-            // Handle ↑/↓ arrows
-            if (hasItemsRef.current) {
-                if (key === 'ArrowUp') {
-                    onEventHandled();
-                    if (altKey || metaKey) {
-                        setActiveItem({
-                            dropdownElement,
-                            index: 0,
-                        });
+                // If dropdown isOpen, hasItems, and not isSearchable, handle entering characters
+                if (hasItemsRef.current && !inputElementRef.current) {
+                    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';
                     }
-                    else {
+                    if (isEditingCharacters) {
+                        onEventHandled();
+                        if (key === 'Backspace') {
+                            enteredCharactersRef.current =
+                                enteredCharactersRef.current.slice(0, -1);
+                        } else {
+                            enteredCharactersRef.current += key;
+                        }
                         setActiveItem({
                             dropdownElement,
-                            indexAddend: -1,
+                            // If input element came from props, only override the input’s value
+                            // with an exact text match so user can enter a value not in items
+                            isExactMatch: isTriggerFromPropsRef.current,
+                            text: enteredCharactersRef.current,
                         });
+                        if (clearEnteredCharactersTimerRef.current) {
+                            clearTimeout(clearEnteredCharactersTimerRef.current);
+                        }
+                        clearEnteredCharactersTimerRef.current = setTimeout(() => {
+                            enteredCharactersRef.current = '';
+                            clearEnteredCharactersTimerRef.current = null;
+                        }, 1500);
+                        return;
                     }
-                    return;
                 }
-                if (key === 'ArrowDown') {
+                // If dropdown isOpen, handle submitting the value
+                if (key === 'Enter' || (key === ' ' && !inputElementRef.current)) {
                     onEventHandled();
-                    if (altKey || metaKey) {
-                        // Using a negative index counts back from the end
-                        setActiveItem({
-                            dropdownElement,
-                            index: -1,
-                        });
+                    handleSubmitItem();
+                    return;
+                }
+                // If dropdown isOpen, handle closing it on escape or spacebar if !hasItems
+                if (
+                    key === 'Escape' ||
+                    (isEventTargetingDropdown && key === ' ' && !hasItemsRef.current)
+                ) {
+                    // If there are no items & event target element uses key events, don’t close it
+                    if (
+                        !hasItemsRef.current &&
+                        (eventTarget.isContentEditable ||
+                            KEY_EVENT_ELEMENTS.has(eventTarget.tagName))
+                    ) {
+                        return;
                     }
-                    else {
-                        setActiveItem({
-                            dropdownElement,
-                            indexAddend: 1,
-                        });
+                    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;
                     }
+                }
+            };
+            // Close dropdown if any element is focused outside of this dropdown
+            const handleFocusIn = (event) => {
+                if (!isOpenRef.current) return;
+                const eventTarget = event.target;
+                // 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;
                 }
-            }
-        };
-        // Close dropdown if any element is focused outside of this dropdown
-        const handleFocusIn = (event) => {
-            if (!isOpenRef.current)
-                return;
-            const eventTarget = event.target;
-            // 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', handleFocusIn);
-        document.addEventListener('keydown', handleKeyDown);
-        document.addEventListener('mousedown', handleMouseDown);
-        document.addEventListener('mouseup', handleMouseUp);
-        if (ownerDocument !== document) {
-            ownerDocument.addEventListener('focusin', handleFocusIn);
-            ownerDocument.addEventListener('keydown', handleKeyDown);
-            ownerDocument.addEventListener('mousedown', handleMouseDown);
-            ownerDocument.addEventListener('mouseup', handleMouseUp);
-        }
-        // If dropdown should be open on mount, focus it
-        if (isOpenOnMount) {
-            ref.focus();
-        }
-        const handleInput = (event) => {
-            const dropdownElement = dropdownElementRef.current;
-            if (!dropdownElement)
-                return;
-            if (!isOpenRef.current)
-                setIsOpen(true);
-            const input = event.target;
-            const isDeleting = enteredCharactersRef.current.length > input.value.length;
-            enteredCharactersRef.current = input.value;
-            // Don’t set a new active item if user is deleting text unless text is now empty
-            if (isDeleting && input.value.length)
-                return;
-            setActiveItem({
-                dropdownElement,
-                // If input element came from props, only override the input’s value
-                // with an exact text match so user can enter a value not in items
-                isExactMatch: isTriggerFromPropsRef.current,
-                text: enteredCharactersRef.current,
-            });
-        };
-        if (inputElement) {
-            inputElement.addEventListener('input', handleInput);
-        }
-        cleanupEventListenersRef.current = () => {
-            document.removeEventListener('focusin', handleFocusIn);
-            document.removeEventListener('keydown', handleKeyDown);
-            document.removeEventListener('mousedown', handleMouseDown);
-            document.removeEventListener('mouseup', handleMouseUp);
+                closeDropdown();
+            };
+            document.addEventListener('focusin', handleFocusIn);
+            document.addEventListener('keydown', handleKeyDown);
+            document.addEventListener('mousedown', handleMouseDown);
+            document.addEventListener('mouseup', handleMouseUp);
             if (ownerDocument !== document) {
-                ownerDocument.removeEventListener('focusin', handleFocusIn);
-                ownerDocument.removeEventListener('keydown', handleKeyDown);
-                ownerDocument.removeEventListener('mousedown', handleMouseDown);
-                ownerDocument.removeEventListener('mouseup', handleMouseUp);
+                ownerDocument.addEventListener('focusin', handleFocusIn);
+                ownerDocument.addEventListener('keydown', handleKeyDown);
+                ownerDocument.addEventListener('mousedown', handleMouseDown);
+                ownerDocument.addEventListener('mouseup', handleMouseUp);
+            }
+            // If dropdown should be open on mount, focus it
+            if (isOpenOnMount) {
+                ref.focus();
             }
+            const handleInput = (event) => {
+                const dropdownElement = dropdownElementRef.current;
+                if (!dropdownElement) return;
+                if (!isOpenRef.current) setIsOpen(true);
+                const input = event.target;
+                const isDeleting =
+                    enteredCharactersRef.current.length > input.value.length;
+                enteredCharactersRef.current = input.value;
+                // Don’t set a new active item if user is deleting text unless text is now empty
+                if (isDeleting && input.value.length) return;
+                setActiveItem({
+                    dropdownElement,
+                    // If input element came from props, only override the input’s value
+                    // with an exact text match so user can enter a value not in items
+                    isExactMatch: isTriggerFromPropsRef.current,
+                    text: enteredCharactersRef.current,
+                });
+            };
             if (inputElement) {
-                inputElement.removeEventListener('input', handleInput);
+                inputElement.addEventListener('input', handleInput);
             }
-        };
-    }, [closeDropdown, handleSubmitItem, isOpenOnMount, isTriggerFromProps]);
+            cleanupEventListenersRef.current = () => {
+                document.removeEventListener('focusin', handleFocusIn);
+                document.removeEventListener('keydown', handleKeyDown);
+                document.removeEventListener('mousedown', handleMouseDown);
+                document.removeEventListener('mouseup', handleMouseUp);
+                if (ownerDocument !== document) {
+                    ownerDocument.removeEventListener('focusin', handleFocusIn);
+                    ownerDocument.removeEventListener('keydown', handleKeyDown);
+                    ownerDocument.removeEventListener('mousedown', handleMouseDown);
+                    ownerDocument.removeEventListener('mouseup', handleMouseUp);
+                }
+                if (inputElement) {
+                    inputElement.removeEventListener('input', handleInput);
+                }
+            };
+        },
+        [closeDropdown, handleSubmitItem, isOpenOnMount, isTriggerFromProps],
+    );
     const handleTriggerFocus = useCallback(() => {
         setIsOpen(true);
     }, []);
     if (!isTriggerFromProps) {
         if (isSearchable) {
-            trigger = (React.createElement(InputText, { className: TRIGGER_CLASS_NAME, disabled: disabled, initialValue: value || '', name: name, onFocus: handleTriggerFocus, placeholder: placeholder, ref: inputElementRef, selectTextOnFocus: true, tabIndex: tabIndex, type: "text" }));
-        }
-        else {
-            trigger = (React.createElement("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0 }, trigger));
+            trigger = React.createElement(InputText, {
+                className: TRIGGER_CLASS_NAME,
+                disabled: disabled,
+                initialValue: value || '',
+                name: name,
+                onFocus: handleTriggerFocus,
+                placeholder: placeholder,
+                ref: inputElementRef,
+                selectTextOnFocus: true,
+                tabIndex: tabIndex,
+                type: 'text',
+            });
+        } else {
+            trigger = React.createElement(
+                'button',
+                { className: TRIGGER_CLASS_NAME, tabIndex: 0 },
+                trigger,
+            );
         }
     }
     if (label) {
-        trigger = (React.createElement("label", { className: LABEL_CLASS_NAME },
-            React.createElement("div", { className: LABEL_TEXT_CLASS_NAME }, label),
-            trigger));
+        trigger = React.createElement(
+            'label',
+            { className: LABEL_CLASS_NAME },
+            React.createElement('div', { className: LABEL_TEXT_CLASS_NAME }, label),
+            trigger,
+        );
     }
-    return (React.createElement(Fragment, null,
+    return React.createElement(
+        Fragment,
+        null,
         React.createElement(Style, null, STYLES),
-        React.createElement("div", { className: classnames(ROOT_CLASS_NAME, className, {
-                disabled,
-                'is-open': isOpen,
-                'is-searchable': isSearchable,
-            }), onMouseMove: handleMouseMove, onMouseOver: handleMouseOver, ref: handleRef, tabIndex: isSearchable || inputElementRef.current || !isTriggerFromProps
-                ? undefined
-                : 0 },
+        React.createElement(
+            'div',
+            {
+                className: classnames(ROOT_CLASS_NAME, className, {
+                    disabled,
+                    'is-open': isOpen,
+                    'is-searchable': isSearchable,
+                }),
+                onMouseMove: handleMouseMove,
+                onMouseOver: handleMouseOver,
+                ref: handleRef,
+                tabIndex:
+                    isSearchable || inputElementRef.current || !isTriggerFromProps
+                        ? undefined
+                        : 0,
+            },
             trigger,
-            isOpen ? (React.createElement("div", { className: classnames(BODY_CLASS_NAME, {
-                    'calculating-position': !outOfBounds.hasLayout,
-                    'has-items': hasItems,
-                    'out-of-bounds-bottom': outOfBounds.bottom,
-                    'out-of-bounds-left': outOfBounds.left,
-                    'out-of-bounds-right': outOfBounds.right,
-                    'out-of-bounds-top': outOfBounds.top,
-                }), ref: setDropdownBodyElement }, children[1] || children[0] || children)) : null)));
+            isOpen
+                ? React.createElement(
+                      'div',
+                      {
+                          className: classnames(BODY_CLASS_NAME, {
+                              'calculating-position': !outOfBounds.hasLayout,
+                              'has-items': hasItems,
+                              'out-of-bounds-bottom': outOfBounds.bottom,
+                              'out-of-bounds-left': outOfBounds.left,
+                              'out-of-bounds-right': outOfBounds.right,
+                              'out-of-bounds-top': outOfBounds.top,
+                          }),
+                          ref: setDropdownBodyElement,
+                      },
+                      children[1] || children[0] || children,
+                  )
+                : null,
+        ),
+    );
 };
 export default Dropdown;
-//# sourceMappingURL=Dropdown.js.map
+//# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown.js.flow

@@ -5,54 +5,54 @@
  * @flow
  */
 
-import * as React from "react";
+import * as React from 'react';
 export type Item = {|
-  element: HTMLElement | null,
-  value: string,
+    element: HTMLElement | null,
+    value: string,
 |};
 export type Props = {|
-  /**
-   * Boolean indicating if the user can submit an empty value (i.e. clear the value); defaults to true
-   */
-  allowEmpty?: 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 (e.g. ReactChild) or exactly two renderable children
-   */
-  children: React.Element<any> | [React.Node, React.Node],
-  className?: string,
-  disabled?: boolean,
+    /**
+     * Can take a single React element (e.g. ReactChild) or exactly two renderable children
+     */
+    children: React.Element<any> | [React.Node, React.Node],
+    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,
-  label?: string,
+    /**
+     * Group identifier string links dropdowns together into a menu (like macOS top menubar)
+     */
+    group?: string,
+    hasItems?: boolean,
+    isOpenOnMount?: boolean,
+    isSearchable?: boolean,
+    label?: string,
 
-  /**
-   * Only usable in conjunction with {isSearchable: true}; used as search input’s name
-   */
-  name?: string,
-  onSubmitItem?: (payload: Item) => void,
+    /**
+     * Only usable in conjunction with {isSearchable: true}; used as search input’s name
+     */
+    name?: string,
+    onSubmitItem?: (payload: Item) => void,
 
-  /**
-   * Only usable in conjunction with {isSearchable: true}; used as search input’s placeholder
-   */
-  placeholder?: string,
+    /**
+     * Only usable in conjunction with {isSearchable: true}; used as search input’s placeholder
+     */
+    placeholder?: string,
 
-  /**
-   * Only usable in conjunction with {isSearchable: true}; used as search input’s tabIndex
-   */
-  tabIndex?: number,
+    /**
+     * 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,
+    /**
+     * 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,
 |};
 declare var Dropdown: React.StatelessFunctionalComponent<Props>;
 declare export default typeof Dropdown;

package/dist/helpers.d.ts

@@ -1,33 +1,48 @@
-export declare const ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
+export declare const ITEM_SELECTOR = '[data-ukt-item], [data-ukt-value]';
 export declare const KEY_EVENT_ELEMENTS: Set<string>;
-export declare const getItemElements: (dropdownElement: HTMLElement | null) => NodeListOf<Element> | HTMLCollection | null;
-export declare const getActiveItemElement: (dropdownElement: HTMLElement | null) => HTMLElement | null;
-export declare const setActiveItem: ({ dropdownElement, element, index, indexAddend, isExactMatch, text, }: {
-    dropdownElement: HTMLElement;
-    element: HTMLElement;
-    index?: null | undefined;
-    indexAddend?: null | undefined;
-    isExactMatch?: null | undefined;
-    text?: null | undefined;
-} | {
-    dropdownElement: HTMLElement;
-    element?: null | undefined;
-    index: number;
-    indexAddend?: null | undefined;
-    isExactMatch?: null | undefined;
-    text?: null | undefined;
-} | {
-    dropdownElement: HTMLElement;
-    element?: null | undefined;
-    index?: null | undefined;
-    indexAddend: number;
-    isExactMatch?: null | undefined;
-    text?: null | undefined;
-} | {
-    dropdownElement: HTMLElement;
-    element?: null | undefined;
-    index?: null | undefined;
-    indexAddend?: null | undefined;
-    isExactMatch?: boolean | undefined;
-    text: string;
-}) => void;
+export declare const getItemElements: (
+    dropdownElement: HTMLElement | null,
+) => NodeListOf<Element> | HTMLCollection | null;
+export declare const getActiveItemElement: (
+    dropdownElement: HTMLElement | null,
+) => HTMLElement | null;
+export declare const setActiveItem: ({
+    dropdownElement,
+    element,
+    index,
+    indexAddend,
+    isExactMatch,
+    text,
+}:
+    | {
+          dropdownElement: HTMLElement;
+          element: HTMLElement;
+          index?: null | undefined;
+          indexAddend?: null | undefined;
+          isExactMatch?: null | undefined;
+          text?: null | undefined;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null | undefined;
+          index: number;
+          indexAddend?: null | undefined;
+          isExactMatch?: null | undefined;
+          text?: null | undefined;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null | undefined;
+          index?: null | undefined;
+          indexAddend: number;
+          isExactMatch?: null | undefined;
+          text?: null | undefined;
+      }
+    | {
+          dropdownElement: HTMLElement;
+          element?: null | undefined;
+          index?: null | undefined;
+          indexAddend?: null | undefined;
+          isExactMatch?: boolean | undefined;
+          text: string;
+      }) => void;

package/dist/helpers.js

@@ -3,20 +3,16 @@ import { BODY_SELECTOR } from './styles.js';
 export const ITEM_SELECTOR = `[data-ukt-item], [data-ukt-value]`;
 export const KEY_EVENT_ELEMENTS = new Set(['INPUT', 'TEXTAREA']);
 export const getItemElements = (dropdownElement) => {
-    if (!dropdownElement)
-        return null;
+    if (!dropdownElement) return null;
     const bodyElement = dropdownElement.querySelector(BODY_SELECTOR);
-    if (!bodyElement)
-        return null;
+    if (!bodyElement) return null;
     let items = bodyElement.querySelectorAll(ITEM_SELECTOR);
-    if (items.length)
-        return items;
+    if (items.length) return items;
     // If no items found via [data-ukt-item] or [data-ukt-value] selector,
     // use first instance of multiple children found
     items = bodyElement.children;
     while (items.length === 1) {
-        if (!items[0].children)
-            break;
+        if (!items[0].children) break;
         items = items[0].children;
     }
     // If unable to find an element with more than one child, treat direct child as items
@@ -26,8 +22,7 @@ export const getItemElements = (dropdownElement) => {
     return items;
 };
 export const getActiveItemElement = (dropdownElement) => {
-    if (!dropdownElement)
-        return null;
+    if (!dropdownElement) return null;
     return dropdownElement.querySelector('[data-ukt-active]');
 };
 const clearItemElementsState = (itemElements) => {
@@ -37,40 +32,45 @@ const clearItemElementsState = (itemElements) => {
         }
     });
 };
-export const setActiveItem = ({ dropdownElement, element, index, indexAddend, isExactMatch, text, }) => {
+export const setActiveItem = ({
+    dropdownElement,
+    element,
+    index,
+    indexAddend,
+    isExactMatch,
+    text,
+}) => {
     const items = getItemElements(dropdownElement);
-    if (!items)
-        return;
+    if (!items) return;
     const itemElements = Array.from(items);
-    if (!itemElements.length)
-        return;
+    if (!itemElements.length) return;
     const lastIndex = itemElements.length - 1;
-    const currentActiveIndex = itemElements.findIndex((itemElement) => itemElement.hasAttribute('data-ukt-active'));
+    const currentActiveIndex = itemElements.findIndex((itemElement) =>
+        itemElement.hasAttribute('data-ukt-active'),
+    );
     let nextActiveIndex = currentActiveIndex;
     if (typeof index === 'number') {
         // Negative index means count back from the end
         nextActiveIndex = index < 0 ? itemElements.length + index : index;
     }
     if (element) {
-        nextActiveIndex = itemElements.findIndex((itemElement) => itemElement === element);
-    }
-    else if (typeof indexAddend === 'number') {
+        nextActiveIndex = itemElements.findIndex(
+            (itemElement) => itemElement === element,
+        );
+    } else if (typeof indexAddend === 'number') {
         // If there’s no currentActiveIndex and we are handling -1, start at lastIndex
         if (currentActiveIndex === -1 && indexAddend === -1) {
             nextActiveIndex = lastIndex;
-        }
-        else {
+        } else {
             nextActiveIndex += indexAddend;
         }
         // Keep it within the bounds of the items list
         if (nextActiveIndex < 0) {
             nextActiveIndex = 0;
-        }
-        else if (nextActiveIndex > lastIndex) {
+        } else if (nextActiveIndex > lastIndex) {
             nextActiveIndex = lastIndex;
         }
-    }
-    else if (typeof text === 'string') {
+    } else if (typeof text === 'string') {
         // If text is empty, clear existing active items and early return
         if (!text) {
             clearItemElementsState(itemElements);
@@ -79,19 +79,19 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
         const itemTexts = itemElements.map((itemElement) => itemElement.innerText);
         if (isExactMatch) {
             const textToCompare = text.toLowerCase();
-            nextActiveIndex = itemTexts.findIndex((itemText) => itemText.toLowerCase().startsWith(textToCompare));
+            nextActiveIndex = itemTexts.findIndex((itemText) =>
+                itemText.toLowerCase().startsWith(textToCompare),
+            );
             // If isExactMatch is required and no exact match was found, clear active items
             if (nextActiveIndex === -1) {
                 clearItemElementsState(itemElements);
             }
-        }
-        else {
+        } else {
             const bestMatch = getBestMatch({ items: itemTexts, text });
             nextActiveIndex = itemTexts.findIndex((text) => text === bestMatch);
         }
     }
-    if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex)
-        return;
+    if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex) return;
     // Clear any existing active dropdown body item state
     clearItemElementsState(itemElements);
     const nextActiveItem = items[nextActiveIndex];
@@ -101,11 +101,11 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
         let { parentElement } = nextActiveItem;
         let scrollableParent = null;
         while (!scrollableParent && parentElement && parentElement !== dropdownElement) {
-            const isScrollable = parentElement.scrollHeight > parentElement.clientHeight + 15;
+            const isScrollable =
+                parentElement.scrollHeight > parentElement.clientHeight + 15;
             if (isScrollable) {
                 scrollableParent = parentElement;
-            }
-            else {
+            } else {
                 parentElement = parentElement.parentElement;
             }
         }
@@ -119,8 +119,7 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
                 // Item isn’t fully visible; adjust scrollTop to put item within closest edge
                 if (isAboveTop) {
                     scrollTop -= parentRect.top - itemRect.top;
-                }
-                else {
+                } else {
                     scrollTop += itemRect.bottom - parentRect.bottom;
                 }
                 scrollableParent.scrollTop = scrollTop;
@@ -128,4 +127,4 @@ export const setActiveItem = ({ dropdownElement, element, index, indexAddend, is
         }
     }
 };
-//# sourceMappingURL=helpers.js.map
+//# sourceMappingURL=helpers.js.map

package/dist/helpers.js.flow

@@ -5,46 +5,46 @@
  * @flow
  */
 
-declare export var ITEM_SELECTOR: "[data-ukt-item], [data-ukt-value]";
+declare export var ITEM_SELECTOR: '[data-ukt-item], [data-ukt-value]';
 declare export var KEY_EVENT_ELEMENTS: Set<string>;
 declare export var getItemElements: (
-  dropdownElement: HTMLElement | null
+    dropdownElement: HTMLElement | null,
 ) => NodeListOf<Element> | HTMLCollection | null;
 declare export var getActiveItemElement: (
-  dropdownElement: HTMLElement | null
+    dropdownElement: HTMLElement | null,
 ) => HTMLElement | null;
 declare export var setActiveItem: (
-  x:
-    | {|
-        dropdownElement: HTMLElement,
-        element: HTMLElement,
-        index?: null | void,
-        indexAddend?: null | void,
-        isExactMatch?: null | void,
-        text?: null | void,
-      |}
-    | {|
-        dropdownElement: HTMLElement,
-        element?: null | void,
-        index: number,
-        indexAddend?: null | void,
-        isExactMatch?: null | void,
-        text?: null | void,
-      |}
-    | {|
-        dropdownElement: HTMLElement,
-        element?: null | void,
-        index?: null | void,
-        indexAddend: number,
-        isExactMatch?: null | void,
-        text?: null | void,
-      |}
-    | {|
-        dropdownElement: HTMLElement,
-        element?: null | void,
-        index?: null | void,
-        indexAddend?: null | void,
-        isExactMatch?: boolean | void,
-        text: string,
-      |}
+    x:
+        | {|
+              dropdownElement: HTMLElement,
+              element: HTMLElement,
+              index?: null | void,
+              indexAddend?: null | void,
+              isExactMatch?: null | void,
+              text?: null | void,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null | void,
+              index: number,
+              indexAddend?: null | void,
+              isExactMatch?: null | void,
+              text?: null | void,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null | void,
+              index?: null | void,
+              indexAddend: number,
+              isExactMatch?: null | void,
+              text?: null | void,
+          |}
+        | {|
+              dropdownElement: HTMLElement,
+              element?: null | void,
+              index?: null | void,
+              indexAddend?: null | void,
+              isExactMatch?: boolean | void,
+              text: string,
+          |},
 ) => void;

package/dist/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const ROOT_CLASS_NAME = "uktdropdown";
+export declare const ROOT_CLASS_NAME = 'uktdropdown';
 export declare const ROOT_SELECTOR: string;
 export declare const BODY_CLASS_NAME: string;
 export declare const LABEL_CLASS_NAME: string;

package/dist/styles.js

@@ -77,4 +77,4 @@ ${BODY_SELECTOR} [data-ukt-active] {
   color: var(--uktdd-body-color-hover);
 }
 `;
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 
-declare export var ROOT_CLASS_NAME: "uktdropdown";
+declare export var ROOT_CLASS_NAME: 'uktdropdown';
 declare export var ROOT_SELECTOR: string;
 declare export var BODY_CLASS_NAME: string;
 declare export var LABEL_CLASS_NAME: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acusti/dropdown",
-    "version": "0.15.0",
+    "version": "0.16.0",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/Dropdown.js",
@@ -26,14 +26,14 @@
         "typescript": "^4.4.3"
     },
     "dependencies": {
-        "@acusti/input-text": "^0.8.0",
+        "@acusti/input-text": "^0.9.0",
         "@acusti/matchmaking": "^0.3.0",
-        "@acusti/styling": "^0.4.0",
-        "@acusti/use-is-out-of-bounds": "^0.4.0"
+        "@acusti/styling": "^0.5.0",
+        "@acusti/use-is-out-of-bounds": "^0.5.0"
     },
     "peerDependencies": {
         "classnames": "^2",
-        "react": "^16.8 || ^17",
-        "react-dom": "^16.8 || ^17"
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
     }
 }

package/src/Dropdown.tsx

@@ -1,3 +1,5 @@
+// TODO add mouseout event handler to check event.target and clear active element
+// whenever mouse leaves it
 import InputText from '@acusti/input-text';
 import { Style } from '@acusti/styling';
 import useIsOutOfBounds from '@acusti/use-is-out-of-bounds';