@qodo/design-system 0.18.3 → 0.19.0

package/dist/index.d.ts

@@ -116,6 +116,14 @@ declare type BaseMenuItemType = {
     disabled?: boolean;
 };
 
+declare type BasePaginationProps = {
+    paginationMode?: typeof PAGINATION_MODE.PAGINATION;
+    onLoadMore?: never;
+    hasMore?: never;
+    loadMoreThreshold?: never;
+    endOfResultsMessage?: never;
+};
+
 declare type BaseSelectProps = {
     disabled?: boolean;
     options: Option_2[];
@@ -418,6 +426,43 @@ declare type IndicatorProps = React.ComponentProps<typeof Steps_2.Indicator> & {
     index: number;
 };
 
+declare type InfiniteScrollProps = {
+    paginationMode: typeof PAGINATION_MODE.INFINITE_SCROLL;
+    /**
+     * Callback function to load more data when scrolling near the bottom.
+     * Should handle appending new data to the table and return whether more data was loaded.
+     *
+     * @returns boolean | void - Return false to stop loading more, true/void to continue
+     *
+     * @example
+     * onLoadMore={async () => {
+     *   const newData = await api.fetch(page);
+     *   if (newData.length === 0) return false; // Stop loading
+     *   setData(prev => [...prev, ...newData]);
+     *   return true; // Continue loading on next scroll
+     * }}
+     */
+    onLoadMore: () => void | Promise<void> | boolean | Promise<boolean>;
+    /**
+     * Indicates whether there is more data to load.
+     * If undefined, will continue trying to load until onLoadMore returns false.
+     * When false, stops loading and shows "End of results".
+     *
+     * @default undefined (keep trying until onLoadMore returns false)
+     */
+    hasMore?: boolean;
+    /**
+     * Distance in pixels from the bottom of the scrollable container
+     * to trigger the onLoadMore callback. Default is 100px.
+     */
+    loadMoreThreshold?: number;
+    /**
+     * Custom message to display when there's no more data to load.
+     * @default "End of results"
+     */
+    endOfResultsMessage?: string;
+};
+
 export declare const Input: React_2.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface InputProps extends React_2.ComponentProps<"input">, VariantProps<typeof inputVariants> {
@@ -480,6 +525,15 @@ declare type Option_2 = {
 };
 export { Option_2 as Option }
 
+export declare const PAGINATION_MODE: {
+    readonly PAGINATION: "pagination";
+    readonly INFINITE_SCROLL: "infinite-scroll";
+};
+
+export declare type PaginationMode = (typeof PAGINATION_MODE)[keyof typeof PAGINATION_MODE];
+
+declare type PaginationModeProps = BasePaginationProps | InfiniteScrollProps;
+
 export declare type PaginationProps<T extends RowData> = {
     table: Table_2<T>;
 };
@@ -645,7 +699,7 @@ declare const switchVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
 } & ClassProp) | undefined) => string;
 
-export declare const Table: <T extends RowData>({ table, emptyStateComponent, noResultsComponent, errorComponent, isLoading, isError, onRowClick, emptyStateTitle, emptyStateDescription, noResultsTitle, wrapperClassName, loadingRowsCount, activeRowId, }: TableProps<T & WithId>) => JSX_2.Element;
+export declare const Table: <T extends RowData>({ table, emptyStateComponent, noResultsComponent, errorComponent, isLoading, isError, onRowClick, emptyStateTitle, emptyStateDescription, noResultsTitle, wrapperClassName, loadingRowsCount, activeRowId, paginationMode, onLoadMore, hasMore, loadMoreThreshold, endOfResultsMessage, }: TableProps<T & WithId>) => JSX_2.Element;
 
 export declare type TableProps<T extends RowData> = {
     table: Table_2<T>;
@@ -661,7 +715,7 @@ export declare type TableProps<T extends RowData> = {
     wrapperClassName?: string;
     loadingRowsCount?: number;
     activeRowId?: number | string;
-};
+} & PaginationModeProps;
 
 export declare function Tabs({ className, ...props }: React_2.ComponentProps<typeof TabsPrimitive.Root>): JSX_2.Element;