@ktnpm_devops/react-component 0.15.0 → 0.17.0

package/dist/index30.js.map

@@ -1 +1 @@
-{"version":3,"file":"index30.js","sources":["../src/geo/GeoMapCard/GeoMapCard.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { CircleMarker, MapContainer, TileLayer, Tooltip } from 'react-leaflet';\nimport clsx from 'clsx';\nimport { EmptyState } from '../../primitives/EmptyState';\nimport { useThemeMode } from '../../hooks/useThemeMode';\nimport { BASEMAP_TILES, GEO_MAP } from '../../constants';\nimport type { GeoPoint, GeoRenderInfo } from '../../types/geo.types';\nimport type { GeoMapCardProps, MarkerDescriptor } from './GeoMapCard.types';\nimport { normalizePoints } from './normalizePoints';\nimport { buildCategoryColors, buildLegendItems, buildMarkerStyle, buildWeightScale } from './buildMarkerStyle';\nimport { MapViewport } from './MapViewport';\nimport { MapLegend } from './MapLegend';\nimport { PointListing } from './PointListing';\nimport { warnMissingLeafletStylesheet } from './warnMissingLeafletStylesheet';\nimport styles from './GeoMapCard.module.css';\n\n/** States what was left out, so a truncated map never passes for a complete one. */\nconst buildNotice = (info: GeoRenderInfo, maxPoints: number): string | null => {\n  const reasons: string[] = [];\n\n  if (info.skipped > 0) reasons.push(`${info.skipped} without usable coordinates`);\n  if (info.dropped > 0) reasons.push(`${info.dropped} over the ${maxPoints} marker cap`);\n\n  if (reasons.length === 0) return null;\n\n  return `Showing ${info.drawn} of ${info.total} points (${reasons.join(', ')}).`;\n};\n\n/** One line carrying everything the tooltip shows, for the screen reader too. */\nconst describePoint = (point: GeoPoint, categoryLabel: string): string =>\n  [point.label, point.category != null ? `${categoryLabel}: ${point.category}` : null, point.detail]\n    .filter((part): part is string => part != null && part !== '')\n    .join(' — ');\n\nexport const GeoMapCard = ({\n  title,\n  points,\n  selectedIds,\n  onSelectPoint,\n  categoryLabel = 'Category',\n  legendTitle = 'Legend',\n  hideLegend = false,\n  maxPoints = GEO_MAP.MAX_POINTS,\n  onRender,\n  fitBounds = true,\n  center,\n  zoom,\n  scrollWheelZoom = false,\n  basemap = 'auto',\n  tileLayer,\n  compact = false,\n  toolbar,\n  actions,\n  isLoading = false,\n  error = null,\n  onRetry,\n  emptyTitle = 'No mappable points',\n  emptyDescription = 'None of the points received carry usable coordinates.',\n  retryLabel = 'Retry',\n  loadingLabel = 'Loading map...',\n  pointListLabel = 'Map points',\n  className,\n}: GeoMapCardProps) => {\n  const theme = useThemeMode();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const { drawn, bounds, info } = useMemo(\n    () => normalizePoints(points, maxPoints),\n    [points, maxPoints],\n  );\n\n  const categoryColors = useMemo(() => buildCategoryColors(points), [points]);\n  const legendItems = useMemo(() => buildLegendItems(categoryColors), [categoryColors]);\n\n  const markers = useMemo<MarkerDescriptor[]>(() => {\n    const weightScale = buildWeightScale(points);\n    const selection = new Set(selectedIds ?? []);\n\n    return drawn.map(({ point, sourceIndex }) => {\n      const selected = selection.has(point.id);\n\n      return {\n        point,\n        sourceIndex,\n        selected,\n        style: buildMarkerStyle(point, { categoryColors, weightScale, selected, theme }),\n        description: describePoint(point, categoryLabel),\n      };\n    });\n  }, [drawn, points, selectedIds, categoryColors, theme, categoryLabel]);\n\n  const tiles = tileLayer ?? {\n    url: BASEMAP_TILES[basemap === 'auto' ? theme : basemap],\n    attribution: BASEMAP_TILES.attribution,\n  };\n\n  // Manual framing and automatic framing would fight over the viewport.\n  const shouldFitBounds = fitBounds && center == null && zoom == null;\n  const showLegend = !hideLegend && legendItems.length > 0;\n  const notice = buildNotice(info, maxPoints);\n  const hasMap = !isLoading && error == null && info.drawn > 0;\n\n  useEffect(() => {\n    onRender?.(info);\n  }, [onRender, info]);\n\n  useEffect(() => {\n    if (import.meta.env.DEV && hasMap) warnMissingLeafletStylesheet(containerRef.current);\n  }, [hasMap]);\n\n  return (\n    <div className={clsx(styles.root, compact && styles.compact, className)}>\n      <header className={styles.header}>\n        <h3 className={styles.title}>{title}</h3>\n        {actions && <div className={styles.headerActions}>{actions}</div>}\n      </header>\n\n      {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n\n      {hasMap && notice && (\n        <div className={styles.warning} role=\"status\">\n          {notice}\n        </div>\n      )}\n\n      {isLoading && <div className={styles.loading}>{loadingLabel}</div>}\n\n      {!isLoading && error != null && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              {retryLabel}\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && error == null && info.drawn === 0 && (\n        <EmptyState\n          className={styles.empty}\n          variant=\"plain\"\n          title={emptyTitle}\n          description={emptyDescription}\n        />\n      )}\n\n      {hasMap && (\n        <div\n          ref={containerRef}\n          className={styles.mapContainer}\n          role=\"figure\"\n          aria-label={`${title}: map of ${info.drawn} points`}\n        >\n          <MapContainer\n            className={styles.map}\n            center={center ?? [...GEO_MAP.DEFAULT_CENTER]}\n            zoom={zoom ?? GEO_MAP.DEFAULT_ZOOM}\n            scrollWheelZoom={scrollWheelZoom}\n          >\n            <TileLayer key={tiles.url} url={tiles.url} attribution={tiles.attribution} />\n            <MapViewport bounds={bounds} fitBounds={shouldFitBounds} />\n\n            {markers.map(({ point, sourceIndex, style, description }) => (\n              <CircleMarker\n                key={point.id}\n                center={[point.latitude, point.longitude]}\n                radius={style.radius}\n                pathOptions={style}\n                eventHandlers={\n                  onSelectPoint ? { click: () => onSelectPoint({ point, index: sourceIndex }) } : {}\n                }\n              >\n                <Tooltip>{description}</Tooltip>\n              </CircleMarker>\n            ))}\n\n            {showLegend && <MapLegend items={legendItems} title={legendTitle} />}\n          </MapContainer>\n\n          <PointListing\n            markers={markers}\n            label={pointListLabel}\n            onSelectPoint={onSelectPoint}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nGeoMapCard.displayName = 'GeoMapCard';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index30.js","sources":["../src/geo/GeoMapCard/GeoMapCard.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { CircleMarker, MapContainer, TileLayer, Tooltip } from 'react-leaflet';\nimport clsx from 'clsx';\nimport { EmptyState } from '../../primitives/EmptyState';\nimport { useThemeMode } from '../../hooks/useThemeMode';\nimport { GEO_MAP } from '../../constants';\nimport type { GeoMapCardProps, MarkerDescriptor } from './GeoMapCard.types';\nimport { normalizePoints } from './normalizePoints';\nimport {\n  buildCategoryColors,\n  buildLegendItems,\n  buildMarkerStyle,\n  buildWeightScale,\n} from './buildMarkerStyle';\nimport { MapViewport } from './MapViewport';\nimport { ViewportReporter } from './ViewportReporter';\nimport { MapStatusBars } from './MapStatusBars';\nimport { buildNotice, describePoint } from './describePoints';\nimport { MapLegend } from './MapLegend';\nimport { PointListing } from './PointListing';\nimport { warnMissingLeafletStylesheet } from './warnMissingLeafletStylesheet';\nimport { warnMissingBasemapKey } from './warnMissingBasemapKey';\nimport { resolveTiles } from './resolveTiles';\nimport styles from './GeoMapCard.module.css';\n\nexport const GeoMapCard = ({\n  title,\n  points,\n  selectedIds,\n  onSelectPoint,\n  categoryLabel = 'Category',\n  legendTitle = 'Legend',\n  hideLegend = false,\n  maxPoints = GEO_MAP.MAX_POINTS,\n  onRender,\n  fitBounds = true,\n  center,\n  zoom,\n  scrollWheelZoom = false,\n  onViewportChange,\n  isRefreshing = false,\n  refreshingLabel = 'Updating…',\n  basemap = 'auto',\n  basemapKey,\n  tileLayer,\n  compact = false,\n  toolbar,\n  actions,\n  isLoading = false,\n  error = null,\n  onRetry,\n  emptyTitle = 'No mappable points',\n  emptyDescription = 'None of the points received carry usable coordinates.',\n  retryLabel = 'Retry',\n  loadingLabel = 'Loading map...',\n  pointListLabel = 'Map points',\n  className,\n}: GeoMapCardProps) => {\n  const theme = useThemeMode();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const { drawn, bounds, info } = useMemo(\n    () => normalizePoints(points, maxPoints),\n    [points, maxPoints],\n  );\n\n  const categoryColors = useMemo(() => buildCategoryColors(points), [points]);\n  const legendItems = useMemo(() => buildLegendItems(categoryColors), [categoryColors]);\n\n  const markers = useMemo<MarkerDescriptor[]>(() => {\n    const weightScale = buildWeightScale(points);\n    const selection = new Set(selectedIds ?? []);\n\n    return drawn.map(({ point, sourceIndex }) => {\n      const selected = selection.has(point.id);\n\n      return {\n        point,\n        sourceIndex,\n        selected,\n        style: buildMarkerStyle(point, { categoryColors, weightScale, selected, theme }),\n        description: describePoint(point, categoryLabel),\n      };\n    });\n  }, [drawn, points, selectedIds, categoryColors, theme, categoryLabel]);\n\n  const tiles = resolveTiles(tileLayer, basemap, theme, basemapKey);\n\n  // Viewport mode: the view drives the points, so the map must outlive an empty\n  // area, and the points must never move the view (that would be a fetch loop).\n  const viewportMode = onViewportChange != null;\n  // Manual framing and automatic framing would fight over the viewport.\n  const shouldFitBounds = fitBounds && center == null && zoom == null && !viewportMode;\n  const showLegend = !hideLegend && legendItems.length > 0;\n  const notice = buildNotice(info, maxPoints);\n  const isBlocked = isLoading || error != null;\n  const hasMap = !isBlocked && (info.drawn > 0 || viewportMode);\n  const showEmptyState = !isBlocked && info.drawn === 0 && !viewportMode;\n\n  useEffect(() => {\n    onRender?.(info);\n  }, [onRender, info]);\n\n  useEffect(() => {\n    if (!import.meta.env.DEV || !hasMap) return;\n\n    warnMissingLeafletStylesheet(containerRef.current);\n    if (tileLayer == null && !basemapKey) warnMissingBasemapKey();\n  }, [hasMap, tileLayer, basemapKey]);\n\n  return (\n    <div className={clsx(styles.root, compact && styles.compact, className)}>\n      <header className={styles.header}>\n        <h3 className={styles.title}>{title}</h3>\n        {(isRefreshing || actions) && (\n          <div className={styles.headerActions}>\n            {isRefreshing && (\n              <span className={styles.refreshing} role=\"status\">\n                <span className={styles.refreshingDot} aria-hidden=\"true\" />\n                {refreshingLabel}\n              </span>\n            )}\n            {actions}\n          </div>\n        )}\n      </header>\n\n      {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n\n      {hasMap && (\n        <MapStatusBars notice={notice} emptyMessage={info.drawn === 0 ? emptyTitle : null} />\n      )}\n\n      {isLoading && <div className={styles.loading}>{loadingLabel}</div>}\n\n      {!isLoading && error != null && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              {retryLabel}\n            </button>\n          )}\n        </div>\n      )}\n\n      {showEmptyState && (\n        <EmptyState\n          className={styles.empty}\n          variant=\"plain\"\n          title={emptyTitle}\n          description={emptyDescription}\n        />\n      )}\n\n      {hasMap && (\n        <div\n          ref={containerRef}\n          className={styles.mapContainer}\n          role=\"figure\"\n          aria-label={`${title}: map of ${info.drawn} points`}\n          aria-busy={isRefreshing || undefined}\n        >\n          <MapContainer\n            className={styles.map}\n            center={center ?? [...GEO_MAP.DEFAULT_CENTER]}\n            zoom={zoom ?? GEO_MAP.DEFAULT_ZOOM}\n            scrollWheelZoom={scrollWheelZoom}\n          >\n            <TileLayer key={tiles.url} url={tiles.url} attribution={tiles.attribution} />\n            <MapViewport bounds={bounds} fitBounds={shouldFitBounds} />\n            {onViewportChange && <ViewportReporter onViewportChange={onViewportChange} />}\n\n            {markers.map(({ point, sourceIndex, style, description }) => (\n              <CircleMarker\n                key={point.id}\n                center={[point.latitude, point.longitude]}\n                radius={style.radius}\n                pathOptions={style}\n                eventHandlers={\n                  onSelectPoint ? { click: () => onSelectPoint({ point, index: sourceIndex }) } : {}\n                }\n              >\n                <Tooltip>{description}</Tooltip>\n              </CircleMarker>\n            ))}\n\n            {showLegend && <MapLegend items={legendItems} title={legendTitle} />}\n          </MapContainer>\n\n          <PointListing markers={markers} label={pointListLabel} onSelectPoint={onSelectPoint} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nGeoMapCard.displayName = 'GeoMapCard';\n"],"names":[],"mappings":"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"}

package/dist/index31.cjs

@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const ReactECharts = require("echarts-for-react");
 const clsx = require("./index59.cjs");
-const pivotGroupedBars = require("./index81.cjs");
-const buildGroupedBarOption = require("./index82.cjs");
-const defaultLabels = require("./index83.cjs");
-const GroupedBarChartCard_module = require("./index84.cjs");
+const pivotGroupedBars = require("./index78.cjs");
+const buildGroupedBarOption = require("./index79.cjs");
+const defaultLabels = require("./index80.cjs");
+const GroupedBarChartCard_module = require("./index81.cjs");
 const buildAriaLabel = (title, valueLabel) => valueLabel ? `${title}: grouped bar chart of ${valueLabel}` : `${title}: grouped bar chart`;
 const GroupedBarChartCard = ({
   title,

package/dist/index31.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useCallback } from "react";
 import ReactECharts from "echarts-for-react";
 import { clsx } from "./index59.js";
-import { pivotGroupedBars } from "./index81.js";
-import { buildGroupedBarOption } from "./index82.js";
-import { DEFAULT_LABELS } from "./index83.js";
-import styles from "./index84.js";
+import { pivotGroupedBars } from "./index78.js";
+import { buildGroupedBarOption } from "./index79.js";
+import { DEFAULT_LABELS } from "./index80.js";
+import styles from "./index81.js";
 const buildAriaLabel = (title, valueLabel) => valueLabel ? `${title}: grouped bar chart of ${valueLabel}` : `${title}: grouped bar chart`;
 const GroupedBarChartCard = ({
   title,

package/dist/index32.cjs

@@ -3,18 +3,34 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index59.cjs");
-const HeatmapMatrix_module = require("./index108.cjs");
+const HeatmapMatrixHeader = require("./index108.cjs");
+const getColumnRuns = require("./index109.cjs");
+const HeatmapMatrix_module = require("./index110.cjs");
 function activateOnKey(event, action) {
   if (event.key === "Enter" || event.key === " ") {
     event.preventDefault();
     action();
   }
 }
+function ColumnGroups({ runs }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("colgroup", {}),
+    runs.map((run, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "colgroup",
+      {
+        span: run.columns.length,
+        className: index > 0 ? HeatmapMatrix_module.default.groupStart : void 0
+      },
+      run.start
+    ))
+  ] });
+}
 const HeatmapMatrix = react.forwardRef(
   ({
     columns,
     rows,
     cornerLabel,
+    columnGroups,
     getCell,
     onRowHeaderClick,
     onCellClick,
@@ -22,59 +38,68 @@ const HeatmapMatrix = react.forwardRef(
     className,
     style,
     ...props
-  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: clsx.clsx(HeatmapMatrix_module.default.wrap, className),
-      style: { maxHeight, ...style },
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: HeatmapMatrix_module.default.root, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: HeatmapMatrix_module.default.corner, "aria-hidden": cornerLabel == null, children: cornerLabel }),
-          columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: HeatmapMatrix_module.default.colh, title: col.title, children: col.label }, col.key))
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row) => {
-          const rowInteractive = Boolean(onRowHeaderClick);
-          return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "th",
-              {
-                scope: "row",
-                className: clsx.clsx(HeatmapMatrix_module.default.rowh, rowInteractive && HeatmapMatrix_module.default.clickable),
-                role: rowInteractive ? "button" : void 0,
-                tabIndex: rowInteractive ? 0 : void 0,
-                onClick: rowInteractive ? () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key) : void 0,
-                onKeyDown: rowInteractive ? (event) => activateOnKey(event, () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key)) : void 0,
-                children: row.label
-              }
-            ),
-            columns.map((col) => {
-              const cell = getCell(row.key, col.key);
-              const cellInteractive = Boolean(onCellClick);
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "td",
+  }, ref) => {
+    const runs = getColumnRuns.hasColumnGroups(columns) ? getColumnRuns.getColumnRuns(columns) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx.clsx(HeatmapMatrix_module.default.wrap, className),
+        style: { maxHeight, ...style },
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: HeatmapMatrix_module.default.root, children: [
+          runs && /* @__PURE__ */ jsxRuntime.jsx(ColumnGroups, { runs }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HeatmapMatrixHeader.HeatmapMatrixHeader,
+            {
+              columns,
+              runs,
+              columnGroups,
+              cornerLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row) => {
+            const rowInteractive = Boolean(onRowHeaderClick);
+            return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "th",
                 {
-                  title: cell.title,
-                  className: clsx.clsx(
-                    HeatmapMatrix_module.default.cell,
-                    cell.state && HeatmapMatrix_module.default[cell.state],
-                    cellInteractive && HeatmapMatrix_module.default.clickable
-                  ),
-                  role: cellInteractive ? "button" : void 0,
-                  tabIndex: cellInteractive ? 0 : void 0,
-                  onClick: cellInteractive ? () => onCellClick == null ? void 0 : onCellClick(row.key, col.key) : void 0,
-                  onKeyDown: cellInteractive ? (event) => activateOnKey(event, () => onCellClick == null ? void 0 : onCellClick(row.key, col.key)) : void 0,
-                  children: cell.value
-                },
-                col.key
-              );
-            })
-          ] }, row.key);
-        }) })
-      ] })
-    }
-  )
+                  scope: "row",
+                  className: clsx.clsx(HeatmapMatrix_module.default.rowh, rowInteractive && HeatmapMatrix_module.default.clickable),
+                  role: rowInteractive ? "button" : void 0,
+                  tabIndex: rowInteractive ? 0 : void 0,
+                  onClick: rowInteractive ? () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key) : void 0,
+                  onKeyDown: rowInteractive ? (event) => activateOnKey(event, () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key)) : void 0,
+                  children: row.label
+                }
+              ),
+              columns.map((col) => {
+                const cell = getCell(row.key, col.key);
+                const cellInteractive = Boolean(onCellClick);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    title: cell.title,
+                    className: clsx.clsx(
+                      HeatmapMatrix_module.default.cell,
+                      cell.state && HeatmapMatrix_module.default[cell.state],
+                      cellInteractive && HeatmapMatrix_module.default.clickable
+                    ),
+                    role: cellInteractive ? "button" : void 0,
+                    tabIndex: cellInteractive ? 0 : void 0,
+                    onClick: cellInteractive ? () => onCellClick == null ? void 0 : onCellClick(row.key, col.key) : void 0,
+                    onKeyDown: cellInteractive ? (event) => activateOnKey(event, () => onCellClick == null ? void 0 : onCellClick(row.key, col.key)) : void 0,
+                    children: cell.value
+                  },
+                  col.key
+                );
+              })
+            ] }, row.key);
+          }) })
+        ] })
+      }
+    );
+  }
 );
 HeatmapMatrix.displayName = "HeatmapMatrix";
 exports.HeatmapMatrix = HeatmapMatrix;

