@wordpress/components/build-module/alignment-matrix-control/index.mjs

UI components for WordPress.

// packages/components/src/alignment-matrix-control/index.tsx
import clsx from "clsx";
import { __, isRTL } from "@wordpress/i18n";
import { useInstanceId } from "@wordpress/compose";
import { useCallback } from "@wordpress/element";
import Cell from "./cell.mjs";
import { Composite } from "../composite/index.mjs";
import AlignmentMatrixControlIcon from "./icon.mjs";
import { GRID, getItemId, getItemValue } from "./utils.mjs";

// packages/style-runtime/src/index.ts
var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
function getRuntime() {
  const globalScope = globalThis;
  if (globalScope.__wpStyleRuntime) {
    return globalScope.__wpStyleRuntime;
  }
  globalScope.__wpStyleRuntime = {
    documents: /* @__PURE__ */ new Map(),
    styles: /* @__PURE__ */ new Map(),
    injectedStyles: /* @__PURE__ */ new WeakMap()
  };
  if (typeof document !== "undefined") {
    registerDocument(document);
  }
  return globalScope.__wpStyleRuntime;
}
function documentContainsStyleHash(targetDocument, hash) {
  if (!targetDocument.head) {
    return false;
  }
  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
      return true;
    }
  }
  return false;
}
function injectStyle(targetDocument, hash, css) {
  if (!targetDocument.head) {
    return;
  }
  const runtime = getRuntime();
  let injectedStyles = runtime.injectedStyles.get(targetDocument);
  if (!injectedStyles) {
    injectedStyles = /* @__PURE__ */ new Set();
    runtime.injectedStyles.set(targetDocument, injectedStyles);
  }
  if (injectedStyles.has(hash)) {
    return;
  }
  if (documentContainsStyleHash(targetDocument, hash)) {
    injectedStyles.add(hash);
    return;
  }
  const style = targetDocument.createElement("style");
  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
  style.appendChild(targetDocument.createTextNode(css));
  targetDocument.head.appendChild(style);
  injectedStyles.add(hash);
}
function registerDocument(targetDocument) {
  const runtime = getRuntime();
  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
  for (const [hash, css] of runtime.styles) {
    injectStyle(targetDocument, hash, css);
  }
  return () => {
    const count = runtime.documents.get(targetDocument);
    if (count === void 0) {
      return;
    }
    if (count <= 1) {
      runtime.documents.delete(targetDocument);
      return;
    }
    runtime.documents.set(targetDocument, count - 1);
  };
}
function registerStyle(hash, css) {
  const runtime = getRuntime();
  runtime.styles.set(hash, css);
  for (const targetDocument of runtime.documents.keys()) {
    injectStyle(targetDocument, hash, css);
  }
}

// packages/components/src/alignment-matrix-control/style.module.scss
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
  registerStyle("0c5e50ec66", "._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid transparent;border-radius:4px;box-sizing:border-box;cursor:var(--wpds-cursor-control,pointer);direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}");
}
var style_module_default = { "grid-container": "_02e2af5803bf5bda__grid-container", "grid-row": "c421f8ed08c23077__grid-row", "cell": "_3af769f755097fdb__cell", "point": "_37ef12d4fb6d6131__point" };

// packages/components/src/alignment-matrix-control/index.tsx
import { jsx as _jsx } from "react/jsx-runtime";
function UnforwardedAlignmentMatrixControl({
  className,
  id,
  label = __("Alignment Matrix Control"),
  defaultValue = "center center",
  value,
  onChange,
  width = 92,
  ...props
}) {
  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, "alignment-matrix-control", id);
  const setActiveId = useCallback((nextActiveId) => {
    const nextValue = getItemValue(baseId, nextActiveId);
    if (nextValue) {
      onChange?.(nextValue);
    }
  }, [baseId, onChange]);
  const classes = clsx("component-alignment-matrix-control", style_module_default["grid-container"], className);
  return /* @__PURE__ */ _jsx(Composite, {
    defaultActiveId: getItemId(baseId, defaultValue),
    activeId: getItemId(baseId, value),
    setActiveId,
    rtl: isRTL(),
    render: /* @__PURE__ */ _jsx("div", {
      ...props,
      className: classes,
      "aria-label": label,
      id: baseId,
      role: "grid",
      style: {
        width: `${width}px`
      }
    }),
    children: GRID.map((cells, index) => /* @__PURE__ */ _jsx(Composite.Row, {
      render: /* @__PURE__ */ _jsx("div", {
        className: style_module_default["grid-row"],
        role: "row"
      }),
      children: cells.map((cell) => /* @__PURE__ */ _jsx(Cell, {
        id: getItemId(baseId, cell),
        value: cell
      }, cell))
    }, index))
  });
}
var AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {
  /**
   * Render an alignment matrix as an icon.
   *
   * ```jsx
   * import { AlignmentMatrixControl } from '@wordpress/components';
   *
   * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
   * ```
   */
  Icon: Object.assign(AlignmentMatrixControlIcon, {
    displayName: "AlignmentMatrixControl.Icon"
  })
});
var alignment_matrix_control_default = AlignmentMatrixControl;
export {
  AlignmentMatrixControl,
  alignment_matrix_control_default as default
};
//# sourceMappingURL=index.mjs.map