@jobber/components 4.0.0 → 4.0.1-pre.4

package/dist/DataTable/index.js

@@ -2,25 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var reactTable = require('@tanstack/react-table');
 var classnames = require('classnames');
 var React = require('react');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Option = require('../Option-fdf21181.js');
-var Button = require('../Button-cd30df0f.js');
-var Text = require('../Text-e012fb46.js');
-require('../FormField-76068c0b.js');
+var tslib_es6 = require('../tslib.es6-efe27175.js');
+var Option = require('../Option-13150f4a.js');
+var Button = require('../Button-16e043ec.js');
+var Text = require('../Text-7ce00adb.js');
+require('../FormField-1e444bb6.js');
 require('uuid');
 require('react-hook-form');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../InputValidation-06a8a7ba.js');
+require('../InputValidation-97dd0dcf.js');
 require('framer-motion');
-require('../Spinner-e4e9c8eb.js');
+require('../Spinner-ae4c8a85.js');
 require('react-router-dom');
-require('../Typography-fbe0ed6e.js');
+require('../Typography-9262511f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -50,17 +50,15 @@ var css$3 = "._1gVnBnwO8rEyN5yXaSAnJz {\n  position: relative;\n  border: var(--
 var styles$3 = {"dataTableContainer":"_1gVnBnwO8rEyN5yXaSAnJz","tableContainer":"_2FsiaQmYMKjm0oAa_Dm7Jv","table":"_2EflglZd2SRwkv61KFJrg9","pinFirstColumn":"QRm47JXl1pWi9jKv7PNPG","stickyHeader":"_3VxR0m_2LtggJeSToEDE2y","pinFirstHeaderSortable":"_1RROVWbMjf1ZfuVpquC4OS","sortableColumn":"_2uM74VHCeNJuZjyD_SPXR3","clickableRow":"_3P5HGvBjzojCSGgtBjPjJi","emptyState":"_1n7mmwsIdhl2OvMBcfI1st"};
 styleInject_es.styleInject(css$3);
 
-function Body(_a) {
-    var _b;
-    var table = _a.table, onRowClick = _a.onRowClick, emptyState = _a.emptyState;
-    var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$3.clickableRow] = !!onRowClick, _b));
-    var handleRowClick = React.useCallback(function (row) { return function () {
+function Body({ table, onRowClick, emptyState, }) {
+    const bodyRowClasses = classnames__default["default"]({ [styles$3.clickableRow]: !!onRowClick });
+    const handleRowClick = React.useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
         onRowClick(row);
-    }; }, [onRowClick]);
-    return table.getRowModel().rows.length ? (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(function (row) {
-        return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(function (cell) {
+    }, [onRowClick]);
+    return 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: {
                     width: cell.column.getSize(),
                     minWidth: cell.column.columnDef.minSize,
@@ -72,30 +70,30 @@ function Body(_a) {
 
 function createTableSettings(data, columns, options) {
     var _a;
-    var _b = getPaginationSettings(options === null || options === void 0 ? void 0 : options.pagination), paginationState = _b.state, restPaginationSettings = tslib_es6.__rest(_b, ["state"]);
-    var _c = getSortingSettings(options === null || options === void 0 ? void 0 : options.sorting), sortingState = _c.state, restSortingSettings = tslib_es6.__rest(_c, ["state"]);
-    var initialPatinationState;
+    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"]);
+    let initialPatinationState;
     if ((_a = options === null || options === void 0 ? void 0 : options.pagination) === null || _a === void 0 ? void 0 : _a.itemsPerPage) {
         initialPatinationState = {
             pageIndex: 0,
             pageSize: options.pagination.itemsPerPage[0],
         };
     }
-    var tableSettings = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({ data: data,
-        columns: columns, state: tslib_es6.__assign(tslib_es6.__assign({}, paginationState), sortingState), getCoreRowModel: reactTable.getCoreRowModel() }, restPaginationSettings), restSortingSettings), { initialState: {
+    const tableSettings = Object.assign(Object.assign(Object.assign({ data,
+        columns, state: Object.assign(Object.assign({}, paginationState), sortingState), getCoreRowModel: reactTable.getCoreRowModel() }, restPaginationSettings), restSortingSettings), { initialState: {
             pagination: initialPatinationState,
         } });
     return tableSettings;
 }
 function getPaginationSettings(pagination) {
-    var paginationSettings = {};
+    const paginationSettings = {};
     if (!pagination) {
         return paginationSettings;
     }
-    var manualPagination = pagination.manualPagination;
+    const { manualPagination } = pagination;
     paginationSettings.manualPagination = manualPagination;
     if (manualPagination) {
-        var state = pagination.state, pageCount = pagination.pageCount, onPaginationChange = pagination.onPaginationChange;
+        const { state, pageCount, onPaginationChange } = pagination;
         paginationSettings.state = { pagination: state };
         paginationSettings.pageCount = pageCount;
         paginationSettings.onPaginationChange = onPaginationChange;
@@ -106,13 +104,13 @@ function getPaginationSettings(pagination) {
     return paginationSettings;
 }
 function getSortingSettings(sorting) {
-    var sortingSettings = {};
+    const sortingSettings = {};
     if (!sorting)
         return sortingSettings;
-    var manualSorting = sorting.manualSorting;
+    const { manualSorting } = sorting;
     sortingSettings.manualSorting = manualSorting;
     if (manualSorting) {
-        var onSortingChange = sorting.onSortingChange, state = sorting.state, enableSortingRemoval = sorting.enableSortingRemoval;
+        const { onSortingChange, state, enableSortingRemoval } = sorting;
         sortingSettings.state = { sorting: state };
         sortingSettings.onSortingChange = onSortingChange;
         sortingSettings.enableSortingRemoval = enableSortingRemoval !== null && enableSortingRemoval !== void 0 ? enableSortingRemoval : true;
@@ -127,54 +125,46 @@ var css$2 = "._1z97TFF0phXLaqvqXHnYJf {\n  display: -ms-flexbox;\n  display: fle
 var styles$2 = {"pagination":"_1z97TFF0phXLaqvqXHnYJf","paginationInfo":"_12APWOsSPQzcBXU_VtquSF","paginationNav":"_36ZeprNonyJdE1RQA8egHT","paginationSelect":"e6F11Aovvn4caXYkkQNRo","paginationSelectLabel":"_3ACIaIFtTSOkMt-sRN5VOO","paginationButtons":"JBRw_pSS6W6hGIxxLABwo"};
 styleInject_es.styleInject(css$2);
 
-var defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
-function Pagination(_a) {
-    var table = _a.table, itemsPerPage = _a.itemsPerPage, totalItems = _a.totalItems;
-    var _b = table.getState().pagination, pageIndex = _b.pageIndex, pageSize = _b.pageSize;
-    var totalRows = totalItems;
-    var firstPosition = pageIndex * pageSize + 1;
-    var secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
-    var itemsPerPageOptions = React.useMemo(function () { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(function (item) { return String(item); })) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
+const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
+function Pagination({ table, itemsPerPage, totalItems, }) {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    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 },
             React__default["default"].createElement(Text.Text, null, "No items")))) : (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.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: function (value) {
+                React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
-                    }, size: "small" }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
+                    }, 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: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage() }),
-                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: function () { return table.nextPage(); }, disabled: !table.getCanNextPage() })))));
+                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() })))));
 }
 
 var css$1 = "._39TtNRcIeia0yD1gs7L70 {\n  padding: var(--space-base);\n  border-top: var(--border-thick) solid var(--color-border);\n}\n\n._1AkupnXfMaD9bSt37OKKpW {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  font-weight: bold;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: left;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(ltr) {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW *:dir(rtl) {\n  text-align: right;\n}\n\n._1AkupnXfMaD9bSt37OKKpW * {\n  text-align: start;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n  text-align: left;\n}\n\n[dir=\"ltr\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"ltr\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: right;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(ltr),\n._2tNVzbdCh57muuCvPjItW9 *:dir(ltr) {\n  text-align: right;\n}\n\n[dir=\"rtl\"] ._2tNVzbdCh57muuCvPjItW9,[dir=\"rtl\"] \n._2tNVzbdCh57muuCvPjItW9 * {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9:dir(rtl),\n._2tNVzbdCh57muuCvPjItW9 *:dir(rtl) {\n  text-align: left;\n}\n\n._2tNVzbdCh57muuCvPjItW9,\n._2tNVzbdCh57muuCvPjItW9 * {\n  font-weight: normal;\n  text-align: end;\n}\n\n._1AkupnXfMaD9bSt37OKKpW:not(:last-child) {\n  padding-bottom: var(--space-small);\n}\n";
 var styles$1 = {"mobileFooterContainer":"_39TtNRcIeia0yD1gs7L70","mobileFooterRow":"_1AkupnXfMaD9bSt37OKKpW","mobileFooterRowData":"_2tNVzbdCh57muuCvPjItW9"};
 styleInject_es.styleInject(css$1);
 
-var DesktopView = function (_a) {
-    var table = _a.table;
-    return (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(function (header) { return (React__default["default"].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()))); }))); })));
-};
-var HandheldView = function (_a) {
-    var table = _a.table;
-    return (React__default["default"].createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("div", { key: footerGroup.id }, footerGroup.headers
-        .filter(function (header) { return header.column.columnDef.footer; })
-        .map(function (header, index) { return (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())))))); }))); })));
-};
-var Footer = function (_a) {
-    var table = _a.table, _b = _a.viewType, viewType = _b === void 0 ? "handheld" : _b;
-    var hasFooter = table
+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: {
+        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
+    .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()))))))))))));
+const Footer = ({ table, viewType = "handheld", }) => {
+    const hasFooter = table
         .getAllColumns()
-        .find(function (column) { return column.columnDef.footer; });
+        .find(column => column.columnDef.footer);
     if (hasFooter) {
         return viewType === "handheld" ? (React__default["default"].createElement(HandheldView, { table: table })) : (React__default["default"].createElement(DesktopView, { table: table }));
     }
@@ -191,7 +181,7 @@ var SortDirection;
     SortDirection[SortDirection["descending"] = 1] = "descending";
     SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
 })(SortDirection || (SortDirection = {}));
