@codeworker.br/govbr-tw-react/dist/components/DropdownMenu/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

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;
};
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck, faChevronRight } from "@fortawesome/free-solid-svg-icons";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn } from "../../libs/utils";
import { dropdownMenuCheckboxItemVariants, dropdownMenuContentVariants, dropdownMenuItemVariants, dropdownMenuLabelVariants, dropdownMenuRadioItemVariants, dropdownMenuSeparatorVariants, dropdownMenuSubTriggerVariants, } from "./variants";
const DropdownMenuInteractionContext = React.createContext(undefined);
const useDropdownMenuInteractionContext = () => {
    return React.useContext(DropdownMenuInteractionContext);
};
const composeEventHandlers = (theirHandler, ourHandler) => (event) => {
    theirHandler === null || theirHandler === void 0 ? void 0 : theirHandler(event);
    if (!event.defaultPrevented) {
        ourHandler === null || ourHandler === void 0 ? void 0 : ourHandler(event);
    }
};
const DropdownMenu = (_a) => {
    var { openTrigger = "click", open: controlledOpenProp, defaultOpen, onOpenChange, children } = _a, props = __rest(_a, ["openTrigger", "open", "defaultOpen", "onOpenChange", "children"]);
    const isCustomTrigger = openTrigger !== "click";
    const isControlled = controlledOpenProp !== undefined;
    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
    const open = controlledOpenProp !== null && controlledOpenProp !== void 0 ? controlledOpenProp : uncontrolledOpen;
    const handleOpenChange = React.useCallback((value) => {
        if (!isControlled) {
            setUncontrolledOpen(value);
        }
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
    }, [isControlled, onOpenChange]);
    const contextValue = React.useMemo(() => ({
        openTrigger,
        open,
        setOpen: handleOpenChange,
    }), [
        openTrigger,
        open,
        handleOpenChange,
    ]);
    const rootProps = Object.assign({}, props);
    if (isCustomTrigger) {
        rootProps.open = open;
        rootProps.onOpenChange = handleOpenChange;
    }
    else {
        if (isControlled) {
            rootProps.open = controlledOpenProp;
        }
        else if (defaultOpen !== undefined) {
            rootProps.defaultOpen = defaultOpen;
        }
        if (onOpenChange) {
            rootProps.onOpenChange = onOpenChange;
        }
    }
    return (_jsx(DropdownMenuInteractionContext.Provider, { value: contextValue, children: _jsx(DropdownMenuPrimitive.Root, Object.assign({}, rootProps, { children: children })) }));
};
DropdownMenu.displayName =
    (_a = DropdownMenuPrimitive.Root.displayName) !== null && _a !== void 0 ? _a : "DropdownMenu";
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuTrigger = React.forwardRef((_a, ref) => {
    var { className, onClick, onDoubleClick, onContextMenu, onPointerEnter, onPointerLeave, onFocus, onBlur } = _a, props = __rest(_a, ["className", "onClick", "onDoubleClick", "onContextMenu", "onPointerEnter", "onPointerLeave", "onFocus", "onBlur"]);
    const context = useDropdownMenuInteractionContext();
    if (!context) {
        return (_jsx(DropdownMenuPrimitive.Trigger, Object.assign({ ref: ref, className: cn(className, BASE_CLASSNAMES.dropdownMenu.trigger), onClick: onClick, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onFocus: onFocus, onBlur: onBlur }, props)));
    }
    const { openTrigger, open, setOpen } = context;
    const handleClick = (event) => {
        if (openTrigger === "rightclick") {
            event.preventDefault();
        }
    };
    const handleContextMenu = (event) => {
        if (openTrigger !== "rightclick") {
            return;
        }
        event.preventDefault();
        if (!open) {
            setOpen(true);
        }
    };
    return (_jsx(DropdownMenuPrimitive.Trigger, Object.assign({ ref: ref, className: cn(className, BASE_CLASSNAMES.dropdownMenu.trigger), onClick: composeEventHandlers(onClick, handleClick), onContextMenu: composeEventHandlers(onContextMenu, handleContextMenu), onDoubleClick: onDoubleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onFocus: onFocus, onBlur: onBlur }, props)));
});
DropdownMenuTrigger.displayName =
    (_b = DropdownMenuPrimitive.Trigger.displayName) !== null && _b !== void 0 ? _b : "DropdownMenuTrigger";
