@jobber/components 4.59.0 → 4.59.1-st-spike-w.0

package/dist/DataTable/index.js

@@ -1,89 +1,63 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactTable = require('@tanstack/react-table');
-var classnames = require('classnames');
-var React = require('react');
-var jobberHooks = require('@jobber/hooks/useResizeObserver');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Glimmer = require('../Glimmer-cfa92a88.js');
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
-var Option = require('../Option-07a24acd.js');
-var Button = require('../Button-db6114a6.js');
-var Text = require('../Text-54334431.js');
-require('../Content-2ca1ffe1.js');
-require('../FormField-fa9254dc.js');
-require('uuid');
-require('react-hook-form');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-require('../InputValidation-377d6c62.js');
-require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
-require('react-router-dom');
-require('../Typography-83915c54.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var jobberHooks__namespace = /*#__PURE__*/_interopNamespace(jobberHooks);
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+export { createColumnHelper } from '@tanstack/react-table';
+import classnames from 'classnames';
+import React, { useCallback, useMemo } from 'react';
+import * as jobberHooks from '@jobber/hooks/useResizeObserver';
+import { useResizeObserver, Breakpoints } from '@jobber/hooks/useResizeObserver';
+import { s as styleInject } from '../style-inject.es-a0e1a0ba.js';
+import { G as Glimmer } from '../Glimmer-d3be9219.js';
+import { _ as __rest } from '../tslib.es6-5849cd88.js';
+import { S as Select, a as SelectOption } from '../Option-7967170c.js';
+import { B as Button } from '../Button-319d8fa0.js';
+import { T as Text } from '../Text-703e2c21.js';
+import '../Content-3354c281.js';
+import '../FormField-99918ed4.js';
+import 'uuid';
+import 'react-hook-form';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../InputValidation-b6adff05.js';
+import 'framer-motion';
+import '../Spinner-5d8359b8.js';
+import 'react-router-dom';
+import '../Typography-09952a2f.js';
 
 var css_248z$3 = ".m5A5oeRFaMs- {\n  position: relative;\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc(16px / 8);\n  border-radius: var(--radius-base);\n}\n\n.cY-5BrIIUg8- {\n  overflow: auto;\n}\n\n.y8xnHe7fwrI- {\n  width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n}\n\n.y8xnHe7fwrI- thead tr th {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  white-space: nowrap;\n}\n\n.y8xnHe7fwrI- thead tr th :first-child {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.y8xnHe7fwrI- tbody tr {\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n.y8xnHe7fwrI- tbody tr:last-child {\n  border-bottom: none;\n}\n\n.y8xnHe7fwrI- tbody tr td {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n}\n\n.y8xnHe7fwrI- tfoot {\n  position: sticky;\n  z-index: 1;\n  width: 100%;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  border-top: calc(16px / 8) solid rgb(225, 225, 225);\n  border-top: var(--border-thick) solid var(--color-border);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  bottom: 0;\n}\n\n.y8xnHe7fwrI- tfoot tr th {\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n}\n\n.t8QYvdtkQXQ- thead tr th:first-child,\n.t8QYvdtkQXQ- tbody tr td:first-child {\n  position: sticky;\n  left: 0;\n  z-index: 1;\n  height: calc((16px * 3) + (16px / 4));\n  height: calc(calc(16px * 3) + calc(16px / 4));\n  height: calc(var(--space-largest) + var(--space-smaller));\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.t8QYvdtkQXQ- th:first-child::after,\n.t8QYvdtkQXQ- td:first-child::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: calc(-1 * (16px / 2));\n  right: calc(-1 * calc(16px / 2));\n  right: calc(-1 * var(--space-small));\n  width: calc(16px / 2);\n  width: var(--space-small);\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0) 80%\n  );\n  background: linear-gradient(\n    90deg,\n    rgba(var(--color-black--rgb), 0.1) 0%,\n    rgba(var(--color-black--rgb), 0) 80%\n  );\n}\n\n.Y21JuHX6fhk- {\n  position: sticky;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.PJEX8dlqCMA-:first-child:hover {\n  background: rgb(250, 246, 219);\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._9ps4aWGs8W0-:hover {\n  background: rgb(250, 246, 219);\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._59XEEB8l5pI-:hover,\n._59XEEB8l5pI-:hover :first-child {\n  background: rgb(244, 244, 244);\n  background: var(--color-surface--background);\n  cursor: pointer;\n}\n\n.a2BGGBkY5J8- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  top: calc(16px * 3);\n  top: var(--space-largest);\n  right: 0;\n  bottom: calc(16px * 3);\n  bottom: var(--space-largest);\n  left: 0;\n  width: 100%;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
 var styles$3 = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
-styleInject_es.styleInject(css_248z$3);
+styleInject(css_248z$3);
 
 function BodyLoading({ table }) {
     const loaderRows = table.getState().pagination.pageSize;
     const loaderColumns = table.getAllColumns().length;
-    return (React__default["default"].createElement("tbody", null, Array.from(Array(loaderRows).keys()).map(row => (React__default["default"].createElement("tr", { key: row }, Array.from(Array(loaderColumns).keys()).map(arr => (React__default["default"].createElement("td", { key: arr },
-        React__default["default"].createElement(Glimmer.Glimmer, null)))))))));
+    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)))))))));
 }
 
 function Body({ table, onRowClick, emptyState, loading, }) {
-    const bodyRowClasses = classnames__default["default"]({ [styles$3.clickableRow]: !!onRowClick });
-    const handleRowClick = React.useCallback((row) => () => {
+    const bodyRowClasses = classnames({ [styles$3.clickableRow]: !!onRowClick });
+    const handleRowClick = useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
         onRowClick(row);
     }, [onRowClick]);
     if (loading) {
-        return React__default["default"].createElement(BodyLoading, { table: table });
+        return React.createElement(BodyLoading, { table: table });
     }
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, table.getRowModel().rows.length ? (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(row => {
-        return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(cell => {
-            return (React__default["default"].createElement("td", { key: cell.id, style: {
+    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: {
                     width: cell.column.getSize(),
                     minWidth: cell.column.columnDef.minSize,
                     maxWidth: cell.column.columnDef.maxSize,
-                } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
+                } }, flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
-    }))) : (React__default["default"].createElement("div", { className: classnames__default["default"](styles$3.emptyState) }, emptyState))));
+    }))) : (React.createElement("div", { className: classnames(styles$3.emptyState) }, emptyState))));
 }
 
 function createTableSettings(data, columns, options) {
     var _a;
-    const _b = getPaginationSettings(options === null || options === void 0 ? void 0 : options.pagination), { state: paginationState } = _b, restPaginationSettings = tslib_es6.__rest(_b, ["state"]);
-    const _c = getSortingSettings(options === null || options === void 0 ? void 0 : options.sorting), { state: sortingState } = _c, restSortingSettings = tslib_es6.__rest(_c, ["state"]);
+    const _b = getPaginationSettings(options === null || options === void 0 ? void 0 : options.pagination), { state: paginationState } = _b, restPaginationSettings = __rest(_b, ["state"]);
+    const _c = getSortingSettings(options === null || options === void 0 ? void 0 : options.sorting), { state: sortingState } = _c, restSortingSettings = __rest(_c, ["state"]);
     let initialPatinationState;
     if ((_a = options === null || options === void 0 ? void 0 : options.pagination) === null || _a === void 0 ? void 0 : _a.itemsPerPage) {
         initialPatinationState = {
@@ -92,7 +66,7 @@ function createTableSettings(data, columns, options) {
         };
     }
     const tableSettings = Object.assign(Object.assign(Object.assign({ data,
-        columns, state: Object.assign(Object.assign({}, paginationState), sortingState), getCoreRowModel: reactTable.getCoreRowModel() }, restPaginationSettings), restSortingSettings), { initialState: {
+        columns, state: Object.assign(Object.assign({}, paginationState), sortingState), getCoreRowModel: getCoreRowModel() }, restPaginationSettings), restSortingSettings), { initialState: {
             pagination: initialPatinationState,
         } });
     return tableSettings;
@@ -111,7 +85,7 @@ function getPaginationSettings(pagination) {
         paginationSettings.onPaginationChange = onPaginationChange;
     }
     else {
-        paginationSettings.getPaginationRowModel = reactTable.getPaginationRowModel();
+        paginationSettings.getPaginationRowModel = getPaginationRowModel();
     }
     return paginationSettings;
 }
