@jobber/components 4.92.0 → 5.0.1

package/dist/DataTable/test-utilities/index.mjs

@@ -0,0 +1,238 @@
+export { m as mockContainerWidth } from '../../helpers-DKpEJGRK.js';
+import '../../useResizeObserver-CMUjE-Ai.js';
+import '../../_commonjsHelpers-BpF068F9.js';
+import 'react';
+import '../../debounce-DINXpsd8.js';
+import '../../isObjectLike-denQiXs1.js';
+import '../../isSymbol-JSYWlEAg.js';
+
+const data = [
+    {
+        name: "Eddard",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Catelyn",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Jon Snow",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Robert",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Rickon",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Robert",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "No",
+    },
+    {
+        name: "Cercei",
+        house: "Lannister",
+        region: "Westerlands",
+        sigil: "Golden Lion",
+        isAlive: "Yes",
+    },
+    {
+        name: "Sansa",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Arya",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Bran",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Joffrey",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "No",
+    },
+    {
+        name: "Myrcella",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "Yes",
+    },
+    {
+        name: "Tommen",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "Yes",
+    },
+];
+const columns = [
+    {
+        accessorKey: "name",
+        cell: info => info.getValue(),
+        header: "Name",
+    },
+    {
+        accessorKey: "house",
+        cell: info => info.getValue(),
+        header: "House",
+    },
+    {
+        accessorKey: "region",
+        cell: info => info.getValue(),
+        header: "Region",
+    },
+    {
+        accessorKey: "sigil",
+        cell: info => info.getValue(),
+        header: "Sigil",
+    },
+    {
+        accessorKey: "isAlive",
+        accessorFn: row => (row.name === "Jon Snow" ? "Resurrected" : row.isAlive),
+        cell: info => info.getValue(),
+        header: "Alive",
+    },
+];
+const royaltyReportColumns = [
+    {
+        id: "franchiseName",
+        accessorKey: "franchiseName",
+        header: "Franchise Name",
+        footer: "Report Totals ($)",
+    },
+    {
+        id: "payment",
+        accessorKey: "payment",
+        header: "Payment ($)",
+        footer: "10,050,400",
+    },
+    {
+        id: "royaltyRate",
+        accessorKey: "royaltyRate",
+        header: "Royalty Rate (%)",
+    },
+    {
+        id: "royaltyAmount",
+        accessorKey: "royaltyAmount",
+        header: "Royalty Amount ($)",
+        footer: "300,000",
+    },
+];
+const royaltyReportData = [
+    {
+        franchiseName: "The Patch Boys of Macon and Warner Robins",
+        payment: "1,000,000",
+        royaltyRate: 5,
+        royaltyAmount: "50,000",
+    },
+    {
+        franchiseName: "The Patch Boys of San Antonio",
+        payment: "2,000,000",
+        royaltyRate: 5,
+        royaltyAmount: "40,000",
+    },
+    {
+        franchiseName: "The Patch Boys of Phoenix",
+        payment: "1,250,000",
+        royaltyRate: 8,
+        royaltyAmount: "20,000",
+    },
+];
+const columnSizeData = [
+    {
+        name: "Daenerys Stormborn of House Targaryen, the First of Her Name, Queen of the Andals and the First Men, Protector of the Seven Kingdoms, the Mother of Dragons, the Khaleesi of the Great Grass Sea, the Unburnt, the Breaker of Chains.",
+        points: "1,000,000",
+        chance: 5,
+        power: "50,000",
+    },
+    {
+        name: "Aegon “The Conqueror” Targaryen and Rhaenys Targaryen",
+        points: "2,000,000",
+        chance: 5,
+        power: "40,000",
+    },
+    {
+        name: "Jaehaerys “The Old King” Targaryen and Alysanne Targaryen",
+        points: "1,250,000",
+        chance: 8,
+        power: "20,000",
+    },
+];
+const columSizeColumns = [
+    {
+        id: "name",
+        accessorKey: "name",
+        header: "Name",
+        footer: "Totals",
+        enableResizing: false,
+        cell: (info) => info.getValue(),
+        size: 538,
+        minSize: 438,
+        maxSize: 538,
+    },
+    {
+        id: "points",
+        accessorKey: "points",
+        header: "Points",
+        footer: "10,050,400",
+        cell: (info) => info.getValue(),
+        size: 268,
+        minSize: 168,
+        maxSize: 268,
+    },
+    {
+        id: "chance",
+        accessorKey: "chance",
+        header: "Chance (%)",
+        cell: (info) => info.getValue(),
+        size: 268,
+        minSize: 168,
+        maxSize: 268,
+    },
+    {
+        id: "power",
+        accessorKey: "power",
+        header: "Power",
+        footer: "300,000",
+        cell: (info) => info.getValue(),
+        size: 268,
+        minSize: 168,
+        maxSize: 268,
+    },
+];
+
+export { columSizeColumns, columnSizeData, columns, data, royaltyReportColumns, royaltyReportData };

