@valu/block-components 0.1.0 → 0.2.0

package/dist/components/matrix/index.js

@@ -0,0 +1,704 @@
+import { useId, useMemo, useState, useCallback } from 'react';
+import styled from '@emotion/styled';
+import { css, CacheProvider } from '@emotion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ToggleControl, CheckboxControl } from '@wordpress/components';
+import createCache from '@emotion/cache';
+
+// components/matrix/Matrix.tsx
+
+// components/matrix/styles/tokens.ts
+var tokens = {
+  accent: "var(--wp-admin-theme-color, #3858e9)",
+  accentHover: "color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent)",
+  bg: "var(--wp-components-color-background, #ffffff)",
+  bgMuted: "var(--wp-components-color-gray-100, #f0f0f0)",
+  fg: "var(--wp-components-color-foreground, #1e1e1e)",
+  gray200: "var(--wp-components-color-gray-200, #ebebeb)",
+  gray300: "var(--wp-components-color-gray-300, #dcdcde)",
+  gray600: "var(--wp-components-color-gray-600, #757575)",
+  gray900: "var(--wp-components-color-gray-900, #1e1e1e)",
+  radiusSm: "2px",
+  radiusMd: "4px",
+  rowMinHeight: "44px",
+  shadowStickyTop: "inset 0 -1px 0 rgba(0, 0, 0, 0.08)",
+  shadowStickyLeft: "inset -1px 0 0 rgba(0, 0, 0, 0.08)",
+  spaceXs: "4px",
+  spaceSm: "8px",
+  spaceMd: "12px",
+  transitionFast: "120ms ease-out",
+  fontSizeBody: "13px",
+  fontSizeSmall: "11px",
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 600,
+  /** Sticky z-index layering. Row-header > master > top headers > leaf cells. */
+  zRowHeader: 4,
+  zMaster: 3,
+  zHeader: 3};
+
+// components/matrix/styles/index.ts
+var visuallyHiddenCss = css`
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	white-space: nowrap;
+`;
+var Root = styled.div`
+	color: ${tokens.fg};
+	font-size: ${tokens.fontSizeBody};
+
+	* {
+		box-sizing: border-box;
+	}
+`;
+var Viewport = styled.div`
+	position: relative;
+	overflow: auto;
+	max-height: ${(p) => p.$maxHeight};
+	border: 1px solid ${tokens.gray300};
+	border-radius: ${tokens.radiusMd};
+	background: ${tokens.bg};
+`;
+var Table = styled.table`
+	border-collapse: separate;
+	border-spacing: 0;
+	width: 100%;
+	min-width: max-content;
+
+	caption {
+		${visuallyHiddenCss};
+	}
+
+	th,
+	td {
+		text-align: left;
+		padding: ${tokens.spaceSm} ${tokens.spaceMd};
+		border-bottom: 1px solid ${tokens.gray200};
+		font-weight: ${tokens.fontWeightRegular};
+		vertical-align: middle;
+		background: ${tokens.bg};
+	}
+
+	tbody tr:last-of-type th,
+	tbody tr:last-of-type td {
+		border-bottom: none;
+	}
+
+	tbody tr:hover th,
+	tbody tr:hover td {
+		background: ${tokens.bgMuted};
+	}
+`;
+var HeaderCell = styled.th`
+	font-weight: ${tokens.fontWeightBold};
+	font-size: ${tokens.fontSizeSmall};
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
+	color: ${tokens.gray900};
+	white-space: nowrap;
+	text-align: ${(p) => p.$align ?? "left"};
+
+	${(p) => p.$sticky && css`
+			position: sticky;
+			top: ${p.$top ?? "0"};
+			z-index: ${p.$z ?? tokens.zHeader};
+			box-shadow: ${tokens.shadowStickyTop};
+		`};
+
+	${(p) => p.$leftSticky && css`
+			position: sticky;
+			left: ${p.$leftOffset ?? "0"};
+			z-index: ${(p.$z ?? tokens.zHeader) + 1};
+			box-shadow: ${tokens.shadowStickyLeft}, ${tokens.shadowStickyTop};
+		`};
+`;
+var GroupHeaderButton = styled.button`
+	display: inline-flex;
+	align-items: center;
+	gap: ${tokens.spaceXs};
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: ${tokens.radiusSm};
+	padding: 2px ${tokens.spaceXs};
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	text-transform: inherit;
+	letter-spacing: inherit;
+
+	&:hover {
+		background: ${tokens.accentHover};
+	}
+
+	&:focus-visible {
+		outline: 2px solid ${tokens.accent};
+		outline-offset: 1px;
+	}
+
+	&[disabled] {
+		cursor: default;
+		&:hover {
+			background: transparent;
+		}
+	}
+`;
+var Caret = styled.span`
+	display: inline-block;
+	width: 0;
+	height: 0;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-top: 5px solid currentColor;
+	transition: transform ${tokens.transitionFast};
+	transform: ${(p) => p.$open ? "rotate(0deg)" : "rotate(-90deg)"};
+`;
+var RowHeaderCell = styled.th`
+	min-width: 220px;
+	max-width: 320px;
+	${(p) => p.$leftSticky && css`
+			position: sticky;
+			left: 0;
+			z-index: ${tokens.zRowHeader};
+			box-shadow: ${tokens.shadowStickyLeft};
+		`};
+`;
+var RowHeaderInner = styled.div`
+	display: flex;
+	align-items: center;
+	gap: ${tokens.spaceMd};
+	min-height: ${tokens.rowMinHeight};
+`;
+var RowHeaderText = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+`;
+var RowLabel = styled.div`
+	font-weight: ${tokens.fontWeightMedium};
+	color: ${tokens.gray900};
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;
+var RowSublabel = styled.div`
+	color: ${tokens.gray600};
+	font-size: ${tokens.fontSizeSmall};
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;
+var RowMeta = styled.div`
+	display: flex;
+	flex-wrap: wrap;
+	gap: ${tokens.spaceXs};
+	margin-left: auto;
+`;
+var MasterCell = styled.td`
+	min-width: 96px;
+	text-align: center;
+	${(p) => p.$leftSticky && css`
+			position: sticky;
+			left: ${p.$leftOffset};
+			z-index: ${tokens.zMaster};
+			box-shadow: ${tokens.shadowStickyLeft};
+		`};
+`;
+var LeafCell = styled.td`
+	min-width: 88px;
+	text-align: center;
+
+	&[data-disabled='true'] {
+		opacity: 0.45;
+	}
+`;
+var SummaryCell = styled.td`
+	min-width: 88px;
+	text-align: center;
+	color: ${tokens.gray600};
+	font-variant-numeric: tabular-nums;
+`;
+var CellControlWrap = styled.div`
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	/* Trim @wordpress/components default vertical margins inside table cells. */
+	.components-checkbox-control,
+	.components-toggle-control,
+	.components-base-control,
+	.components-base-control__field {
+		margin: 0;
+	}
+
+	.components-checkbox-control__input-container {
+		margin: 0;
+	}
+`;
+var Caption = styled.caption`
+	${visuallyHiddenCss};
+`;
+var isExpanded = (group, expanded) => group.collapsible === false ? true : expanded.has(group.id);
+var MatrixHeader = ({
+  groups,
+  master,
+  flat,
+  stickyHeader,
+  stickyFirstColumn,
+  masterLeftOffset,
+  expandedGroups,
+  onToggleGroup,
+  labels,
+  renderHeader,
+  rowHeaderLabel
+}) => {
+  if (flat) {
+    const cols = groups[0]?.columns ?? [];
+    return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx(
+        HeaderCell,
+        {
+          scope: "col",
+          $sticky: stickyHeader,
+          $leftSticky: stickyFirstColumn,
+          $leftOffset: "0",
+          children: rowHeaderLabel ?? ""
+        }
+      ),
+      master && /* @__PURE__ */ jsx(
+        HeaderCell,
+        {
+          scope: "col",
+          $sticky: stickyHeader,
+          $leftSticky: stickyFirstColumn,
+          $leftOffset: masterLeftOffset,
+          $align: "center",
+          children: master.label
+        }
+      ),
+      cols.map((col) => /* @__PURE__ */ jsx(
+        HeaderCell,
+        {
+          scope: "col",
+          $sticky: stickyHeader,
+          $align: "center",
+          "aria-description": col.description,
+          children: renderHeader ? renderHeader(col) : col.label
+        },
+        col.id
+      ))
+    ] }) });
+  }
+  const TOP_ROW_HEIGHT = "36px";
+  return /* @__PURE__ */ jsxs("thead", { children: [
+    /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx(
+        HeaderCell,
+        {
+          scope: "col",
+          rowSpan: 2,
+          $sticky: stickyHeader,
+          $leftSticky: stickyFirstColumn,
+          $leftOffset: "0",
+          children: rowHeaderLabel ?? ""
+        }
+      ),
+      master && /* @__PURE__ */ jsx(
+        HeaderCell,
+        {
+          scope: "col",
+          rowSpan: 2,
+          $sticky: stickyHeader,
+          $leftSticky: stickyFirstColumn,
+          $leftOffset: masterLeftOffset,
+          $align: "center",
+          children: master.label
+        }
+      ),
+      groups.map((group) => {
+        const open = isExpanded(group, expandedGroups);
+        const span = open ? group.columns.length : 1;
+        const collapsible = group.collapsible !== false;
+        return /* @__PURE__ */ jsx(
+          HeaderCell,
+          {
+            scope: "colgroup",
+            colSpan: span,
+            rowSpan: open ? 1 : 2,
+            $sticky: stickyHeader,
+            $align: "center",
+            children: collapsible ? /* @__PURE__ */ jsxs(
+              GroupHeaderButton,
+              {
+                type: "button",
+                "aria-expanded": open,
+                "aria-label": open ? labels.collapseGroup : labels.expandGroup,
+                onClick: () => onToggleGroup(group.id),
+                children: [
+                  /* @__PURE__ */ jsx(Caret, { $open: open, "aria-hidden": true }),
+                  group.label
+                ]
+              }
+            ) : /* @__PURE__ */ jsx("span", { children: group.label })
+          },
+          group.id
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsx("tr", { children: groups.map((group) => {
+      const open = isExpanded(group, expandedGroups);
+      if (!open) return null;
+      return group.columns.map((col) => /* @__PURE__ */ jsx(
+        HeaderCell,
+        {
+          scope: "col",
+          $sticky: stickyHeader,
+          $top: TOP_ROW_HEIGHT,
+          $align: "center",
+          "aria-description": col.description,
+          children: renderHeader ? renderHeader(col) : col.label
+        },
+        `${group.id}::${col.id}`
+      ));
+    }) })
+  ] });
+};
+
+// components/matrix/utils.ts
+var cellKey = (rowId, colId) => `${rowId}::${colId}`;
+var selectionByRow = (value, rowId) => {
+  const prefix = `${rowId}::`;
+  const out = [];
+  for (const key of value) {
+    if (key.startsWith(prefix)) out.push(key.slice(prefix.length));
+  }
+  return out;
+};
+var toggleCell = (value, rowId, colId, checked) => {
+  const next = new Set(value);
+  if (checked) next.add(cellKey(rowId, colId));
+  else next.delete(cellKey(rowId, colId));
+  return next;
+};
+var normalizeGroups = (input) => {
+  if (input.groups) return { groups: input.groups, flat: false };
+  return {
+    groups: [
+      {
+        id: "__flat__",
+        label: "",
+        columns: input.columns ?? [],
+        collapsible: false,
+        defaultExpanded: true
+      }
+    ],
+    flat: true
+  };
+};
+var defaultLabels = (overrides = {}) => ({
+  expandGroup: overrides.expandGroup ?? "Expand group",
+  collapseGroup: overrides.collapseGroup ?? "Collapse group",
+  groupSummary: overrides.groupSummary ?? ((selected, total) => `${selected} / ${total}`),
+  cellToggled: overrides.cellToggled ?? ((rowLabel, colLabel, checked) => checked ? `${colLabel} added to ${rowLabel}` : `${colLabel} removed from ${rowLabel}`)
+});
+var toPlainText = (node) => {
+  if (node === null || node === void 0 || node === false || node === true) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(toPlainText).join(" ");
+  if (typeof node === "object" && "props" in node) {
+    const props = node.props;
+    if (props && "children" in props) return toPlainText(props.children);
+  }
+  return "";
+};
+var MatrixCell = ({
+  row,
+  column,
+  value,
+  disabled,
+  variant,
+  onChange,
+  renderCell
+}) => {
+  const key = cellKey(row.id, column.id);
+  const checked = value.has(key);
+  const toggle = useCallback(
+    (nextChecked) => {
+      if (disabled) return;
+      const next = toggleCell(value, row.id, column.id, nextChecked);
+      onChange(next, { rowId: row.id, colId: column.id, checked: nextChecked });
+    },
+    [column.id, disabled, onChange, row.id, value]
+  );
+  const ariaLabel = `${toPlainText(row.label)} \u2014 ${toPlainText(column.label)}`;
+  const content = renderCell ? renderCell({ row, column, checked, disabled, toggle, selectionKey: key }) : variant === "toggle" ? /* @__PURE__ */ jsx(
+    ToggleControl,
+    {
+      __nextHasNoMarginBottom: true,
+      label: "",
+      checked,
+      disabled,
+      "aria-label": ariaLabel,
+      onChange: toggle
+    }
+  ) : /* @__PURE__ */ jsx(
+    CheckboxControl,
+    {
+      __nextHasNoMarginBottom: true,
+      label: "",
+      checked,
+      disabled,
+      "aria-label": ariaLabel,
+      onChange: toggle
+    }
+  );
+  return /* @__PURE__ */ jsx(LeafCell, { "data-disabled": disabled || void 0, children: /* @__PURE__ */ jsx(CellControlWrap, { children: content }) });
+};
+var MatrixGroupSummary = ({ ctx, labels, render }) => {
+  if (render) return /* @__PURE__ */ jsx(SummaryCell, { children: render(ctx) });
+  return /* @__PURE__ */ jsx(SummaryCell, { children: labels.groupSummary(ctx.selectedCount, ctx.totalCount) });
+};
+var isGroupExpanded = (group, expanded) => group.collapsible === false ? true : expanded.has(group.id);
+var countSelected = (value, rowId, cols) => {
+  let n = 0;
+  for (const c of cols) if (value.has(cellKey(rowId, c.id))) n += 1;
+  return n;
+};
+var MatrixRowView = ({
+  row,
+  groups,
+  master,
+  flat,
+  value,
+  expandedGroups,
+  stickyFirstColumn,
+  masterLeftOffset,
+  variant,
+  onChange,
+  labels,
+  renderCell,
+  renderRowHeader,
+  renderGroupSummary
+}) => {
+  const masterChecked = master ? value.has(cellKey(row.id, master.id)) : true;
+  const masterDisablesRow = master ? master.disablesRow !== false : false;
+  const rowDisabled = master ? masterDisablesRow && !masterChecked : false;
+  const toggleMaster = useCallback(
+    (checked) => {
+      if (!master) return;
+      const next = toggleCell(value, row.id, master.id, checked);
+      onChange(next, { rowId: row.id, colId: master.id, checked });
+    },
+    [master, onChange, row.id, value]
+  );
+  return /* @__PURE__ */ jsxs("tr", { children: [
+    /* @__PURE__ */ jsx(RowHeaderCell, { scope: "row", $leftSticky: stickyFirstColumn, children: renderRowHeader ? renderRowHeader(row) : /* @__PURE__ */ jsxs(RowHeaderInner, { children: [
+      row.avatar,
+      /* @__PURE__ */ jsxs(RowHeaderText, { children: [
+        /* @__PURE__ */ jsx(RowLabel, { children: row.label }),
+        row.sublabel && /* @__PURE__ */ jsx(RowSublabel, { children: row.sublabel })
+      ] }),
+      row.meta && /* @__PURE__ */ jsx(RowMeta, { children: row.meta })
+    ] }) }),
+    master && /* @__PURE__ */ jsx(MasterCell, { $leftSticky: stickyFirstColumn, $leftOffset: masterLeftOffset, children: /* @__PURE__ */ jsx(CellControlWrap, { children: /* @__PURE__ */ jsx(
+      ToggleControl,
+      {
+        __nextHasNoMarginBottom: true,
+        label: "",
+        checked: masterChecked,
+        "aria-label": `${toPlainText(master.label)} \u2014 ${toPlainText(row.label)}`,
+        onChange: toggleMaster
+      }
+    ) }) }),
+    flat ? groups[0].columns.map((col) => /* @__PURE__ */ jsx(
+      MatrixCell,
+      {
+        row,
+        column: col,
+        value,
+        disabled: rowDisabled,
+        variant,
+        onChange,
+        renderCell
+      },
+      col.id
+    )) : groups.flatMap((group) => {
+      const open = isGroupExpanded(group, expandedGroups);
+      if (!open) {
+        return [
+          /* @__PURE__ */ jsx(
+            MatrixGroupSummary,
+            {
+              ctx: {
+                row,
+                group,
+                selectedCount: countSelected(value, row.id, group.columns),
+                totalCount: group.columns.length
+              },
+              labels,
+              render: renderGroupSummary
+            },
+            group.id
+          )
+        ];
+      }
+      return group.columns.map((col) => /* @__PURE__ */ jsx(
+        MatrixCell,
+        {
+          row,
+          column: col,
+          value,
+          disabled: rowDisabled,
+          variant,
+          onChange,
+          renderCell
+        },
+        `${group.id}::${col.id}`
+      ));
+    })
+  ] });
+};
+var EmotionCacheProvider = ({ children }) => {
+  const [head, setHead] = useState(null);
+  const captureDocument = useCallback((node) => {
+    if (!node) return;
+    const owner = node.ownerDocument ?? document;
+    setHead((prev) => prev === owner.head ? prev : owner.head);
+  }, []);
+  const cache = useMemo(() => {
+    if (!head) return null;
+    return createCache({ key: "valu-mx", container: head, prepend: true });
+  }, [head]);
+  if (!cache) {
+    return /* @__PURE__ */ jsx("div", { ref: captureDocument, style: { display: "contents" } });
+  }
+  return /* @__PURE__ */ jsx(CacheProvider, { value: cache, children: /* @__PURE__ */ jsx("div", { ref: captureDocument, style: { display: "contents" }, children }) });
+};
+var useExpandedGroups = ({
+  expanded: controlled,
+  defaultExpanded,
+  onChange
+}) => {
+  const [uncontrolled, setUncontrolled] = useState(
+    () => defaultExpanded ?? /* @__PURE__ */ new Set()
+  );
+  const isControlled = controlled !== void 0;
+  const expanded = isControlled ? controlled : uncontrolled;
+  const apply = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const isExpanded2 = useCallback((groupId) => expanded.has(groupId), [expanded]);
+  const toggle = useCallback(
+    (groupId) => {
+      const next = new Set(expanded);
+      if (next.has(groupId)) next.delete(groupId);
+      else next.add(groupId);
+      apply(next);
+    },
+    [apply, expanded]
+  );
+  const expand = useCallback(
+    (groupId) => {
+      if (expanded.has(groupId)) return;
+      const next = new Set(expanded);
+      next.add(groupId);
+      apply(next);
+    },
+    [apply, expanded]
+  );
+  const collapse = useCallback(
+    (groupId) => {
+      if (!expanded.has(groupId)) return;
+      const next = new Set(expanded);
+      next.delete(groupId);
+      apply(next);
+    },
+    [apply, expanded]
+  );
+  return { expanded, isExpanded: isExpanded2, toggle, expand, collapse };
+};
+var DEFAULT_MAX_HEIGHT = "calc(100vh - 260px)";
+var Matrix = (props) => {
+  const {
+    rows,
+    master,
+    value,
+    onChange,
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    variant = "checkbox",
+    renderCell,
+    renderRowHeader,
+    renderGroupSummary,
+    renderHeader,
+    stickyHeader = true,
+    stickyFirstColumn = true,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    caption,
+    labels,
+    className,
+    id
+  } = props;
+  const reactId = useId();
+  const rootId = id ?? `valu-mx-${reactId.replace(/:/g, "")}`;
+  const { groups, flat } = useMemo(
+    () => normalizeGroups({ columns: props.columns, groups: props.groups }),
+    [props.columns, props.groups]
+  );
+  const resolvedLabels = useMemo(() => defaultLabels(labels), [labels]);
+  const { expanded: expandedGroups, toggle: toggleGroup } = useExpandedGroups({
+    expanded,
+    defaultExpanded,
+    onChange: onExpandedChange
+  });
+  const maxHeightCss = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+  const masterLeftOffset = "220px";
+  return /* @__PURE__ */ jsx(EmotionCacheProvider, { children: /* @__PURE__ */ jsx(Root, { id: rootId, className, children: /* @__PURE__ */ jsx(Viewport, { $maxHeight: maxHeightCss, children: /* @__PURE__ */ jsxs(Table, { children: [
+    caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
+    /* @__PURE__ */ jsx(
+      MatrixHeader,
+      {
+        groups,
+        master,
+        flat,
+        stickyHeader,
+        stickyFirstColumn,
+        masterLeftOffset,
+        expandedGroups,
+        onToggleGroup: toggleGroup,
+        labels: resolvedLabels,
+        renderHeader
+      }
+    ),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx(
+      MatrixRowView,
+      {
+        row,
+        groups,
+        master,
+        flat,
+        value,
+        expandedGroups,
+        stickyFirstColumn,
+        masterLeftOffset,
+        variant,
+        onChange,
+        labels: resolvedLabels,
+        renderCell,
+        renderRowHeader,
+        renderGroupSummary
+      },
+      row.id
+    )) })
+  ] }) }) }) });
+};
+
+export { Matrix, cellKey, selectionByRow, toggleCell };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map