h2o-library 1.7.1 → 1.8.0

package/dist/components/src/chart-bar.d.ts

@@ -22,5 +22,6 @@ export interface BarChartProps {
     wrapLabels?: boolean;
     onXAxisTickClick?: (value: string | number) => void;
     onYAxisTickClick?: (value: string | number) => void;
+    onBarClick?: (dataPoint: BarChartDataPoint, index: number, dataKey: string) => void;
 }
-export declare const BarChart: ({ data, bars, layout, orientation, showGrid, showLegend, height, rotateLabels, wrapLabels, onXAxisTickClick, onYAxisTickClick, }: BarChartProps) => React.JSX.Element;
+export declare const BarChart: ({ data, bars, layout, orientation, showGrid, showLegend, height, rotateLabels, wrapLabels, onXAxisTickClick, onYAxisTickClick, onBarClick, }: BarChartProps) => React.JSX.Element;

package/dist/components/src/chart-heatmap.d.ts

@@ -16,5 +16,6 @@ export interface HeatmapChartProps {
     showPercentageInTooltip?: boolean;
     onRowClick?: (row: string) => void;
     onColumnClick?: (column: string) => void;
+    onCellClick?: (row: string, column: string, cellData: HeatmapDataPoint) => void;
 }
-export declare const HeatmapChart: ({ data, showPercentage, height, showValue, showPercentageInTooltip, onRowClick, onColumnClick, }: HeatmapChartProps) => React.JSX.Element;
+export declare const HeatmapChart: ({ data, showPercentage, height, showValue, showPercentageInTooltip, onRowClick, onColumnClick, onCellClick, }: HeatmapChartProps) => React.JSX.Element;

package/dist/components/src/chart-line.d.ts

@@ -21,5 +21,6 @@ export interface LineChartProps {
     showXValue?: boolean;
     onXAxisTickClick?: (value: string | number) => void;
     onYAxisTickClick?: (value: string | number) => void;
+    onDataPointClick?: (point: LineChartDataPoint, index: number, dataKey: string) => void;
 }
-export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showXValue, onXAxisTickClick, onYAxisTickClick, }: LineChartProps) => React.JSX.Element;
+export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showXValue, onXAxisTickClick, onYAxisTickClick, onDataPointClick, }: LineChartProps) => React.JSX.Element;

package/dist/components/src/chart-pie.d.ts

@@ -12,5 +12,6 @@ export interface PieChartProps {
     height?: number;
     showLabels?: boolean;
     showPercentageInTooltip?: boolean;
+    onSliceClick?: (dataPoint: PieChartDataPoint, index: number) => void;
 }
-export declare const PieChart: ({ data, variant, showLegend, height, showLabels, showPercentageInTooltip, }: PieChartProps) => React.JSX.Element;
+export declare const PieChart: ({ data, variant, showLegend, height, showLabels, showPercentageInTooltip, onSliceClick, }: PieChartProps) => React.JSX.Element;

package/dist/components/src/expandable-table.d.ts

@@ -35,5 +35,6 @@ export interface ExpandableTableProps<T extends Record<string, any> & Expandable
     selectedRows?: T[];
     setSelectedRows?: (rows: T[]) => void;
     rowKey?: keyof T;
+    onRowClick?: (row: T, rowIndex: number) => void;
 }
-export declare function ExpandableTable<T extends Record<string, any> & ExpandableRow>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, containerClassName, selectedRows, setSelectedRows, rowKey, }: ExpandableTableProps<T>): React.JSX.Element;
+export declare function ExpandableTable<T extends Record<string, any> & ExpandableRow>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, containerClassName, selectedRows, setSelectedRows, rowKey, onRowClick, }: ExpandableTableProps<T>): React.JSX.Element;

package/dist/components/src/icon.d.ts

@@ -3,7 +3,8 @@ import { IconType, TooltipPosition } from "../../types";
 export interface IconProps extends React.SVGProps<SVGSVGElement> {
     icon: IconType;
     size?: number;
-    tooltip?: string;
+    tooltip?: string | React.ReactNode;
     tooltipPosition?: TooltipPosition;
+    tooltipVariant?: "dark" | "light";
 }
-export declare const Icon: ({ icon, size, tooltip, tooltipPosition, ...props }: IconProps) => JSX.Element;
+export declare const Icon: ({ icon, size, tooltip, tooltipPosition, tooltipVariant, ...props }: IconProps) => JSX.Element;

package/dist/components/src/tooltip.d.ts

@@ -3,7 +3,9 @@ import { TooltipPosition } from "../../types";
 type BaseProps = {
     position?: TooltipPosition;
     className?: string;
+    contentClassName?: string;
     children: React.ReactNode;
+    variant?: "dark" | "light";
 };
 type TextTooltip = BaseProps & {
     text: string;

package/dist/css/src/charts.css

@@ -15,6 +15,19 @@
   text-align: center;
 }
 
