@react-md/menu/es/useItemVisibility.js

Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines

import { useCallback } from "react";
import { useRefCache } from "@react-md/utils";
import { useVisibility } from "./useVisibility";
export function useItemVisibility(_a) {
    var _b = _a === void 0 ? {} : _a, _c = _b.horizontal, horizontal = _c === void 0 ? false : _c, propOnClick = _b.onClick, propOnKeyDown = _b.onKeyDown, defaultVisible = _b.defaultVisible, propDefaultFocus = _b.defaultFocus, onVisibilityChange = _b.onVisibilityChange;
    var cache = useRefCache({
        horizontal: horizontal,
        onClick: propOnClick,
        onKeyDown: propOnKeyDown,
    });
    var _d = useVisibility({
        defaultVisible: defaultVisible,
        defaultFocus: propDefaultFocus,
        onVisibilityChange: onVisibilityChange,
    }), visible = _d.visible, defaultFocus = _d.defaultFocus, hide = _d.hide, showWithFocus = _d.showWithFocus, toggle = _d.toggle;
    var onClick = useCallback(function (event) {
        var onClick = cache.current.onClick;
        if (onClick) {
            onClick(event);
        }
        toggle();
    }, 
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [toggle]);
    var onKeyDown = useCallback(function (event) {
        var _a = cache.current, onKeyDown = _a.onKeyDown, horizontal = _a.horizontal;
        if (onKeyDown) {
            onKeyDown(event);
        }
        var firstKey = horizontal ? "ArrowDown" : "ArrowRight";
        var lastKey = horizontal ? "ArrowUp" : "ArrowLeft";
        if (event.key !== firstKey && event.key !== lastKey) {
            return;
        }
        // don't want to trigger default behavior of screen scrolling
        event.preventDefault();
        // don't want parent menus to be effected by this as well.
        event.stopPropagation();
        showWithFocus(event.key === firstKey ? "first" : "last");
    }, 
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [showWithFocus]);
    return {
        visible: visible,
        defaultFocus: defaultFocus,
        hide: hide,
        onClick: onClick,
        onKeyDown: onKeyDown,
    };
}
//# sourceMappingURL=useItemVisibility.js.map