package/dist/DataTable-BYVsSEdr.js

@@ -0,0 +1,238 @@
+'use strict';
+
+var reactTable = require('@tanstack/react-table');
+var classnames = require('classnames');
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver-vl1y7Akv.js');
+var Glimmer = require('./Glimmer-CrUBdCft.js');
+var tslib_es6 = require('./tslib.es6-BJhbHdCW.js');
+var Option = require('./Option-Dve2T456.js');
+var Button = require('./Button-noDSqvxX.js');
+var Text = require('./Text-B2v3VC_B.js');
+
+var styles$3 = {"dataTableContainer":"m5A5oeRFaMs-","tableContainer":"cY-5BrIIUg8-","table":"y8xnHe7fwrI-","pinFirstColumn":"t8QYvdtkQXQ-","emptyStateCell":"UGku9HGjQn0-","stickyHeader":"Y21JuHX6fhk-","pinFirstHeaderSortable":"PJEX8dlqCMA-","sortableColumn":"_9ps4aWGs8W0-","clickableRow":"_59XEEB8l5pI-","emptyState":"a2BGGBkY5J8-"};
+
+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.Glimmer, null)))))))));
+}
+
+function Body({ table, onRowClick, emptyState, loading, }) {
+    const bodyRowClasses = classnames({ [styles$3.clickableRow]: !!onRowClick });
+    const handleRowClick = React.useCallback((row) => () => {
+        if (onRowClick == undefined)
+            return;
+        onRowClick(row);
+    }, [onRowClick]);
+    if (loading) {
+        return React.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: {
+                    width: cell.column.getSize(),
+                    minWidth: cell.column.columnDef.minSize,
+                    maxWidth: cell.column.columnDef.maxSize,
+                } }, reactTable.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)))))));
+}
+
+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"]);
+    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],
+        };
+    }
+    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) {
+    const paginationSettings = {};
+    if (!pagination) {
+        return paginationSettings;
+    }
+    const { manualPagination } = pagination;
+    paginationSettings.manualPagination = manualPagination;
+    if (manualPagination) {
+        const { state, pageCount, onPaginationChange } = pagination;
+        paginationSettings.state = { pagination: state };
+        paginationSettings.pageCount = pageCount;
+        paginationSettings.onPaginationChange = onPaginationChange;
+    }
+    else {
+        paginationSettings.getPaginationRowModel = reactTable.getPaginationRowModel();
+    }
+    return paginationSettings;
+}
+function getSortingSettings(sorting) {
+    const sortingSettings = {};
+    if (!sorting)
+        return sortingSettings;
+    const { manualSorting } = sorting;
+    sortingSettings.manualSorting = manualSorting;
+    if (manualSorting) {
+        const { onSortingChange, state, enableSortingRemoval } = sorting;
+        sortingSettings.state = { sorting: state };
+        sortingSettings.onSortingChange = onSortingChange;
+        sortingSettings.enableSortingRemoval = enableSortingRemoval !== null && enableSortingRemoval !== void 0 ? enableSortingRemoval : true;
+    }
+    else {
+        sortingSettings.getSortedRowModel = reactTable.getSortedRowModel();
+    }
+    return sortingSettings;
+}
+
+var styles$2 = {"pagination":"zn0VRVhObt0-","paginationInfo":"_1d4uh90gfSI-","paginationNav":"_5Hh01rJlUDs-","paginationSelect":"N5rXFBBzPxk-","paginationSelectLabel":"Uq2TUaf9ang-","paginationButtons":"PeLwUZ2wWPI-"};
+
+const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
+function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, }) {
+    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.createElement("div", { className: styles$2.pagination },
+        React.createElement("div", { className: styles$2.paginationInfo }, !loading ? React.createElement(Text.Text, null, "No items") : React.createElement(Glimmer.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(Option.Select, { value: table.getState().pagination.pageSize, onChange: value => {
+                        table.setPageSize(Number(value));
+                    }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Option.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.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
+                        table.previousPage();
+                        onPageChange();
+                    }, disabled: !table.getCanPreviousPage() }),
+                React.createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: () => {
+                        table.nextPage();
+                        onPageChange();
+                    }, disabled: !table.getCanNextPage() })))));
+}
+
+var styles$1 = {"mobileFooterContainer":"_0FexNr-lIgA-","mobileFooterRow":"PKlqQjoQ6DY-","mobileFooterRowData":"ItTcVYUbVNM-"};
+
+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.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.createElement(React.Fragment, null, index === 0 ? (React.createElement("div", { className: styles$1.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React.createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
+    reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+    React.createElement("div", { className: styles$1.mobileFooterRowData }, reactTable.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 null;
+};
+
+var styles = {"sortIcon":"wtb8keLFxgc-","active":"TUkZiGiR6hc-","inactive":"HkPlMeyz3rM-"};
+
+var SortDirection;
+(function (SortDirection) {
+    SortDirection[SortDirection["ascending"] = 0] = "ascending";
+    SortDirection[SortDirection["descending"] = 1] = "descending";
+    SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
+})(SortDirection || (SortDirection = {}));
+const sortStyleIndex = [
+    {
+        option: SortDirection.equilibrium,
+        upArrowStyle: undefined,
+        downArrowStyle: undefined,
+    },
+    {
+        option: SortDirection.ascending,
+        upArrowStyle: classnames(styles.active),
+        downArrowStyle: classnames(styles.inactive),
+    },
+    {
+        option: SortDirection.descending,
+        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.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({ [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();
+        const headingCellInlineStyle = {
+            width: header.getSize(),
+            minWidth: header.column.columnDef.minSize,
+            maxWidth: header.column.columnDef.maxSize,
+        };
+        if (isSorting) {
+            headingCellInlineStyle.paddingRight = 0;
+        }
+        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: headingCellInlineStyle }, header.isPlaceholder ? null : (React.createElement("div", null,
+            reactTable.flexRender(header.column.columnDef.header, header.getContext()),
+            header.column.getCanSort() &&
+                sorting &&
+                !header.column.getIsSorted() && (React.createElement(SortIcon, { direction: SortDirection.equilibrium })),
+            {
+                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 }] = useResizeObserver.useResizeObserver.useResizeObserver();
+    const tableSettings = createTableSettings(data, columns, {
+        pagination,
+        sorting,
+    });
+    const tableClasses = classnames(styles$3.table, {
+        [styles$3.pinFirstColumn]: pinFirstColumn,
+    });
+    const table = reactTable.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 > useResizeObserver.useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+        table.getRowModel().rows.length &&
+            exactWidth &&
+            exactWidth <= useResizeObserver.useResizeObserver.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); } }))));
+}
+
+exports.DataTable = DataTable;