-var sortStyleIndex = [
+const sortStyleIndex = [
     {
         option: SortDirection.equilibrium,
         upArrowStyle: undefined,
@@ -208,27 +198,23 @@ var sortStyleIndex = [
         downArrowStyle: classnames__default["default"](styles.active),
     },
 ];
-function SortIcon(_a) {
-    var direction = _a.direction;
-    var foundStyle = sortStyleIndex.find(function (style) { return style.option === direction; });
-    var finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
+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" }))));
 }
 
-function Header(_a) {
-    var _b;
-    var table = _a.table, stickyHeader = _a.stickyHeader, sorting = _a.sorting, onRowClick = _a.onRowClick;
-    var stickyClass = classnames__default["default"]((_b = {}, _b[styles$3.stickyHeader] = stickyHeader, _b));
-    return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(function (headerGroup) { return (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
-        var _a;
-        var isSorting = sorting && header.column.getCanSort();
+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 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, (_a = {},
-                    _a[styles$3.pinFirstHeaderSortable] = !!onRowClick,
-                    _a))
+                ? classnames__default["default"](styles$3.sortableColumn, {
+                    [styles$3.pinFirstHeaderSortable]: !!onRowClick,
+                })
                 : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
                 width: header.getSize(),
                 minWidth: header.column.columnDef.minSize,
@@ -244,23 +230,21 @@ function Header(_a) {
                 asc: React__default["default"].createElement(SortIcon, { direction: SortDirection.ascending }),
                 desc: React__default["default"].createElement(SortIcon, { direction: SortDirection.descending }),
             }[header.column.getIsSorted()]))));
-    }))); })));
+    }))))));
 }
 
