@canonical/maas-react-components 2.2.0 → 2.3.0

package/dist/src/lib/components/GenericTable/GenericTable.d.ts

@@ -1,7 +1,7 @@
 import { DetailedHTMLProps, Dispatch, HTMLAttributes, ReactElement, ReactNode, RefObject, SetStateAction } from 'react';
 import { Column, ColumnDef, ColumnSort, Header, Row, SortingState } from '@tanstack/react-table';
 import { PaginationBarProps } from './components/PaginationBar';
-import { SelectionProps, GenericTableData } from './types';
+import { SelectionProps, GenericTableData, ColumnVisibilityProps } from './types';
 type GenericTableProps<T extends GenericTableData> = {
     "aria-label"?: string;
     className?: string;
@@ -15,17 +15,20 @@ type GenericTableProps<T extends GenericTableData> = {
     isLoading: boolean;
     loadingVariant?: "spinner" | "skeleton";
     skeletonRowCount?: number;
+    skeletonGroupCount?: number;
     noData?: ReactNode;
     pagination?: PaginationBarProps;
     pinGroup?: {
         value: string;
         isTop: boolean;
     }[];
+    columnVisibility?: ColumnVisibilityProps;
     sorting?: ColumnSort[];
     selection?: SelectionProps<T>;
     setSorting?: Dispatch<SetStateAction<SortingState>>;
     showChevron?: boolean;
     variant?: "full-height" | "regular";
+    debug?: boolean;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 /**
  * GenericTable - A flexible and feature-rich table component for React applications
@@ -39,6 +42,8 @@ type GenericTableProps<T extends GenericTableData> = {
  * @param {Object} props - Component props
  * @param {string} [props.className] - Additional CSS class for the table wrapper
  * @param {ColumnDef<T, Partial<T>>[]} props.columns - Column definitions
+ * @param {ColumnVisibilityProps} [props.columnVisibility] - Controlled column visibility state and setter; when omitted, visibility is managed internally. See {@link ColumnVisibilityProps} for all sub-options
+ *  (columnVisibility, setColumnVisibility).
  * @param {RefObject<HTMLElement | null>} [props.containerRef] - Reference to container for size calculations
  * @param {T[]} props.data - Table data array
  * @param {(row: Row<T>, column: Column<T>) => boolean} [props.filterCells] - Function to filter which cells should be displayed
@@ -47,7 +52,8 @@ type GenericTableProps<T extends GenericTableData> = {
  * @param {string[]} [props.groupBy] - Column IDs to group rows by
  * @param {boolean} props.isLoading - Loading state to display placeholder content
  * @param {"spinner" | "skeleton"} [props.loadingVariant="spinner"] - Loading display style; "spinner" shows a single spinner row, "skeleton" renders skeletonRowCount pulsing skeleton rows using meta.skeleton per column when defined, falling back to a default Placeholder block
- * @param {number} [props.skeletonRowCount=10] - Number of skeleton rows to render when loadingVariant="skeleton"
+ * @param {number} [props.skeletonRowCount=10] - Number of skeleton rows to render per group (or total when ungrouped) when loadingVariant="skeleton"
+ * @param {number} [props.skeletonGroupCount=2] - Number of skeleton group rows to render when loadingVariant="skeleton" and groupBy is set
  * @param {ReactNode} [props.noData] - Content to display when no data is available
  * @param {PaginationBarProps} [props.pagination] - Pagination configuration
  * @param {{ value: string; isTop: boolean }[]} [props.pinGroup] - Group pinning configuration
@@ -57,6 +63,7 @@ type GenericTableProps<T extends GenericTableData> = {
  *   (filterSelectable, disabledSelectionTooltip, rowSelection, rowSelectionLabelKey, setRowSelection).
  * @param {boolean} [props.showChevron=false] - Show group row expansion state chevrons
  * @param {"full-height" | "regular"} [props.variant="full-height"] - Table layout variant
+ * @param {boolean} [props.debug] - React Table debug output
  *
  * @returns {ReactElement} - The rendered table component
  *
@@ -80,5 +87,5 @@ type GenericTableProps<T extends GenericTableData> = {
  *   }}
  * />
  */
-export declare const GenericTable: <T extends GenericTableData>({ "aria-label": tableAriaLabel, className, columns: initialColumns, containerRef, data: initialData, filterCells, filterHeaders, getSubRows, groupBy, isLoading, loadingVariant, skeletonRowCount, noData, pagination, pinGroup, sorting: externalSorting, selection, setSorting: setExternalSorting, showChevron, variant, ...divProps }: GenericTableProps<T>) => ReactElement;
+export declare const GenericTable: <T extends GenericTableData>({ "aria-label": tableAriaLabel, className, columns: initialColumns, columnVisibility: externalColumnVisibility, containerRef, data: initialData, filterCells, filterHeaders, getSubRows, groupBy, isLoading, loadingVariant, skeletonRowCount, skeletonGroupCount, noData, pagination, pinGroup, sorting: externalSorting, selection, setSorting: setExternalSorting, showChevron, variant, debug, ...divProps }: GenericTableProps<T>) => ReactElement;
 export {};

package/dist/src/lib/components/GenericTable/components/TableCheckbox/TableCheckbox.d.ts

@@ -6,10 +6,10 @@ type TableCheckboxProps<T> = Partial<DetailedHTMLProps<InputHTMLAttributes<HTMLI
 };
 declare const TableCheckbox: {
     <T>({ row, disabledTooltip, isNested, ...props }: TableCheckboxProps<T> & {
-        disabledTooltip: string | ((row: Row<T>) => string);
-        isNested: boolean;
+        disabledTooltip?: string | ((row: Row<T>) => string);
+        isNested?: boolean;
     }): ReactElement | null;
     All: <T>({ table, ...props }: TableCheckboxProps<T>) => import("react/jsx-runtime").JSX.Element | null;
-    Group: <T>({ row, ...props }: TableCheckboxProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+    Group: <T>({ row, ...props }: TableCheckboxProps<T>) => import("react/jsx-runtime").JSX.Element;
 };
 export default TableCheckbox;

package/dist/src/lib/components/GenericTable/types.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
-import { Row, RowData, RowSelectionState } from '@tanstack/react-table';
+import { Row, RowData, RowSelectionState, VisibilityState } from '@tanstack/react-table';
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue = unknown> {
         /** Custom loading skeleton renderer. Overrides the default shimmer for this column. */
@@ -25,3 +25,7 @@ export type SelectionProps<T extends GenericTableData> = {
     rowSelection?: RowSelectionState;
     setRowSelection?: Dispatch<SetStateAction<RowSelectionState>>;
 };
+export type ColumnVisibilityProps = {
+    columnVisibility: VisibilityState;
+    setColumnVisibility: Dispatch<SetStateAction<VisibilityState>>;
+};

package/dist/src/lib/components/GenericTable/utils/processColumnDefs.d.ts

@@ -1,9 +1,8 @@
 import { ColumnDef } from '@tanstack/react-table';
 import { SelectionProps, GenericTableData } from '../types';
-export declare const processColumnDefs: <T extends GenericTableData>({ canSelect, initialColumns, isLoading, groupBy, getSubRows, selection, showChevron, }: {
+export declare const processColumnDefs: <T extends GenericTableData>({ canSelect, initialColumns, groupBy, getSubRows, selection, showChevron, }: {
     canSelect: boolean;
     initialColumns: ColumnDef<T, Partial<T>>[];
-    isLoading: boolean;
     groupBy: string[] | undefined;
     getSubRows?: (originalRow: T, index: number) => T[] | undefined;
     selection?: SelectionProps<T>;

package/dist/src/lib/components/GenericTable/utils/renderLoadingRows.d.ts

@@ -1,9 +1,11 @@
-import { ColumnDef, Header, Table } from '@tanstack/react-table';
+import { Column, ColumnDef, Header, Row, Table } from '@tanstack/react-table';
 import { GenericTableData } from '../types';
-export declare const renderLoadingRows: <T extends GenericTableData>({ table, columns, filterHeaders, loadingVariant, skeletonRowCount, }: {
+export declare const renderLoadingRows: <T extends GenericTableData>({ table, columns, filterHeaders, filterCells, loadingVariant, skeletonRowCount, skeletonGroupCount, }: {
     table: Table<T>;
     columns: ColumnDef<T, Partial<T>>[];
     filterHeaders: (header: Header<T, unknown>) => boolean;
+    filterCells: (row: Row<T>, column: Column<T>) => boolean;
     loadingVariant?: "skeleton" | "spinner";
     skeletonRowCount: number;
+    skeletonGroupCount: number;
 }) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/canonical/maas-react-components.git"