@@ -128,14 +102,14 @@ function getSortingSettings(sorting) {
         sortingSettings.enableSortingRemoval = enableSortingRemoval !== null && enableSortingRemoval !== void 0 ? enableSortingRemoval : true;
     }
     else {
-        sortingSettings.getSortedRowModel = reactTable.getSortedRowModel();
+        sortingSettings.getSortedRowModel = getSortedRowModel();
     }
     return sortingSettings;
 }
 
 var css_248z$2 = ".zn0VRVhObt0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  min-height: calc((16px / 4) + (16px * 3));\n  min-height: calc(calc(16px / 4) + calc(16px * 3));\n  min-height: calc(var(--space-smaller) + var(--space-largest));\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n  border-top: calc(16px / 16) solid rgb(225, 225, 225);\n  border-top: var(--border-base) solid var(--color-border);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n._1d4uh90gfSI- {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n._5Hh01rJlUDs- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px * 1);\n  gap: var(--space-base);\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  min-width: -webkit-fit-content;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.N5rXFBBzPxk- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  min-width: calc(3 * (16px * 3) + (16px / 2));\n  min-width: calc(3 * calc(16px * 3) + calc(16px / 2));\n  min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n.Uq2TUaf9ang- {\n  min-width: calc((16px * 4) + (16px / 4));\n  min-width: calc(calc(16px * 4) + calc(16px / 4));\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n.PeLwUZ2wWPI- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: calc(16px * 1.5);\n  gap: var(--space-large);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n\n@media (max-width: 489.98px) {\n\n.PeLwUZ2wWPI- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.PeLwUZ2wWPI- {\n    gap: calc(16px * 1);\n    gap: var(--space-base);\n}\n  }\n";
 var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","paginationNav":"_5Hh01rJlUDs-","paginationSelect":"N5rXFBBzPxk-","paginationSelectLabel":"Uq2TUaf9ang-","paginationButtons":"PeLwUZ2wWPI-"};