-function DataTable(_a) {
-    var _b;
-    var data = _a.data, columns = _a.columns, pagination = _a.pagination, sorting = _a.sorting, height = _a.height, stickyHeader = _a.stickyHeader, pinFirstColumn = _a.pinFirstColumn, onRowClick = _a.onRowClick, emptyState = _a.emptyState;
-    var _c = tslib_es6.__read(jobberHooks.useResizeObserver(), 2), ref = _c[0], exactWidth = _c[1].exactWidth;
-    var tableSettings = createTableSettings(data, columns, {
-        pagination: pagination,
-        sorting: sorting,
+function DataTable({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, }) {
+    const [ref, { exactWidth }] = jobberHooks.useResizeObserver();
+    const tableSettings = createTableSettings(data, columns, {
+        pagination,
+        sorting,
+    });
+    const tableClasses = classnames__default["default"](styles$3.table, {
+        [styles$3.pinFirstColumn]: pinFirstColumn,
     });
-    var tableClasses = classnames__default["default"](styles$3.table, (_b = {},
-        _b[styles$3.pinFirstColumn] = pinFirstColumn,
-        _b));
-    var table = reactTable.useReactTable(tableSettings);
+    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: height }, ref: ref },
+        React__default["default"].createElement("div", { 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, height: height ? height * 0.7 : undefined, emptyState: emptyState }),
@@ -275,7 +259,7 @@ function DataTable(_a) {
                 : table.getCoreRowModel().rows.length }))));
 }
 
