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

Shopify’s product component library

import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } 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) {
  let {
    id,
    children,
    className,
    url,
    external,
    download,
    submit,
    disabled,
    loading,
    pressed,
    accessibilityLabel,
    role,
    ariaControls,
    ariaExpanded,
    ariaDescribedBy,
    ariaPressed,
    onClick,
    onFocus,
    onBlur,
    onKeyDown,
    onKeyPress,
    onKeyUp,
    onMouseEnter,
    onTouchStart
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["id", "children", "className", "url", "external", "download", "submit", "disabled", "loading", "pressed", "accessibilityLabel", "role", "ariaControls", "ariaExpanded", "ariaDescribedBy", "ariaPressed", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyPress", "onKeyUp", "onMouseEnter", "onTouchStart"]);

  const 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;
  }

  const ariaPressedStatus = pressed !== undefined ? pressed : ariaPressed;
  let buttonMarkup;
  const commonProps = {
    id,
    className,
    'aria-label': accessibilityLabel
  };

  const interactiveProps = _objectSpread2(_objectSpread2({}, commonProps), {}, {
    role,
    onClick,
    onFocus,
    onBlur,
    onMouseUp: handleMouseUpByBlurring,
    onMouseEnter,
    onTouchStart
  });

  if (url) {
    buttonMarkup = disabled ?
    /*#__PURE__*/
    // Render an `<a>` so toggling disabled/enabled state changes only the
    // `href` attribute instead of replacing the whole element.
    React$1.createElement("a", commonProps, children) : /*#__PURE__*/React$1.createElement(UnstyledLink$1, Object.assign({}, interactiveProps, {
      url: url,
      external: external,
      download: download
    }, rest), children);
  } else {
    buttonMarkup = /*#__PURE__*/React$1.createElement("button", Object.assign({}, interactiveProps, {
      type: submit ? 'submit' : 'button',
      disabled: disabled,
      "aria-busy": loading ? true : undefined,
      "aria-controls": ariaControls,
      "aria-expanded": ariaExpanded,
      "aria-describedby": ariaDescribedBy,
      "aria-pressed": ariaPressedStatus,
      onKeyDown: onKeyDown,
      onKeyUp: onKeyUp,
      onKeyPress: onKeyPress
    }, rest), children);
  }

  return buttonMarkup;
}

export { UnstyledButton };