@wordpress/block-editor/build/components/block-alignment-matrix-control/index.js

Generic block editor.

"use strict";

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

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

var _lodash = require("lodash");

var _i18n = require("@wordpress/i18n");

var _keycodes = require("@wordpress/keycodes");

var _components = require("@wordpress/components");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */
function BlockAlignmentMatrixControl(props) {
  const {
    label = (0, _i18n.__)('Change matrix alignment'),
    onChange = _lodash.noop,
    value = 'center',
    isDisabled
  } = props;
  const icon = (0, _element.createElement)(_components.__experimentalAlignmentMatrixControl.Icon, {
    value: value
  });
  const className = 'block-editor-block-alignment-matrix-control';
  const popoverClassName = `${className}__popover`;
  const isAlternate = true;
  return (0, _element.createElement)(_components.Dropdown, {
    position: "bottom right",
    className: className,
    popoverProps: {
      className: popoverClassName,
      isAlternate
    },
    renderToggle: ({
      onToggle,
      isOpen
    }) => {
      const openOnArrowDown = event => {
        if (!isOpen && event.keyCode === _keycodes.DOWN) {
          event.preventDefault();
          event.stopPropagation();
          onToggle();
        }
      };

      return (0, _element.createElement)(_components.ToolbarButton, {
        onClick: onToggle,
        "aria-haspopup": "true",
        "aria-expanded": isOpen,
        onKeyDown: openOnArrowDown,
        label: label,
        icon: icon,
        showTooltip: true,
        disabled: isDisabled
      });
    },
    renderContent: () => (0, _element.createElement)(_components.__experimentalAlignmentMatrixControl, {
      hasFocusBorder: false,
      onChange: onChange,
      value: value
    })
  });
}

var _default = BlockAlignmentMatrixControl;
exports.default = _default;
//# sourceMappingURL=index.js.map