-styleInject_es.styleInject(css_248z$2);
+styleInject(css_248z$2);
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
 function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, }) {
@@ -143,22 +117,22 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
     const totalRows = totalItems;
     const firstPosition = pageIndex * pageSize + 1;
     const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
-    const itemsPerPageOptions = React.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__default["default"].createElement("div", { className: styles$2.pagination },
-        React__default["default"].createElement("div", { className: styles$2.paginationInfo }, !loading ? React__default["default"].createElement(Text.Text, null, "No items") : React__default["default"].createElement(Glimmer.Glimmer, { width: 200 })))) : (React__default["default"].createElement("div", { className: styles$2.pagination },
-        React__default["default"].createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
-        React__default["default"].createElement("div", { className: styles$2.paginationNav },
-            React__default["default"].createElement("div", { className: styles$2.paginationSelect },
-                React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: value => {
+    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 => {
                         table.setPageSize(Number(value));
-                    }, 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: () => {
+                    }, 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: () => {
                         table.previousPage();
                         onPageChange();
                     }, disabled: !table.getCanPreviousPage() }),
-                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
+                React.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
                         table.nextPage();
                         onPageChange();
                     }, disabled: !table.getCanNextPage() })))));
@@ -166,31 +140,31 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
 
 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";
 var styles$1 = {"mobileFooterContainer":"_0FexNr-lIgA-","mobileFooterRow":"PKlqQjoQ6DY-","mobileFooterRowData":"ItTcVYUbVNM-"};
-styleInject_es.styleInject(css_248z$1);
+styleInject(css_248z$1);
 
-const DesktopView = ({ table }) => (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(footerGroup => (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(header => (React__default["default"].createElement("th", { key: header.id, style: {
+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: {
         width: header.getSize(),
         minWidth: header.column.columnDef.minSize,
         maxWidth: header.column.columnDef.maxSize,
-    } }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))))));
-const HandheldView = ({ table }) => (React__default["default"].createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
+    } }, 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
     .filter(header => header.column.columnDef.footer)
