@gluestack-ui/core/lib/esm/menu/creator/Menu.jsx

Universal UI components for React Native, Expo, and Next.js

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, useRef } from 'react';
import { useMenu, useMenuTrigger } from '../aria';
import { useTreeState, useMenuTriggerState } from 'react-stately';
import { Popover } from './MenuPopover/Popover';
import { MenuItem } from './MenuItem';
import { OverlayAnimatePresence } from './MenuPopover/OverlayAnimatePresence';
import { useTypeSelect } from './useTypeSelect';
import { useControlledState } from '@react-stately/utils';
import { MenuContext } from './MenuContext';
import { mergeRefs } from '@gluestack-ui/utils/common';
export const Menu = ({ StyledMenu, StyledMenuItem, StyledBackdrop, AnimatePresence, StyledSeparator, }) => {
    return forwardRef((_a, ref) => {
        var { crossOffset, closeOnSelect, defaultIsOpen, isOpen: isOpenProp, onOpen, onClose, offset, placement = 'bottom start', shouldFlip = true, trigger, shouldOverlapWithTrigger, _experimentalOverlay = false, useRNModal = false } = _a, props = __rest(_a, ["crossOffset", "closeOnSelect", "defaultIsOpen", "isOpen", "onOpen", "onClose", "offset", "placement", "shouldFlip", "trigger", "shouldOverlapWithTrigger", "_experimentalOverlay", "useRNModal"]);
        const [isOpenHover, setIsOpenHover] = React.useState(false);
        const [isOpen, setIsOpen] = useControlledState(isOpenProp, defaultIsOpen || isOpenHover, (isOpenValue) => {
            isOpenValue ? onOpen === null || onOpen === void 0 ? void 0 : onOpen() : onClose === null || onClose === void 0 ? void 0 : onClose();
        });
        const handleHover = () => {
            setIsOpenHover(true);
        };
        const handleClose = () => {
            setIsOpen(false);
        };
        const handleOpen = () => {
            setIsOpen(true);
        };
        const showBackdrop = React.useRef(false);
        const state = useMenuTriggerState({
            isOpen: isOpen,
            closeOnSelect: closeOnSelect,
            onOpenChange: (isOpenValue) => {
                setIsOpen(isOpenValue);
            },
            defaultOpen: defaultIsOpen,
        });
        const triggerRef = React.useRef(null);
        const { menuTriggerProps, menuProps } = useMenuTrigger({}, state, triggerRef);
        const updatedTrigger = () => {
            return trigger(Object.assign(Object.assign({}, menuTriggerProps), { onPress: handleOpen, ref: triggerRef }));
        };
        if (_experimentalOverlay) {
            return (<MenuContext.Provider value={{ onClose: handleClose, showBackdrop }}>
            {updatedTrigger()}

            <MenuComponent {...menuProps} {...props} isOpen={state.isOpen} AnimatePresence={AnimatePresence} autoFocus={state.focusStrategy || true} onClose={() => state.close()} StyledMenu={StyledMenu} StyledMenuItem={StyledMenuItem} StyledSeparator={StyledSeparator} closeOnSelect={closeOnSelect} ref={ref}/>
          </MenuContext.Provider>);
        }
        return (<MenuContext.Provider value={{ onClose: handleClose, showBackdrop }}>
          {updatedTrigger()}
          <Popover placement={placement} triggerRef={triggerRef} state={state} shouldOverlapWithTrigger={shouldOverlapWithTrigger} crossOffset={crossOffset} offset={offset} shouldFlip={shouldFlip} StyledBackdrop={StyledBackdrop} useRNModal={useRNModal}>
            <MenuComponent {...menuProps} {...props} isOpen={state.isOpen} AnimatePresence={AnimatePresence} autoFocus={state.focusStrategy || true} onClose={() => state.close()} StyledMenu={StyledMenu} StyledMenuItem={StyledMenuItem} StyledSeparator={StyledSeparator} closeOnSelect={closeOnSelect} ref={ref}/>
          </Popover>
        </MenuContext.Provider>);
    });
};
const MenuComponent = forwardRef((_a, ref) => {
    var { StyledMenu, StyledMenuItem, StyledSeparator, AnimatePresence, isOpen, closeOnSelect } = _a, props = __rest(_a, ["StyledMenu", "StyledMenuItem", "StyledSeparator", "AnimatePresence", "isOpen", "closeOnSelect"]);
    const state = useTreeState(props);
    const menuRef = useRef(null);
    const mergeRef = mergeRefs([menuRef, ref]);
    const { menuProps } = useMenu(props, state, menuRef);
    const { onClose, onOpen, selectionMode, onSelectChange, shouldFlip, children, placement, offset, crossOffset, trigger, StyledBackdrop } = props, restProps = __rest(props, ["onClose", "onOpen", "selectionMode", "onSelectChange", "shouldFlip", "children", "placement", "offset", "crossOffset", "trigger", "StyledBackdrop"]);
    const typeSelectProps = useTypeSelect(state);
    return (<OverlayAnimatePresence visible={isOpen} AnimatePresence={AnimatePresence}>
        <StyledMenu {...menuProps} {...typeSelectProps} ref={mergeRef} role="list" {...restProps}>
          {[...state.collection].map((item) => {
            switch (item.type) {
                case 'item':
                    return (<MenuItem StyledMenuItem={StyledMenuItem} key={item.key} item={item} state={state} onAction={props.onAction} onClose={props.onClose} closeOnSelect={closeOnSelect}/>);
                case 'seperator':
                    return (StyledSeparator && (<StyledSeparator {...item.props} key={item.key}/>));
                default:
                    return null;
            }
        })}
        </StyledMenu>
      </OverlayAnimatePresence>);
});
//# sourceMappingURL=Menu.jsx.map