@base-ui-components/react/cjs/use-button/useButton.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

"use strict";
'use client';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useButton = useButton;
var React = _interopRequireWildcard(require("react"));
var _useForkRef = require("../utils/useForkRef");
var _extractEventHandlers = require("../utils/extractEventHandlers");
var _useRootElementName = require("../utils/useRootElementName");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function useButton(parameters = {}) {
  const {
    disabled = false,
    focusableWhenDisabled,
    buttonRef: externalRef,
    tabIndex,
    type,
    elementName: elementNameProp
  } = parameters;
  const buttonRef = React.useRef(null);
  const [elementName, updateElementName] = (0, _useRootElementName.useRootElementName)({
    rootElementName: elementNameProp,
    componentName: 'Button'
  });
  const isNativeButton = () => {
    const button = buttonRef.current;
    return elementName === 'BUTTON' || elementName === 'INPUT' && ['button', 'submit', 'reset'].includes(button?.type);
  };
  const createHandleClick = otherHandlers => event => {
    if (!disabled) {
      otherHandlers.onClick?.(event);
    }
  };
  const createHandleKeyDown = otherHandlers => event => {
    otherHandlers.onKeyDown?.(event);
    if (event.defaultMuiPrevented) {
      return;
    }
    if (event.target === event.currentTarget && !isNativeButton() && event.key === ' ') {
      event.preventDefault();
    }

    // Keyboard accessibility for non interactive elements
    if (event.target === event.currentTarget && !isNativeButton() && event.key === 'Enter' && !disabled) {
      otherHandlers.onClick?.(event);
      event.preventDefault();
    }
  };
  const createHandleKeyUp = otherHandlers => event => {
    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0

    otherHandlers.onKeyUp?.(event);

    // Keyboard accessibility for non interactive elements
    if (event.target === event.currentTarget && !isNativeButton() && !disabled && event.key === ' ' && !event.defaultMuiPrevented) {
      otherHandlers.onClick?.(event);
    }
  };
  const handleRef = (0, _useForkRef.useForkRef)(updateElementName, externalRef, buttonRef);
  const buttonProps = {};
  if (tabIndex !== undefined) {
    buttonProps.tabIndex = tabIndex;
  }
  if (elementName === 'BUTTON' || elementName === 'INPUT') {
    if (focusableWhenDisabled) {
      buttonProps['aria-disabled'] = disabled;
    } else {
      buttonProps.disabled = disabled;
    }
  } else if (elementName !== '') {
    buttonProps.role = 'button';
    buttonProps.tabIndex = tabIndex ?? 0;
    if (disabled) {
      buttonProps['aria-disabled'] = disabled;
      buttonProps.tabIndex = focusableWhenDisabled ? tabIndex ?? 0 : -1;
    }
  }
  const getButtonProps = externalProps => {
    const externalEventHandlers = {
      ...(0, _extractEventHandlers.extractEventHandlers)(parameters),
      ...(0, _extractEventHandlers.extractEventHandlers)(externalProps)
    };
    const props = {
      type,
      ...externalEventHandlers,
      ...buttonProps,
      ...externalProps,
      onClick: createHandleClick(externalEventHandlers),
      onKeyDown: createHandleKeyDown(externalEventHandlers),
      onKeyUp: createHandleKeyUp(externalEventHandlers),
      ref: handleRef
    };
    return props;
  };
  return {
    getButtonProps,
    buttonRef: handleRef
  };
}