@shopify/polaris/dist/esm/components/UnstyledButton/UnstyledButton.js

Shopify’s product component library

import { objectWithoutProperties as _objectWithoutProperties } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React$1, { useRef } from 'react';
import { handleMouseUpByBlurring } from '../../utilities/focus.js';
import { UnstyledLink as UnstyledLink$1 } from '../UnstyledLink/UnstyledLink.js';

function UnstyledButton(_ref) {
  var {
    id,
    url,
    disabled,
    children,
    className,
    pressed,
    accessibilityLabel,
    ariaControls,
    ariaExpanded,
    ariaPressed,
    onClick,
    onFocus,
    onBlur,
    onKeyDown,
    onKeyPress,
    onKeyUp,
    onMouseEnter,
    onTouchStart,
    external,
    download,
    submit
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["id", "url", "disabled", "children", "className", "pressed", "accessibilityLabel", "ariaControls", "ariaExpanded", "ariaPressed", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyPress", "onKeyUp", "onMouseEnter", "onTouchStart", "external", "download", "submit"]);

  var hasGivenDeprecationWarning = useRef(false);

  if (ariaPressed && !hasGivenDeprecationWarning.current) {
    // eslint-disable-next-line no-console
    console.warn('Deprecation: The ariaPressed prop has been replaced with pressed');
    hasGivenDeprecationWarning.current = true;
  }

  var type = submit ? 'submit' : 'button';
  var ariaPressedStatus = pressed !== undefined ? pressed : ariaPressed;
  var buttonMarkup;

  if (url) {
    buttonMarkup = disabled ?
    /*#__PURE__*/
    // Render an `<a>` so toggling disabled/enabled state changes only the
    // `href` attribute instead of replacing the whole element.
    // eslint-disable-next-line jsx-a11y/anchor-is-valid
    React$1.createElement("a", {
      id: id,
      className: className,
      "aria-label": accessibilityLabel,
      "data-polaris-unstyled-button": true
    }, children) : /*#__PURE__*/React$1.createElement(UnstyledLink$1, Object.assign({
      id: id,
      url: url,
      external: external,
      download: download,
      onClick: onClick,
      onFocus: onFocus,
      onBlur: onBlur,
      onMouseUp: handleMouseUpByBlurring,
      onMouseEnter: onMouseEnter,
      onTouchStart: onTouchStart,
      className: className,
      "aria-label": accessibilityLabel,
      "data-polaris-unstyled-button": true
    }, rest), children);
  } else {
    buttonMarkup = /*#__PURE__*/React$1.createElement("button", Object.assign({
      id: id,
      type: type,
      onClick: onClick,
      onFocus: onFocus,
      onBlur: onBlur,
      onKeyDown: onKeyDown,
      onKeyUp: onKeyUp,
      onKeyPress: onKeyPress,
      onMouseUp: handleMouseUpByBlurring,
      onMouseEnter: onMouseEnter,
      onTouchStart: onTouchStart,
      className: className,
      disabled: disabled,
      "aria-label": accessibilityLabel,
      "aria-controls": ariaControls,
      "aria-expanded": ariaExpanded,
      "aria-pressed": ariaPressedStatus
    }, rest), children);
  }

  return buttonMarkup;
}

export { UnstyledButton };