@homebound/beam 2.348.0 → 2.349.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -52,7 +52,7 @@ function Accordion(props) {
|
|
|
52
52
|
return ((0, jsx_runtime_1.jsxs)("div", { ...tid.container, css: {
|
|
53
53
|
...Css_1.Css.bGray300.if(topBorder).bt.if(bottomBorder).bb.$,
|
|
54
54
|
...(size ? Css_1.Css.wPx(accordionSizes[size]).$ : {}),
|
|
55
|
-
}, children: [titleOnClick ? ((0, jsx_runtime_1.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, css: Css_1.Css.df.$, children: [(0, jsx_runtime_1.jsx)("button", { ...tid.title, disabled: disabled, css: { ...touchableStyle, ...Css_1.Css.
|
|
55
|
+
}, children: [titleOnClick ? ((0, jsx_runtime_1.jsxs)("div", { ...focusProps, "aria-controls": id, "aria-expanded": expanded, css: Css_1.Css.df.$, children: [(0, jsx_runtime_1.jsx)("button", { ...tid.title, disabled: disabled, css: { ...touchableStyle, ...Css_1.Css.fg1.$ }, onClick: titleOnClick, children: title }), (0, jsx_runtime_1.jsx)("button", { ...tid.toggle, disabled: disabled, css: { ...touchableStyle, ...Css_1.Css.px2.jcfe.if(compact).pxPx(10).$ }, onClick: toggle, children: (0, jsx_runtime_1.jsx)(RotatingChevronIcon, { expanded: expanded }) })] })) : ((0, jsx_runtime_1.jsxs)("button", { ...tid.title, ...focusProps, "aria-controls": id, "aria-expanded": expanded, disabled: disabled, css: { ...Css_1.Css.w100.$, ...touchableStyle }, onClick: toggle, children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fg1.tl.$, children: title }), (0, jsx_runtime_1.jsx)(RotatingChevronIcon, { expanded: expanded })] })), (0, jsx_runtime_1.jsx)("div", { ...tid.details, id: id, "aria-hidden": !expanded, css: Css_1.Css.overflowHidden.h(contentHeight).add("transition", "height 250ms ease-in-out").$, children: expanded && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.px2.pb2.pt1.if(omitPadding).p0.$, ref: contentRef, ...tid.content, children: children })) })] }));
|
|
56
56
|
}
|
|
57
57
|
exports.Accordion = Accordion;
|
|
58
58
|
function RotatingChevronIcon(props) {
|
|
@@ -18,12 +18,9 @@ export declare const defaultPage: OffsetAndLimit;
|
|
|
18
18
|
interface PaginationProps {
|
|
19
19
|
page: readonly [PageNumberAndSize, Dispatch<PageNumberAndSize>] | readonly [OffsetAndLimit, Dispatch<OffsetAndLimit>];
|
|
20
20
|
totalCount: number;
|
|
21
|
+
pageSizes?: number[];
|
|
21
22
|
}
|
|
22
23
|
export declare function Pagination(props: PaginationProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
23
24
|
export declare function toLimitAndOffset(page: PageSettings): OffsetAndLimit;
|
|
24
25
|
export declare function toPageNumberSize(page: PageSettings): PageNumberAndSize;
|
|
25
|
-
export declare const pageOptions: {
|
|
26
|
-
id: number;
|
|
27
|
-
name: string;
|
|
28
|
-
}[];
|
|
29
26
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.toPageNumberSize = exports.toLimitAndOffset = exports.Pagination = exports.defaultPage = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
5
5
|
const components_1 = require("./");
|
|
6
6
|
const Css_1 = require("../Css");
|
|
@@ -9,9 +9,10 @@ const utils_1 = require("../utils");
|
|
|
9
9
|
// Use OffsetAndLimit as our default b/c that's what backend filters expect
|
|
10
10
|
exports.defaultPage = { offset: 0, limit: 100 };
|
|
11
11
|
function Pagination(props) {
|
|
12
|
-
const { totalCount } = props;
|
|
12
|
+
const { totalCount, pageSizes = [100, 500, 1000] } = props;
|
|
13
13
|
const [page, setPage] = props.page;
|
|
14
14
|
const { pageSize, pageNumber } = toPageNumberSize(page);
|
|
15
|
+
const pageOptions = pageSizes.map((size) => ({ id: size, name: String(size) }));
|
|
15
16
|
const hasPrevPage = pageNumber > 1;
|
|
16
17
|
const hasNextPage = pageNumber < totalCount / pageSize;
|
|
17
18
|
// Create the `1 - 100 of 1000` or `0 of 0`
|
|
@@ -29,7 +30,7 @@ function Pagination(props) {
|
|
|
29
30
|
}
|
|
30
31
|
}
|
|
31
32
|
const tid = (0, utils_1.useTestIds)(props, "pagination");
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray200.bt.xs.gray500.px2.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:
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.bGray200.bt.xs.gray500.px2.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: 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.Blue700 : 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.Blue700 : Css_1.Palette.Gray200, onClick: () => set({ pageNumber: pageNumber + 1, pageSize }), disabled: !hasNextPage, ...tid.nextIcon })] })] }));
|
|
33
34
|
}
|
|
34
35
|
exports.Pagination = Pagination;
|
|
35
36
|
function toLimitAndOffset(page) {
|
|
@@ -51,5 +52,3 @@ function toPageNumberSize(page) {
|
|
|
51
52
|
};
|
|
52
53
|
}
|
|
53
54
|
exports.toPageNumberSize = toPageNumberSize;
|
|
54
|
-
// Make a list of 100/500/1000 for the user to choose
|
|
55
|
-
exports.pageOptions = [100, 500, 1000].map((num) => ({ id: num, name: String(num) }));
|