@paygreen/pgui 3.0.12 → 3.0.13

package/dist/components/data-table/components/table-empty-state.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface TableEmptyStateProps {
+    isLoading: boolean;
+    emptyState: ReactNode;
+    variant?: 'mobile' | 'desktop';
+    colSpan?: number;
+}
+export declare const TableEmptyState: ({ isLoading, emptyState, variant, colSpan, }: TableEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/components/table-pagination-footer.d.ts

@@ -0,0 +1,14 @@
+import { IconButtonProps } from '@chakra-ui/react';
+import { DataTablePagination } from '../data-table';
+interface TablePaginationFooterProps {
+    pagination?: DataTablePagination;
+    paginationButtonProps?: Partial<IconButtonProps>;
+    countLabel?: {
+        singular: string;
+        plural: string;
+    };
+    isTableLoading?: boolean;
+    variant?: 'mobile' | 'desktop';
+}
+export declare const TablePaginationFooter: ({ pagination, paginationButtonProps, countLabel, isTableLoading, variant, }: TablePaginationFooterProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/data-table/components/table-row-wrapper.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+interface TableRowWrapperProps {
+    children: ReactNode;
+    index: number;
+    variant: 'simple' | 'striped';
+    colorPalette?: 'blue' | 'orange';
+    onClick?: (e: React.MouseEvent) => void;
+    onAuxClick?: (e: React.MouseEvent) => void;
+    cursor?: 'pointer' | 'default';
+    isLoading?: boolean;
+    bg: string | Record<string, string>;
+    hoverBg: string | Record<string, string>;
+}
+export declare const TableRowWrapper: ({ children, onClick, onAuxClick, cursor, isLoading, bg, hoverBg, }: TableRowWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/data-table.d.ts

@@ -25,7 +25,7 @@ export interface DataTableProps<TData> {
     isLoading?: boolean;
     onFilterChange?: (filters: ColumnFiltersState) => void;
     onSortingChange?: (sorting: SortingState) => void;
-    onRowClick?: (row: TData) => void;
+    onRowClick?: (row: TData, event: React.MouseEvent) => void;
     paginationButtonProps?: Partial<IconButtonProps>;
     countLabel?: {
         singular: string;

package/dist/components/data-table/data-table.utils.d.ts

@@ -6,3 +6,10 @@ import { Cell } from '@tanstack/react-table';
  * @param emptyState The content to display if the cell is empty (defaults to '-')
  */
 export declare const renderCell: <TData>(cell: Cell<TData, unknown>, emptyState?: React.ReactNode) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null | undefined;
+/**
+ * Format pagination results text based on whether there are multiple pages
+ */
+export declare const formatPaginationText: (hasMultiplePages: boolean, page: number, maxPerPage: number, totalResults: number, countLabel?: {
+    singular: string;
+    plural: string;
+}) => string;

package/dist/components/data-table/hooks/use-table-row-interaction.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Handle row click events with support for middle click/ctrl+click
+ */
+export declare const useTableRowInteraction: <TData>(onRowClick?: (row: TData, event: React.MouseEvent) => void) => {
+    handleRowInteraction: (row: TData, event: React.MouseEvent) => void;
+    handleClick: (row: TData, e: React.MouseEvent) => void;
+    handleAuxClick: (row: TData, e: React.MouseEvent) => void;
+};

package/dist/components/data-table/hooks/use-table-styling.d.ts

@@ -0,0 +1,51 @@
+export declare const useTableStyling: (variant: "simple" | "striped", colorPalette?: "blue" | "orange") => {
+    headerBg: {
+        readonly base: "lm_cello.80";
+        readonly _dark: "bg.muted";
+    } | {
+        readonly base: "lm_orange.80";
+        readonly _dark: "lm_orange.30/20";
+    } | {
+        readonly base: "lm_gray.90";
+        readonly _dark: "lm_gray.30/20";
+    };
+    headerHover: {
+        readonly base: "lm_cello.70";
+        readonly _dark: "bg.emphasized";
+    } | {
+        readonly base: "lm_orange.70";
+        readonly _dark: "lm_orange.30/40";
+    } | {
+        readonly base: "lm_gray.80";
+        readonly _dark: "lm_gray.30/40";
+    };
+    getRowBg: (index: number) => "bg" | {
+        readonly base: "lm_cello.80";
+        readonly _dark: "bg.muted";
+    } | {
+        readonly base: "lm_orange.80";
+        readonly _dark: "lm_orange.30/20";
+    } | {
+        readonly base: "lm_gray.90";
+        readonly _dark: "lm_gray.30/20";
+    };
+    getRowHoverBg: (index: number) => {
+        readonly base: "lm_cello.80";
+        readonly _dark: "bg.muted";
+    } | {
+        readonly base: "lm_cello.70";
+        readonly _dark: "bg.emphasized";
+    } | {
+        readonly base: "lm_orange.80";
+        readonly _dark: "lm_orange.30/20";
+    } | {
+        readonly base: "lm_orange.70";
+        readonly _dark: "lm_orange.30/40";
+    } | {
+        readonly base: "lm_gray.90";
+        readonly _dark: "lm_gray.30/20";
+    } | {
+        readonly base: "lm_gray.80";
+        readonly _dark: "lm_gray.30/40";
+    };
+};