@kubit-ui-web/react-components/dist/esm/components/snackbar/snackbarUnControlled.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 { focusFirstDescendantV2 } from '../../utils/focusHandlers/focusHandlers';
import { SnackbarControlled } from './snackbarControlled';
const SnackbarUnControlledComponent = ({ open = false, variant, closeTimeout = 7000, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref) => {
    const closeSnackbarTimeOut = React.useRef(null);
    const hover = React.useRef(false);
    const focus = React.useRef(false);
    const innerRef = React.useRef(null);
    const lastFocusedElement = React.useRef(null);
    React.useImperativeHandle(ref, () => innerRef?.current, []);
    /**
     * Only start timeout if closeTimeOut is defined, and if the snackbar is not hovered or focused
     * @returns
     */
    const startCloseSnackbarTimeout = () => {
        if (!closeTimeout || hover.current || focus.current) {
            return;
        }
        closeSnackbarTimeOut.current = setTimeout(() => {
            props.onOpenClose?.(false);
        }, closeTimeout);
    };
    const clearCloseSnackbarTimeout = () => {
        if (closeSnackbarTimeOut.current) {
            clearTimeout(closeSnackbarTimeOut.current);
        }
    };
    React.useEffect(() => {
        if (open) {
            lastFocusedElement.current = document.activeElement;
            startCloseSnackbarTimeout();
        }
        else {
            clearCloseSnackbarTimeout();
        }
        return () => {
            clearCloseSnackbarTimeout();
        };
    }, [open]);
    const handleCloseButton = _open => event => {
        props.onOpenClose?.(_open, event);
        if (props.onCloseButton) {
            props.onCloseButton(event);
            return;
        }
        // After manually closing the popover, focus the last focused element
        // If the last focused element is not available, focus the first focusable element
        if (lastFocusedElement.current instanceof HTMLElement &&
            document.contains(lastFocusedElement.current) &&
            document.body !== lastFocusedElement.current) {
            lastFocusedElement.current.focus();
            return;
        }
        focusFirstDescendantV2({
            element: document.body,
            elementsToOmit: innerRef.current ? [innerRef.current] : [],
        });
    };
    const handleMouseEnter = (event) => {
        onMouseEnter?.(event);
        hover.current = true;
        clearCloseSnackbarTimeout();
    };
    const handleMouseLeave = (event) => {
        onMouseLeave?.(event);
        hover.current = false;
        startCloseSnackbarTimeout();
    };
    const handleFocus = (event) => {
        onFocus?.(event);
        // There is not need of calling clear timeout if already focused
        if (focus.current) {
            return;
        }
        focus.current = true;
        clearCloseSnackbarTimeout();
    };
    const handleBlur = (event) => {
        onBlur?.(event);
        // If already focus and the next focusable element is an inner child,
        // there is no need of calling to start timeout again
        if (focus.current && event.currentTarget.contains(event.relatedTarget)) {
            return;
        }
        focus.current = false;
        startCloseSnackbarTimeout();
    };
    return (_jsx(SnackbarControlled, { ...props, ref: innerRef, open: open, variant: variant, onBlur: handleBlur, onCloseButtonClick: handleCloseButton, onFocus: handleFocus, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }));
};
const SnackbarUnControlled = React.forwardRef(SnackbarUnControlledComponent);
export { SnackbarUnControlled };
export { SnackbarUnControlled as Snackbar };
//# sourceMappingURL=snackbarUnControlled.js.map