+/* Pointer cursor on slices when clickable */
+.pie-chart-clickable path,
+.pie-chart-clickable .recharts-pie-sector {
+  cursor: pointer;
+}
+
+/* Remove focus outline on pie slices after click */
+.pie-chart-container path:focus,
+.pie-chart-container .recharts-pie-sector:focus,
+.pie-chart-container .recharts-layer path:focus {
+  outline: none;
+}
+
 .stat-chart-container {
   font-family: sans-serif;
   text-align: center;

package/dist/css/src/expandable-table.css

@@ -31,12 +31,26 @@
   color: hsl(var(--primary));
 }
 
-.expandable-table tr.expanded-row {
-  border: 1px solid hsl(var(--primary));
+/* Row immediately before an expanded row: bottom border primary (forms top edge of expanded block) */
+.expandable-table tbody tr:has(+ tr.expanded-row) td {
+  border-bottom-color: hsl(var(--primary));
 }
 
-.expandable-table .expandable-row {
-  border: 1px solid hsl(var(--primary));
+/* Expanded main row: no vertical borders between cells; only outer left/right and top/bottom */
+.expandable-table tr.expanded-row td {
+  border-bottom: 1px solid hsl(var(--primary));
+  border-left: none;
+  border-right: none;
+}
+.expandable-table tr.expanded-row td:first-child {
+  border-left: 1px solid hsl(var(--primary));
+}
+.expandable-table tr.expanded-row td:last-child {
+  border-right: 1px solid hsl(var(--primary));
+}
+/* Top border primary (below header when first row, or below previous row) */
+.expandable-table tbody tr.expanded-row td {
+  border-top: 1px solid hsl(var(--primary));
 }
 
 .expandable-table tr.expanded-row .expand-button {
@@ -47,16 +61,21 @@
   padding: 1rem;
 }
 
+/* Expandable content row: primary border on all sides (divider above + bottom/left/right) */
+.expandable-table .expandable-row td {
+  padding: 0;
+  border: 1px solid hsl(var(--primary));
+}
+/* When expandable content row is last in table, keep bottom border (table.css removes it otherwise) */
+.expandable-table tbody tr.expandable-row:last-child td {
+  border-bottom: 1px solid hsl(var(--primary));
+}
+
 /* Animation for expanding/collapsing rows */
 .expandable-table .expandable-row {
   transition: all 0.3s ease-in-out;
 }
 
-.expandable-table .expandable-row td {
-  padding: 0;
-  border-bottom: none;
-}
-
 .expandable-table .expandable-content {
   animation: slideDown 0.3s ease-in-out;
 }

package/dist/css/src/tooltip.css

@@ -5,8 +5,6 @@
 
 .tooltip-box {
   position: fixed;
-  background-color: #1f2937;
-  color: #ffffff;
   padding: 0.5rem 0.75rem;
   border-radius: 6px;
   font-size: 0.8125rem;
@@ -19,6 +17,19 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
+/* Dark variant (default) */
+.tooltip-box--dark {
+  background-color: #1f2937;
+  color: #ffffff;
+}
+
+/* Light variant */
+.tooltip-box--light {
+  background-color: #ffffff;
+  color: #1f2937;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
 /* Arrow */
 .tooltip-box::after {
   content: "";
@@ -36,33 +47,53 @@
 }
 
 /* Position: Top - Arrow at bottom */
+.tooltip-box--dark[data-position="top"]::after {
+  border-top-color: #1f2937;
+}
+.tooltip-box--light[data-position="top"]::after {
+  border-top-color: #ffffff;
+}
 .tooltip-box[data-position="top"]::after {
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
-  border-top-color: #1f2937;
 }
 
 /* Position: Bottom - Arrow at top */
+.tooltip-box--dark[data-position="bottom"]::after {
+  border-bottom-color: #1f2937;
+}
+.tooltip-box--light[data-position="bottom"]::after {
+  border-bottom-color: #ffffff;
+}
 .tooltip-box[data-position="bottom"]::after {
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
-  border-bottom-color: #1f2937;
 }
 
 /* Position: Left - Arrow at right */
+.tooltip-box--dark[data-position="left"]::after {
+  border-left-color: #1f2937;
+}
+.tooltip-box--light[data-position="left"]::after {
+  border-left-color: #ffffff;
+}
 .tooltip-box[data-position="left"]::after {
   left: 100%;
   top: 50%;
   transform: translateY(-50%);
-  border-left-color: #1f2937;
 }
 
 /* Position: Right - Arrow at left */
+.tooltip-box--dark[data-position="right"]::after {
+  border-right-color: #1f2937;
+}
+.tooltip-box--light[data-position="right"]::after {
+  border-right-color: #ffffff;
+}
 .tooltip-box[data-position="right"]::after {
   right: 100%;
   top: 50%;
   transform: translateY(-50%);
-  border-right-color: #1f2937;
 }

package/dist/esm/components/src/chart-bar.d.ts

@@ -22,5 +22,6 @@ export interface BarChartProps {
     wrapLabels?: boolean;
     onXAxisTickClick?: (value: string | number) => void;
     onYAxisTickClick?: (value: string | number) => void;
+    onBarClick?: (dataPoint: BarChartDataPoint, index: number, dataKey: string) => void;
 }
-export declare const BarChart: ({ data, bars, layout, orientation, showGrid, showLegend, height, rotateLabels, wrapLabels, onXAxisTickClick, onYAxisTickClick, }: BarChartProps) => React.JSX.Element;
+export declare const BarChart: ({ data, bars, layout, orientation, showGrid, showLegend, height, rotateLabels, wrapLabels, onXAxisTickClick, onYAxisTickClick, onBarClick, }: BarChartProps) => React.JSX.Element;

package/dist/esm/components/src/chart-heatmap.d.ts

@@ -16,5 +16,6 @@ export interface HeatmapChartProps {
     showPercentageInTooltip?: boolean;
     onRowClick?: (row: string) => void;
     onColumnClick?: (column: string) => void;
+    onCellClick?: (row: string, column: string, cellData: HeatmapDataPoint) => void;
 }
-export declare const HeatmapChart: ({ data, showPercentage, height, showValue, showPercentageInTooltip, onRowClick, onColumnClick, }: HeatmapChartProps) => React.JSX.Element;
+export declare const HeatmapChart: ({ data, showPercentage, height, showValue, showPercentageInTooltip, onRowClick, onColumnClick, onCellClick, }: HeatmapChartProps) => React.JSX.Element;

package/dist/esm/components/src/chart-line.d.ts

@@ -21,5 +21,6 @@ export interface LineChartProps {
     showXValue?: boolean;
     onXAxisTickClick?: (value: string | number) => void;
     onYAxisTickClick?: (value: string | number) => void;
+    onDataPointClick?: (point: LineChartDataPoint, index: number, dataKey: string) => void;
 }
-export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showXValue, onXAxisTickClick, onYAxisTickClick, }: LineChartProps) => React.JSX.Element;
+export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showXValue, onXAxisTickClick, onYAxisTickClick, onDataPointClick, }: LineChartProps) => React.JSX.Element;

