@jobber/components 6.26.0 → 6.26.2

package/dist/DataTable-es.js

@@ -1,6 +1,6 @@
 import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import classnames from 'classnames';
-import React, { useCallback, useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { u as useResizeObserver } from './useResizeObserver-es.js';
 import { G as Glimmer } from './Glimmer-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
@@ -13,8 +13,8 @@ var styles$3 = {"dataTableContainer":"_3IHK46TSBOI-","tableContainer":"_8CMtSx4q
 function BodyLoading({ table }) {
     const loaderRows = table.getState().pagination.pageSize;
     const loaderColumns = table.getAllColumns().length;
-    return (React.createElement("tbody", null, Array.from(Array(loaderRows).keys()).map(row => (React.createElement("tr", { key: row }, Array.from(Array(loaderColumns).keys()).map(arr => (React.createElement("td", { key: arr },
-        React.createElement(Glimmer, null)))))))));
+    return (React__default.createElement("tbody", null, Array.from(Array(loaderRows).keys()).map(row => (React__default.createElement("tr", { key: row }, Array.from(Array(loaderColumns).keys()).map(arr => (React__default.createElement("td", { key: arr },
+        React__default.createElement(Glimmer, null)))))))));
 }
 
 function Body({ table, onRowClick, emptyState, loading, }) {
@@ -25,20 +25,20 @@ function Body({ table, onRowClick, emptyState, loading, }) {
         onRowClick(row);
     }, [onRowClick]);
     if (loading) {
-        return React.createElement(BodyLoading, { table: table });
+        return React__default.createElement(BodyLoading, { table: table });
     }
-    return (React.createElement(React.Fragment, null, table.getRowModel().rows.length ? (React.createElement("tbody", null, table.getRowModel().rows.map(row => {
-        return (React.createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(cell => {
-            return (React.createElement("td", { key: cell.id, style: {
+    return (React__default.createElement(React__default.Fragment, null, table.getRowModel().rows.length ? (React__default.createElement("tbody", null, table.getRowModel().rows.map(row => {
+        return (React__default.createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(cell => {
+            return (React__default.createElement("td", { key: cell.id, style: {
                     width: cell.column.getSize(),
                     minWidth: cell.column.columnDef.minSize,
                     maxWidth: cell.column.columnDef.maxSize,
                 } }, flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
-    }))) : (React.createElement("tbody", null,
-        React.createElement("tr", { className: bodyRowClasses },
-            React.createElement("td", { colSpan: table.getAllColumns().length, className: styles$3.emptyStateCell },
-                React.createElement("div", { className: styles$3.emptyState }, emptyState)))))));
+    }))) : (React__default.createElement("tbody", null,
+        React__default.createElement("tr", { className: bodyRowClasses },
+            React__default.createElement("td", { colSpan: table.getAllColumns().length, className: styles$3.emptyStateCell },
+                React__default.createElement("div", { className: styles$3.emptyState }, emptyState)))))));
 }
 
 function createTableSettings(data, columns, options) {
@@ -103,21 +103,21 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
     const firstPosition = pageIndex * pageSize + 1;
     const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
     const itemsPerPageOptions = useMemo(() => { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(item => String(item))) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
-    return secondPosition <= 0 ? (React.createElement("div", { className: styles$2.pagination },
-        React.createElement("div", { className: styles$2.paginationInfo }, !loading ? React.createElement(Text, null, "No items") : React.createElement(Glimmer, { width: 200 })))) : (React.createElement("div", { className: styles$2.pagination },
-        React.createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
-        React.createElement("div", { className: styles$2.paginationNav },
-            React.createElement("div", { className: styles$2.paginationSelect },
-                React.createElement(Select, { value: table.getState().pagination.pageSize, onChange: value => {
+    return secondPosition <= 0 ? (React__default.createElement("div", { className: styles$2.pagination },
+        React__default.createElement("div", { className: styles$2.paginationInfo }, !loading ? React__default.createElement(Text, null, "No items") : React__default.createElement(Glimmer, { width: 200 })))) : (React__default.createElement("div", { className: styles$2.pagination },
+        React__default.createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
+        React__default.createElement("div", { className: styles$2.paginationNav },
+            React__default.createElement("div", { className: styles$2.paginationSelect },
+                React__default.createElement(Select, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
-                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
-                React.createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
-            React.createElement("div", { className: styles$2.paginationButtons },
-                React.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
+                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React__default.createElement(SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
+                React__default.createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
+            React__default.createElement("div", { className: styles$2.paginationButtons },
+                React__default.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
                         table.previousPage();
                         onPageChange();
                     }, disabled: !table.getCanPreviousPage() }),
-                React.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
+                React__default.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
                         table.nextPage();
                         onPageChange();
                     }, disabled: !table.getCanNextPage() })))));
@@ -125,22 +125,22 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
 
 var styles$1 = {"mobileFooterContainer":"wMM6V80Rt-w-","mobileFooterRow":"HAoSIniVNvI-","mobileFooterRowData":"mNGvTIKaQIA-","spinning":"u7HdA4nq7qM-"};
 
-const DesktopView = ({ table }) => (React.createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(footerGroup => (React.createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(header => (React.createElement("th", { key: header.id, style: {
+const DesktopView = ({ table }) => (React__default.createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(footerGroup => (React__default.createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(header => (React__default.createElement("th", { key: header.id, style: {
         width: header.getSize(),
         minWidth: header.column.columnDef.minSize,
         maxWidth: header.column.columnDef.maxSize,
     } }, flexRender(header.column.columnDef.footer, header.getContext())))))))));
-const HandheldView = ({ table }) => (React.createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React.createElement("div", { key: footerGroup.id }, footerGroup.headers
+const HandheldView = ({ table }) => (React__default.createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React__default.createElement("div", { key: footerGroup.id }, footerGroup.headers
     .filter(header => header.column.columnDef.footer)
-    .map((header, index) => (React.createElement(React.Fragment, null, index === 0 ? (React.createElement("div", { className: styles$1.mobileFooterRow }, flexRender(header.column.columnDef.footer, header.getContext()))) : (React.createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
+    .map((header, index) => (React__default.createElement(React__default.Fragment, null, index === 0 ? (React__default.createElement("div", { className: styles$1.mobileFooterRow }, flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default.createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
     flexRender(header.column.columnDef.header, header.getContext()),
-    React.createElement("div", { className: styles$1.mobileFooterRowData }, flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
+    React__default.createElement("div", { className: styles$1.mobileFooterRowData }, flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
 const Footer = ({ table, viewType = "handheld", }) => {
     const hasFooter = table
         .getAllColumns()
         .find(column => column.columnDef.footer);
     if (hasFooter) {
-        return viewType === "handheld" ? (React.createElement(HandheldView, { table: table })) : (React.createElement(DesktopView, { table: table }));
+        return viewType === "handheld" ? (React__default.createElement(HandheldView, { table: table })) : (React__default.createElement(DesktopView, { table: table }));
     }
     return null;
 };
@@ -173,15 +173,15 @@ const sortStyleIndex = [
 function SortIcon({ direction }) {
     const foundStyle = sortStyleIndex.find(style => style.option === direction);
     const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
-    return (React.createElement("div", { className: classnames(styles.sortIcon) },
-        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
-            React.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
+    return (React__default.createElement("div", { className: classnames(styles.sortIcon) },
+        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__default.createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
+            React__default.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
 }
 
 function Header({ table, stickyHeader, sorting, onRowClick, }) {
     const stickyClass = classnames({ [styles$3.stickyHeader]: stickyHeader });
-    return (React.createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(headerGroup => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
+    return (React__default.createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(headerGroup => (React__default.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
         const isSorting = sorting && header.column.getCanSort();
         const headingCellInlineStyle = {
             width: header.getSize(),
@@ -191,18 +191,18 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
         if (isSorting) {
             headingCellInlineStyle.paddingRight = 0;
         }
-        return (React.createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
+        return (React__default.createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
                 ? classnames(styles$3.sortableColumn, {
                     [styles$3.pinFirstHeaderSortable]: !!onRowClick,
                 })
-                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: headingCellInlineStyle }, header.isPlaceholder ? null : (React.createElement("div", null,
+                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: headingCellInlineStyle }, header.isPlaceholder ? null : (React__default.createElement("div", null,
             flexRender(header.column.columnDef.header, header.getContext()),
             header.column.getCanSort() &&
                 sorting &&
-                !header.column.getIsSorted() && (React.createElement(SortIcon, { direction: SortDirection.equilibrium })),
+                !header.column.getIsSorted() && (React__default.createElement(SortIcon, { direction: SortDirection.equilibrium })),
             {
-                asc: React.createElement(SortIcon, { direction: SortDirection.ascending }),
-                desc: React.createElement(SortIcon, { direction: SortDirection.descending }),
+                asc: React__default.createElement(SortIcon, { direction: SortDirection.ascending }),
+                desc: React__default.createElement(SortIcon, { direction: SortDirection.descending }),
             }[header.column.getIsSorted()]))));
     }))))));
 }
@@ -217,18 +217,18 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
         [styles$3.pinFirstColumn]: pinFirstColumn,
     });
     const table = useReactTable(tableSettings);
-    return (React.createElement("div", { className: styles$3.dataTableContainer },
-        React.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$3.tableContainer, style: { height }, ref: ref },
-            React.createElement("table", { className: tableClasses },
-                React.createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
-                React.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
+    return (React__default.createElement("div", { className: styles$3.dataTableContainer },
+        React__default.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$3.tableContainer, style: { height }, ref: ref },
+            React__default.createElement("table", { className: tableClasses },
+                React__default.createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
+                React__default.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > useResizeObserver.Breakpoints.small ? (React__default.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            exactWidth <= useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
-        pagination && (React.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
+            exactWidth <= useResizeObserver.Breakpoints.small ? (React__default.createElement(Footer, { table: table })) : null,
+        pagination && (React__default.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));
 }