-var mockContainerWidth = function (exactWidth) {
+const mockContainerWidth = (exactWidth) => {
     jest.spyOn(jobberHooks__namespace, "useResizeObserver").mockReturnValue([
         { current: null },
         {
@@ -287,22 +271,6 @@ var mockContainerWidth = function (exactWidth) {
     ]);
 };
 
-Object.defineProperty(exports, 'ColumnDef', {
-  enumerable: true,
-  get: function () { return reactTable.ColumnDef; }
-});
-Object.defineProperty(exports, 'PaginationState', {
-  enumerable: true,
-  get: function () { return reactTable.PaginationState; }
-});
-Object.defineProperty(exports, 'Row', {
-  enumerable: true,
-  get: function () { return reactTable.Row; }
-});
-Object.defineProperty(exports, 'SortingState', {
-  enumerable: true,
-  get: function () { return reactTable.SortingState; }
-});
 Object.defineProperty(exports, 'createColumnHelper', {
   enumerable: true,
   get: function () { return reactTable.createColumnHelper; }

package/dist/DataTable/test-utilities/helpers.d.ts

@@ -1 +1 @@
-export declare const mockContainerWidth: (exactWidth?: number | undefined) => void;
+export declare const mockContainerWidth: (exactWidth?: number) => void;

package/dist/DataTable/types.d.ts

@@ -47,7 +47,7 @@ export interface DefaultPagination {
     manualPagination: false;
     itemsPerPage?: number[];
 }
-export declare type PaginationType = DefaultPagination | ManualPagination;
+export type PaginationType = DefaultPagination | ManualPagination;
 export interface ManualSorting {
     /**
      * Represents the current sorting state of the table.
@@ -80,4 +80,4 @@ export interface DefaultSorting {
      */
     manualSorting: false;
 }
-export declare type SortingType = DefaultSorting | ManualSorting;
+export type SortingType = DefaultSorting | ManualSorting;

package/dist/DatePicker/DatePicker.d.ts

@@ -45,6 +45,6 @@ interface DatePickerModalProps extends BaseDatePickerProps {
 interface DatePickerInlineProps extends BaseDatePickerProps {
     readonly inline?: boolean;
 }
-declare type DatePickerProps = XOR<DatePickerModalProps, DatePickerInlineProps>;
+type DatePickerProps = XOR<DatePickerModalProps, DatePickerInlineProps>;
 export declare function DatePicker({ onChange, activator, inline, selected, readonly, disabled, fullWidth, smartAutofocus, maxDate, minDate, }: DatePickerProps): JSX.Element;
 export {};

package/dist/DatePicker/index.js

@@ -2,17 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var DatePicker = require('../DatePicker-7c67e8d2.js');
-require('../tslib.es6-5b50eb8e.js');
+var DatePicker = require('../DatePicker-af21ae91.js');
 require('react');
 require('classnames');
 require('react-datepicker');
 require('@jobber/hooks');
 require('../style-inject.es-dcee06b6.js');
-require('../Typography-fbe0ed6e.js');
-require('../Button-cd30df0f.js');
+require('../Typography-9262511f.js');
+require('../Button-16e043ec.js');
 require('react-router-dom');
-require('../Icon-d5ad1a6d.js');
+require('../Icon-405a216c.js');
 require('@jobber/design');
 require('lodash');
 

package/dist/{DatePicker-7c67e8d2.js → DatePicker-af21ae91.js}

@@ -1,13 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
 var React = require('react');
 var classnames = require('classnames');
 var ReactDatePicker = require('react-datepicker');
 var jobberHooks = require('@jobber/hooks');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
-var Typography = require('./Typography-fbe0ed6e.js');
-var Button = require('./Button-cd30df0f.js');
+var Typography = require('./Typography-9262511f.js');
+var Button = require('./Button-16e043ec.js');
 var lodash = require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -20,8 +19,7 @@ var css = "@charset \"UTF-8\";\n/* stylelint-disable */\n.react-datepicker__year
 var styles = {"react-datepicker__month--selecting-range":"_3SAj4620ZxCTMkRgUKj7Z7","datePickerWrapper":"_3X5QGNINiwa77cbEb9mEzZ","fullWidth":"_1DR69DMoP49Ux6kq7LUoGR","datePicker":"_2oJDyYPkJRLltnyYbYWifk","inline-left":"_1YVIHRF3DM3t3EzyRTDvbj","inline-right":"_1YVIHRF3DM3t3EzyRTDvbj","inline":"_1YVIHRF3DM3t3EzyRTDvbj","header":"_2XaofeiwYq6Mon3dJkoPd_","month":"_2lX9pishvsqKh-Hj11F0yo"};
 styleInject_es.styleInject(css);
 
-function DatePickerCustomHeader(_a) {
-    var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled;
+function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
     return (React__default["default"].createElement("div", { className: styles.header },
         React__default["default"].createElement(Button.Button, { onClick: decreaseMonth, disabled: prevMonthButtonDisabled, icon: "arrowLeft", ariaLabel: "Previous Month", variation: "work", type: "tertiary" }),
         React__default["default"].createElement("div", { className: styles.month },
@@ -32,63 +30,60 @@ function DatePickerCustomHeader(_a) {
         React__default["default"].createElement(Button.Button, { onClick: increaseMonth, disabled: nextMonthButtonDisabled, icon: "arrowRight", ariaLabel: "Next Month", variation: "work", type: "tertiary" })));
 }
 
-var DatePickerActivator = React.forwardRef(InternalActivator);
+const DatePickerActivator = React.forwardRef(InternalActivator);
 function InternalActivator(props, ref) {
-    var activator = props.activator, fullWidth = props.fullWidth;
-    var newActivatorProps = lodash.omit(props, ["activator", "fullWidth"]);
+    const { activator, fullWidth } = props;
+    const newActivatorProps = lodash.omit(props, ["activator", "fullWidth"]);
     if (activator) {
         if (React.isValidElement(activator)) {
-            var isAComponent = typeof activator.type === "function";
-            return React.cloneElement(activator, tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, newActivatorProps), (isAComponent && { fullWidth: fullWidth })), { ref: ref }));
+            const isAComponent = typeof activator.type === "function";
+            return React.cloneElement(activator, Object.assign(Object.assign(Object.assign({}, newActivatorProps), (isAComponent && { fullWidth: fullWidth })), { ref }));
         }
         else {
             return activator(props);
         }
     }
     else {
-        return (React__default["default"].createElement(Button.Button, tslib_es6.__assign({ variation: "work", type: "tertiary", icon: "calendar", ariaLabel: "Open Datepicker", fullWidth: fullWidth }, newActivatorProps)));
+        return (React__default["default"].createElement(Button.Button, Object.assign({ variation: "work", type: "tertiary", icon: "calendar", ariaLabel: "Open Datepicker", fullWidth: fullWidth }, newActivatorProps)));
     }
 }
 
 function useFocusOnSelectedDate() {
-    var ref = React.useRef();
+    const ref = React.useRef();
     function focusOnSelectedDate() {
         var _a;
-        var selectedDateClass = ".react-datepicker__day--selected";
-        var selectedDate = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(selectedDateClass);
+        const selectedDateClass = ".react-datepicker__day--selected";
+        const selectedDate = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(selectedDateClass);
         if (selectedDate instanceof HTMLDivElement) {
             selectedDate.focus();
         }
     }
-    return { ref: ref, focusOnSelectedDate: focusOnSelectedDate };
+    return { ref, focusOnSelectedDate };
 }
 
-function DatePicker(_a) {
-    var _b, _c;
-    var onChange = _a.onChange, activator = _a.activator, inline = _a.inline, selected = _a.selected, _d = _a.readonly, readonly = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fullWidth, fullWidth = _f === void 0 ? false : _f, _g = _a.smartAutofocus, smartAutofocus = _g === void 0 ? true : _g, maxDate = _a.maxDate, minDate = _a.minDate;
-    var _h = useFocusOnSelectedDate(), ref = _h.ref, focusOnSelectedDate = _h.focusOnSelectedDate;
-    var _j = tslib_es6.__read(React.useState(false), 2), open = _j[0], setOpen = _j[1];
-    var wrapperClassName = classnames__default["default"](styles.datePickerWrapper, (_b = {
-            // react-datepicker uses this class name to not close the date picker when
-            // the activator is clicked
-            // https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L905
-            //
-            // It uses react-onclickoutside package and declaring some elements to be
-            // ignored via said class name
-            // https://www.npmjs.com/package/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
-            "react-datepicker-ignore-onclickoutside": !inline
-        },
-        _b[styles.fullWidth] = fullWidth,
-        _b));
-    var datePickerClassNames = classnames__default["default"](styles.datePicker, (_c = {},
-        _c[styles.inline] = inline,
-        _c));
+function DatePicker({ onChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, }) {
+    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
+    const [open, setOpen] = React.useState(false);
+    const wrapperClassName = classnames__default["default"](styles.datePickerWrapper, {
+        // react-datepicker uses this class name to not close the date picker when
+        // the activator is clicked
+        // https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L905
+        //
+        // It uses react-onclickoutside package and declaring some elements to be
+        // ignored via said class name
+        // https://www.npmjs.com/package/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
+        "react-datepicker-ignore-onclickoutside": !inline,
+        [styles.fullWidth]: fullWidth,
+    });
+    const datePickerClassNames = classnames__default["default"](styles.datePicker, {
+        [styles.inline]: inline,
+    });
     if (smartAutofocus) {
         jobberHooks.useRefocusOnActivator(open);
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default["default"].createElement("div", { className: wrapperClassName, ref: ref },
-        React__default["default"].createElement(ReactDatePicker__default["default"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: function (props) { return React__default["default"].createElement(DatePickerCustomHeader, tslib_es6.__assign({}, props)); }, onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"] })));
+        React__default["default"].createElement(ReactDatePicker__default["default"], { calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, minDate: minDate, useWeekdaysShort: true, customInput: React__default["default"].createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default["default"].createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: ["P", "PP", "PPP", "MMM dd yyyy", "MMMM dd yyyy"] })));
     function handleChange(value) {
         onChange(value);
     }

package/dist/DescriptionList/index.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Typography = require('../Typography-fbe0ed6e.js');
+var Typography = require('../Typography-9262511f.js');
 require('classnames');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -16,14 +15,10 @@ var css = "._2v2alHUPCR1uRMbtusHoPI {\n  margin: 0;\n}\n\n._3F8K2c6jcFhxba3JNK5d
 var styles = {"descriptionList":"_2v2alHUPCR1uRMbtusHoPI","termGroup":"_3F8K2c6jcFhxba3JNK5dok"};
 styleInject_es.styleInject(css);
 
-function DescriptionList(_a) {
-    var data = _a.data;
-    return (React__default["default"].createElement("dl", { className: styles.descriptionList }, data.map(function (_a) {
-        var _b = tslib_es6.__read(_a, 2), term = _b[0], description = _b[1];
-        return (React__default["default"].createElement("div", { key: term, className: styles.termGroup },
-            React__default["default"].createElement(Typography.Typography, { element: "dt", textColor: "heading", size: "base" }, term),
-            React__default["default"].createElement(Typography.Typography, { element: "dd", textColor: "text", size: "base" }, description)));
-    })));
+function DescriptionList({ data }) {
+    return (React__default["default"].createElement("dl", { className: styles.descriptionList }, data.map(([term, description]) => (React__default["default"].createElement("div", { key: term, className: styles.termGroup },
+        React__default["default"].createElement(Typography.Typography, { element: "dt", textColor: "heading", size: "base" }, term),
+        React__default["default"].createElement(Typography.Typography, { element: "dd", textColor: "text", size: "base" }, description))))));
 }
 
 exports.DescriptionList = DescriptionList;

package/dist/Disclosure/index.js

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
 var React = require('react');
 var styleInject_es = require('../style-inject.es-dcee06b6.js');
-var Heading = require('../Heading-a9a66964.js');
-var Icon = require('../Icon-d5ad1a6d.js');
-require('../Typography-fbe0ed6e.js');
+var Heading = require('../Heading-7b203f7f.js');
+var Icon = require('../Icon-405a216c.js');
+require('../Typography-9262511f.js');
 require('classnames');
 require('@jobber/design');
 
@@ -19,11 +18,10 @@ var css = "._359GUq8c3Ojy8ytOlbeU_8 {\n  -webkit-transform-origin: 50% 47.5% 0;\
 var styles = {"arrowIconWrapper":"_359GUq8c3Ojy8ytOlbeU_8","details":"M6AheKOqP9CP5eAwb3x6r","summary":"_1YM_nAG8-pDqub2waVYnIF","summaryWrap":"QzfYliV58f72hx9_z2PMi","content":"_1tmHsYFm14xDJs73GzHDpJ","openAnimation":"_3BXkEbBVu3FDvlRn5fKdbH"};
 styleInject_es.styleInject(css);
 
-function Disclosure(_a) {
-    var children = _a.children, title = _a.title, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b;
-    var _c = tslib_es6.__read(React.useState(defaultOpen), 2), isOpen = _c[0], setOpen = _c[1];
-    var _d = tslib_es6.__read(React.useState(false), 2), isMounted = _d[0], setMount = _d[1];
-    React.useEffect(function () {
+function Disclosure({ children, title, defaultOpen = false, }) {
+    const [isOpen, setOpen] = React.useState(defaultOpen);
+    const [isMounted, setMount] = React.useState(false);
+    React.useEffect(() => {
         setMount(true);
     }, []);
     return (React__default["default"].createElement("details", { open: isOpen, onToggle: onToggle, className: styles.details },
@@ -35,7 +33,7 @@ function Disclosure(_a) {
         React__default["default"].createElement("span", { className: styles.content }, children)));
     function onToggle(event) {
         event.preventDefault();
-        var currentToggleState = event.target.open;
+        const { open: currentToggleState } = event.target;
         if (!isMounted || currentToggleState === isOpen) {
             return;
         }

package/dist/Divider/index.js

@@ -15,16 +15,14 @@ var css = "._1lHHuy-WH0jlwJ_lGhdiii {\n  --divider-width: var(--border-base);\n
 var styles = {"divider":"_1lHHuy-WH0jlwJ_lGhdiii","large":"_1La5_WQqF0YS39yJ_pZZ3e","larger":"_3ZdPUgFJAWOcd4dAR08Wlc","largest":"siB9kwvA8N088YvEHsPgj","horizontal":"_2OCfx1xRlcq8zW27BOHOD8","vertical":"gxDpfq11BuK6UcrhdsKuQ"};
 styleInject_es.styleInject(css);
 
-function Divider(_a) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? "base" : _c, _d = _a.direction, direction = _d === void 0 ? "horizontal" : _d;
-    var className = classnames__default["default"](styles.divider, (_b = {},
-        _b[styles.large] = size === "large",
-        _b[styles.larger] = size === "larger",
-        _b[styles.largest] = size === "largest",
-        _b[styles.horizontal] = direction == "horizontal",
-        _b[styles.vertical] = direction == "vertical",
-        _b));
+function Divider({ size = "base", direction = "horizontal", }) {
+    const className = classnames__default["default"](styles.divider, {
+        [styles.large]: size === "large",
+        [styles.larger]: size === "larger",
+        [styles.largest]: size === "largest",
+        [styles.horizontal]: direction == "horizontal",
+        [styles.vertical]: direction == "vertical",
+    });
     return React__default["default"].createElement("div", { className: className, role: "none presentation" });
 }