-    .map((header, index) => (React__default["default"].createElement(React__default["default"].Fragment, null, index === 0 ? (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default["default"].createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
-    reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-    React__default["default"].createElement("div", { className: styles$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
+    .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 },
+    flexRender(header.column.columnDef.header, header.getContext()),
+    React.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__default["default"].createElement(HandheldView, { table: table })) : (React__default["default"].createElement(DesktopView, { table: table }));
+        return viewType === "handheld" ? (React.createElement(HandheldView, { table: table })) : (React.createElement(DesktopView, { table: table }));
     }
     return null;
 };
 
 var css_248z = ".wtb8keLFxgc- {\n  padding-right: calc(16px / 2);\n  padding-right: var(--space-small);\n}\n.wtb8keLFxgc- path {\n  fill: rgba(101, 120, 132, 1);\n  fill: var(--color-greyBlue);\n}\n.wtb8keLFxgc- path.TUkZiGiR6hc- {\n  fill: rgb(1, 41, 57);\n  fill: var(--color-blue);\n}\n.wtb8keLFxgc- path.HkPlMeyz3rM- {\n  fill: rgb(193, 201, 206);\n  fill: var(--color-greyBlue--lighter);\n}\n";
 var styles = {"sortIcon":"wtb8keLFxgc-","active":"TUkZiGiR6hc-","inactive":"HkPlMeyz3rM-"};
-styleInject_es.styleInject(css_248z);
+styleInject(css_248z);
 
 var SortDirection;
 (function (SortDirection) {
@@ -206,30 +180,30 @@ const sortStyleIndex = [
     },
     {
         option: SortDirection.ascending,
-        upArrowStyle: classnames__default["default"](styles.active),
-        downArrowStyle: classnames__default["default"](styles.inactive),
+        upArrowStyle: classnames(styles.active),
+        downArrowStyle: classnames(styles.inactive),
     },
     {
         option: SortDirection.descending,
-        upArrowStyle: classnames__default["default"](styles.inactive),
-        downArrowStyle: classnames__default["default"](styles.active),
+        upArrowStyle: classnames(styles.inactive),
+        downArrowStyle: classnames(styles.active),
     },
 ];
 function SortIcon({ direction }) {
     const foundStyle = sortStyleIndex.find(style => style.option === direction);
     const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
-    return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.sortIcon) },
-        React__default["default"].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React__default["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["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" }))));
+    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" }))));
 }
 
 function Header({ table, stickyHeader, sorting, onRowClick, }) {
-    const stickyClass = classnames__default["default"]({ [styles$3.stickyHeader]: stickyHeader });
-    return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(headerGroup => (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
+    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 => {
         const isSorting = sorting && header.column.getCanSort();
-        return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
-                ? classnames__default["default"](styles$3.sortableColumn, {
+        return (React.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: {
@@ -237,47 +211,47 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
                 minWidth: header.column.columnDef.minSize,
                 maxWidth: header.column.columnDef.maxSize,
                 paddingRight: isSorting ? 0 : "inherit",
-            } }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
-            React__default["default"].createElement(React__default["default"].Fragment, null,
-                reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+            } }, header.isPlaceholder ? null : (React.createElement("div", null,
+            React.createElement(React.Fragment, null,
+                flexRender(header.column.columnDef.header, header.getContext()),
                 header.column.getCanSort() &&
                     sorting &&
-                    !header.column.getIsSorted() && (React__default["default"].createElement(SortIcon, { direction: SortDirection.equilibrium }))),
+                    !header.column.getIsSorted() && (React.createElement(SortIcon, { direction: SortDirection.equilibrium }))),
             {
-                asc: React__default["default"].createElement(SortIcon, { direction: SortDirection.ascending }),
-                desc: React__default["default"].createElement(SortIcon, { direction: SortDirection.descending }),
+                asc: React.createElement(SortIcon, { direction: SortDirection.ascending }),
+                desc: React.createElement(SortIcon, { direction: SortDirection.descending }),
             }[header.column.getIsSorted()]))));
     }))))));
 }
 
 function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading = false, }) {
-    const [ref, { exactWidth }] = jobberHooks.useResizeObserver();
+    const [ref, { exactWidth }] = useResizeObserver();
     const tableSettings = createTableSettings(data, columns, {
         pagination,
         sorting,
     });
-    const tableClasses = classnames__default["default"](styles$3.table, {
+    const tableClasses = classnames(styles$3.table, {
         [styles$3.pinFirstColumn]: pinFirstColumn,
     });
-    const table = reactTable.useReactTable(tableSettings);
-    return (React__default["default"].createElement("div", { className: styles$3.dataTableContainer },
-        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 }),
+    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 }),
                 table.getRowModel().rows.length &&
                     exactWidth &&
-                    exactWidth > jobberHooks.Breakpoints.small ? (React__default["default"].createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+                    exactWidth > Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
         table.getRowModel().rows.length &&
             exactWidth &&
-            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
+            exactWidth <= Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
+        pagination && (React.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); } }))));
 }
 
 const mockContainerWidth = (exactWidth) => {
-    jest.spyOn(jobberHooks__namespace, "useResizeObserver").mockReturnValue([
+    jest.spyOn(jobberHooks, "useResizeObserver").mockReturnValue([
         { current: null },
         {
             width: 1200,
@@ -288,9 +262,4 @@ const mockContainerWidth = (exactWidth) => {
     ]);
 };
 
-Object.defineProperty(exports, 'createColumnHelper', {
-  enumerable: true,
-  get: function () { return reactTable.createColumnHelper; }
-});
-exports.DataTable = DataTable;
-exports.mockContainerWidth = mockContainerWidth;
+export { DataTable, mockContainerWidth };

package/dist/DatePicker/index.js

@@ -1,20 +1,12 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DatePicker = require('../DatePicker-49213434.js');
-require('react');
-require('classnames');
-require('react-datepicker');
-require('@jobber/hooks/useRefocusOnActivator');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Typography-83915c54.js');
-require('../Button-db6114a6.js');
-require('react-router-dom');
-require('../Icon-405a216c.js');
-require('@jobber/design');
-require('lodash/omit');
-
-
-
-exports.DatePicker = DatePicker.DatePicker;
+export { D as DatePicker } from '../DatePicker-9f1e19a5.js';
+import 'react';
+import 'classnames';
+import 'react-datepicker';
+import '@jobber/hooks/useRefocusOnActivator';
+import '../style-inject.es-a0e1a0ba.js';
+import '../Typography-09952a2f.js';
+import '../Button-319d8fa0.js';
+import 'react-router-dom';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import 'lodash/omit';