@jobber/components 4.52.0 → 4.53.0

package/dist/DataTable/DataTable.d.ts

@@ -7,51 +7,51 @@ export interface DataTableProps<T> {
      * Typescript should infer T from typeof data.
      *
      */
-    data: T[];
+    readonly data: T[];
     /**
      * Should follow the @tanstack/react-table [ColumnDef](https://tanstack.com/table/v8/docs/guide/column-defs).
      * [createColumnHelper](https://tanstack.com/table/v8/docs/guide/column-defs#column-helpers) is also exposed to make it more convenient
      * to create columns.
      */
-    columns: ColumnDef<T>[];
+    readonly columns: ColumnDef<T>[];
     /**
      * Enables pagination, mostly follows:
      * https://tanstack.com/table/v8/docs/api/features/pagination
      *
      */
-    pagination?: PaginationType;
+    readonly pagination?: PaginationType;
     /**
      * Enables sorting, mostly follows:
      * https://tanstack.com/table/v8/docs/api/features/sorting#table-options
      *
      */
-    sorting?: SortingType;
+    readonly sorting?: SortingType;
     /**
      * This will force the table to have the specified hight
      *
      */
-    height?: number;
+    readonly height?: number;
     /**
      * When set to true makes the header sticky while scrolling vertically
      *
      */
-    stickyHeader?: boolean;
+    readonly stickyHeader?: boolean;
     /**
      * Pins the firstColumn when scrolling horizontally
      *
      */
-    pinFirstColumn?: boolean;
+    readonly pinFirstColumn?: boolean;
     /**
      * Enables row click action. The provided callback will be executed when the row is clicked.
      */
-    onRowClick?: (row: Row<T>) => void;
+    readonly onRowClick?: (row: Row<T>) => void;
     /**
      * The elements to display when the data table is empty
      */
-    emptyState?: ReactNode | ReactNode[];
+    readonly emptyState?: ReactNode | ReactNode[];
     /**
      * When true, shows the loading state of the DataTable
      */
-    loading?: boolean;
+    readonly loading?: boolean;
 }
 export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading, }: DataTableProps<T>): JSX.Element;

package/dist/DataTable/Pagination.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { Table } from "@tanstack/react-table";
 interface PaginationProps<T> {
-    table: Table<T>;
-    itemsPerPage?: number[];
-    totalItems: number;
-    loading: boolean;
+    readonly table: Table<T>;
+    readonly itemsPerPage?: number[];
+    readonly totalItems: number;
+    readonly loading: boolean;
+    readonly onPageChange: () => void;
 }
-export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, loading, }: PaginationProps<T>): JSX.Element;
+export declare function Pagination<T extends object>({ table, itemsPerPage, totalItems, loading, onPageChange, }: PaginationProps<T>): JSX.Element;
 export {};

package/dist/DataTable/index.js

@@ -138,7 +138,7 @@ var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","pa
 styleInject_es.styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
-function Pagination({ table, itemsPerPage, totalItems, loading, }) {
+function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, }) {
     const { pageIndex, pageSize } = table.getState().pagination;
     const totalRows = totalItems;
     const firstPosition = pageIndex * pageSize + 1;
@@ -154,8 +154,14 @@ function Pagination({ table, itemsPerPage, totalItems, loading, }) {
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
                 React__default["default"].createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
             React__default["default"].createElement("div", { className: styles$2.paginationButtons },
-                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage() }),
-                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => table.nextPage(), disabled: !table.getCanNextPage() })))));
+                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
+                        table.previousPage();
+                        onPageChange();
+                    }, disabled: !table.getCanPreviousPage() }),
+                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
+                        table.nextPage();
+                        onPageChange();
+                    }, disabled: !table.getCanNextPage() })))));
 }
 
 var css_248z$1 = "._0FexNr-lIgA- {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border-top: calc(16px / 8) solid rgb(225, 225, 225);\n  border-top: var(--border-thick) solid var(--color-border);\n}\n\n.PKlqQjoQ6DY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  font-weight: bold;\n}\n\n.PKlqQjoQ6DY- * {\n  text-align: left;\n}\n\n.ItTcVYUbVNM-,\n.ItTcVYUbVNM- * {\n  font-weight: normal;\n  text-align: right;\n}\n\n.PKlqQjoQ6DY-:not(:last-child) {\n  padding-bottom: calc(16px / 2);\n  padding-bottom: var(--space-small);\n}\n";
@@ -255,7 +261,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
     });
     const table = reactTable.useReactTable(tableSettings);
     return (React__default["default"].createElement("div", { className: styles$3.dataTableContainer },
-        React__default["default"].createElement("div", { className: styles$3.tableContainer, style: { height }, ref: ref },
+        React__default["default"].createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$3.tableContainer, style: { height }, ref: ref },
             React__default["default"].createElement("table", { className: tableClasses },
                 React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
                 React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
@@ -267,7 +273,7 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
             exactWidth <= jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table })) : null,
         pagination && (React__default["default"].createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
-                : table.getCoreRowModel().rows.length, loading: loading }))));
+                : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));
 }
 
 const mockContainerWidth = (exactWidth) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.52.0",
+  "version": "4.53.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@jobber/design": "^0.46.0",
     "@jobber/formatters": "*",
-    "@jobber/hooks": "^2.6.1",
+    "@jobber/hooks": "^2.6.2",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
     "@tanstack/react-table": "8.5.13",
@@ -56,7 +56,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "^12.0.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/glob": "^7.1.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "72926e01b5a80f7fc5122a71d35fa8525f6b384d"
+  "gitHead": "403bda7e9da3cdfa667b6b22af56137e18ad914c"
 }