package/dist/index32.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index32.cjs","sources":["../src/data/HeatmapMatrix/HeatmapMatrix.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { HeatmapMatrixProps } from './HeatmapMatrix.types';\nimport styles from './HeatmapMatrix.module.css';\n\nfunction activateOnKey(event: React.KeyboardEvent, action: () => void) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    action();\n  }\n}\n\nexport const HeatmapMatrix = forwardRef<HTMLDivElement, HeatmapMatrixProps>(\n  (\n    {\n      columns,\n      rows,\n      cornerLabel,\n      getCell,\n      onRowHeaderClick,\n      onCellClick,\n      maxHeight,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={clsx(styles.wrap, className)}\n      style={{ maxHeight, ...style }}\n      {...props}\n    >\n      <table className={styles.root}>\n        <thead>\n          <tr>\n            <th scope=\"col\" className={styles.corner} aria-hidden={cornerLabel == null}>\n              {cornerLabel}\n            </th>\n            {columns.map((col) => (\n              <th key={col.key} scope=\"col\" className={styles.colh} title={col.title}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => {\n            const rowInteractive = Boolean(onRowHeaderClick);\n            return (\n              <tr key={row.key}>\n                <th\n                  scope=\"row\"\n                  className={clsx(styles.rowh, rowInteractive && styles.clickable)}\n                  role={rowInteractive ? 'button' : undefined}\n                  tabIndex={rowInteractive ? 0 : undefined}\n                  onClick={rowInteractive ? () => onRowHeaderClick?.(row.key) : undefined}\n                  onKeyDown={\n                    rowInteractive\n                      ? (event) => activateOnKey(event, () => onRowHeaderClick?.(row.key))\n                      : undefined\n                  }\n                >\n                  {row.label}\n                </th>\n                {columns.map((col) => {\n                  const cell = getCell(row.key, col.key);\n                  const cellInteractive = Boolean(onCellClick);\n                  return (\n                    <td\n                      key={col.key}\n                      title={cell.title}\n                      className={clsx(\n                        styles.cell,\n                        cell.state && styles[cell.state],\n                        cellInteractive && styles.clickable,\n                      )}\n                      role={cellInteractive ? 'button' : undefined}\n                      tabIndex={cellInteractive ? 0 : undefined}\n                      onClick={cellInteractive ? () => onCellClick?.(row.key, col.key) : undefined}\n                      onKeyDown={\n                        cellInteractive\n                          ? (event) => activateOnKey(event, () => onCellClick?.(row.key, col.key))\n                          : undefined\n                      }\n                    >\n                      {cell.value}\n                    </td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  ),\n);\n\nHeatmapMatrix.displayName = 'HeatmapMatrix';\n"],"names":["forwardRef","jsx","clsx","styles","jsxs"],"mappings":";;;;;;AAKA,SAAS,cAAc,OAA4B,QAAoB;AACrE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,WAAA;AAAA,EACF;AACF;AAEO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,KAAAA,KAAKC,6BAAO,MAAM,SAAS;AAAA,MACtC,OAAO,EAAE,WAAW,GAAG,MAAA;AAAA,MACtB,GAAG;AAAA,MAEJ,UAAAC,2BAAAA,KAAC,SAAA,EAAM,WAAWD,qBAAAA,QAAO,MACvB,UAAA;AAAA,QAAAF,2BAAAA,IAAC,SAAA,EACC,0CAAC,MAAA,EACC,UAAA;AAAA,UAAAA,2BAAAA,IAAC,MAAA,EAAG,OAAM,OAAM,WAAWE,qBAAAA,QAAO,QAAQ,eAAa,eAAe,MACnE,UAAA,YAAA,CACH;AAAA,UACC,QAAQ,IAAI,CAAC,QACZF,2BAAAA,IAAC,MAAA,EAAiB,OAAM,OAAM,WAAWE,qBAAAA,QAAO,MAAM,OAAO,IAAI,OAC9D,cAAI,MAAA,GADE,IAAI,GAEb,CACD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,QACAF,2BAAAA,IAAC,SAAA,EACE,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,gBAAM,iBAAiB,QAAQ,gBAAgB;AAC/C,iDACG,MAAA,EACC,UAAA;AAAA,YAAAA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,WAAWC,KAAAA,KAAKC,qBAAAA,QAAO,MAAM,kBAAkBA,qBAAAA,QAAO,SAAS;AAAA,gBAC/D,MAAM,iBAAiB,WAAW;AAAA,gBAClC,UAAU,iBAAiB,IAAI;AAAA,gBAC/B,SAAS,iBAAiB,MAAM,qDAAmB,IAAI,OAAO;AAAA,gBAC9D,WACE,iBACI,CAAC,UAAU,cAAc,OAAO,MAAM,qDAAmB,IAAI,IAAI,IACjE;AAAA,gBAGL,UAAA,IAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAEN,QAAQ,IAAI,CAAC,QAAQ;AACpB,oBAAM,OAAO,QAAQ,IAAI,KAAK,IAAI,GAAG;AACrC,oBAAM,kBAAkB,QAAQ,WAAW;AAC3C,qBACEF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAO,KAAK;AAAA,kBACZ,WAAWC,KAAAA;AAAAA,oBACTC,qBAAAA,QAAO;AAAA,oBACP,KAAK,SAASA,6BAAO,KAAK,KAAK;AAAA,oBAC/B,mBAAmBA,qBAAAA,QAAO;AAAA,kBAAA;AAAA,kBAE5B,MAAM,kBAAkB,WAAW;AAAA,kBACnC,UAAU,kBAAkB,IAAI;AAAA,kBAChC,SAAS,kBAAkB,MAAM,2CAAc,IAAI,KAAK,IAAI,OAAO;AAAA,kBACnE,WACE,kBACI,CAAC,UAAU,cAAc,OAAO,MAAM,2CAAc,IAAI,KAAK,IAAI,IAAI,IACrE;AAAA,kBAGL,UAAA,KAAK;AAAA,gBAAA;AAAA,gBAhBD,IAAI;AAAA,cAAA;AAAA,YAmBf,CAAC;AAAA,UAAA,EAAA,GAvCM,IAAI,GAwCb;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index32.cjs","sources":["../src/data/HeatmapMatrix/HeatmapMatrix.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { HeatmapColumnGroupsProps, HeatmapMatrixProps } from './HeatmapMatrix.types';\nimport { HeatmapMatrixHeader } from './HeatmapMatrixHeader';\nimport { getColumnRuns, hasColumnGroups } from './getColumnRuns';\nimport styles from './HeatmapMatrix.module.css';\n\nfunction activateOnKey(event: React.KeyboardEvent, action: () => void) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    action();\n  }\n}\n\n/** One `<colgroup>` for the row headers, then one per run; the separator marks every run but the first. */\nfunction ColumnGroups({ runs }: HeatmapColumnGroupsProps) {\n  return (\n    <>\n      <colgroup />\n      {runs.map((run, index) => (\n        <colgroup\n          key={run.start}\n          span={run.columns.length}\n          className={index > 0 ? styles.groupStart : undefined}\n        />\n      ))}\n    </>\n  );\n}\n\nexport const HeatmapMatrix = forwardRef<HTMLDivElement, HeatmapMatrixProps>(\n  (\n    {\n      columns,\n      rows,\n      cornerLabel,\n      columnGroups,\n      getCell,\n      onRowHeaderClick,\n      onCellClick,\n      maxHeight,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const runs = hasColumnGroups(columns) ? getColumnRuns(columns) : undefined;\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.wrap, className)}\n        style={{ maxHeight, ...style }}\n        {...props}\n      >\n        <table className={styles.root}>\n          {runs && <ColumnGroups runs={runs} />}\n          <HeatmapMatrixHeader\n            columns={columns}\n            runs={runs}\n            columnGroups={columnGroups}\n            cornerLabel={cornerLabel}\n          />\n          <tbody>\n            {rows.map((row) => {\n              const rowInteractive = Boolean(onRowHeaderClick);\n              return (\n                <tr key={row.key}>\n                  <th\n                    scope=\"row\"\n                    className={clsx(styles.rowh, rowInteractive && styles.clickable)}\n                    role={rowInteractive ? 'button' : undefined}\n                    tabIndex={rowInteractive ? 0 : undefined}\n                    onClick={rowInteractive ? () => onRowHeaderClick?.(row.key) : undefined}\n                    onKeyDown={\n                      rowInteractive\n                        ? (event) => activateOnKey(event, () => onRowHeaderClick?.(row.key))\n                        : undefined\n                    }\n                  >\n                    {row.label}\n                  </th>\n                  {columns.map((col) => {\n                    const cell = getCell(row.key, col.key);\n                    const cellInteractive = Boolean(onCellClick);\n                    return (\n                      <td\n                        key={col.key}\n                        title={cell.title}\n                        className={clsx(\n                          styles.cell,\n                          cell.state && styles[cell.state],\n                          cellInteractive && styles.clickable,\n                        )}\n                        role={cellInteractive ? 'button' : undefined}\n                        tabIndex={cellInteractive ? 0 : undefined}\n                        onClick={\n                          cellInteractive ? () => onCellClick?.(row.key, col.key) : undefined\n                        }\n                        onKeyDown={\n                          cellInteractive\n                            ? (event) => activateOnKey(event, () => onCellClick?.(row.key, col.key))\n                            : undefined\n                        }\n                      >\n                        {cell.value}\n                      </td>\n                    );\n                  })}\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n    );\n  },\n);\n\nHeatmapMatrix.displayName = 'HeatmapMatrix';\n"],"names":["jsxs","Fragment","jsx","styles","forwardRef","hasColumnGroups","getColumnRuns","clsx","HeatmapMatrixHeader"],"mappings":";;;;;;;;AAOA,SAAS,cAAc,OAA4B,QAAoB;AACrE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,WAAA;AAAA,EACF;AACF;AAGA,SAAS,aAAa,EAAE,QAAkC;AACxD,SACEA,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,YAAA,EAAS;AAAA,IACT,KAAK,IAAI,CAAC,KAAK,UACdA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAM,IAAI,QAAQ;AAAA,QAClB,WAAW,QAAQ,IAAIC,qBAAAA,QAAO,aAAa;AAAA,MAAA;AAAA,MAFtC,IAAI;AAAA,IAAA,CAIZ;AAAA,EAAA,GACH;AAEJ;AAEO,MAAM,gBAAgBC,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAOC,cAAAA,gBAAgB,OAAO,IAAIC,cAAAA,cAAc,OAAO,IAAI;AACjE,WACEJ,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWK,KAAAA,KAAKJ,6BAAO,MAAM,SAAS;AAAA,QACtC,OAAO,EAAE,WAAW,GAAG,MAAA;AAAA,QACtB,GAAG;AAAA,QAEJ,UAAAH,2BAAAA,KAAC,SAAA,EAAM,WAAWG,qBAAAA,QAAO,MACtB,UAAA;AAAA,UAAA,QAAQD,2BAAAA,IAAC,gBAAa,KAAA,CAAY;AAAA,UACnCA,2BAAAA;AAAAA,YAACM,oBAAAA;AAAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFN,2BAAAA,IAAC,SAAA,EACE,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,kBAAM,iBAAiB,QAAQ,gBAAgB;AAC/C,mDACG,MAAA,EACC,UAAA;AAAA,cAAAA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,WAAWK,KAAAA,KAAKJ,qBAAAA,QAAO,MAAM,kBAAkBA,qBAAAA,QAAO,SAAS;AAAA,kBAC/D,MAAM,iBAAiB,WAAW;AAAA,kBAClC,UAAU,iBAAiB,IAAI;AAAA,kBAC/B,SAAS,iBAAiB,MAAM,qDAAmB,IAAI,OAAO;AAAA,kBAC9D,WACE,iBACI,CAAC,UAAU,cAAc,OAAO,MAAM,qDAAmB,IAAI,IAAI,IACjE;AAAA,kBAGL,UAAA,IAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,QAAQ,IAAI,CAAC,QAAQ;AACpB,sBAAM,OAAO,QAAQ,IAAI,KAAK,IAAI,GAAG;AACrC,sBAAM,kBAAkB,QAAQ,WAAW;AAC3C,uBACED,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,OAAO,KAAK;AAAA,oBACZ,WAAWK,KAAAA;AAAAA,sBACTJ,qBAAAA,QAAO;AAAA,sBACP,KAAK,SAASA,6BAAO,KAAK,KAAK;AAAA,sBAC/B,mBAAmBA,qBAAAA,QAAO;AAAA,oBAAA;AAAA,oBAE5B,MAAM,kBAAkB,WAAW;AAAA,oBACnC,UAAU,kBAAkB,IAAI;AAAA,oBAChC,SACE,kBAAkB,MAAM,2CAAc,IAAI,KAAK,IAAI,OAAO;AAAA,oBAE5D,WACE,kBACI,CAAC,UAAU,cAAc,OAAO,MAAM,2CAAc,IAAI,KAAK,IAAI,IAAI,IACrE;AAAA,oBAGL,UAAA,KAAK;AAAA,kBAAA;AAAA,kBAlBD,IAAI;AAAA,gBAAA;AAAA,cAqBf,CAAC;AAAA,YAAA,EAAA,GAzCM,IAAI,GA0Cb;AAAA,UAEJ,CAAC,EAAA,CACH;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index32.js

@@ -1,18 +1,34 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { clsx } from "./index59.js";
-import styles from "./index108.js";
+import { HeatmapMatrixHeader } from "./index108.js";
+import { hasColumnGroups, getColumnRuns } from "./index109.js";
+import styles from "./index110.js";
 function activateOnKey(event, action) {
   if (event.key === "Enter" || event.key === " ") {
     event.preventDefault();
     action();
   }
 }
+function ColumnGroups({ runs }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("colgroup", {}),
+    runs.map((run, index) => /* @__PURE__ */ jsx(
+      "colgroup",
+      {
+        span: run.columns.length,
+        className: index > 0 ? styles.groupStart : void 0
+      },
+      run.start
+    ))
+  ] });
+}
 const HeatmapMatrix = forwardRef(
   ({
     columns,
     rows,
     cornerLabel,
+    columnGroups,
     getCell,
     onRowHeaderClick,
     onCellClick,
@@ -20,59 +36,68 @@ const HeatmapMatrix = forwardRef(
     className,
     style,
     ...props
-  }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: clsx(styles.wrap, className),
-      style: { maxHeight, ...style },
-      ...props,
-      children: /* @__PURE__ */ jsxs("table", { className: styles.root, children: [
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { scope: "col", className: styles.corner, "aria-hidden": cornerLabel == null, children: cornerLabel }),
-          columns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", className: styles.colh, title: col.title, children: col.label }, col.key))
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
-          const rowInteractive = Boolean(onRowHeaderClick);
-          return /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx(
-              "th",
-              {
-                scope: "row",
-                className: clsx(styles.rowh, rowInteractive && styles.clickable),
-                role: rowInteractive ? "button" : void 0,
-                tabIndex: rowInteractive ? 0 : void 0,
-                onClick: rowInteractive ? () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key) : void 0,
-                onKeyDown: rowInteractive ? (event) => activateOnKey(event, () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key)) : void 0,
-                children: row.label
-              }
-            ),
-            columns.map((col) => {
-              const cell = getCell(row.key, col.key);
-              const cellInteractive = Boolean(onCellClick);
-              return /* @__PURE__ */ jsx(
-                "td",
+  }, ref) => {
+    const runs = hasColumnGroups(columns) ? getColumnRuns(columns) : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx(styles.wrap, className),
+        style: { maxHeight, ...style },
+        ...props,
+        children: /* @__PURE__ */ jsxs("table", { className: styles.root, children: [
+          runs && /* @__PURE__ */ jsx(ColumnGroups, { runs }),
+          /* @__PURE__ */ jsx(
+            HeatmapMatrixHeader,
+            {
+              columns,
+              runs,
+              columnGroups,
+              cornerLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => {
+            const rowInteractive = Boolean(onRowHeaderClick);
+            return /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx(
+                "th",
                 {
-                  title: cell.title,
-                  className: clsx(
-                    styles.cell,
-                    cell.state && styles[cell.state],
-                    cellInteractive && styles.clickable
-                  ),
-                  role: cellInteractive ? "button" : void 0,
-                  tabIndex: cellInteractive ? 0 : void 0,
-                  onClick: cellInteractive ? () => onCellClick == null ? void 0 : onCellClick(row.key, col.key) : void 0,
-                  onKeyDown: cellInteractive ? (event) => activateOnKey(event, () => onCellClick == null ? void 0 : onCellClick(row.key, col.key)) : void 0,
-                  children: cell.value
-                },
-                col.key
-              );
-            })
-          ] }, row.key);
-        }) })
-      ] })
-    }
-  )
+                  scope: "row",
+                  className: clsx(styles.rowh, rowInteractive && styles.clickable),
+                  role: rowInteractive ? "button" : void 0,
+                  tabIndex: rowInteractive ? 0 : void 0,
+                  onClick: rowInteractive ? () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key) : void 0,
+                  onKeyDown: rowInteractive ? (event) => activateOnKey(event, () => onRowHeaderClick == null ? void 0 : onRowHeaderClick(row.key)) : void 0,
+                  children: row.label
+                }
+              ),
+              columns.map((col) => {
+                const cell = getCell(row.key, col.key);
+                const cellInteractive = Boolean(onCellClick);
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    title: cell.title,
+                    className: clsx(
+                      styles.cell,
+                      cell.state && styles[cell.state],
+                      cellInteractive && styles.clickable
+                    ),
+                    role: cellInteractive ? "button" : void 0,
+                    tabIndex: cellInteractive ? 0 : void 0,
+                    onClick: cellInteractive ? () => onCellClick == null ? void 0 : onCellClick(row.key, col.key) : void 0,
+                    onKeyDown: cellInteractive ? (event) => activateOnKey(event, () => onCellClick == null ? void 0 : onCellClick(row.key, col.key)) : void 0,
+                    children: cell.value
+                  },
+                  col.key
+                );
+              })
+            ] }, row.key);
+          }) })
+        ] })
+      }
+    );
+  }
 );
 HeatmapMatrix.displayName = "HeatmapMatrix";
 export {

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/data/HeatmapMatrix/HeatmapMatrix.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { HeatmapMatrixProps } from './HeatmapMatrix.types';\nimport styles from './HeatmapMatrix.module.css';\n\nfunction activateOnKey(event: React.KeyboardEvent, action: () => void) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    action();\n  }\n}\n\nexport const HeatmapMatrix = forwardRef<HTMLDivElement, HeatmapMatrixProps>(\n  (\n    {\n      columns,\n      rows,\n      cornerLabel,\n      getCell,\n      onRowHeaderClick,\n      onCellClick,\n      maxHeight,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={clsx(styles.wrap, className)}\n      style={{ maxHeight, ...style }}\n      {...props}\n    >\n      <table className={styles.root}>\n        <thead>\n          <tr>\n            <th scope=\"col\" className={styles.corner} aria-hidden={cornerLabel == null}>\n              {cornerLabel}\n            </th>\n            {columns.map((col) => (\n              <th key={col.key} scope=\"col\" className={styles.colh} title={col.title}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => {\n            const rowInteractive = Boolean(onRowHeaderClick);\n            return (\n              <tr key={row.key}>\n                <th\n                  scope=\"row\"\n                  className={clsx(styles.rowh, rowInteractive && styles.clickable)}\n                  role={rowInteractive ? 'button' : undefined}\n                  tabIndex={rowInteractive ? 0 : undefined}\n                  onClick={rowInteractive ? () => onRowHeaderClick?.(row.key) : undefined}\n                  onKeyDown={\n                    rowInteractive\n                      ? (event) => activateOnKey(event, () => onRowHeaderClick?.(row.key))\n                      : undefined\n                  }\n                >\n                  {row.label}\n                </th>\n                {columns.map((col) => {\n                  const cell = getCell(row.key, col.key);\n                  const cellInteractive = Boolean(onCellClick);\n                  return (\n                    <td\n                      key={col.key}\n                      title={cell.title}\n                      className={clsx(\n                        styles.cell,\n                        cell.state && styles[cell.state],\n                        cellInteractive && styles.clickable,\n                      )}\n                      role={cellInteractive ? 'button' : undefined}\n                      tabIndex={cellInteractive ? 0 : undefined}\n                      onClick={cellInteractive ? () => onCellClick?.(row.key, col.key) : undefined}\n                      onKeyDown={\n                        cellInteractive\n                          ? (event) => activateOnKey(event, () => onCellClick?.(row.key, col.key))\n                          : undefined\n                      }\n                    >\n                      {cell.value}\n                    </td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  ),\n);\n\nHeatmapMatrix.displayName = 'HeatmapMatrix';\n"],"names":[],"mappings":";;;;AAKA,SAAS,cAAc,OAA4B,QAAoB;AACrE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,WAAA;AAAA,EACF;AACF;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,MACtC,OAAO,EAAE,WAAW,GAAG,MAAA;AAAA,MACtB,GAAG;AAAA,MAEJ,UAAA,qBAAC,SAAA,EAAM,WAAW,OAAO,MACvB,UAAA;AAAA,QAAA,oBAAC,SAAA,EACC,+BAAC,MAAA,EACC,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAG,OAAM,OAAM,WAAW,OAAO,QAAQ,eAAa,eAAe,MACnE,UAAA,YAAA,CACH;AAAA,UACC,QAAQ,IAAI,CAAC,QACZ,oBAAC,MAAA,EAAiB,OAAM,OAAM,WAAW,OAAO,MAAM,OAAO,IAAI,OAC9D,cAAI,MAAA,GADE,IAAI,GAEb,CACD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,QACA,oBAAC,SAAA,EACE,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,gBAAM,iBAAiB,QAAQ,gBAAgB;AAC/C,sCACG,MAAA,EACC,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,WAAW,KAAK,OAAO,MAAM,kBAAkB,OAAO,SAAS;AAAA,gBAC/D,MAAM,iBAAiB,WAAW;AAAA,gBAClC,UAAU,iBAAiB,IAAI;AAAA,gBAC/B,SAAS,iBAAiB,MAAM,qDAAmB,IAAI,OAAO;AAAA,gBAC9D,WACE,iBACI,CAAC,UAAU,cAAc,OAAO,MAAM,qDAAmB,IAAI,IAAI,IACjE;AAAA,gBAGL,UAAA,IAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YAEN,QAAQ,IAAI,CAAC,QAAQ;AACpB,oBAAM,OAAO,QAAQ,IAAI,KAAK,IAAI,GAAG;AACrC,oBAAM,kBAAkB,QAAQ,WAAW;AAC3C,qBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OAAO,KAAK;AAAA,kBACZ,WAAW;AAAA,oBACT,OAAO;AAAA,oBACP,KAAK,SAAS,OAAO,KAAK,KAAK;AAAA,oBAC/B,mBAAmB,OAAO;AAAA,kBAAA;AAAA,kBAE5B,MAAM,kBAAkB,WAAW;AAAA,kBACnC,UAAU,kBAAkB,IAAI;AAAA,kBAChC,SAAS,kBAAkB,MAAM,2CAAc,IAAI,KAAK,IAAI,OAAO;AAAA,kBACnE,WACE,kBACI,CAAC,UAAU,cAAc,OAAO,MAAM,2CAAc,IAAI,KAAK,IAAI,IAAI,IACrE;AAAA,kBAGL,UAAA,KAAK;AAAA,gBAAA;AAAA,gBAhBD,IAAI;AAAA,cAAA;AAAA,YAmBf,CAAC;AAAA,UAAA,EAAA,GAvCM,IAAI,GAwCb;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"index32.js","sources":["../src/data/HeatmapMatrix/HeatmapMatrix.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { HeatmapColumnGroupsProps, HeatmapMatrixProps } from './HeatmapMatrix.types';\nimport { HeatmapMatrixHeader } from './HeatmapMatrixHeader';\nimport { getColumnRuns, hasColumnGroups } from './getColumnRuns';\nimport styles from './HeatmapMatrix.module.css';\n\nfunction activateOnKey(event: React.KeyboardEvent, action: () => void) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    action();\n  }\n}\n\n/** One `<colgroup>` for the row headers, then one per run; the separator marks every run but the first. */\nfunction ColumnGroups({ runs }: HeatmapColumnGroupsProps) {\n  return (\n    <>\n      <colgroup />\n      {runs.map((run, index) => (\n        <colgroup\n          key={run.start}\n          span={run.columns.length}\n          className={index > 0 ? styles.groupStart : undefined}\n        />\n      ))}\n    </>\n  );\n}\n\nexport const HeatmapMatrix = forwardRef<HTMLDivElement, HeatmapMatrixProps>(\n  (\n    {\n      columns,\n      rows,\n      cornerLabel,\n      columnGroups,\n      getCell,\n      onRowHeaderClick,\n      onCellClick,\n      maxHeight,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const runs = hasColumnGroups(columns) ? getColumnRuns(columns) : undefined;\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.wrap, className)}\n        style={{ maxHeight, ...style }}\n        {...props}\n      >\n        <table className={styles.root}>\n          {runs && <ColumnGroups runs={runs} />}\n          <HeatmapMatrixHeader\n            columns={columns}\n            runs={runs}\n            columnGroups={columnGroups}\n            cornerLabel={cornerLabel}\n          />\n          <tbody>\n            {rows.map((row) => {\n              const rowInteractive = Boolean(onRowHeaderClick);\n              return (\n                <tr key={row.key}>\n                  <th\n                    scope=\"row\"\n                    className={clsx(styles.rowh, rowInteractive && styles.clickable)}\n                    role={rowInteractive ? 'button' : undefined}\n                    tabIndex={rowInteractive ? 0 : undefined}\n                    onClick={rowInteractive ? () => onRowHeaderClick?.(row.key) : undefined}\n                    onKeyDown={\n                      rowInteractive\n                        ? (event) => activateOnKey(event, () => onRowHeaderClick?.(row.key))\n                        : undefined\n                    }\n                  >\n                    {row.label}\n                  </th>\n                  {columns.map((col) => {\n                    const cell = getCell(row.key, col.key);\n                    const cellInteractive = Boolean(onCellClick);\n                    return (\n                      <td\n                        key={col.key}\n                        title={cell.title}\n                        className={clsx(\n                          styles.cell,\n                          cell.state && styles[cell.state],\n                          cellInteractive && styles.clickable,\n                        )}\n                        role={cellInteractive ? 'button' : undefined}\n                        tabIndex={cellInteractive ? 0 : undefined}\n                        onClick={\n                          cellInteractive ? () => onCellClick?.(row.key, col.key) : undefined\n                        }\n                        onKeyDown={\n                          cellInteractive\n                            ? (event) => activateOnKey(event, () => onCellClick?.(row.key, col.key))\n                            : undefined\n                        }\n                      >\n                        {cell.value}\n                      </td>\n                    );\n                  })}\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n    );\n  },\n);\n\nHeatmapMatrix.displayName = 'HeatmapMatrix';\n"],"names":[],"mappings":";;;;;;AAOA,SAAS,cAAc,OAA4B,QAAoB;AACrE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,eAAA;AACN,WAAA;AAAA,EACF;AACF;AAGA,SAAS,aAAa,EAAE,QAAkC;AACxD,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAS;AAAA,IACT,KAAK,IAAI,CAAC,KAAK,UACd;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAM,IAAI,QAAQ;AAAA,QAClB,WAAW,QAAQ,IAAI,OAAO,aAAa;AAAA,MAAA;AAAA,MAFtC,IAAI;AAAA,IAAA,CAIZ;AAAA,EAAA,GACH;AAEJ;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,OAAO,gBAAgB,OAAO,IAAI,cAAc,OAAO,IAAI;AACjE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC,OAAO,EAAE,WAAW,GAAG,MAAA;AAAA,QACtB,GAAG;AAAA,QAEJ,UAAA,qBAAC,SAAA,EAAM,WAAW,OAAO,MACtB,UAAA;AAAA,UAAA,QAAQ,oBAAC,gBAAa,KAAA,CAAY;AAAA,UACnC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,oBAAC,SAAA,EACE,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,kBAAM,iBAAiB,QAAQ,gBAAgB;AAC/C,wCACG,MAAA,EACC,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,WAAW,KAAK,OAAO,MAAM,kBAAkB,OAAO,SAAS;AAAA,kBAC/D,MAAM,iBAAiB,WAAW;AAAA,kBAClC,UAAU,iBAAiB,IAAI;AAAA,kBAC/B,SAAS,iBAAiB,MAAM,qDAAmB,IAAI,OAAO;AAAA,kBAC9D,WACE,iBACI,CAAC,UAAU,cAAc,OAAO,MAAM,qDAAmB,IAAI,IAAI,IACjE;AAAA,kBAGL,UAAA,IAAI;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,QAAQ,IAAI,CAAC,QAAQ;AACpB,sBAAM,OAAO,QAAQ,IAAI,KAAK,IAAI,GAAG;AACrC,sBAAM,kBAAkB,QAAQ,WAAW;AAC3C,uBACE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,OAAO,KAAK;AAAA,oBACZ,WAAW;AAAA,sBACT,OAAO;AAAA,sBACP,KAAK,SAAS,OAAO,KAAK,KAAK;AAAA,sBAC/B,mBAAmB,OAAO;AAAA,oBAAA;AAAA,oBAE5B,MAAM,kBAAkB,WAAW;AAAA,oBACnC,UAAU,kBAAkB,IAAI;AAAA,oBAChC,SACE,kBAAkB,MAAM,2CAAc,IAAI,KAAK,IAAI,OAAO;AAAA,oBAE5D,WACE,kBACI,CAAC,UAAU,cAAc,OAAO,MAAM,2CAAc,IAAI,KAAK,IAAI,IAAI,IACrE;AAAA,oBAGL,UAAA,KAAK;AAAA,kBAAA;AAAA,kBAlBD,IAAI;AAAA,gBAAA;AAAA,cAqBf,CAAC;AAAA,YAAA,EAAA,GAzCM,IAAI,GA0Cb;AAAA,UAEJ,CAAC,EAAA,CACH;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}

package/dist/index33.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index59.cjs");
-const Input_module = require("./index112.cjs");
+const Input_module = require("./index93.cjs");
 const Input = react.forwardRef(
   ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type, className: clsx.clsx(Input_module.default.root, className), ...props })
 );

package/dist/index33.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { clsx } from "./index59.js";
-import styles from "./index112.js";
+import styles from "./index93.js";
 const Input = forwardRef(
   ({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx("input", { ref, type, className: clsx(styles.root, className), ...props })
 );

package/dist/index34.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index59.cjs");
-const constants = require("./index65.cjs");
-const LiveExplorerTable_module = require("./index93.cjs");
+const constants = require("./index64.cjs");
+const LiveExplorerTable_module = require("./index111.cjs");
 const SKELETON_ROWS = 5;
 const FULL_PERCENT = 100;
 const LiveExplorerTable = ({

package/dist/index34.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect, useCallback } from "react";
 import { clsx } from "./index59.js";
-import { MIN_COLUMN_WIDTH } from "./index65.js";
-import styles from "./index93.js";
+import { MIN_COLUMN_WIDTH } from "./index64.js";
+import styles from "./index111.js";
 const SKELETON_ROWS = 5;
 const FULL_PERCENT = 100;
 const LiveExplorerTable = ({

package/dist/index35.cjs

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const lucideReact = require("lucide-react");
 const clsx = require("./index59.cjs");
-const constants = require("./index65.cjs");
-const Loading_module = require("./index114.cjs");
+const constants = require("./index64.cjs");
+const Loading_module = require("./index115.cjs");
 const Modal = require("./index37.cjs");
 const noop = () => {
 };

package/dist/index35.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useEffect, useImperativeHandle } from "react";
 import { Check } from "lucide-react";
 import { clsx } from "./index59.js";
-import { ICON_SIZE } from "./index65.js";
-import styles from "./index114.js";
+import { ICON_SIZE } from "./index64.js";
+import styles from "./index115.js";
 import { Modal } from "./index37.js";
 const noop = () => {
 };

package/dist/index36.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index59.cjs");
-const markdown = require("./index62.cjs");
-const MarkdownContent_module = require("./index63.cjs");
+const markdown = require("./index120.cjs");
+const MarkdownContent_module = require("./index121.cjs");
 const MarkdownContent = react.forwardRef(
   ({ markdown: markdown$1, className, ...props }, ref) => {
     const html = react.useMemo(() => markdown.parseMarkdown(markdown$1), [markdown$1]);

package/dist/index36.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { clsx } from "./index59.js";
-import { parseMarkdown } from "./index62.js";
-import styles from "./index63.js";
+import { parseMarkdown } from "./index120.js";
+import styles from "./index121.js";
 const MarkdownContent = forwardRef(
   ({ markdown, className, ...props }, ref) => {
     const html = useMemo(() => parseMarkdown(markdown), [markdown]);

package/dist/index37.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const reactDom = require("react-dom");
 const clsx = require("./index59.cjs");
 const useEscapeKey = require("./index5.cjs");
-const Modal_module = require("./index111.cjs");
+const Modal_module = require("./index96.cjs");
 const Modal = ({
   open,
   title,

package/dist/index37.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { clsx } from "./index59.js";
 import { useEscapeKey } from "./index5.js";
-import styles from "./index111.js";
+import styles from "./index96.js";
 const Modal = ({
   open,
   title,

package/dist/index38.cjs

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const clsx = require("./index59.cjs");
 const useClickOutside = require("./index4.cjs");
-const constants = require("./index65.cjs");
-const MultiSelectDropdown_module = require("./index120.cjs");
+const constants = require("./index64.cjs");
+const MultiSelectDropdown_module = require("./index125.cjs");
 const arraysMatch = (a, b) => {
   if (a.length !== b.length) return false;
   const set = new Set(b);

package/dist/index38.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
 import { clsx } from "./index59.js";
 import { useClickOutside } from "./index4.js";
-import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index65.js";
-import styles from "./index120.js";
+import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index64.js";
+import styles from "./index125.js";
 const arraysMatch = (a, b) => {
   if (a.length !== b.length) return false;
   const set = new Set(b);