@react-md/menu/lib/useItemVisibility.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.useItemVisibility = void 0;
var react_1 = require("react");
var utils_1 = require("@react-md/utils");
var useVisibility_1 = require("./useVisibility");
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 = utils_1.useRefCache({
        horizontal: horizontal,
        onClick: propOnClick,
        onKeyDown: propOnKeyDown,
    });
    var _d = useVisibility_1.useVisibility({
        defaultVisible: defaultVisible,
        defaultFocus: propDefaultFocus,
        onVisibilityChange: onVisibilityChange,
    }), visible = _d.visible, defaultFocus = _d.defaultFocus, hide = _d.hide, showWithFocus = _d.showWithFocus, toggle = _d.toggle;
    var onClick = react_1.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 = react_1.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,
    };
}
exports.useItemVisibility = useItemVisibility;
//# sourceMappingURL=useItemVisibility.js.map