@nex-ui/react/dist/cjs/components/buttonBase/ButtonBase.cjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var styled = require('@nex-ui/styled');
var hooks = require('@nex-ui/hooks');
var react = require('react');
var utils = require('@nex-ui/utils');
var buttonBase = require('../../theme/recipes/buttonBase.cjs');
var useSlotProps = require('../utils/useSlotProps.cjs');

const useAriaProps = (props)=>{
    const { as, disabled, role, href, type = 'button', 'aria-disabled': ariaDisabled, tabIndex = 0 } = props;
    return react.useMemo(()=>{
        if (as !== 'button' && !utils.isFunction(as)) {
            return {
                role: role ?? (as === 'a' && href ? undefined : 'button'),
                tabIndex: disabled ? -1 : tabIndex,
                'aria-disabled': ariaDisabled ?? (disabled || undefined)
            };
        }
        return {
            type,
            disabled,
            tabIndex: disabled ? -1 : tabIndex
        };
    }, [
        as,
        type,
        disabled,
        tabIndex,
        role,
        href,
        ariaDisabled
    ]);
};
const ButtonBase = (inProps)=>{
    const props = inProps;
    const { as, children, disabled, ...remainingProps } = props;
    const rootElement = as !== undefined ? as : typeof props.href === 'string' && props.href ? 'a' : 'button';
    const { focusVisible, focusProps } = hooks.useFocusRing();
    const handleKeyDown = hooks.useEvent((event)=>{
        // Limit the repeated triggering of the click event when the Enter key is pressed.
        if (focusVisible && event.key === 'Enter' && event.target === event.currentTarget && (event.currentTarget.tagName === 'BUTTON' || event.currentTarget.tagName === 'A')) {
            event.preventDefault();
        }
    });
    const handleKeyUp = hooks.useEvent((event)=>{
        // Keyboard accessibility for non interactive elements
        if (focusVisible && event.target === event.currentTarget && (event.key === 'Space' || event.key === 'Enter')) {
            event.currentTarget.click();
        }
    });
    const ariaProps = useAriaProps({
        ...props,
        as: rootElement
    });
    const style = buttonBase.buttonBaseRecipes({
        disabled
    });
    const rootProps = useSlotProps.useSlotProps({
        style,
        a11y: ariaProps,
        externalForwardedProps: remainingProps,
        additionalProps: {
            disabled,
            onKeyUp: handleKeyUp,
            onKeyDown: handleKeyDown,
            'data-focus-visible': focusVisible || undefined,
            ...focusProps
        }
    });
    return /*#__PURE__*/ jsxRuntime.jsx(styled.nex.button, {
        as: rootElement,
        ...rootProps,
        children: children
    });
};
ButtonBase.displayName = 'ButtonBase';

exports.ButtonBase = ButtonBase;