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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ToolbarButton = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _button = _interopRequireDefault(require("../../button"));
var _toolbarItem = _interopRequireDefault(require("../toolbar-item"));
var _toolbarContext = _interopRequireDefault(require("../toolbar-context"));
var _toolbarButtonContainer = _interopRequireDefault(require("./toolbar-button-container"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useDeprecatedProps({
  isDisabled,
  ...otherProps
}) {
  return {
    disabled: isDisabled,
    ...otherProps
  };
}
function UnforwardedToolbarButton(props, ref) {
  const {
    children,
    className,
    containerClassName,
    extraProps,
    isActive,
    title,
    ...restProps
  } = useDeprecatedProps(props);
  const accessibleToolbarState = (0, _element.useContext)(_toolbarContext.default);
  if (!accessibleToolbarState) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarButtonContainer.default, {
      className: containerClassName,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
        ref: ref,
        icon: restProps.icon,
        size: "compact",
        label: title,
        shortcut: restProps.shortcut,
        "data-subscript": restProps.subscript,
        onClick: event => {
          event.stopPropagation();
          // TODO: Possible bug; maybe use onClick instead of restProps.onClick.
          if (restProps.onClick) {
            restProps.onClick(event);
          }
        },
        className: (0, _clsx.default)('components-toolbar__control', className),
        isPressed: isActive,
        accessibleWhenDisabled: true,
        "data-toolbar-item": true,
        ...extraProps,
        ...restProps,
        children: children
      })
    });
  }

  // ToobarItem will pass all props to the render prop child, which will pass
  // all props to Button. This means that ToolbarButton has the same API as
  // Button.
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbarItem.default, {
    className: (0, _clsx.default)('components-toolbar-button', className),
    ...extraProps,
    ...restProps,
    ref: ref,
    children: toolbarItemProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
      size: "compact",
      label: title,
      isPressed: isActive,
      ...toolbarItemProps,
      children: children
    })
  });
}

/**
 * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar
 * or ToolbarGroup when used to create general interfaces.
 *
 * ```jsx
 * import { Toolbar, ToolbarButton } from '@wordpress/components';
 * import { edit } from '@wordpress/icons';
 *
 * function MyToolbar() {
 *   return (
 *		<Toolbar label="Options">
 *			<ToolbarButton
 *				icon={ edit }
 *				label="Edit"
 *				onClick={ () => alert( 'Editing' ) }
 *			/>
 *		</Toolbar>
 *   );
 * }
 * ```
 */
const ToolbarButton = exports.ToolbarButton = (0, _element.forwardRef)(UnforwardedToolbarButton);
var _default = exports.default = ToolbarButton;
//# sourceMappingURL=index.js.map