h2o-library 1.5.8 → 1.6.0

package/dist/components/index.d.ts

@@ -36,3 +36,4 @@ export * from "./src/chart-stat";
 export * from "./src/date-range-picker";
 export * from "./src/legend";
 export * from "./src/chart";
+export * from "./src/expandable-table";

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { SortDirection } from "./table";
+export interface ExpandableTableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    minWidth?: string;
+    maxWidth?: string;
+    width?: string;
+    render?: (value: any, row: T) => React.ReactNode;
+}
+export interface ExpandableRow {
+    expandableContent?: React.ReactNode;
+}
+export interface ExpandableTableProps<T extends Record<string, any> & ExpandableRow> {
+    columns: ExpandableTableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    className?: string;
+    containerClassName?: string;
+    rowHeight?: string;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    currentPage?: number;
+    totalPages?: number;
+    perPage?: number;
+    perPageOptions?: {
+        label: string;
+        value: string;
+    }[];
+    onSort?: (key: string, direction: SortDirection) => void;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: string) => void;
+    maxHeight?: string;
+    selectedRows?: T[];
+    setSelectedRows?: (rows: T[]) => void;
+    rowKey?: keyof T;
+}
+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;

package/dist/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";

package/dist/css/src/charts.css

@@ -52,12 +52,20 @@
   padding: 1rem;
   display: flex;
   flex-direction: column;
+  overflow: visible;
 }
 
 .heatmap-grid {
   display: grid;
   gap: 0.5rem;
   flex-grow: 1;
+  overflow: visible;
+}
+
+.heatmap-col-tooltip {
+  width: 100%;
+  min-width: 0;
+  display: block;
 }
 
 .heatmap-col-header {
@@ -67,16 +75,24 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: block;
+}
+
+.heatmap-row-tooltip {
+  width: 100%;
+  min-width: 0;
+  display: block;
 }
 
 .heatmap-row-header {
   padding: 0.5rem;
   font-weight: 500;
-  display: flex;
-  align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: block;
 }
 
 .heatmap-cell {

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

@@ -0,0 +1,73 @@
+.expandable-table .expand-column {
+  width: 48px;
+  padding: 0 !important;
+  text-align: center;
+}
+
+.expandable-table .expand-button {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--muted));
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+  height: 100%;
+}
+
+.expandable-table .expand-button:hover {
+  color: hsl(var(--primary));
+}
+
+.expandable-table .expand-button svg {
+  transition: transform 0.2s ease-in-out;
+}
+
+.expandable-table .expand-button svg.expanded {
+  transform: rotate(90deg);
+  color: hsl(var(--primary));
+}
+
+.expandable-table tr.expanded-row {
+  border: 1px solid hsl(var(--primary));
+}
+
+.expandable-table .expandable-row {
+  border: 1px solid hsl(var(--primary));
+}
+
+.expandable-table tr.expanded-row .expand-button {
+  color: hsl(var(--primary));
+}
+
+.expandable-table .expandable-content {
+  padding: 1rem;
+}
+
+/* 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;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/css/src/index.css

@@ -63,3 +63,4 @@
 @import "./src/charts.css";
 @import "./src/chart.css";
 @import "./src/legend.css";
+@import "./src/expandable-table.css";

package/dist/esm/components/index.d.ts

@@ -36,3 +36,4 @@ export * from "./src/chart-stat";
 export * from "./src/date-range-picker";
 export * from "./src/legend";
 export * from "./src/chart";
+export * from "./src/expandable-table";

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { SortDirection } from "./table";
+export interface ExpandableTableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    minWidth?: string;
+    maxWidth?: string;
+    width?: string;
+    render?: (value: any, row: T) => React.ReactNode;
+}
+export interface ExpandableRow {
+    expandableContent?: React.ReactNode;
+}
+export interface ExpandableTableProps<T extends Record<string, any> & ExpandableRow> {
+    columns: ExpandableTableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    className?: string;
+    containerClassName?: string;
+    rowHeight?: string;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    currentPage?: number;
+    totalPages?: number;
+    perPage?: number;
+    perPageOptions?: {
+        label: string;
+        value: string;
+    }[];
+    onSort?: (key: string, direction: SortDirection) => void;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: string) => void;
+    maxHeight?: string;
+    selectedRows?: T[];
+    setSelectedRows?: (rows: T[]) => void;
+    rowKey?: keyof T;
+}
+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;

package/dist/esm/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";