@wordpress/components
Version:
UI components for WordPress.
87 lines (84 loc) • 4.44 kB
JavaScript
// 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/components/src/alignment-matrix-control/style.module.scss
if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='ae7603bd56']")) {
const style = document.createElement("style");
style.setAttribute("data-wp-hash", "ae7603bd56");
style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor: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,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#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}}"));
document.head.appendChild(style);
}
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