@react-md/menu/es/useButtonVisibility.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";
/**
 * This hook is used to provide the menu visibility based on interacting with
 * the `MenuButton` component. It'll merge and return the required `onClick` and
 * `onKeyDown` event handlers that should be passed down to the `MenuButton` as
 * well as the current visibility state and a `hide` function to pass to the
 * `Menu`.
 *
 * @private
 */
export function useButtonVisibility(_a) {
    var _b = _a === void 0 ? {} : _a, propOnClick = _b.onClick, propOnKeyDown = _b.onKeyDown, defaultVisible = _b.defaultVisible, propDefaultFocus = _b.defaultFocus, onVisibilityChange = _b.onVisibilityChange;
    var handlers = useRefCache({
        onClick: propOnClick,
        onKeyDown: propOnKeyDown,
    });
    var _c = useVisibility({
        defaultVisible: defaultVisible,
        defaultFocus: propDefaultFocus,
        onVisibilityChange: onVisibilityChange,
    }), visible = _c.visible, defaultFocus = _c.defaultFocus, hide = _c.hide, showWithFocus = _c.showWithFocus, toggle = _c.toggle;
    var onClick = useCallback(function (event) {
        var onClick = handlers.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 onKeyDown = handlers.current.onKeyDown;
        if (onKeyDown) {
            onKeyDown(event);
        }
        switch (event.key) {
            case "ArrowDown":
                event.preventDefault();
                showWithFocus("first");
                break;
            case "ArrowUp":
                event.preventDefault();
                showWithFocus("last");
                break;
            // no default
        }
    }, 
    // disabled since useRefCache
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [showWithFocus]);
    return {
        visible: visible,
        defaultFocus: defaultFocus,
        hide: hide,
        onClick: onClick,
        onKeyDown: onKeyDown,
    };
}
//# sourceMappingURL=useButtonVisibility.js.map