@harvest-profit/npk/dist/Button/Button.js

NPK UI Design System

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Button_module_css_1 = __importDefault(require("./Button.module.css"));
const BaseButton_1 = __importDefault(require("../BaseButton"));
const regular_1 = require("@harvest-profit/npk/icons/regular");
const Menu_1 = require("../Menu");
const MenuContext_1 = require("../Menu/MenuContext");
const ButtonContext = (0, react_1.createContext)({});
function isNotSet(value) {
    return value === undefined || value === null;
}
// assign button default values if it is part of a menu
const useButtonDefaults = (props) => {
    const filteredProps = Object.keys(props).reduce((agg, key) => (!isNotSet(props[key])) ? { ...agg, [key]: props[key] } : agg, {});
    const otherProps = {};
    const menuContext = (0, Menu_1.useMenuContext)();
    const menuContentsContext = (0, react_1.useContext)(MenuContext_1.MenuContentsContext);
    const selected = filteredProps['aria-selected'] || filteredProps.selected;
    if (selected)
        otherProps.leadingVisual = (filteredProps.selectedIcon || regular_1.CheckedIcon);
    if (menuContext && (menuContext.submenu || menuContentsContext.inMenu)) {
        const menuVariant = menuContentsContext.inMenu ? menuContentsContext.variant : menuContext.variant;
        const menuRole = menuContentsContext.inMenu ? menuContentsContext.role : menuContext.role;
        otherProps.invisible = true;
        otherProps.align = 'start';
        otherProps.tabIndex = 1;
        if (menuRole === 'listbox' || menuRole === 'menu')
            otherProps.plain = true;
        if (menuRole === 'listbox')
            otherProps.leadingVisual = (filteredProps.selectedIcon || regular_1.CheckedIcon);
        if (menuRole === 'listbox')
            otherProps.active = selected;
        if (menuRole === 'listbox')
            otherProps.role = 'option';
        if (menuRole === 'listbox' && selected)
            otherProps['aria-selected'] = true;
        if (menuVariant === 'emphasizedItem') {
            otherProps.leadingVisual = null;
            otherProps.align = 'center';
            if (selected) {
                otherProps.invisible = false;
                otherProps.variant = 'primary';
            }
        }
    }
    const buttonContextDefaults = (0, react_1.useContext)(ButtonContext) || {};
    otherProps.variant ||= 'secondary';
    return {
        ...otherProps,
        ...buttonContextDefaults,
        ...filteredProps,
    };
};
const Button = (0, react_1.forwardRef)(({ variant: variantProp, elevated, invisible: invisibleProp, active: activeProp, plain: plainProp, className, ...props }, forwardedRef) => {
    const { invisible, plain, active, variant, ...defaultProps } = useButtonDefaults({ ...props, invisible: invisibleProp, plain: plainProp, active: activeProp, variant: variantProp });
    return ((0, jsx_runtime_1.jsx)(BaseButton_1.default, { ...defaultProps, ref: forwardedRef, "data-elevated": elevated, "data-invisible": invisible, "data-variant": variant, "data-active": active, "data-plain": plain, className: `${Button_module_css_1.default.Button} ${className || ''}` }));
});
Button.Context = ButtonContext.Provider;
Button.Reset = ({ children }) => {
    return ((0, jsx_runtime_1.jsx)(ButtonContext.Provider, { value: {}, children: (0, jsx_runtime_1.jsx)(Menu_1.Reset, { children: children }) }));
};
Button.displayName = 'Button';
exports.default = Button;
//# sourceMappingURL=Button.js.map