@kubit-ui-web/react-components/dist/esm/components/dropdownSelected/dropdownSelectedControlled.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 { STYLES_NAME } from '../../constants/stylesName/stylesName';
import { useStyles } from '../../hooks/useStyles/useStyles';
import { isKeyTabPressed } from '../../utils/keyboard/keyboard.utility';
import { ErrorBoundary } from '../../provider/errorBoundary/errorBoundary';
import { FallbackComponent } from '../../provider/errorBoundary/fallbackComponent';
import { useGenericComponents } from '../../provider/genericComponents/genericComponentsProvider';
import { ROLES } from '../../types/role/role';
import { focusFirstDescendant } from '../../utils/focusHandlers/focusHandlers';
import { ListOptionsType } from '../listOptions/types/type';
import { DropdownSelectedStandAlone } from './dropdownSelectedStandAlone';
import { getState } from './utils/state';
// eslint-disable-next-line react/display-name
const DropdownSelectedControlledComponent = React.forwardRef(({ variant, onMouseEnter, onMouseLeave, ...props }, ref) => {
    const [hover, setHover] = React.useState(false);
    const stateStyles = useStyles(STYLES_NAME.DROPDOWN_SELECTED, variant, props.ctv);
    const styles = stateStyles[getState({ hover })];
    const listOptionsRef = React.useRef(null);
    const handleOnKeyDownButton = event => {
        if (props.open && isKeyTabPressed(event.key) && !event.shiftKey && listOptionsRef?.current) {
            if (props.listOptions.type === ListOptionsType.SELECTION) {
                listOptionsRef?.current?.firstElementChild?.focus();
            }
            else {
                focusFirstDescendant(listOptionsRef?.current);
            }
            event.preventDefault();
        }
    };
    React.useEffect(() => {
        if (props.closePopoverOnScroll) {
            window.addEventListener('scroll', props.onClosePopover);
            return () => {
                window.removeEventListener('scroll', props.onClosePopover);
            };
        }
        return undefined;
    }, []);
    const handleMouseEnter = (event) => {
        setHover(true);
        onMouseEnter?.(event);
    };
    const handleMouseLeave = (event) => {
        setHover(false);
        onMouseLeave?.(event);
    };
    const { LINK } = useGenericComponents();
    return (_jsx(DropdownSelectedStandAlone, { ref: ref, component: !props.url ? ROLES.BUTTON : LINK, listOptionsRef: listOptionsRef, styles: styles, onButtonKeyDown: handleOnKeyDownButton, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props }));
});
const DropdownSelectedBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(DropdownSelectedStandAlone, { ...props, ref: ref }) }), children: _jsx(DropdownSelectedControlledComponent, { ...props, ref: ref }) }));
const DropdownSelectedControlled = React.forwardRef(DropdownSelectedBoundary);
export { DropdownSelectedControlled };
//# sourceMappingURL=dropdownSelectedControlled.js.map