package/dist/esm/components/src/chart-pie.d.ts

@@ -12,5 +12,6 @@ export interface PieChartProps {
     height?: number;
     showLabels?: boolean;
     showPercentageInTooltip?: boolean;
+    onSliceClick?: (dataPoint: PieChartDataPoint, index: number) => void;
 }
-export declare const PieChart: ({ data, variant, showLegend, height, showLabels, showPercentageInTooltip, }: PieChartProps) => React.JSX.Element;
+export declare const PieChart: ({ data, variant, showLegend, height, showLabels, showPercentageInTooltip, onSliceClick, }: PieChartProps) => React.JSX.Element;

package/dist/esm/components/src/expandable-table.d.ts

@@ -35,5 +35,6 @@ export interface ExpandableTableProps<T extends Record<string, any> & Expandable
     selectedRows?: T[];
     setSelectedRows?: (rows: T[]) => void;
     rowKey?: keyof T;
+    onRowClick?: (row: T, rowIndex: number) => void;
 }
-export declare function ExpandableTable<T extends Record<string, any> & ExpandableRow>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, containerClassName, selectedRows, setSelectedRows, rowKey, }: ExpandableTableProps<T>): React.JSX.Element;
+export declare function ExpandableTable<T extends Record<string, any> & ExpandableRow>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, containerClassName, selectedRows, setSelectedRows, rowKey, onRowClick, }: ExpandableTableProps<T>): React.JSX.Element;

package/dist/esm/components/src/icon.d.ts

@@ -3,7 +3,8 @@ import { IconType, TooltipPosition } from "../../types";
 export interface IconProps extends React.SVGProps<SVGSVGElement> {
     icon: IconType;
     size?: number;
-    tooltip?: string;
+    tooltip?: string | React.ReactNode;
     tooltipPosition?: TooltipPosition;
+    tooltipVariant?: "dark" | "light";
 }
-export declare const Icon: ({ icon, size, tooltip, tooltipPosition, ...props }: IconProps) => JSX.Element;
+export declare const Icon: ({ icon, size, tooltip, tooltipPosition, tooltipVariant, ...props }: IconProps) => JSX.Element;

package/dist/esm/components/src/tooltip.d.ts

@@ -3,7 +3,9 @@ import { TooltipPosition } from "../../types";
 type BaseProps = {
     position?: TooltipPosition;
     className?: string;
+    contentClassName?: string;
     children: React.ReactNode;
+    variant?: "dark" | "light";
 };
 type TextTooltip = BaseProps & {
     text: string;