const DropdownMenuContent = React.forwardRef((_a, ref) => {
    var { className, sideOffset = 8, side = "bottom", align, avoidCollisions } = _a, props = __rest(_a, ["className", "sideOffset", "side", "align", "avoidCollisions"]);
    const resolvedAlign = align !== null && align !== void 0 ? align : (side === "left" || side === "right" ? "start" : "center");
    const resolvedAvoidCollisions = avoidCollisions !== null && avoidCollisions !== void 0 ? avoidCollisions : false;
    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, side: side, align: resolvedAlign, avoidCollisions: resolvedAvoidCollisions, className: cn(dropdownMenuContentVariants({ side }), BASE_CLASSNAMES.dropdownMenu.content, className) }, props)) }));
});
DropdownMenuContent.displayName =
    (_c = DropdownMenuPrimitive.Content.displayName) !== null && _c !== void 0 ? _c : "DropdownMenuContent";
const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
    var { className, sideOffset = 8, placement = "right" } = _a, props = __rest(_a, ["className", "sideOffset", "placement"]);
    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn(dropdownMenuContentVariants({ side: placement }), BASE_CLASSNAMES.dropdownMenu.subContent, className) }, props)));
});
DropdownMenuSubContent.displayName =
    (_d = DropdownMenuPrimitive.SubContent.displayName) !== null && _d !== void 0 ? _d : "DropdownMenuSubContent";
const DropdownMenuItem = React.forwardRef((_a, ref) => {
    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
    return (_jsx(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn(dropdownMenuItemVariants({ inset }), BASE_CLASSNAMES.dropdownMenu.item, className) }, props)));
});
DropdownMenuItem.displayName =
    (_e = DropdownMenuPrimitive.Item.displayName) !== null && _e !== void 0 ? _e : "DropdownMenuItem";
const DropdownMenuCheckboxItem = React.forwardRef((_a, ref) => {
    var { className, children, inset } = _a, props = __rest(_a, ["className", "children", "inset"]);
    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, className: cn(dropdownMenuCheckboxItemVariants({ inset }), BASE_CLASSNAMES.dropdownMenu.checkboxItem, className) }, props, { children: [_jsx("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(FontAwesomeIcon, { icon: faCheck, className: "h-3 w-3 text-govbr-blue-warm-vivid-80" }) }) }), children] })));
});
DropdownMenuCheckboxItem.displayName =
    (_f = DropdownMenuPrimitive.CheckboxItem.displayName) !== null && _f !== void 0 ? _f : "DropdownMenuCheckboxItem";
const DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
    return (_jsxs(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: cn(dropdownMenuRadioItemVariants({ inset }), BASE_CLASSNAMES.dropdownMenu.radioItem, className) }, props, { children: [_jsx("span", { className: "absolute left-3 flex h-4 w-4 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(FontAwesomeIcon, { icon: faCheck, className: "h-3 w-3 text-govbr-blue-warm-vivid-80" }) }) }), children] })));
});
DropdownMenuRadioItem.displayName =
    (_g = DropdownMenuPrimitive.RadioItem.displayName) !== null && _g !== void 0 ? _g : "DropdownMenuRadioItem";
const DropdownMenuLabel = React.forwardRef((_a, ref) => {
    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
    return (_jsx(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: cn(dropdownMenuLabelVariants({ inset }), BASE_CLASSNAMES.dropdownMenu.label, className) }, props)));
});
DropdownMenuLabel.displayName =
    (_h = DropdownMenuPrimitive.Label.displayName) !== null && _h !== void 0 ? _h : "DropdownMenuLabel";
const DropdownMenuSeparator = React.forwardRef((_a, ref) => {
    var { className } = _a, props = __rest(_a, ["className"]);
    return (_jsx(DropdownMenuPrimitive.Separator, Object.assign({ ref: ref, className: cn(dropdownMenuSeparatorVariants(), BASE_CLASSNAMES.dropdownMenu.separator, className) }, props)));
});
DropdownMenuSeparator.displayName =
    (_j = DropdownMenuPrimitive.Separator.displayName) !== null && _j !== void 0 ? _j : "DropdownMenuSeparator";
const DropdownMenuShortcut = (_a) => {
    var { className } = _a, props = __rest(_a, ["className"]);
    return (_jsx("span", Object.assign({ className: cn("ml-auto text-xs uppercase tracking-wide text-govbr-gray-60", BASE_CLASSNAMES.dropdownMenu.shortcut, className) }, props)));
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
const DropdownMenuSubTrigger = React.forwardRef((_a, ref) => {
    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
    return (_jsxs(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref, className: cn(dropdownMenuSubTriggerVariants({ inset }), BASE_CLASSNAMES.dropdownMenu.subTrigger, className) }, props, { children: [children, _jsx(FontAwesomeIcon, { icon: faChevronRight, className: "ml-auto h-3 w-3 opacity-60" })] })));
});
DropdownMenuSubTrigger.displayName =
    (_k = DropdownMenuPrimitive.SubTrigger.displayName) !== null && _k !== void 0 ? _k : "DropdownMenuSubTrigger";
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };