@producteca/producteca-ui-kit 1.102.2 → 1.103.0

package/dist/components/index.d.js

@@ -19,5 +19,6 @@ export * from './link';
 export * from './draggableList';
 export * from './dropzone';
 export * from './stepper';
+export * from './pagination';
 export * from './table';
 export * from './permissionOption';

package/dist/components/index.d.ts

@@ -19,5 +19,6 @@ export * from './link';
 export * from './draggableList';
 export * from './dropzone';
 export * from './stepper';
+export * from './pagination';
 export * from './table';
 export * from './permissionOption';

package/dist/components/pagination/chevronButton.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pagination/chevronButton.d.ts

@@ -0,0 +1,7 @@
+export type ChevronDirection = 'previous' | 'next';
+export interface ChevronButtonProps {
+    isHidden: boolean;
+    onClick: () => void;
+    direction: ChevronDirection;
+}
+export declare const ChevronButton: ({ onClick, isHidden, direction }: ChevronButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/index.d.js

@@ -0,0 +1,2 @@
+export { Pagination } from './pagination';
+export { Pagination as default } from './pagination';

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

@@ -0,0 +1,3 @@
+export { Pagination } from './pagination';
+export type { PaginationProps } from './pagination.types';
+export { Pagination as default } from './pagination';

package/dist/components/pagination/pagination.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,4 @@
+import { PaginationProps } from './pagination.types';
+
+export declare const Pagination: ({ page, pageSize, className, totalItems, onPageChange, onPageSizeChange, itemsLabel, pageSizeOptions, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/pagination/pagination.examples.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pagination/pagination.examples.d.ts

@@ -0,0 +1,5 @@
+import { PaginationProps } from './pagination.types';
+
+export declare const productsTotal = 690;
+export declare const pageSizeOptions: number[];
+export declare const InteractivePagination: ({ page: initialPage, pageSize: initialPageSize, onPageChange, onPageSizeChange, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.types.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pagination/pagination.types.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    itemsLabel?: string;
+}

package/dist/components/pagination/pagination.utils.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pagination/pagination.utils.d.ts

@@ -0,0 +1,9 @@
+export type PageItem = number | 'start-ellipsis' | 'end-ellipsis';
+export type PageRange = {
+    from: number;
+    to: number;
+};
+export declare const FIRST_PAGE = 1;
+export declare const getTotalPages: (totalItems: number, pageSize: number) => number;
+export declare const getPageRange: (page: number, pageSize: number, totalItems: number) => PageRange;
+export declare const getPageItems: (page: number, totalPages: number) => PageItem[];

package/dist/components/pagination/usePagination.d.js

@@ -0,0 +1 @@
+export {};

package/dist/components/pagination/usePagination.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { SelectOption } from '../inputs/selectField/selectField.types';
+import { PageItem, PageRange } from './pagination.utils';
+
+interface UsePaginationParams {
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    pageSizeOptions: number[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+}
+type UsePaginationResult = {
+    currentPage: number;
+    pageItems: PageItem[];
+    range: PageRange;
+    hasPrevious: boolean;
+    hasNext: boolean;
+    sizeOptions: SelectOption[];
+    selectedSize: number[];
+    goToPage: (page: number) => void;
+    goToPrevious: () => void;
+    goToNext: () => void;
+    handlePageSizeChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const usePagination: ({ page, pageSize, totalItems, pageSizeOptions, onPageChange, onPageSizeChange, }: UsePaginationParams) => UsePaginationResult;
+export {};

package/dist/locales/en.d.ts

@@ -57,6 +57,17 @@ declare const _default: {
     };
     noFoundOptions: string;
     noResultsFound: string;
+    pagination: {
+        ariaLabel: string;
+        ellipsis: string;
+        goToPage: string;
+        items: string;
+        nextPage: string;
+        ofTotal: string;
+        pageSize: string;
+        previousPage: string;
+        range: string;
+    };
     permissionSelector: {
         ariaLabel: string;
     };

package/dist/locales/es.d.ts

@@ -679,5 +679,27 @@ declare const _default: {
         steps: string;
         activeStep: string;
     };
+    pagination: {
+        ariaLabel: string;
+        previousPage: string;
+        nextPage: string;
+        goToPage: string;
+        ellipsis: string;
+        range: string;
+        ofTotal: string;
+        items: string;
+        pageSize: string;
+        products: string;
+        component: string;
+        props: {
+            page: string;
+            pageSize: string;
+            totalItems: string;
+            onPageChange: string;
+            onPageSizeChange: string;
+            pageSizeOptions: string;
+            itemsLabel: string;
+        };
+    };
 };
 export default _default;

package/dist/locales/pt-BR.d.ts

@@ -57,6 +57,17 @@ declare const _default: {
     };
     noFoundOptions: string;
     noResultsFound: string;
+    pagination: {
+        ariaLabel: string;
+        ellipsis: string;
+        goToPage: string;
+        items: string;
+        nextPage: string;
+        ofTotal: string;
+        pageSize: string;
+        previousPage: string;
+        range: string;
+    };
     permissionSelector: {
         ariaLabel: string;
     };

package/dist/playground/ComponentDemos.d.ts

@@ -35,5 +35,6 @@ export declare const DemoMenuAction: DemoComponent;
 export declare const DemoTable: DemoComponent;
 export declare const DemoPermissionSelector: DemoComponent;
 export declare const DemoDropzone: DemoComponent;
+export declare const DemoPagination: DemoComponent;
 export declare const ComponentDemos: Record<string, DemoComponent>;
 export {};