@wordpress/components/build/button/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Button = void 0;
exports.UnforwardedButton = UnforwardedButton;
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

var _compose = require("@wordpress/compose");

var _tooltip = _interopRequireDefault(require("../tooltip"));

var _icon = _interopRequireDefault(require("../icon"));

var _visuallyHidden = require("../visually-hidden");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];

function useDeprecatedProps(_ref) {
  let {
    isDefault,
    isPrimary,
    isSecondary,
    isTertiary,
    isLink,
    variant,
    ...otherProps
  } = _ref;
  let computedVariant = variant;

  if (isPrimary) {
    var _computedVariant;

    (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary';
  }

  if (isTertiary) {
    var _computedVariant2;

    (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary';
  }

  if (isSecondary) {
    var _computedVariant3;

    (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary';
  }

  if (isDefault) {
    var _computedVariant4;

    (0, _deprecated.default)('Button isDefault prop', {
      since: '5.4',
      alternative: 'variant="secondary"',
      version: '6.2'
    });
    (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary';
  }

  if (isLink) {
    var _computedVariant5;

    (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link';
  }

  return { ...otherProps,
    variant: computedVariant
  };
}

function UnforwardedButton(props, ref) {
  var _children$, _children$$props;

  const {
    __next40pxDefaultSize,
    isSmall,
    isPressed,
    isBusy,
    isDestructive,
    className,
    disabled,
    icon,
    iconPosition = 'left',
    iconSize,
    showTooltip,
    tooltipPosition,
    shortcut,
    label,
    children,
    text,
    variant,
    __experimentalIsFocusable: isFocusable,
    describedBy,
    ...buttonOrAnchorProps
  } = useDeprecatedProps(props);
  const {
    href,
    target,
    ...additionalProps
  } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {
    href: undefined,
    target: undefined,
    ...buttonOrAnchorProps
  };
  const instanceId = (0, _compose.useInstanceId)(Button, 'components-button__description');
  const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && (children === null || children === void 0 ? void 0 : children[0]) && children[0] !== null && // Tooltip should not considered as a child
  (children === null || children === void 0 ? void 0 : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : (_children$$props = _children$.props) === null || _children$$props === void 0 ? void 0 : _children$$props.className) !== 'components-tooltip';
  const classes = (0, _classnames.default)('components-button', className, {
    'is-next-40px-default-size': __next40pxDefaultSize,
    'is-secondary': variant === 'secondary',
    'is-primary': variant === 'primary',
    'is-small': isSmall,
    'is-tertiary': variant === 'tertiary',
    'is-pressed': isPressed,
    'is-busy': isBusy,
    'is-link': variant === 'link',
    'is-destructive': isDestructive,
    'has-text': !!icon && hasChildren,
    'has-icon': !!icon
  });
  const trulyDisabled = disabled && !isFocusable;
  const Tag = href !== undefined && !trulyDisabled ? 'a' : 'button';
  const buttonProps = Tag === 'button' ? {
    type: 'button',
    disabled: trulyDisabled,
    'aria-pressed': isPressed
  } : {};
  const anchorProps = Tag === 'a' ? {
    href,
    target
  } : {};

  if (disabled && isFocusable) {
    // In this case, the button will be disabled, but still focusable and
    // perceivable by screen reader users.
    buttonProps['aria-disabled'] = true;
    anchorProps['aria-disabled'] = true;

    for (const disabledEvent of disabledEventsOnDisabledButton) {
      additionalProps[disabledEvent] = event => {
        if (event) {
          event.stopPropagation();
          event.preventDefault();
        }
      };
    }
  } // Should show the tooltip if...


  const shouldShowTooltip = !trulyDisabled && ( // An explicit tooltip is passed or...
  showTooltip && label || // There's a shortcut or...
  shortcut || // There's a label and...
  !!label && // The children are empty and...
  !(children !== null && children !== void 0 && children.length) && // The tooltip is not explicitly disabled.
  false !== showTooltip);
  const descriptionId = describedBy ? instanceId : undefined;
  const describedById = additionalProps['aria-describedby'] || descriptionId;
  const commonProps = {
    className: classes,
    'aria-label': additionalProps['aria-label'] || label,
    'aria-describedby': describedById,
    ref
  };
  const elementChildren = (0, _element.createElement)(_element.Fragment, null, icon && iconPosition === 'left' && (0, _element.createElement)(_icon.default, {
    icon: icon,
    size: iconSize
  }), text && (0, _element.createElement)(_element.Fragment, null, text), icon && iconPosition === 'right' && (0, _element.createElement)(_icon.default, {
    icon: icon,
    size: iconSize
  }), children);
  const element = Tag === 'a' ? (0, _element.createElement)("a", (0, _extends2.default)({}, anchorProps, additionalProps, commonProps), elementChildren) : (0, _element.createElement)("button", (0, _extends2.default)({}, buttonProps, additionalProps, commonProps), elementChildren);

  if (!shouldShowTooltip) {
    return (0, _element.createElement)(_element.Fragment, null, element, describedBy && (0, _element.createElement)(_visuallyHidden.VisuallyHidden, null, (0, _element.createElement)("span", {
      id: descriptionId
    }, describedBy)));
  }

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_tooltip.default, {
    text: children !== null && children !== void 0 && children.length && describedBy ? describedBy : label,
    shortcut: shortcut,
    position: tooltipPosition
  }, element), describedBy && (0, _element.createElement)(_visuallyHidden.VisuallyHidden, null, (0, _element.createElement)("span", {
    id: descriptionId
  }, describedBy)));
}
/**
 * Lets users take actions and make choices with a single click or tap.
 *
 * ```jsx
 * import { Button } from '@wordpress/components';
 * const Mybutton = () => (
 *   <Button
 *     variant="primary"
 *     onClick={ handleClick }
 *   >
 *     Click here
 *   </Button>
 * );
 * ```
 */


const Button = (0, _element.forwardRef)(UnforwardedButton);
exports.Button = Button;
var _default = Button;
exports.default = _default;
//# sourceMappingURL=index.js.map