@galaxy-io/dls 1.4.11 → 1.4.13

package/dist/charts/DashboardProvider.js

@@ -2,31 +2,7 @@ import { createContext, useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/charts/DashboardProvider.tsx
 var DashboardContext = createContext(null);
-/**
-* Shares the hovered category between the cartesian charts inside it.
-*
-* Hovering a category in one chart shows the same category emphasized in every
-* sibling — matched by raw category label, so charts whose category sets only
-* partially overlap simply show nothing for the labels they lack. The tooltip
-* stays local to the chart under the pointer; siblings get the quiet emphasis
-* only (LineChart its cursor line and dots, BarChart its category muting).
-*
-* Scope, deliberately narrow:
-* - Only the category axis syncs. Legend (series) hover stays local.
-* - PieChart never participates — it has no category axis.
-* - There is no per-chart opt-out prop. The opt-out is rendering the chart
-*   outside the provider, and nesting a second provider isolates a subset —
-*   charts sync with their nearest ancestor.
-*
-* Renders no DOM and holds no layout opinion — unlike `OverlayProvider` it is
-* not a page-root singleton, and several can coexist on a page.
-*
-* Plain context state is the right transport here: entries change at category
-* granularity (once per hit band crossed, not per mousemove), so a sweep
-* across a chart re-renders the group a handful of times. No subscription or
-* selector machinery is warranted.
-*/
-var DashboardProvider = ({ children }) => {
+var DashboardProvider = ({ sharedTooltip = false, children }) => {
 	const [activeEntry, setActiveEntry] = useState(null);
 	const setActive = useCallback((entry) => {
 		setActiveEntry((prev) => prev !== null && prev.sourceId === entry.sourceId && prev.categoryKey === entry.categoryKey ? prev : entry);
@@ -37,11 +13,13 @@ var DashboardProvider = ({ children }) => {
 	const contextValue = useMemo(() => ({
 		activeEntry,
 		setActive,
-		clearActive
+		clearActive,
+		sharedTooltip
 	}), [
 		activeEntry,
 		setActive,
-		clearActive
+		clearActive,
+		sharedTooltip
 	]);
 	return /* @__PURE__ */ jsx(DashboardContext.Provider, {
 		value: contextValue,

package/dist/charts/LineChart.js

@@ -69,7 +69,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
 		categoryKeys: geometry.categories,
-		disabled: noTooltip || isLoading || isEmpty,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];

package/dist/charts/PieChart.js

@@ -76,7 +76,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty,
+		isDisabled: noTooltip || isLoading || isEmpty,
 		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {

package/dist/charts/constants.d.ts

@@ -181,6 +181,14 @@ export declare const CHART_TRANSITION_MS = 100;
  */
 export declare const CHART_MARK_OPACITY_ACTIVE = 1;
 export declare const CHART_MARK_OPACITY_MUTED = 0.1;
+/**
+ * The whisper tier, for `ChartMarkState.DIMMED`.
+ *
+ * Deliberately far gentler than MUTED: it is used where another affordance —
+ * BarChart's cursor band — already marks the hovered category, so the
+ * off-category marks only need to step back, not disappear.
+ */
+export declare const CHART_MARK_OPACITY_DIMMED = 0.4;
 /** Distance in px between the tooltip and its anchor. */
 export declare const CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
@@ -190,15 +198,17 @@ export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 export declare const CHART_LEGEND_SIDE_GAP = 16;
 /**
- * Gap in px between entries in a horizontal legend.
+ * Spacing in px between entries in a horizontal legend.
  *
- * Also the number the fit computation adds between measured entries, so the
- * CSS and the arithmetic cannot disagree — which is what makes the collapse
- * exact rather than "usually right".
+ * Applied as each entry's *trailing padding*, not a flex gap on the row: a gap
+ * is dead space between hover targets, and sweeping across it drops the series
+ * isolation between every pair of entries. Because the padding lives inside
+ * the entries, measured entry sizes already include the spacing and the fit
+ * computation needs no separate gap term.
  */
 export declare const CHART_LEGEND_COLUMN_GAP = 16;
-/** Gap in px between entries in a vertical legend. Same contract as
- * {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+/** Spacing in px between entries in a vertical legend. Same contract as
+ * {@link CHART_LEGEND_COLUMN_GAP}: trailing padding on the entry, no flex gap. */
 export declare const CHART_LEGEND_VERTICAL_GAP = 8;
 /**
  * Ceiling on the collapsed-legend popover's height, in px.

package/dist/charts/constants.js

@@ -191,6 +191,14 @@ var CHART_TRANSITION_MS = 100;
 */
 var CHART_MARK_OPACITY_ACTIVE = 1;
 var CHART_MARK_OPACITY_MUTED = .1;
+/**
+* The whisper tier, for `ChartMarkState.DIMMED`.
+*
+* Deliberately far gentler than MUTED: it is used where another affordance —
+* BarChart's cursor band — already marks the hovered category, so the
+* off-category marks only need to step back, not disappear.
+*/
+var CHART_MARK_OPACITY_DIMMED = .4;
 /** Distance in px between the tooltip and its anchor. */
 var CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
@@ -200,15 +208,17 @@ var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = 16;
 /**
-* Gap in px between entries in a horizontal legend.
+* Spacing in px between entries in a horizontal legend.
 *
-* Also the number the fit computation adds between measured entries, so the
-* CSS and the arithmetic cannot disagree — which is what makes the collapse
-* exact rather than "usually right".
+* Applied as each entry's *trailing padding*, not a flex gap on the row: a gap
+* is dead space between hover targets, and sweeping across it drops the series
+* isolation between every pair of entries. Because the padding lives inside
+* the entries, measured entry sizes already include the spacing and the fit
+* computation needs no separate gap term.
 */
 var CHART_LEGEND_COLUMN_GAP = 16;
-/** Gap in px between entries in a vertical legend. Same contract as
-* {@link CHART_LEGEND_COLUMN_GAP}: shared by the CSS and the fit arithmetic. */
+/** Spacing in px between entries in a vertical legend. Same contract as
+* {@link CHART_LEGEND_COLUMN_GAP}: trailing padding on the entry, no flex gap. */
 var CHART_LEGEND_VERTICAL_GAP = 8;
 /**
 * Ceiling on the collapsed-legend popover's height, in px.
@@ -266,4 +276,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/types.d.ts

@@ -153,8 +153,16 @@ export declare enum ChartCategoryLabelMode {
 export declare enum ChartMarkState {
     /** Full strength — the default, and the hovered category. */
     ACTIVE = "active",
-    /** Softened, for categories other than the hovered one. */
-    MUTED = "muted"
+    /** Softened, for marks outside the engaged series or category. */
+    MUTED = "muted",
+    /**
+     * Barely softened — a whisper of {@link MUTED}.
+     *
+     * Used where another affordance already carries the emphasis and strong
+     * muting would be a second, louder voice: BarChart's category axis dims
+     * like this because the cursor band is the highlight.
+     */
+    DIMMED = "dimmed"
 }
 /** Which pair of a rectangle's corners carries the radius. */
 export declare enum BarCorners {
@@ -314,7 +322,14 @@ export interface ChartPlotTooltipModel {
     anchorX: number;
     anchorY: number;
 }
-/** Render prop for replacing the tooltip body. Positioning stays with the chart. */
+/**
+ * Render prop for replacing the tooltip body. Positioning stays with the chart.
+ *
+ * Never called with empty `rows` — with a custom renderer installed, a
+ * hovered category with no data opens no tooltip at all (the built-in body
+ * is the one that knows how to say "No data") — so `rows[0]`-style
+ * assumptions are safe here.
+ */
 export type ChartTooltipRenderer = (model: ChartTooltipModel) => ReactNode;
 /** Which shape a category's hit target is drawn as. */
 export declare enum ChartTargetShape {

package/dist/charts/types.js

@@ -115,8 +115,16 @@ var ChartCategoryLabelMode = /* @__PURE__ */ function(ChartCategoryLabelMode) {
 var ChartMarkState = /* @__PURE__ */ function(ChartMarkState) {
 	/** Full strength — the default, and the hovered category. */
 	ChartMarkState["ACTIVE"] = "active";
-	/** Softened, for categories other than the hovered one. */
+	/** Softened, for marks outside the engaged series or category. */
 	ChartMarkState["MUTED"] = "muted";
+	/**
+	* Barely softened — a whisper of {@link MUTED}.
+	*
+	* Used where another affordance already carries the emphasis and strong
+	* muting would be a second, louder voice: BarChart's category axis dims
+	* like this because the cursor band is the highlight.
+	*/
+	ChartMarkState["DIMMED"] = "dimmed";
 	return ChartMarkState;
 }({});
 /** Which pair of a rectangle's corners carries the radius. */

package/dist/charts/useChartInteraction.d.ts

@@ -11,11 +11,12 @@ import { ChartMarkState } from "./types";
  *
  * Plus one read-only source: inside a `DashboardProvider`, a chart that
  * supplies {@link UseChartInteractionOptions.categoryKeys} follows the category
- * hovered in a sibling chart, matched by raw label. Following emphasizes — it
- * never opens the tooltip, which is what {@link ChartInteraction.hasLocalHover}
- * distinguishes. The series axis deliberately does not sync: series keys are
- * chart-local vocabulary, and isolating "Delivered" in a chart that happens to
- * share the name would correlate nothing.
+ * hovered in a sibling chart, matched by raw label. Following emphasizes; it
+ * opens the tooltip only when the provider opts in via `sharedTooltip`, which
+ * is what {@link ChartInteraction.showTooltip} folds together. The series axis
+ * deliberately does not sync: series keys are chart-local vocabulary, and
+ * isolating "Delivered" in a chart that happens to share the name would
+ * correlate nothing.
  *
  * Deliberately no click layer. Clicking used to pin the hover so it survived
  * the pointer leaving, and it read as the chart getting stuck — the emphasis
@@ -33,12 +34,21 @@ interface UseChartInteractionOptions {
      * two charts formatting the same label differently must still match.
      */
     categoryKeys?: string[];
+    /**
+     * How marks outside the active category recede. Defaults to
+     * {@link ChartMarkState.MUTED}; BarChart passes
+     * {@link ChartMarkState.DIMMED} because its cursor band already carries the
+     * category highlight and strong muting on top of it would shout. Only the
+     * category axis softens — series (legend) isolation always mutes fully,
+     * since there the muting *is* the affordance.
+     */
+    categoryMuteState?: ChartMarkState;
     /** Suppress all interaction — used while loading and when the tooltip is off. */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /**
      * Render every mark muted, whatever the two axes say.
      *
-     * Distinct from {@link disabled}, which suppresses *input*. Loading suppresses
+     * Distinct from {@link isDisabled}, which suppresses *input*. Loading suppresses
      * *emphasis*: there is nothing yet worth drawing attention to. Folded in here
      * rather than left to each mark, because the alternative is the same
      * `isLoading ? MUTED : getMarkState(…)` ternary hand-copied at every mark —
@@ -59,11 +69,11 @@ export interface ChartInteraction {
      */
     activeIndex: number | null;
     /**
-     * True when {@link activeIndex} comes from this chart's own pointer rather
-     * than a synced sibling. Gates the tooltip: only the chart under the pointer
-     * opens one.
+     * True when this chart should present its tooltip for {@link activeIndex}:
+     * its own pointer hover always, a synced sibling's only when the
+     * `DashboardProvider` opts in via `sharedTooltip`.
      */
-    hasLocalHover: boolean;
+    showTooltip: boolean;
     hoveredSeriesKey: string | null;
     /**
      * Emphasis for one mark, composed from both axes.
@@ -82,5 +92,5 @@ export interface ChartInteraction {
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState, isDisabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -2,7 +2,7 @@ import { ChartMarkState } from "./types.js";
 import { DashboardContext } from "./DashboardProvider.js";
 import { useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled = false, isLoading = false }) {
+function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const sync = useContext(DashboardContext);
@@ -60,14 +60,15 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled
 		categoryKeys
 	]);
 	const effectiveIndex = safeHovered ?? followedIndex;
+	const showTooltip = safeHovered !== null || followedIndex !== null && (sync?.sharedTooltip ?? false);
 	const onCategoryEnter = useCallback((categoryIndex) => {
-		if (disabled) return;
+		if (isDisabled) return;
 		setHoveredIndex(categoryIndex);
-	}, [disabled]);
+	}, [isDisabled]);
 	const onCategoryLeave = useCallback(() => {
-		if (disabled) return;
+		if (isDisabled) return;
 		setHoveredIndex(null);
-	}, [disabled]);
+	}, [isDisabled]);
 	const onSeriesEnter = useCallback((seriesKey) => {
 		setHoveredSeriesKey(seriesKey);
 	}, []);
@@ -76,15 +77,19 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled
 	}, []);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
 		if (isLoading) return ChartMarkState.MUTED;
-		return categoryIndex !== void 0 && effectiveIndex !== null && categoryIndex !== effectiveIndex || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
+		const categoryMuted = categoryIndex !== void 0 && effectiveIndex !== null && categoryIndex !== effectiveIndex;
+		if (seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries) return ChartMarkState.MUTED;
+		if (categoryMuted) return categoryMuteState;
+		return ChartMarkState.ACTIVE;
 	}, [
 		isLoading,
 		effectiveIndex,
-		safeHoveredSeries
+		safeHoveredSeries,
+		categoryMuteState
 	]);
 	return useMemo(() => ({
 		activeIndex: effectiveIndex,
-		hasLocalHover: safeHovered !== null,
+		showTooltip,
 		hoveredSeriesKey: safeHoveredSeries,
 		getMarkState,
 		onCategoryEnter,
@@ -93,7 +98,7 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, disabled
 		onSeriesLeave
 	}), [
 		effectiveIndex,
-		safeHovered,
+		showTooltip,
 		safeHoveredSeries,
 		getMarkState,
 		onCategoryEnter,

package/dist/styles.css

@@ -24,27 +24,28 @@
 .c1hcga6s{position:relative;display:var(--c1hcga6s-0);-webkit-flex-direction:var(--c1hcga6s-1);-ms-flex-direction:var(--c1hcga6s-1);flex-direction:var(--c1hcga6s-1);-webkit-align-items:var(--c1hcga6s-2);-webkit-box-align:var(--c1hcga6s-2);-ms-flex-align:var(--c1hcga6s-2);align-items:var(--c1hcga6s-2);-webkit-box-pack:var(--c1hcga6s-3);-ms-flex-pack:var(--c1hcga6s-3);-webkit-justify-content:var(--c1hcga6s-3);justify-content:var(--c1hcga6s-3);width:var(--c1hcga6s-4);min-width:0;height:var(--c1hcga6s-5);min-height:0;}
 .c1fvbgkp{position:relative;width:var(--c1fvbgkp-0);min-width:0;aspect-ratio:var(--c1fvbgkp-1);height:var(--c1fvbgkp-2);-webkit-flex:var(--c1fvbgkp-3);-ms-flex:var(--c1fvbgkp-3);flex:var(--c1fvbgkp-3);min-height:var(--c1fvbgkp-4);}
 .c10uj5yt{display:block;overflow:visible;}
-.cyuty3o{opacity:1;}.cyuty3o[data-state="muted"]{opacity:0.1;}
-.c1ob2op2{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:1;}.c1ob2op2[data-state="muted"]{opacity:0.1;}
-.c8c506o{stroke:none;pointer-events:none;opacity:1;}.c8c506o[data-state="muted"]{opacity:0.1;}
-.ceqlpek{pointer-events:none;opacity:1;}.ceqlpek[data-state="muted"]{opacity:0.1;}
-.c1fcbddl{opacity:1;}.c1fcbddl[data-state="muted"]{opacity:0.1;}
+.cyuty3o{opacity:1;}.cyuty3o[data-state="muted"]{opacity:0.1;}.cyuty3o[data-state="dimmed"]{opacity:0.4;}
+.c1ob2op2{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:1;}.c1ob2op2[data-state="muted"]{opacity:0.1;}.c1ob2op2[data-state="dimmed"]{opacity:0.4;}
+.c8c506o{stroke:none;pointer-events:none;opacity:1;}.c8c506o[data-state="muted"]{opacity:0.1;}.c8c506o[data-state="dimmed"]{opacity:0.4;}
+.ceqlpek{pointer-events:none;opacity:1;}.ceqlpek[data-state="muted"]{opacity:0.1;}.ceqlpek[data-state="dimmed"]{opacity:0.4;}
+.c1fcbddl{opacity:1;}.c1fcbddl[data-state="muted"]{opacity:0.1;}.c1fcbddl[data-state="dimmed"]{opacity:0.4;}
 .cpcxr59{fill:transparent;outline:none;}
 .c1wvzvu4{fill:transparent;outline:none;}
 .c17guewt{stroke:var(--c17guewt-0);shape-rendering:crispEdges;}
 .cblgiyf{stroke:var(--cblgiyf-0);pointer-events:none;}
-.c1lr03cc{overflow:visible;pointer-events:none;}
-.cizy1s8{position:absolute;z-index:10;pointer-events:none;left:var(--cizy1s8-0);top:var(--cizy1s8-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--cizy1s8-2);border-radius:6px;background-color:var(--cizy1s8-3);opacity:var(--cizy1s8-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.cizy1s8{-webkit-transition:none;transition:none;}}
-.c1ukq11d{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0, 1fr) auto;grid-template-columns:minmax(0, 1fr) auto;-webkit-column-gap:16px;column-gap:16px;row-gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
-.cwcko2m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;min-width:0;}
-.cqwhvyz{text-align:right;white-space:nowrap;}
-.c1iaray{position:absolute;left:var(--c1iaray-0);top:var(--c1iaray-1);width:var(--c1iaray-2);height:var(--c1iaray-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
-.cz6jod1{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:6px 8px;border:0.5px solid var(--cz6jod1-0);border-radius:6px;background-color:var(--cz6jod1-1);pointer-events:none;text-align:center;}
-.c1de5mqk{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1de5mqk-0);-ms-flex-direction:var(--c1de5mqk-0);flex-direction:var(--c1de5mqk-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--c1de5mqk-1);-webkit-box-align:var(--c1de5mqk-1);-ms-flex-align:var(--c1de5mqk-1);align-items:var(--c1de5mqk-1);-webkit-box-pack:var(--c1de5mqk-2);-ms-flex-pack:var(--c1de5mqk-2);-webkit-justify-content:var(--c1de5mqk-2);justify-content:var(--c1de5mqk-2);gap:var(--c1de5mqk-3);width:var(--c1de5mqk-4);min-width:var(--c1de5mqk-5);height:var(--c1de5mqk-6);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--c1de5mqk-7);padding-left:var(--c1de5mqk-8);}
-.cjirv6a{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);gap:var(--cjirv6a-2);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
-.c1armna5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:8px;max-height:208px;overflow-y:auto;}
-.cgd77rv{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.cgd77rv[data-state="muted"]{opacity:0.1;}.cgd77rv:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
-.cutidpi{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;}.cutidpi[data-state="muted"]{opacity:0.1;}
+.c1lr03cc{fill:var(--c1lr03cc-0);pointer-events:none;}
+.cizy1s8{overflow:visible;pointer-events:none;}
+.c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
+.cwcko2m{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0, 1fr) auto;grid-template-columns:minmax(0, 1fr) auto;-webkit-column-gap:16px;column-gap:16px;row-gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
+.cqwhvyz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;min-width:0;}
+.c1iaray{text-align:right;white-space:nowrap;}
+.cz6jod1{position:absolute;left:var(--cz6jod1-0);top:var(--cz6jod1-1);width:var(--cz6jod1-2);height:var(--cz6jod1-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
+.c1de5mqk{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:6px 8px;border:0.5px solid var(--c1de5mqk-0);border-radius:6px;background-color:var(--c1de5mqk-1);pointer-events:none;text-align:center;}
+.cjirv6a{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);-webkit-box-pack:var(--cjirv6a-2);-ms-flex-pack:var(--cjirv6a-2);-webkit-justify-content:var(--cjirv6a-2);justify-content:var(--cjirv6a-2);width:var(--cjirv6a-3);min-width:var(--cjirv6a-4);height:var(--cjirv6a-5);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-6);padding-left:var(--cjirv6a-7);}
+.c1armna5{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--c1armna5-0);-ms-flex-direction:var(--c1armna5-0);flex-direction:var(--c1armna5-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--c1armna5-1);-webkit-box-align:var(--c1armna5-1);-ms-flex-align:var(--c1armna5-1);align-items:var(--c1armna5-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
+.cgd77rv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;}
+.cutidpi{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:var(--cutidpi-0);margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.cutidpi[data-state="muted"]{opacity:0.1;}.cutidpi[data-state="dimmed"]{opacity:0.4;}.cutidpi:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
+.ccpczg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;padding:var(--ccpczg-0);opacity:1;}.ccpczg[data-state="muted"]{opacity:0.1;}.ccpczg[data-state="dimmed"]{opacity:0.4;}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
 .tbnx4ok{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .tjda4tq{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;padding:var(--tjda4tq-0);background-color:var(--tjda4tq-1);border:var(--tjda4tq-2);border-radius:5px;}
@@ -141,7 +142,7 @@
 .c1yt5ynl{width:6px;height:6px;border-radius:50%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-color:var(--c1yt5ynl-0);-webkit-animation:var(--c1yt5ynl-1);animation:var(--c1yt5ynl-1);}@-webkit-keyframes enrichPulse-c1yt5ynl{0%,100%{opacity:1;}50%{opacity:0.3;}}@keyframes enrichPulse-c1yt5ynl{0%,100%{opacity:1;}50%{opacity:0.3;}}@media (prefers-reduced-motion: reduce){.c1yt5ynl{-webkit-animation:none;animation:none;}}
 .c1kvxq2r{position:absolute;inset:0;z-index:10;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;background-color:var(--c1kvxq2r-0);border:1.5px solid var(--c1kvxq2r-1);border-radius:4px;}
 .cz6gl36{width:100%;height:12px;border-radius:4px;background-color:var(--cz6gl36-0);-webkit-animation:spreadsheetSkeletonPulse-cz6gl36 1.4s ease-in-out infinite;animation:spreadsheetSkeletonPulse-cz6gl36 1.4s ease-in-out infinite;}@-webkit-keyframes spreadsheetSkeletonPulse-cz6gl36{0%,100%{opacity:1;}50%{opacity:0.4;}}@keyframes spreadsheetSkeletonPulse-cz6gl36{0%,100%{opacity:1;}50%{opacity:0.4;}}@media (prefers-reduced-motion: reduce){.cz6gl36{-webkit-animation:none;animation:none;}}
-.tldpbjd{width:var(--tldpbjd-0);height:var(--tldpbjd-1);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:5px;overflow:hidden;}
+.tldpbjd{width:var(--tldpbjd-0);height:var(--tldpbjd-1);min-height:var(--tldpbjd-2);max-height:var(--tldpbjd-3);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:5px;overflow:hidden;}
 .t1ltwowk{-webkit-flex:1;-ms-flex:1;flex:1;overflow:auto;position:relative;min-height:0;overflow-anchor:none;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--t1ltwowk-0);}
 .sfoers7{width:100%;min-width:var(--sfoers7-0);border-collapse:separate;border-spacing:0;table-layout:fixed;}
 .tmoy46{display:table-header-group;position:-webkit-sticky;position:sticky;top:0px;z-index:20;}

package/dist/table/InfiniteTable.js

@@ -27,7 +27,7 @@ import { flexRender, getCoreRowModel, getExpandedRowModel, getSortedRowModel, us
 * `VirtualizedInfiniteTable`, which shares the same column and row API.
 */
 function InfiniteTable(props) {
-	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, variant = TableVariant.PRIMARY, hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection = true, rowSelection, defaultRowSelection, onRowSelectionChange, onSelectedRowsChange, showSelectionColumn = false, selectionColumnPin = ColumnPin.LEFT, enableSelectAll, enableSelectionRange = true, selectAllAriaLabel = "Select all rows", getRowSelectAriaLabel, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, error, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowActivate, onRowExpand, expandedRowIds, defaultExpandedRowIds, onExpandedChange, getRowCanExpand, enableMultiRowExpansion = true, showExpandColumn = true, expandColumnPin = ColumnPin.LEFT, enableColumnResizing = false, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, getRowAriaLabel, enableRowFocus, onTableReady } = props;
+	const { columns, data, getRowId, height, minHeight, maxHeight, width, fillWidth, fillHeight, density = TableDensity.MEDIUM, variant = TableVariant.PRIMARY, hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection = true, rowSelection, defaultRowSelection, onRowSelectionChange, onSelectedRowsChange, showSelectionColumn = false, selectionColumnPin = ColumnPin.LEFT, enableSelectAll, enableSelectionRange = true, selectAllAriaLabel = "Select all rows", getRowSelectAriaLabel, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, error, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowActivate, onRowExpand, expandedRowIds, defaultExpandedRowIds, onExpandedChange, getRowCanExpand, enableMultiRowExpansion = true, showExpandColumn = true, expandColumnPin = ColumnPin.LEFT, enableColumnResizing = false, columnSizing, defaultColumnSizing, onColumnSizingChange, columnResizeMode = ColumnResizeMode.ON_CHANGE, ariaLabel, ariaLabelledBy, getRowAriaLabel, enableRowFocus, onTableReady } = props;
 	const instanceId = useId();
 	const scrollContainerRef = useRef(null);
 	const headerRef = useRef(null);
@@ -292,6 +292,8 @@ function InfiniteTable(props) {
 	return /* @__PURE__ */ jsx(TableOuterContainer, {
 		$width: width,
 		$height: height,
+		$minHeight: minHeight,
+		$maxHeight: maxHeight,
 		$fillWidth: fillWidth,
 		$fillHeight: fillHeight,
 		children: /* @__PURE__ */ jsxs(TableScrollContainer, {

package/dist/table/TablePrimitives.d.ts

@@ -12,17 +12,21 @@ import { ColumnAlign, ColumnPin, TableDensity, TableVariant } from "./types";
 export declare const TableOuterContainer: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $width?: number | string;
     $height?: number | string;
+    $minHeight?: number | string;
+    $maxHeight?: number | string;
     $fillWidth?: boolean;
     $fillHeight?: boolean;
 } & {
     theme: import("../theme").Theme;
 } & {
     as?: React.ElementType;
-}, "$width" | "$height" | "$fillWidth" | "$fillHeight" | "as" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "$width" | "$height" | "$fillWidth" | "$fillHeight" | "$minHeight" | "$maxHeight" | "as" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $width?: number | string;
     $height?: number | string;
+    $minHeight?: number | string;
+    $maxHeight?: number | string;
     $fillWidth?: boolean;
     $fillHeight?: boolean;
 } & {
@@ -34,6 +38,8 @@ export declare const TableOuterContainer: import("react").ComponentType<Pick<imp
 } & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $width?: number | string;
     $height?: number | string;
+    $minHeight?: number | string;
+    $maxHeight?: number | string;
     $fillWidth?: boolean;
     $fillHeight?: boolean;
 } & {