@valu/block-components 0.2.0 → 0.2.1

package/dist/index.js

@@ -2233,6 +2233,22 @@ var SummaryCell = styled.td`
 	color: ${tokens2.gray600};
 	font-variant-numeric: tabular-nums;
 `;
+var FillerCell = styled.td`
+	width: 100%;
+	padding: 0;
+`;
+var FillerHeaderCell = styled.th`
+	width: 100%;
+	padding: 0;
+
+	${(p) => p.$sticky && css`
+			position: sticky;
+			top: 0;
+			z-index: ${tokens2.zHeader};
+			background: ${tokens2.bg};
+			box-shadow: ${tokens2.shadowStickyTop};
+		`};
+`;
 var CellControlWrap = styled.div`
 	display: inline-flex;
 	align-items: center;
@@ -2301,7 +2317,8 @@ var MatrixHeader = ({
           children: renderHeader ? renderHeader(col) : col.label
         },
         col.id
-      ))
+      )),
+      /* @__PURE__ */ jsx(FillerHeaderCell, { "aria-hidden": true, $sticky: stickyHeader })
     ] }) });
   }
   const TOP_ROW_HEIGHT = "36px";
@@ -2358,7 +2375,8 @@ var MatrixHeader = ({
           },
           group.id
         );
-      })
+      }),
+      /* @__PURE__ */ jsx(FillerHeaderCell, { "aria-hidden": true, rowSpan: 2, $sticky: stickyHeader })
     ] }),
     /* @__PURE__ */ jsx("tr", { children: groups.map((group) => {
       const open = isExpanded(group, expandedGroups);
@@ -2570,7 +2588,8 @@ var MatrixRowView = ({
         },
         `${group.id}::${col.id}`
       ));
-    })
+    }),
+    /* @__PURE__ */ jsx(FillerCell, { "aria-hidden": true })
   ] });
 };
 var EmotionCacheProvider2 = ({ children }) => {
@@ -2653,6 +2672,7 @@ var Matrix = (props) => {
     renderHeader,
     stickyHeader = true,
     stickyFirstColumn = true,
+    rowHeaderWidth = 220,
     maxHeight = DEFAULT_MAX_HEIGHT,
     caption,
     labels,
@@ -2672,9 +2692,16 @@ var Matrix = (props) => {
     onChange: onExpandedChange
   });
   const maxHeightCss = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
-  const masterLeftOffset = "220px";
+  const cssLength = (v) => typeof v === "number" ? `${v}px` : v;
+  const rowHeaderWidthCss = cssLength(rowHeaderWidth);
+  const masterWidthCss = master ? cssLength(master.width ?? 96) : "0";
+  const masterLeftOffset = rowHeaderWidthCss;
   return /* @__PURE__ */ jsx(EmotionCacheProvider2, { children: /* @__PURE__ */ jsx(Root2, { id: rootId, className, children: /* @__PURE__ */ jsx(Viewport, { $maxHeight: maxHeightCss, children: /* @__PURE__ */ jsxs(Table, { children: [
     caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
+    /* @__PURE__ */ jsxs("colgroup", { children: [
+      /* @__PURE__ */ jsx("col", { style: { width: rowHeaderWidthCss } }),
+      master && /* @__PURE__ */ jsx("col", { style: { width: masterWidthCss } })
+    ] }),
     /* @__PURE__ */ jsx(
       MatrixHeader,
       {