@homebound/beam 2.280.0 → 2.281.0

package/dist/components/Pagination.d.ts

@@ -1,19 +1,27 @@
-import { Dispatch, SetStateAction } from "react";
-export type PageSettings = {
-    page: number;
-    perPage: number;
+import { Dispatch } from "react";
+/**
+ * Page settings, either a pageNumber+pageSize or offset+limit.
+ *
+ * This component is implemented in terms of "page number + page size",
+ * but our backend wants offset+limit, so we accept both and translate.
+ */
+export type PageSettings = PageNumberAndSize | OffsetAndLimit;
+export type PageNumberAndSize = {
+    pageNumber: number;
+    pageSize: number;
 };
+export type OffsetAndLimit = {
+    offset: number;
+    limit: number;
+};
+export declare const defaultPage: OffsetAndLimit;
 interface PaginationProps {
-    label: string;
+    page: readonly [PageNumberAndSize, Dispatch<PageNumberAndSize>] | readonly [OffsetAndLimit, Dispatch<OffsetAndLimit>];
     totalCount: number;
-    settings: PageSettings;
-    setSettings: Dispatch<SetStateAction<PageSettings>>;
 }
 export declare function Pagination(props: PaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function toFirstAndOffset(page: number, perPage: number): {
-    first: number;
-    offset: number;
-};
+export declare function toLimitAndOffset(page: PageSettings): OffsetAndLimit;
+export declare function toPageNumberSize(page: PageSettings): PageNumberAndSize;
 export declare const pageOptions: {
     id: number;
     name: string;

package/dist/components/Pagination.js

@@ -1,31 +1,55 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageOptions = exports.toFirstAndOffset = exports.Pagination = void 0;
+exports.pageOptions = exports.toPageNumberSize = exports.toLimitAndOffset = exports.Pagination = exports.defaultPage = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const components_1 = require("./");
 const Css_1 = require("../Css");
 const inputs_1 = require("../inputs");
 const utils_1 = require("../utils");
+// Use OffsetAndLimit as our default b/c that's what backend filters expect
+exports.defaultPage = { offset: 0, limit: 100 };
 function Pagination(props) {
-    const { label, settings, totalCount, setSettings } = props;
-    const { perPage, page } = settings;
-    const hasNextPage = (0, react_1.useMemo)(() => page < totalCount / perPage, [page, perPage, totalCount]);
+    const { totalCount } = props;
+    const [page, setPage] = props.page;
+    const { pageSize, pageNumber } = toPageNumberSize(page);
+    const hasPrevPage = pageNumber > 1;
+    const hasNextPage = pageNumber < totalCount / pageSize;
+    // Create the `1 - 100 of 1000` or `0 of 0`
+    const first = pageSize * (pageNumber - 1) + (totalCount ? 1 : 0);
+    const last = Math.min(pageSize * pageNumber, totalCount);
+    // When no rows, show '0 of 0' instead of '0 - 0 of 0'
+    const showLast = totalCount > 0;
+    // Convert the new page back to whatever format the caller wants
+    function set(newPage) {
+        if ("pageNumber" in props.page[0]) {
+            setPage(newPage);
+        }
+        else {
+            setPage(toLimitAndOffset(newPage));
+        }
+    }
     const tid = (0, utils_1.useTestIds)(props, "pagination");
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray300.bt.xs.gray500.px1.ml2.pt2.$, ...tid, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.perPageLabel, children: [label, " per page:"] }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(78).$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, ...tid.perPage, labelStyle: "hidden", label: `${label} per page`, options: exports.pageOptions, value: perPage, onSelect: (val) => {
-                        setSettings({ page: 1, perPage: val });
-                    } }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mla.mya.df.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageInfoLabel, children: [perPage * (page - 1) + 1, " ", hasNextPage ? `- ${perPage * page}` : "", " of ", totalCount, " ", label] }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { ...tid.previousIcon, icon: "chevronLeft", color: Css_1.Palette.LightBlue700, onClick: () => setSettings({ page: settings.page - 1, perPage }), disabled: settings.page === 1 }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { ...tid.nextIcon, icon: "chevronRight", color: Css_1.Palette.LightBlue700, onClick: () => setSettings({ page: settings.page + 1, perPage }), disabled: !hasNextPage })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray300.bt.xs.gray500.px1.ml2.pt2.$, ...tid, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageSizeLabel, children: "Page size:" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(78).$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: exports.pageOptions, value: pageSize, onSelect: (val) => set({ pageNumber: 1, pageSize: val }), ...tid.pageSize }) }), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mla.mya.df.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.mya.mr2.$, ...tid.pageInfoLabel, children: [first, " ", showLast ? `- ${last}` : "", " of ", totalCount] }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronLeft", color: hasPrevPage ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber - 1, pageSize }), disabled: !hasPrevPage, ...tid.previousIcon }), (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "chevronRight", color: hasNextPage ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber + 1, pageSize }), disabled: !hasNextPage, ...tid.nextIcon })] })] }));
 }
 exports.Pagination = Pagination;
-function toFirstAndOffset(page, perPage) {
-    return {
-        first: perPage,
-        // E.g. on first page the offset is 0, second page the offset is 100, then 200, etc.
-        offset: (page - 1) * perPage,
-    };
+function toLimitAndOffset(page) {
+    return "limit" in page
+        ? page
+        : {
+            // E.g. on first page the offset is 0, second page the offset is 100, then 200, etc.
+            offset: (page.pageNumber - 1) * page.pageSize,
+            limit: page.pageSize,
+        };
 }
-exports.toFirstAndOffset = toFirstAndOffset;
-// Make a list of 50/100/150/etc page sizes for the user to chose
-exports.pageOptions = Array(5)
-    .fill(0)
-    .map((_, i) => ({ id: (i + 1) * 50, name: ((i + 1) * 50).toString() }));
+exports.toLimitAndOffset = toLimitAndOffset;
+function toPageNumberSize(page) {
+    return "pageNumber" in page
+        ? page
+        : {
+            pageNumber: Math.floor(page.offset / page.limit) + 1,
+            pageSize: page.limit,
+        };
+}
+exports.toPageNumberSize = toPageNumberSize;
+// Make a list of 100/500/1000 for the user to choose
+exports.pageOptions = [100, 500, 1000].map((num) => ({ id: num, name: String(num) }));

package/dist/components/Tabs.js

@@ -40,7 +40,8 @@ function TabContent(props) {
     const uniqueValue = uniqueTabValue(selectedTab);
     return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
-    (0, jsx_runtime_1.jsx)(components_1.FullBleed, { children: (0, jsx_runtime_1.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, css: contentXss, children: isRouteTab(selectedTab) ? (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: selectedTab.path, render: selectedTab.render }) : selectedTab.render() }) }));
+    // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
+    (0, jsx_runtime_1.jsx)(components_1.FullBleed, { omitPadding: "paddingLeft" in contentXss || "paddingRight" in contentXss, children: (0, jsx_runtime_1.jsx)("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, css: contentXss, children: isRouteTab(selectedTab) ? (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: selectedTab.path, render: selectedTab.render }) : selectedTab.render() }) }));
 }
 exports.TabContent = TabContent;
 /** The top list of tabs. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.280.0",
+  "version": "2.281.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",