@jobber/components 4.90.4 → 4.90.5

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

@@ -0,0 +1,238 @@
+export { m as mockContainerWidth } from '../../helpers-BX_7EKw7.js';
+import '../../useResizeObserver-DzMx2b66.js';
+import '../../_commonjsHelpers-Dw5gAsMR.js';
+import 'react';
+import '../../debounce-DHeCta_M.js';
+import '../../isObjectLike-53d8VfgU.js';
+import '../../isSymbol-Co3-vUC1.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-BhmuLCau.js

@@ -0,0 +1,236 @@
+import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import classnames from 'classnames';
+import React, { useCallback, useMemo } from 'react';
+import { u as useResizeObserver } from './useResizeObserver-DzMx2b66.js';
+import { G as Glimmer } from './Glimmer-IWgpoHGI.js';
+import { _ as __rest } from './tslib.es6-5nrZ19JS.js';
+import { S as Select, a as SelectOption } from './Option-C87IriRr.js';
+import { B as Button } from './Button-BH4Hhr2S.js';
+import { T as Text } from './Text-CfxmOdM-.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, null)))))))));
+}
+
+function Body({ table, onRowClick, emptyState, loading, }) {
+    const bodyRowClasses = classnames({ [styles$3.clickableRow]: !!onRowClick });
+    const handleRowClick = 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,
+                } }, 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 = __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 = {
+            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: 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 = 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 = 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 = 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.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.createElement(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,
+    } }, 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 }, 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.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,
+            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();
+    const tableSettings = createTableSettings(data, columns, {
+        pagination,
+        sorting,
+    });
+    const tableClasses = classnames(styles$3.table, {
+        [styles$3.pinFirstColumn]: pinFirstColumn,
+    });
+    const table = useReactTable(tableSettings);
+    return (React.createElement("div", { className: styles$3.dataTableContainer },
+        React.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$3.tableContainer, style: { height }, ref: ref },
+            React.createElement("table", { className: tableClasses },
+                React.createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
+                React.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
+                table.getRowModel().rows.length &&
+                    exactWidth &&
+                    exactWidth > useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table, viewType: "desktop" })) : null)),
+        table.getRowModel().rows.length &&
+            exactWidth &&
+            exactWidth <= useResizeObserver.Breakpoints.small ? (React.createElement(Footer, { table: table })) : null,
+        pagination && (React.createElement(Pagination, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
+                ? 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); } }))));
+}
+
+export { DataTable as D };