// packages/block-editor/src/components/block-alignment-matrix-control/index.js
import { __ } from "@wordpress/i18n";
import { DOWN } from "@wordpress/keycodes";
import {
  ToolbarButton,
  Dropdown,
  AlignmentMatrixControl
} from "@wordpress/components";
import { jsx } from "react/jsx-runtime";
var noop = () => {
};
function BlockAlignmentMatrixControl(props) {
  const {
    label = __("Change matrix alignment"),
    onChange = noop,
    value = "center",
    isDisabled
  } = props;
  const icon = /* @__PURE__ */ jsx(AlignmentMatrixControl.Icon, { value });
  return /* @__PURE__ */ jsx(
    Dropdown,
    {
      popoverProps: { placement: "bottom-start" },
      renderToggle: ({ onToggle, isOpen }) => {
        const openOnArrowDown = (event) => {
          if (!isOpen && event.keyCode === DOWN) {
            event.preventDefault();
            onToggle();
          }
        };
        return /* @__PURE__ */ jsx(
          ToolbarButton,
          {
            onClick: onToggle,
            "aria-haspopup": "true",
            "aria-expanded": isOpen,
            onKeyDown: openOnArrowDown,
            label,
            icon,
            showTooltip: true,
            disabled: isDisabled
          }
        );
      },
      renderContent: () => /* @__PURE__ */ jsx(
        AlignmentMatrixControl,
        {
          hasFocusBorder: false,
          onChange,
          value
        }
      )
    }
  );
}
var block_alignment_matrix_control_default = BlockAlignmentMatrixControl;
export {
  block_alignment_matrix_control_default as default
};
//# sourceMappingURL=index.js.map
