@wordpress/block-editor/build-module/components/alignment-control/ui.js

Generic block editor.

// packages/block-editor/src/components/alignment-control/ui.js
import { __, isRTL } from "@wordpress/i18n";
import { ToolbarDropdownMenu, ToolbarGroup } from "@wordpress/components";
import { alignLeft, alignRight, alignCenter } from "@wordpress/icons";
import { jsx } from "react/jsx-runtime";
var DEFAULT_ALIGNMENT_CONTROLS = [
  {
    icon: alignLeft,
    title: __("Align text left"),
    align: "left"
  },
  {
    icon: alignCenter,
    title: __("Align text center"),
    align: "center"
  },
  {
    icon: alignRight,
    title: __("Align text right"),
    align: "right"
  }
];
var POPOVER_PROPS = {
  placement: "bottom-start"
};
function AlignmentUI({
  value,
  onChange,
  alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
  label = __("Align text"),
  description = __("Change text alignment"),
  isCollapsed = true,
  isToolbar
}) {
  function applyOrUnset(align) {
    return () => onChange(value === align ? void 0 : align);
  }
  const activeAlignment = alignmentControls.find(
    (control) => control.align === value
  );
  function setIcon() {
    if (activeAlignment) {
      return activeAlignment.icon;
    }
    return isRTL() ? alignRight : alignLeft;
  }
  const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
  const extraProps = isToolbar ? { isCollapsed } : {
    toggleProps: {
      description
    },
    popoverProps: POPOVER_PROPS
  };
  return /* @__PURE__ */ jsx(
    UIComponent,
    {
      icon: setIcon(),
      label,
      controls: alignmentControls.map((control) => {
        const { align } = control;
        const isActive = value === align;
        return {
          ...control,
          isActive,
          role: isCollapsed ? "menuitemradio" : void 0,
          onClick: applyOrUnset(align)
        };
      }),
      ...extraProps
    }
  );
}
var ui_default = AlignmentUI;
export {
  ui_default as default
};
//# sourceMappingURL=ui.js.map