@kubit-ui-web/react-components/dist/esm/components/dropdownSelected/dropdownSelectedUncontrolled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { ESCAPE } from '../../constants/keyboardKeys/keyboardKeys';
import { DropdownSelectedControlled } from './dropdownSelectedControlled';
const DropdownSelectedUnControlledComponent = ({ defaultOpen = false, defaultOptionSelected, openAndCloseOnHover = false, onClosePopover, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref) => {
    const [open, setOpen] = React.useState(defaultOpen);
    const [optionSelected, setOptionSelected] = React.useState(defaultOptionSelected);
    const buttonOrLinkRef = React.useRef(null);
    // Close dropdown when the document hides
    React.useEffect(() => {
        const handleVisibilityChange = e => {
            if (document.hidden) {
                setOpen(false);
            }
        };
        document.addEventListener('visibilitychange', handleVisibilityChange);
        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
    }, []);
    const handleOnClickButton = () => {
        props.onButtonClick?.(!open);
        setOpen(!open);
    };
    const handleOnClosePopover = () => {
        const openValue = false;
        setOpen(openValue);
        onClosePopover?.(openValue);
    };
    const handleOnClickOption = (value) => {
        setOptionSelected(value);
        props.onOptionClick?.(value);
    };
    const handleOnMouseEnter = () => {
        if (openAndCloseOnHover) {
            const openValue = true;
            setOpen(openValue);
            onMouseEnter?.(openValue);
        }
    };
    const handleOnMouseLeave = () => {
        if (openAndCloseOnHover) {
            const openValue = false;
            setOpen(openValue);
            onMouseLeave?.(openValue);
        }
    };
    const handleOnKeyDown = event => {
        if (ESCAPE.key.includes(event.key) && open) {
            buttonOrLinkRef.current?.focus();
            setOpen(false);
        }
    };
    const handleOnFocus = () => {
        if (openAndCloseOnHover) {
            const openValue = true;
            setOpen(openValue);
            onFocus?.(openValue);
        }
    };
    const handleOnBlur = event => {
        const openValue = false;
        if (!event.currentTarget.contains(event.relatedTarget)) {
            setOpen(openValue);
            onBlur?.(openValue);
        }
        if (openAndCloseOnHover) {
            setOpen(openValue);
            onBlur?.(openValue);
        }
    };
    return (_jsx(DropdownSelectedControlled, { ...props, ref: ref, buttonOrLinkRef: buttonOrLinkRef, open: open, optionSelected: optionSelected, onBlur: handleOnBlur, onButtonClick: handleOnClickButton, onClosePopover: handleOnClosePopover, onFocus: handleOnFocus, onKeyDown: handleOnKeyDown, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, onOptionClick: handleOnClickOption }));
};
const DropdownSelectedUnControlled = React.forwardRef(DropdownSelectedUnControlledComponent);
export { DropdownSelectedUnControlled };
export { DropdownSelectedUnControlled as DropdownSelected };
//# sourceMappingURL=dropdownSelectedUncontrolled.js.map