@react-md/menu/lib/useButtonVisibility.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useButtonVisibility = void 0;
var react_1 = require("react");
var utils_1 = require("@react-md/utils");
var useVisibility_1 = require("./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
 */
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 = utils_1.useRefCache({
        onClick: propOnClick,
        onKeyDown: propOnKeyDown,
    });
    var _c = useVisibility_1.useVisibility({
        defaultVisible: defaultVisible,
        defaultFocus: propDefaultFocus,
        onVisibilityChange: onVisibilityChange,
    }), visible = _c.visible, defaultFocus = _c.defaultFocus, hide = _c.hide, showWithFocus = _c.showWithFocus, toggle = _c.toggle;
    var onClick = react_1.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 = react_1.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,
    };
}
exports.useButtonVisibility = useButtonVisibility;
//# sourceMappingURL=useButtonVisibility.js.map