@homebound/beam 4.34.0 → 4.35.0
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.
- package/dist/index.cjs +325 -287
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +342 -304
- package/dist/index.js.map +1 -1
- package/dist/truss.css +2 -2
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -8474,6 +8474,12 @@ var RowState = class {
|
|
|
8474
8474
|
if (this.isParent) return this.selectedState === "checked";
|
|
8475
8475
|
return this.selected;
|
|
8476
8476
|
}
|
|
8477
|
+
/** This row's share of `TableState.selectedLeafRowCount`, see `GridDataRow.childrenCount`. */
|
|
8478
|
+
get selectedLeafRowCount() {
|
|
8479
|
+
if (this.isReservedKind || !this.selected) return 0;
|
|
8480
|
+
if (this.children?.some((c) => c.row.selectable !== false)) return 0;
|
|
8481
|
+
return this.row.childrenCount ?? 1;
|
|
8482
|
+
}
|
|
8477
8483
|
/** The UI state for checked/unchecked + "partially checked" for parents. */
|
|
8478
8484
|
get selectedState() {
|
|
8479
8485
|
if (this.isParent && this.hasSelectableChildren) {
|
|
@@ -9124,6 +9130,10 @@ var TableState = class {
|
|
|
9124
9130
|
get selectedRows() {
|
|
9125
9131
|
return this.rowStates.allStates.filter((rs) => rs.isSelected && !reservedRowKinds.includes(rs.row.kind));
|
|
9126
9132
|
}
|
|
9133
|
+
/** How many leaf rows are selected, for `GridTableLayout`'s selection summary; see `GridDataRow.childrenCount`. */
|
|
9134
|
+
get selectedLeafRowCount() {
|
|
9135
|
+
return this.rowStates.allStates.reduce((sum, rs) => sum + rs.selectedLeafRowCount, 0);
|
|
9136
|
+
}
|
|
9127
9137
|
/** Returns kept group row, with the latest kept children, if any. */
|
|
9128
9138
|
get keptRowGroup() {
|
|
9129
9139
|
return this.rowStates.get(KEPT_GROUP).row;
|
|
@@ -10027,6 +10037,9 @@ var GridTableApiImpl = class {
|
|
|
10027
10037
|
getSelectedRowsImpl(kind) {
|
|
10028
10038
|
return this.tableState.selectedRows.filter((rs) => !kind || rs.kind === kind).map((rs) => rs.row);
|
|
10029
10039
|
}
|
|
10040
|
+
getSelectedLeafRowCount() {
|
|
10041
|
+
return this.tableState.selectedLeafRowCount;
|
|
10042
|
+
}
|
|
10030
10043
|
// The `any` is not great, but getting the overload to handle the optional kind is annoying
|
|
10031
10044
|
getVisibleRows(kind) {
|
|
10032
10045
|
return this.getVisibleRowsImpl(kind ?? void 0);
|
|
@@ -25383,12 +25396,82 @@ var import_react134 = __toESM(require("react"), 1);
|
|
|
25383
25396
|
// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
|
|
25384
25397
|
var import_react118 = require("react");
|
|
25385
25398
|
|
|
25386
|
-
// src/components/
|
|
25387
|
-
var import_react117 = require("react");
|
|
25399
|
+
// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
|
|
25388
25400
|
var import_react_aria57 = require("react-aria");
|
|
25389
|
-
var import_react_stately17 = require("react-stately");
|
|
25390
25401
|
var import_runtime117 = require("@homebound/truss/runtime");
|
|
25391
25402
|
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
25403
|
+
function SelectionSummaryPill(props) {
|
|
25404
|
+
const {
|
|
25405
|
+
text,
|
|
25406
|
+
count,
|
|
25407
|
+
onClick,
|
|
25408
|
+
disabled = false,
|
|
25409
|
+
numberOnly = false,
|
|
25410
|
+
__storyState
|
|
25411
|
+
} = props;
|
|
25412
|
+
const tid = useTestIds(props, "selectionSummaryPill");
|
|
25413
|
+
const {
|
|
25414
|
+
hoverProps,
|
|
25415
|
+
isHovered: isHoveredFromEvents
|
|
25416
|
+
} = (0, import_react_aria57.useHover)({
|
|
25417
|
+
isDisabled: !!disabled
|
|
25418
|
+
});
|
|
25419
|
+
const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
|
|
25420
|
+
return maybeTooltip({
|
|
25421
|
+
title: resolveTooltip(disabled),
|
|
25422
|
+
placement: "top",
|
|
25423
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...(0, import_runtime117.trussProps)(pillStyles(!!disabled, isHovered, numberOnly)), ...hoverProps, ...tid, children: numberOnly ? /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
|
|
25424
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(CountBadge, { count, bgColor: disabled ? "rgba(201, 201, 201, 1)" /* Gray400 */ : "rgba(37, 99, 235, 1)" /* Blue600 */, ...tid.count }),
|
|
25425
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { className: "df fs0", ...tid.clear, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Icon, { icon: "x", color: disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */ }) })
|
|
25426
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
|
|
25427
|
+
text,
|
|
25428
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { ...(0, import_runtime117.trussProps)({
|
|
25429
|
+
color: ["color_var", {
|
|
25430
|
+
"--color": (0, import_runtime117.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
|
|
25431
|
+
}]
|
|
25432
|
+
}), ...tid.clear, children: "Clear" })
|
|
25433
|
+
] }) })
|
|
25434
|
+
});
|
|
25435
|
+
}
|
|
25436
|
+
function pillStyles(disabled, hovered, numberOnly) {
|
|
25437
|
+
return {
|
|
25438
|
+
fontWeight: "fw6",
|
|
25439
|
+
fontSize: "fz_14px",
|
|
25440
|
+
lineHeight: "lh_20px",
|
|
25441
|
+
display: "dif",
|
|
25442
|
+
alignItems: "aic",
|
|
25443
|
+
gap: "g_1",
|
|
25444
|
+
whiteSpace: "wsnw",
|
|
25445
|
+
borderStyle: "bss",
|
|
25446
|
+
borderWidth: "bw1",
|
|
25447
|
+
borderRadius: "brPill",
|
|
25448
|
+
paddingLeft: ["pl_var", {
|
|
25449
|
+
"--paddingLeft": `${numberOnly ? 19 : 15}px`
|
|
25450
|
+
}],
|
|
25451
|
+
paddingRight: "pr_15px",
|
|
25452
|
+
paddingTop: "pt_7px",
|
|
25453
|
+
paddingBottom: "pb_7px",
|
|
25454
|
+
borderColor: ["bc_var", {
|
|
25455
|
+
"--borderColor": "var(--b-surface-active-border)"
|
|
25456
|
+
}],
|
|
25457
|
+
color: ["color_var", {
|
|
25458
|
+
"--color": (0, import_runtime117.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
|
|
25459
|
+
}],
|
|
25460
|
+
backgroundColor: ["bgColor_var", {
|
|
25461
|
+
"--backgroundColor": (0, import_runtime117.maybeCssVar)(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
|
|
25462
|
+
}],
|
|
25463
|
+
...disabled ? {
|
|
25464
|
+
cursor: "cur_not_allowed"
|
|
25465
|
+
} : {}
|
|
25466
|
+
};
|
|
25467
|
+
}
|
|
25468
|
+
|
|
25469
|
+
// src/components/Table/components/EditColumnsButton.tsx
|
|
25470
|
+
var import_react117 = require("react");
|
|
25471
|
+
var import_react_aria58 = require("react-aria");
|
|
25472
|
+
var import_react_stately17 = require("react-stately");
|
|
25473
|
+
var import_runtime118 = require("@homebound/truss/runtime");
|
|
25474
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
25392
25475
|
function EditColumnsButton(props) {
|
|
25393
25476
|
const {
|
|
25394
25477
|
defaultOpen,
|
|
@@ -25402,7 +25485,7 @@ function EditColumnsButton(props) {
|
|
|
25402
25485
|
const buttonRef = (0, import_react117.useRef)(null);
|
|
25403
25486
|
const {
|
|
25404
25487
|
menuTriggerProps
|
|
25405
|
-
} = (0,
|
|
25488
|
+
} = (0, import_react_aria58.useMenuTrigger)({
|
|
25406
25489
|
isDisabled: !!disabled
|
|
25407
25490
|
}, state, buttonRef);
|
|
25408
25491
|
const tid = useTestIds(props, "columns");
|
|
@@ -25429,7 +25512,7 @@ function EditColumnsButton(props) {
|
|
|
25429
25512
|
const selectableOptionValues = options.map((option) => option.value);
|
|
25430
25513
|
return selectableOptionValues.some((option) => !selectedValues.includes(option));
|
|
25431
25514
|
}, [options, selectedValues]);
|
|
25432
|
-
return /* @__PURE__ */ (0,
|
|
25515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(OverlayTrigger, { ...props, trigger: sm ? {
|
|
25433
25516
|
icon: hasHiddenColumn ? "columnsBadged" : "columns",
|
|
25434
25517
|
variant: "outline"
|
|
25435
25518
|
} : {
|
|
@@ -25437,7 +25520,7 @@ function EditColumnsButton(props) {
|
|
|
25437
25520
|
label: "",
|
|
25438
25521
|
size: "md",
|
|
25439
25522
|
variant: "secondaryBlack"
|
|
25440
|
-
}, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0,
|
|
25523
|
+
}, menuTriggerProps, state, buttonRef, ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ...(0, import_runtime118.trussProps)({
|
|
25441
25524
|
display: "df",
|
|
25442
25525
|
flexDirection: "fdc",
|
|
25443
25526
|
backgroundColor: ["bgColor_var", {
|
|
@@ -25450,14 +25533,14 @@ function EditColumnsButton(props) {
|
|
|
25450
25533
|
maxHeight: "maxh_512px",
|
|
25451
25534
|
boxShadow: "bshBasic h_bshHover"
|
|
25452
25535
|
}), children: [
|
|
25453
|
-
/* @__PURE__ */ (0,
|
|
25454
|
-
/* @__PURE__ */ (0,
|
|
25455
|
-
/* @__PURE__ */ (0,
|
|
25456
|
-
option.tooltip ? /* @__PURE__ */ (0,
|
|
25536
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "dg gtc_1fr_auto g_2 pt2 pb2 pr2 pl2 fg1 mh0 oya", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_react117.Fragment, { children: [
|
|
25537
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "df aic g_4px mw0 pr1", children: [
|
|
25538
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "fw4 fz_14px lh_20px wsnw oh to_ellipsis mw0", children: option.label }),
|
|
25539
|
+
option.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
|
|
25457
25540
|
] }),
|
|
25458
|
-
/* @__PURE__ */ (0,
|
|
25541
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
|
|
25459
25542
|
] }, option.value)) }),
|
|
25460
|
-
/* @__PURE__ */ (0,
|
|
25543
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { ...(0, import_runtime118.trussProps)({
|
|
25461
25544
|
display: "df",
|
|
25462
25545
|
justifyContent: "jcc",
|
|
25463
25546
|
paddingTop: "pt2",
|
|
@@ -25469,7 +25552,7 @@ function EditColumnsButton(props) {
|
|
|
25469
25552
|
borderColor: ["bc_var", {
|
|
25470
25553
|
"--borderColor": "var(--b-surface-separator)"
|
|
25471
25554
|
}]
|
|
25472
|
-
}), children: /* @__PURE__ */ (0,
|
|
25555
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
|
|
25473
25556
|
] }) });
|
|
25474
25557
|
}
|
|
25475
25558
|
function closeMenuOnClickTooltip(tooltip, closeMenu) {
|
|
@@ -25481,7 +25564,7 @@ function closeMenuOnClickTooltip(tooltip, closeMenu) {
|
|
|
25481
25564
|
}
|
|
25482
25565
|
|
|
25483
25566
|
// src/components/Table/components/ViewToggleButton.tsx
|
|
25484
|
-
var
|
|
25567
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
25485
25568
|
function ViewToggleButton({ view, onChange, defaultOpen }) {
|
|
25486
25569
|
const { sm } = useBreakpoint();
|
|
25487
25570
|
const tid = useTestIds({}, "viewToggleButton");
|
|
@@ -25490,7 +25573,7 @@ function ViewToggleButton({ view, onChange, defaultOpen }) {
|
|
|
25490
25573
|
{ label: "Card", icon: "tile", onClick: () => onChange("card") }
|
|
25491
25574
|
];
|
|
25492
25575
|
const icon = view === "list" ? "projects" : "tile";
|
|
25493
|
-
return /* @__PURE__ */ (0,
|
|
25576
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
25494
25577
|
ButtonMenu,
|
|
25495
25578
|
{
|
|
25496
25579
|
trigger: sm ? { icon, variant: "outline" } : { icon, label: "", size: "md", variant: "secondaryBlack" },
|
|
@@ -25506,9 +25589,9 @@ var import_use_debounce7 = require("use-debounce");
|
|
|
25506
25589
|
var import_use_query_params = require("use-query-params");
|
|
25507
25590
|
|
|
25508
25591
|
// src/components/Pills/FilterPill/FilterPill.tsx
|
|
25509
|
-
var
|
|
25510
|
-
var
|
|
25511
|
-
var
|
|
25592
|
+
var import_react_aria59 = require("react-aria");
|
|
25593
|
+
var import_runtime119 = require("@homebound/truss/runtime");
|
|
25594
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
25512
25595
|
function FilterPill(props) {
|
|
25513
25596
|
const {
|
|
25514
25597
|
text,
|
|
@@ -25521,7 +25604,7 @@ function FilterPill(props) {
|
|
|
25521
25604
|
const {
|
|
25522
25605
|
hoverProps,
|
|
25523
25606
|
isHovered: isHoveredFromEvents
|
|
25524
|
-
} = (0,
|
|
25607
|
+
} = (0, import_react_aria59.useHover)({
|
|
25525
25608
|
isDisabled
|
|
25526
25609
|
});
|
|
25527
25610
|
const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
|
|
@@ -25529,13 +25612,13 @@ function FilterPill(props) {
|
|
|
25529
25612
|
return maybeTooltip({
|
|
25530
25613
|
title: resolveTooltip(disabled),
|
|
25531
25614
|
placement: "top",
|
|
25532
|
-
children: /* @__PURE__ */ (0,
|
|
25533
|
-
/* @__PURE__ */ (0,
|
|
25534
|
-
/* @__PURE__ */ (0,
|
|
25615
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("button", { type: "button", disabled: isDisabled, onClick, ...(0, import_runtime119.trussProps)(pillStyles2(isDisabled, isHovered)), ...hoverProps, ...tid, children: [
|
|
25616
|
+
/* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "tal oh d_negwebkit_box wbo_vertical to_ellipsis wlc_1 wbba", title: text, children: text }),
|
|
25617
|
+
/* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "fs0", ...tid.x, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { icon: "x", color: ink, inc: 2 }) })
|
|
25535
25618
|
] })
|
|
25536
25619
|
});
|
|
25537
25620
|
}
|
|
25538
|
-
function
|
|
25621
|
+
function pillStyles2(disabled, hovered) {
|
|
25539
25622
|
return {
|
|
25540
25623
|
fontWeight: "fw6",
|
|
25541
25624
|
fontSize: "fz_12px",
|
|
@@ -25550,10 +25633,10 @@ function pillStyles(disabled, hovered) {
|
|
|
25550
25633
|
paddingBottom: "pb_4px",
|
|
25551
25634
|
minHeight: "mh_24px",
|
|
25552
25635
|
color: ["color_var", {
|
|
25553
|
-
"--color": (0,
|
|
25636
|
+
"--color": (0, import_runtime119.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
|
|
25554
25637
|
}],
|
|
25555
25638
|
backgroundColor: ["bgColor_var", {
|
|
25556
|
-
"--backgroundColor": (0,
|
|
25639
|
+
"--backgroundColor": (0, import_runtime119.maybeCssVar)(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
|
|
25557
25640
|
}],
|
|
25558
25641
|
...disabled ? {
|
|
25559
25642
|
cursor: "cur_not_allowed"
|
|
@@ -25562,12 +25645,12 @@ function pillStyles(disabled, hovered) {
|
|
|
25562
25645
|
}
|
|
25563
25646
|
|
|
25564
25647
|
// src/components/Layout/GridTableLayout/FilterPanel.tsx
|
|
25565
|
-
var
|
|
25648
|
+
var import_runtime120 = require("@homebound/truss/runtime");
|
|
25566
25649
|
|
|
25567
25650
|
// src/components/Layout/GridTableLayout/GroupByField.tsx
|
|
25568
|
-
var
|
|
25651
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
25569
25652
|
function GroupByField({ value, setValue, options }) {
|
|
25570
|
-
return /* @__PURE__ */ (0,
|
|
25653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
|
|
25571
25654
|
SelectField,
|
|
25572
25655
|
{
|
|
25573
25656
|
label: "Group by",
|
|
@@ -25583,9 +25666,9 @@ function GroupByField({ value, setValue, options }) {
|
|
|
25583
25666
|
}
|
|
25584
25667
|
|
|
25585
25668
|
// src/components/Layout/GridTableLayout/FilterPanel.tsx
|
|
25586
|
-
var
|
|
25669
|
+
var import_jsx_runtime183 = require("react/jsx-runtime");
|
|
25587
25670
|
function FilterPanel(props) {
|
|
25588
|
-
return props.isOpen ? /* @__PURE__ */ (0,
|
|
25671
|
+
return props.isOpen ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FilterPanelOpen, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FilterPanelClosed, { ...props });
|
|
25589
25672
|
}
|
|
25590
25673
|
function FilterPanelOpen({
|
|
25591
25674
|
groupBy,
|
|
@@ -25600,7 +25683,7 @@ function FilterPanelOpen({
|
|
|
25600
25683
|
const withPagePadding = inDocumentScrollLayout && !insetHandled;
|
|
25601
25684
|
const activeFilterCount = getActiveFilterCount(filter ?? {});
|
|
25602
25685
|
const filterControls = filter && setFilter ? buildFilterControls(filterImpls, filter, setFilter, tid) : null;
|
|
25603
|
-
return /* @__PURE__ */ (0,
|
|
25686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
|
|
25604
25687
|
...{
|
|
25605
25688
|
display: "df",
|
|
25606
25689
|
alignItems: "aic",
|
|
@@ -25616,9 +25699,9 @@ function FilterPanelOpen({
|
|
|
25616
25699
|
},
|
|
25617
25700
|
...withPagePadding ? pageContentPaddingX : void 0
|
|
25618
25701
|
}), children: [
|
|
25619
|
-
groupBy && /* @__PURE__ */ (0,
|
|
25702
|
+
groupBy && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(GroupByField, { ...groupBy }) }),
|
|
25620
25703
|
filterControls,
|
|
25621
|
-
activeFilterCount > 0 && /* @__PURE__ */ (0,
|
|
25704
|
+
activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
|
|
25622
25705
|
] });
|
|
25623
25706
|
}
|
|
25624
25707
|
function FilterPanelClosed({
|
|
@@ -25634,7 +25717,7 @@ function FilterPanelClosed({
|
|
|
25634
25717
|
if (!filter || !setFilter) return null;
|
|
25635
25718
|
const pills = getFilterPills(filterImpls, filter);
|
|
25636
25719
|
if (pills.length === 0) return null;
|
|
25637
|
-
return /* @__PURE__ */ (0,
|
|
25720
|
+
return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("div", { ...(0, import_runtime120.trussProps)({
|
|
25638
25721
|
...{
|
|
25639
25722
|
display: "df",
|
|
25640
25723
|
gap: "g_1",
|
|
@@ -25644,15 +25727,15 @@ function FilterPanelClosed({
|
|
|
25644
25727
|
},
|
|
25645
25728
|
...withPagePadding ? pageContentPaddingX : void 0
|
|
25646
25729
|
}), children: [
|
|
25647
|
-
pills.map((pill) => /* @__PURE__ */ (0,
|
|
25648
|
-
/* @__PURE__ */ (0,
|
|
25730
|
+
pills.map((pill) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(FilterPill, { text: pill.label, onClick: () => setFilter(pill.nextFilter), ...tid[`pill_${pill.key}`] }, pill.key)),
|
|
25731
|
+
/* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
|
|
25649
25732
|
] });
|
|
25650
25733
|
}
|
|
25651
25734
|
function buildFilterControls(filterImpls, filter, setFilter, testId) {
|
|
25652
25735
|
const entries = safeEntries(filterImpls);
|
|
25653
25736
|
const nonCheckbox = entries.filter(([_, f]) => !f.hideLabelInModal);
|
|
25654
25737
|
const checkbox = entries.filter(([_, f]) => f.hideLabelInModal);
|
|
25655
|
-
return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0,
|
|
25738
|
+
return [...nonCheckbox, ...checkbox].map(([key, f]) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { children: f.render(filter[key], (value) => setFilter(updateFilter(filter, key, value)), testId, false, false) }, key));
|
|
25656
25739
|
}
|
|
25657
25740
|
function buildFilterImpls(filterDefs) {
|
|
25658
25741
|
return Object.fromEntries(safeEntries(filterDefs).map(([key, fn]) => [key, fn(key)]));
|
|
@@ -25685,8 +25768,8 @@ function filterPillsForKey(key, f, filter) {
|
|
|
25685
25768
|
}
|
|
25686
25769
|
|
|
25687
25770
|
// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
|
|
25688
|
-
var
|
|
25689
|
-
var
|
|
25771
|
+
var import_runtime121 = require("@homebound/truss/runtime");
|
|
25772
|
+
var import_jsx_runtime184 = require("react/jsx-runtime");
|
|
25690
25773
|
function GridTableLayoutActionsComponent(props) {
|
|
25691
25774
|
const {
|
|
25692
25775
|
filter,
|
|
@@ -25702,7 +25785,8 @@ function GridTableLayoutActionsComponent(props) {
|
|
|
25702
25785
|
setView,
|
|
25703
25786
|
clearFilters,
|
|
25704
25787
|
searchApi,
|
|
25705
|
-
actions
|
|
25788
|
+
actions,
|
|
25789
|
+
selectionSummary = false
|
|
25706
25790
|
} = props;
|
|
25707
25791
|
const testId = useTestIds(props, "gridTableLayoutActions");
|
|
25708
25792
|
const filterTid = useTestIds({}, filterTestIdPrefix);
|
|
@@ -25739,10 +25823,10 @@ function GridTableLayoutActionsComponent(props) {
|
|
|
25739
25823
|
const showInlineControl = !inModal && !sm && controlCount === 1 && (hasGroupBy || !!(filter && setFilter));
|
|
25740
25824
|
const filterImpls = (0, import_react118.useMemo)(() => filterDefs ? buildFilterImpls(filterDefs) : {}, [filterDefs]);
|
|
25741
25825
|
const activeFilterCount = (0, import_react118.useMemo)(() => filter ? getFilterPills(filterImpls, filter).length : 0, [filter, filterImpls]);
|
|
25742
|
-
const searchTextField = /* @__PURE__ */ (0,
|
|
25826
|
+
const searchTextField = /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(TextField, { label: "Search", labelStyle: "hidden", value: searchValue, onChange: (v) => {
|
|
25743
25827
|
setSearchValue(v ?? "");
|
|
25744
25828
|
handleSearchDebounced(v ?? "");
|
|
25745
|
-
}, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ (0,
|
|
25829
|
+
}, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { icon: "search", color: "--b-on-surface-muted" /* OnSurfaceMuted */ }) });
|
|
25746
25830
|
if (searchApi) {
|
|
25747
25831
|
searchApi.current = {
|
|
25748
25832
|
clear: () => {
|
|
@@ -25754,7 +25838,7 @@ function GridTableLayoutActionsComponent(props) {
|
|
|
25754
25838
|
}
|
|
25755
25839
|
};
|
|
25756
25840
|
}
|
|
25757
|
-
return /* @__PURE__ */ (0,
|
|
25841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { ...(0, import_runtime121.trussProps)({
|
|
25758
25842
|
display: "df",
|
|
25759
25843
|
flexDirection: "fdc",
|
|
25760
25844
|
gap: "g_1",
|
|
@@ -25764,35 +25848,49 @@ function GridTableLayoutActionsComponent(props) {
|
|
|
25764
25848
|
paddingBottom: "pb3"
|
|
25765
25849
|
} : {}
|
|
25766
25850
|
}), children: [
|
|
25767
|
-
/* @__PURE__ */ (0,
|
|
25851
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { ...(0, import_runtime121.trussProps)({
|
|
25852
|
+
// Holds the row at the 40px button height, so a pill alone in it doesn't shift the table when it appears
|
|
25768
25853
|
...{
|
|
25769
25854
|
display: "df",
|
|
25770
25855
|
gap: "g_1",
|
|
25771
|
-
justifyContent: "jcsb"
|
|
25856
|
+
justifyContent: "jcsb",
|
|
25857
|
+
...selectionSummary ? {
|
|
25858
|
+
minHeight: "mh_40px"
|
|
25859
|
+
} : {}
|
|
25772
25860
|
},
|
|
25773
25861
|
...withPagePadding ? pageContentPaddingX : void 0
|
|
25774
25862
|
}), ...testId.toolbar, children: [
|
|
25775
|
-
/* @__PURE__ */ (0,
|
|
25776
|
-
!sm && hasSearch && /* @__PURE__ */ (0,
|
|
25777
|
-
sm && hasSearch && /* @__PURE__ */ (0,
|
|
25778
|
-
sm && hasFilterControls && /* @__PURE__ */ (0,
|
|
25779
|
-
showInlineControl && (groupBy ? /* @__PURE__ */ (0,
|
|
25780
|
-
!sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ (0,
|
|
25781
|
-
activeFilterCount > 0 && /* @__PURE__ */ (0,
|
|
25782
|
-
/* @__PURE__ */ (0,
|
|
25863
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "df g_12px aic", children: [
|
|
25864
|
+
!sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("div", { className: "w_244px", children: searchTextField }),
|
|
25865
|
+
sm && hasSearch && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(IconButton, { variant: "outline", icon: searchValue ? "searchBadged" : "search", label: "Search", onClick: () => setShowSearch(!showSearch), active: showSearch, ...testId.searchButton }),
|
|
25866
|
+
sm && hasFilterControls && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(IconButton, { variant: "outline", icon: activeFilterCount > 0 ? "filterBadged" : "filter", label: "Filter", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterSmallButton }),
|
|
25867
|
+
showInlineControl && (groupBy ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(GroupByField, { ...groupBy }) : filter && setFilter && buildFilterControls(filterImpls, filter, setFilter, filterTid)),
|
|
25868
|
+
!sm && hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Button, { label: "Filter", icon: "filter", size: "md", endAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "df aic g_1", children: [
|
|
25869
|
+
activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CountBadge, { count: activeFilterCount }),
|
|
25870
|
+
/* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
|
|
25783
25871
|
] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
|
|
25784
25872
|
] }),
|
|
25785
|
-
(hasHideableColumns || withCardView || !!actions?.length) && /* @__PURE__ */ (0,
|
|
25786
|
-
|
|
25787
|
-
|
|
25788
|
-
|
|
25873
|
+
(hasHideableColumns || withCardView || !!actions?.length || selectionSummary) && /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "df aic g_12px", children: [
|
|
25874
|
+
selectionSummary && api && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SelectionSummaryAction, { api, numberOnly: sm }),
|
|
25875
|
+
hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
|
|
25876
|
+
withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(ViewToggleButton, { view, onChange: setView }),
|
|
25877
|
+
!!actions?.length && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(HeaderActions, { actions, ...testId.actions })
|
|
25789
25878
|
] })
|
|
25790
25879
|
] }),
|
|
25791
|
-
sm && showSearch && /* @__PURE__ */ (0,
|
|
25792
|
-
hasFilterControls && !showInlineControl && /* @__PURE__ */ (0,
|
|
25880
|
+
sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("div", { ...(0, import_runtime121.trussProps)(withPagePadding ? pageContentPaddingX : void 0), children: searchTextField }),
|
|
25881
|
+
hasFilterControls && !showInlineControl && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
|
|
25793
25882
|
] });
|
|
25794
25883
|
}
|
|
25795
25884
|
var _GridTableLayoutActions = (0, import_react118.memo)(GridTableLayoutActionsComponent);
|
|
25885
|
+
function SelectionSummaryAction(props) {
|
|
25886
|
+
const {
|
|
25887
|
+
api,
|
|
25888
|
+
numberOnly
|
|
25889
|
+
} = props;
|
|
25890
|
+
const count = useComputed(() => api.getSelectedLeafRowCount(), [api]);
|
|
25891
|
+
if (count === 0) return null;
|
|
25892
|
+
return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SelectionSummaryPill, { text: `${count} ${pluralize(count, "Row")} Selected`, count, onClick: () => api.clearSelections(), numberOnly });
|
|
25893
|
+
}
|
|
25796
25894
|
|
|
25797
25895
|
// src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
|
|
25798
25896
|
var import_utils39 = require("@react-aria/utils");
|
|
@@ -25800,20 +25898,20 @@ var import_react127 = require("react");
|
|
|
25800
25898
|
|
|
25801
25899
|
// src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
|
|
25802
25900
|
var import_react125 = require("react");
|
|
25803
|
-
var
|
|
25901
|
+
var import_runtime124 = require("@homebound/truss/runtime");
|
|
25804
25902
|
|
|
25805
25903
|
// src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
|
|
25806
25904
|
var import_framer_motion3 = require("framer-motion");
|
|
25807
25905
|
var import_react122 = require("react");
|
|
25808
|
-
var
|
|
25906
|
+
var import_react_aria60 = require("react-aria");
|
|
25809
25907
|
var import_react_dom6 = require("react-dom");
|
|
25810
25908
|
|
|
25811
25909
|
// src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayoutHeightContext.tsx
|
|
25812
25910
|
var import_react119 = require("react");
|
|
25813
|
-
var
|
|
25911
|
+
var import_jsx_runtime185 = require("react/jsx-runtime");
|
|
25814
25912
|
var EnvironmentBannerLayoutHeightContext = (0, import_react119.createContext)(0);
|
|
25815
25913
|
function EnvironmentBannerLayoutHeightProvider({ value, children }) {
|
|
25816
|
-
return /* @__PURE__ */ (0,
|
|
25914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(EnvironmentBannerLayoutHeightContext.Provider, { value, children });
|
|
25817
25915
|
}
|
|
25818
25916
|
function useEnvironmentBannerLayoutHeight() {
|
|
25819
25917
|
return (0, import_react119.useContext)(EnvironmentBannerLayoutHeightContext);
|
|
@@ -25962,8 +26060,8 @@ function waitForRightPaneExit(onComplete) {
|
|
|
25962
26060
|
}
|
|
25963
26061
|
|
|
25964
26062
|
// src/components/Layout/RightPaneLayout/DocumentScrollRightPane.tsx
|
|
25965
|
-
var
|
|
25966
|
-
var
|
|
26063
|
+
var import_runtime122 = require("@homebound/truss/runtime");
|
|
26064
|
+
var import_jsx_runtime186 = require("react/jsx-runtime");
|
|
25967
26065
|
var __maybeInc20 = (inc) => {
|
|
25968
26066
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
25969
26067
|
};
|
|
@@ -26000,7 +26098,7 @@ function DocumentScrollRightPane({
|
|
|
26000
26098
|
if (isRightPaneOpen || !keepPaneLayout) return;
|
|
26001
26099
|
return waitForRightPaneExit(releaseAfterExit);
|
|
26002
26100
|
}, [isRightPaneOpen, keepPaneLayout, releaseAfterExit]);
|
|
26003
|
-
(0,
|
|
26101
|
+
(0, import_react_aria60.usePreventScroll)({
|
|
26004
26102
|
isDisabled: !mobile || !isRightPaneOpen
|
|
26005
26103
|
});
|
|
26006
26104
|
const slideX = mobile ? "100%" : paneWidth;
|
|
@@ -26016,7 +26114,7 @@ function DocumentScrollRightPane({
|
|
|
26016
26114
|
height: paneBounds.heightPx,
|
|
26017
26115
|
maxHeight: paneBounds.heightPx
|
|
26018
26116
|
} : void 0;
|
|
26019
|
-
const pane = /* @__PURE__ */ (0,
|
|
26117
|
+
const pane = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(import_framer_motion3.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
|
|
26020
26118
|
import_framer_motion3.motion.div,
|
|
26021
26119
|
{
|
|
26022
26120
|
ref: paneRef,
|
|
@@ -26024,7 +26122,7 @@ function DocumentScrollRightPane({
|
|
|
26024
26122
|
[rightPaneContentDataAttribute]: true
|
|
26025
26123
|
},
|
|
26026
26124
|
...tid,
|
|
26027
|
-
...(0,
|
|
26125
|
+
...(0, import_runtime122.mergeProps)(void 0, paneStyle, mobile ? {
|
|
26028
26126
|
position: "fixed",
|
|
26029
26127
|
right: "r_0",
|
|
26030
26128
|
bottom: "bot_0",
|
|
@@ -26034,20 +26132,20 @@ function DocumentScrollRightPane({
|
|
|
26034
26132
|
"--backgroundColor": "var(--b-surface)"
|
|
26035
26133
|
}],
|
|
26036
26134
|
zIndex: ["z_var", {
|
|
26037
|
-
"--zIndex": (0,
|
|
26135
|
+
"--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.rightPaneMobile)
|
|
26038
26136
|
}]
|
|
26039
26137
|
} : {
|
|
26040
26138
|
position: "fixed",
|
|
26041
26139
|
right: "r_0",
|
|
26042
26140
|
overflowY: "oya",
|
|
26043
26141
|
width: ["w_var", {
|
|
26044
|
-
"--width": (0,
|
|
26142
|
+
"--width": (0, import_runtime122.maybeCssVar)(__maybeInc20(paneWidthCss))
|
|
26045
26143
|
}],
|
|
26046
26144
|
backgroundColor: ["bgColor_var", {
|
|
26047
26145
|
"--backgroundColor": "var(--b-surface)"
|
|
26048
26146
|
}],
|
|
26049
26147
|
zIndex: ["z_var", {
|
|
26050
|
-
"--zIndex": (0,
|
|
26148
|
+
"--zIndex": (0, import_runtime122.maybeCssVar)(zIndices.rightPane)
|
|
26051
26149
|
}],
|
|
26052
26150
|
borderLeftStyle: "bls_solid",
|
|
26053
26151
|
borderLeftWidth: "blw_1px",
|
|
@@ -26083,8 +26181,8 @@ function DocumentScrollRightPane({
|
|
|
26083
26181
|
|
|
26084
26182
|
// src/components/Layout/RightPaneLayout/DocumentScrollRightPaneLayoutRoot.tsx
|
|
26085
26183
|
var import_react123 = require("react");
|
|
26086
|
-
var
|
|
26087
|
-
var
|
|
26184
|
+
var import_runtime123 = require("@homebound/truss/runtime");
|
|
26185
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
26088
26186
|
var NestedRightPaneLayoutContext = (0, import_react123.createContext)(false);
|
|
26089
26187
|
function DocumentScrollRightPaneLayoutRoot(props) {
|
|
26090
26188
|
const {
|
|
@@ -26095,11 +26193,11 @@ function DocumentScrollRightPaneLayoutRoot(props) {
|
|
|
26095
26193
|
const {
|
|
26096
26194
|
sm
|
|
26097
26195
|
} = useBreakpoint();
|
|
26098
|
-
return /* @__PURE__ */ (0,
|
|
26196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(NestedRightPaneLayoutContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
26099
26197
|
"div",
|
|
26100
26198
|
{
|
|
26101
26199
|
ref: anchorRef.setRef,
|
|
26102
|
-
...(0,
|
|
26200
|
+
...(0, import_runtime123.mergeProps)(void 0, {
|
|
26103
26201
|
[beamRightPaneWidthVar]: "0px",
|
|
26104
26202
|
[beamRightPaneContentMinVar]: "0px"
|
|
26105
26203
|
}, sm ? {
|
|
@@ -26146,7 +26244,7 @@ function resolveWithRightPaneOptions(withRightPane) {
|
|
|
26146
26244
|
}
|
|
26147
26245
|
|
|
26148
26246
|
// src/components/Layout/RightPaneLayout/DocumentScrollOverlayRightPaneLayout.tsx
|
|
26149
|
-
var
|
|
26247
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
26150
26248
|
function DocumentScrollOverlayRightPaneLayout({
|
|
26151
26249
|
children,
|
|
26152
26250
|
paneWidth = defaultDocumentScrollRightPaneWidth
|
|
@@ -26163,14 +26261,14 @@ function DocumentScrollOverlayRightPaneLayout({
|
|
|
26163
26261
|
console.warn("DocumentScrollOverlayRightPaneLayout is nested inside another document-scroll right-pane layout. Use a single layout (compose at the body; do not set withRightPane on both a parent and a nested layout).");
|
|
26164
26262
|
}
|
|
26165
26263
|
}, [nestedInLayout]);
|
|
26166
|
-
if (nestedInLayout) return /* @__PURE__ */ (0,
|
|
26167
|
-
return /* @__PURE__ */ (0,
|
|
26264
|
+
if (nestedInLayout) return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_jsx_runtime188.Fragment, { children });
|
|
26265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollRightPaneLayoutRoot, { anchorRef, tid, children: sm ? /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_jsx_runtime188.Fragment, { children: [
|
|
26168
26266
|
children,
|
|
26169
|
-
/* @__PURE__ */ (0,
|
|
26170
|
-
] }) : /* @__PURE__ */ (0,
|
|
26171
|
-
/* @__PURE__ */ (0,
|
|
26172
|
-
/* @__PURE__ */ (0,
|
|
26173
|
-
/* @__PURE__ */ (0,
|
|
26267
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollRightPane, { paneWidth, mobile: true })
|
|
26268
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_jsx_runtime188.Fragment, { children: [
|
|
26269
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { className: "df aifs wfc mw100", children: [
|
|
26270
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "w100 mwfc", ...tid.main, children }),
|
|
26271
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ref: spacerRef, "aria-hidden": true, ...(0, import_runtime124.mergeProps)(void 0, {
|
|
26174
26272
|
width: 0
|
|
26175
26273
|
}, {
|
|
26176
26274
|
flexShrink: "fs0",
|
|
@@ -26179,7 +26277,7 @@ function DocumentScrollOverlayRightPaneLayout({
|
|
|
26179
26277
|
transition: "transitionWidth"
|
|
26180
26278
|
}), ...tid.spacer })
|
|
26181
26279
|
] }),
|
|
26182
|
-
/* @__PURE__ */ (0,
|
|
26280
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollOverlayRightPaneHost, { anchorRef: anchorRef.ref, spacerRef, paneWidth })
|
|
26183
26281
|
] }) });
|
|
26184
26282
|
}
|
|
26185
26283
|
function DocumentScrollOverlayRightPaneHost(props) {
|
|
@@ -26219,11 +26317,11 @@ function DocumentScrollOverlayRightPaneHost(props) {
|
|
|
26219
26317
|
document.documentElement.style.setProperty(beamFloatingRightOffsetVar, "0px");
|
|
26220
26318
|
};
|
|
26221
26319
|
}, [anchorRef, keepOverlayChrome, paneWidthCss]);
|
|
26222
|
-
return /* @__PURE__ */ (0,
|
|
26320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(DocumentScrollRightPane, { paneWidth, mobile: false, anchorRef });
|
|
26223
26321
|
}
|
|
26224
26322
|
|
|
26225
26323
|
// src/components/Modal/ModalFullBleed.tsx
|
|
26226
|
-
var
|
|
26324
|
+
var import_runtime125 = require("@homebound/truss/runtime");
|
|
26227
26325
|
var import_react126 = require("react");
|
|
26228
26326
|
function ModalFullBleed({
|
|
26229
26327
|
children,
|
|
@@ -26237,7 +26335,7 @@ function ModalFullBleed({
|
|
|
26237
26335
|
className,
|
|
26238
26336
|
style
|
|
26239
26337
|
} = children.props;
|
|
26240
|
-
return (0, import_react126.cloneElement)(children, (0,
|
|
26338
|
+
return (0, import_react126.cloneElement)(children, (0, import_runtime125.mergeProps)(className, style, {
|
|
26241
26339
|
...{
|
|
26242
26340
|
containerType: "ctis"
|
|
26243
26341
|
},
|
|
@@ -26247,8 +26345,8 @@ function ModalFullBleed({
|
|
|
26247
26345
|
}
|
|
26248
26346
|
|
|
26249
26347
|
// src/components/Layout/GridTableLayout/GridTableLayoutHost.tsx
|
|
26250
|
-
var
|
|
26251
|
-
var
|
|
26348
|
+
var import_runtime126 = require("@homebound/truss/runtime");
|
|
26349
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
26252
26350
|
var __maybeInc21 = (inc) => {
|
|
26253
26351
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
26254
26352
|
};
|
|
@@ -26272,9 +26370,9 @@ function GridTableLayoutHost(props) {
|
|
|
26272
26370
|
testIds,
|
|
26273
26371
|
children
|
|
26274
26372
|
};
|
|
26275
|
-
if (host.kind === "modal") return /* @__PURE__ */ (0,
|
|
26276
|
-
if (host.kind === "document-scroll") return /* @__PURE__ */ (0,
|
|
26277
|
-
return /* @__PURE__ */ (0,
|
|
26373
|
+
if (host.kind === "modal") return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ModalHost, { ...shared, host });
|
|
26374
|
+
if (host.kind === "document-scroll") return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DocumentScrollHost, { ...shared, rightPane });
|
|
26375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ScrollableParentHost, { ...shared, isVirtualized });
|
|
26278
26376
|
}
|
|
26279
26377
|
function ModalHost(props) {
|
|
26280
26378
|
const {
|
|
@@ -26285,15 +26383,15 @@ function ModalHost(props) {
|
|
|
26285
26383
|
testIds,
|
|
26286
26384
|
children
|
|
26287
26385
|
} = props;
|
|
26288
|
-
return /* @__PURE__ */ (0,
|
|
26289
|
-
/* @__PURE__ */ (0,
|
|
26386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ModalFullBleed, { omitPadding: true, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ref: tableWrapperRef, ...testIds.tableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: "wmaxc mw100", children: [
|
|
26387
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ActionsBar, { actionsRef: tableActionsRef, xss: {
|
|
26290
26388
|
...{
|
|
26291
26389
|
position: "sticky",
|
|
26292
26390
|
top: "top0",
|
|
26293
26391
|
left: "l_0",
|
|
26294
26392
|
width: "w_100cqw",
|
|
26295
26393
|
zIndex: ["z_var", {
|
|
26296
|
-
"--zIndex": (0,
|
|
26394
|
+
"--zIndex": (0, import_runtime126.maybeCssVar)(zIndices.tableActions)
|
|
26297
26395
|
}],
|
|
26298
26396
|
backgroundColor: ["bgColor_var", {
|
|
26299
26397
|
"--backgroundColor": "var(--b-surface)"
|
|
@@ -26301,7 +26399,7 @@ function ModalHost(props) {
|
|
|
26301
26399
|
},
|
|
26302
26400
|
...modalBodyPaddingX
|
|
26303
26401
|
}, testIds, children: actions }),
|
|
26304
|
-
/* @__PURE__ */ (0,
|
|
26402
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(VirtualizedScrollParentProvider, { element: host.scrollEl, viewportWidth: host.scrollViewportWidth, children })
|
|
26305
26403
|
] }) }) });
|
|
26306
26404
|
}
|
|
26307
26405
|
function DocumentScrollHost(props) {
|
|
@@ -26313,26 +26411,26 @@ function DocumentScrollHost(props) {
|
|
|
26313
26411
|
testIds,
|
|
26314
26412
|
children
|
|
26315
26413
|
} = props;
|
|
26316
|
-
const tableBody = rightPane ? /* @__PURE__ */ (0,
|
|
26414
|
+
const tableBody = rightPane ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(DocumentScrollOverlayRightPaneLayout, { paneWidth: rightPane.width, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ...(0, import_runtime126.trussProps)({
|
|
26317
26415
|
minWidth: ["mw_var", {
|
|
26318
|
-
"--minWidth": (0,
|
|
26416
|
+
"--minWidth": (0, import_runtime126.maybeCssVar)(documentScrollRightPaneContentMinCss())
|
|
26319
26417
|
}]
|
|
26320
26418
|
}), children }) }) : children;
|
|
26321
|
-
return /* @__PURE__ */ (0,
|
|
26322
|
-
/* @__PURE__ */ (0,
|
|
26419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { ref: tableWrapperRef, className: "df fdc wfc mw100", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
|
|
26420
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ActionsBar, { actionsRef: tableActionsRef, xss: {
|
|
26323
26421
|
transition: "transitionTop",
|
|
26324
26422
|
position: "sticky",
|
|
26325
26423
|
top: ["top_var", {
|
|
26326
|
-
"--top": (0,
|
|
26424
|
+
"--top": (0, import_runtime126.maybeCssVar)(__maybeInc21(stickyNavAndHeaderOffset()))
|
|
26327
26425
|
}],
|
|
26328
26426
|
left: ["left_var", {
|
|
26329
|
-
"--left": (0,
|
|
26427
|
+
"--left": (0, import_runtime126.maybeCssVar)(__maybeInc21(documentScrollChromeLeft()))
|
|
26330
26428
|
}],
|
|
26331
26429
|
width: ["w_var", {
|
|
26332
|
-
"--width": (0,
|
|
26430
|
+
"--width": (0, import_runtime126.maybeCssVar)(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
|
|
26333
26431
|
}],
|
|
26334
26432
|
zIndex: ["z_var", {
|
|
26335
|
-
"--zIndex": (0,
|
|
26433
|
+
"--zIndex": (0, import_runtime126.maybeCssVar)(zIndices.tableActions)
|
|
26336
26434
|
}],
|
|
26337
26435
|
backgroundColor: ["bgColor_var", {
|
|
26338
26436
|
"--backgroundColor": "var(--b-surface)"
|
|
@@ -26350,9 +26448,9 @@ function ScrollableParentHost(props) {
|
|
|
26350
26448
|
testIds,
|
|
26351
26449
|
children
|
|
26352
26450
|
} = props;
|
|
26353
|
-
return /* @__PURE__ */ (0,
|
|
26354
|
-
/* @__PURE__ */ (0,
|
|
26355
|
-
/* @__PURE__ */ (0,
|
|
26451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { ref: tableWrapperRef, className: "df fdc", ...actions !== void 0 ? selfTopSpaced : {}, ...testIds.tableWrapper, children: [
|
|
26452
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ActionsBar, { actionsRef: tableActionsRef, testIds, children: actions }),
|
|
26453
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(ScrollableContent, { virtualized: isVirtualized, children })
|
|
26356
26454
|
] });
|
|
26357
26455
|
}
|
|
26358
26456
|
function ActionsBar({
|
|
@@ -26362,7 +26460,7 @@ function ActionsBar({
|
|
|
26362
26460
|
children
|
|
26363
26461
|
}) {
|
|
26364
26462
|
if (children === void 0) return null;
|
|
26365
|
-
return /* @__PURE__ */ (0,
|
|
26463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { ref: actionsRef, ...(0, import_runtime126.trussProps)(xss), ...testIds.stickyContent, children });
|
|
26366
26464
|
}
|
|
26367
26465
|
function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
|
|
26368
26466
|
const syncHeightVar = (0, import_react127.useCallback)(() => {
|
|
@@ -26394,7 +26492,7 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
|
|
|
26394
26492
|
|
|
26395
26493
|
// src/components/Layout/GridTableLayout/QueryTable.tsx
|
|
26396
26494
|
var import_react128 = require("react");
|
|
26397
|
-
var
|
|
26495
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
26398
26496
|
function QueryTable(props) {
|
|
26399
26497
|
const { emptyFallback, query, createRows, columns, emptyState: emptyStateProp, ...others } = props;
|
|
26400
26498
|
const displayData = query.error ? void 0 : query.data ?? query.previousData;
|
|
@@ -26406,15 +26504,15 @@ function QueryTable(props) {
|
|
|
26406
26504
|
return { title: emptyFallback };
|
|
26407
26505
|
}, [emptyFallback, emptyStateProp, query.error, query.loading]);
|
|
26408
26506
|
if (query.loading && displayData === void 0) {
|
|
26409
|
-
return /* @__PURE__ */ (0,
|
|
26507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(LoadingTable, { columns: columns.length }) });
|
|
26410
26508
|
}
|
|
26411
|
-
return /* @__PURE__ */ (0,
|
|
26509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(GridTable, { ...{ rows, columns, fallbackMessage, emptyState, ...others }, loading: query.loading });
|
|
26412
26510
|
}
|
|
26413
26511
|
function LoadingTable(props) {
|
|
26414
26512
|
const { columns } = props;
|
|
26415
|
-
return /* @__PURE__ */ (0,
|
|
26416
|
-
/* @__PURE__ */ (0,
|
|
26417
|
-
/* @__PURE__ */ (0,
|
|
26513
|
+
return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
|
|
26514
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)(LoadingSkeleton, { rows: 1, columns: 1 }),
|
|
26515
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)(LoadingSkeleton, { rows: 5, columns: columns ?? 5 })
|
|
26418
26516
|
] });
|
|
26419
26517
|
}
|
|
26420
26518
|
|
|
@@ -26645,12 +26743,13 @@ function useStableValue(value) {
|
|
|
26645
26743
|
}
|
|
26646
26744
|
|
|
26647
26745
|
// src/components/Layout/GridTableLayout/GridTableLayout.tsx
|
|
26648
|
-
var
|
|
26746
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
26649
26747
|
function GridTableLayoutComponent(props) {
|
|
26650
26748
|
const {
|
|
26651
26749
|
tableProps,
|
|
26652
26750
|
layoutState,
|
|
26653
26751
|
actions,
|
|
26752
|
+
selectionSummary = false,
|
|
26654
26753
|
hideEditColumns = false,
|
|
26655
26754
|
withCardView,
|
|
26656
26755
|
defaultView = "list",
|
|
@@ -26673,7 +26772,8 @@ function GridTableLayoutComponent(props) {
|
|
|
26673
26772
|
);
|
|
26674
26773
|
const [view, setView] = usePersistedTableView(defaultView, !!withCardView);
|
|
26675
26774
|
const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
|
|
26676
|
-
const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.length
|
|
26775
|
+
const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actions?.length || // Rendered before anything's selected, so the pill doesn't shift the table
|
|
26776
|
+
selectionSummary);
|
|
26677
26777
|
const isVirtualized = tableProps.as === "virtual" || view === "card";
|
|
26678
26778
|
const visibleColumnIds = useComputed(() => api.getVisibleColumnIds(), [api]);
|
|
26679
26779
|
(0, import_react134.useEffect)(() => {
|
|
@@ -26695,7 +26795,7 @@ function GridTableLayoutComponent(props) {
|
|
|
26695
26795
|
() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters),
|
|
26696
26796
|
[layoutEmptyFallback, layoutState, tableProps, clearFilters]
|
|
26697
26797
|
);
|
|
26698
|
-
const tableActionsEl = /* @__PURE__ */ (0,
|
|
26798
|
+
const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
26699
26799
|
_GridTableLayoutActions,
|
|
26700
26800
|
{
|
|
26701
26801
|
filterDefs: layoutState?.filterDefs,
|
|
@@ -26711,12 +26811,13 @@ function GridTableLayoutComponent(props) {
|
|
|
26711
26811
|
setView,
|
|
26712
26812
|
clearFilters,
|
|
26713
26813
|
searchApi: searchApiRef,
|
|
26714
|
-
actions
|
|
26814
|
+
actions,
|
|
26815
|
+
selectionSummary
|
|
26715
26816
|
}
|
|
26716
26817
|
);
|
|
26717
26818
|
const cardAs = view === "card" ? "card" : void 0;
|
|
26718
26819
|
const tableStyle = (0, import_react134.useMemo)(() => getDefaultStyle(tableProps.style), [tableProps.style]);
|
|
26719
|
-
const tableBody = /* @__PURE__ */ (0,
|
|
26820
|
+
const tableBody = /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_jsx_runtime191.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
26720
26821
|
GridTable,
|
|
26721
26822
|
{
|
|
26722
26823
|
...tableProps,
|
|
@@ -26730,7 +26831,7 @@ function GridTableLayoutComponent(props) {
|
|
|
26730
26831
|
visibleColumnsStorageKey,
|
|
26731
26832
|
columnGutter: includeColumnGutters
|
|
26732
26833
|
}
|
|
26733
|
-
) : /* @__PURE__ */ (0,
|
|
26834
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
26734
26835
|
QueryTable,
|
|
26735
26836
|
{
|
|
26736
26837
|
...tableProps,
|
|
@@ -26745,7 +26846,7 @@ function GridTableLayoutComponent(props) {
|
|
|
26745
26846
|
columnGutter: includeColumnGutters
|
|
26746
26847
|
}
|
|
26747
26848
|
) });
|
|
26748
|
-
return /* @__PURE__ */ (0,
|
|
26849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
26749
26850
|
GridTableLayoutHost,
|
|
26750
26851
|
{
|
|
26751
26852
|
host,
|
|
@@ -26813,12 +26914,12 @@ function composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFi
|
|
|
26813
26914
|
illustration: tableEmptyState?.illustration,
|
|
26814
26915
|
title: tableEmptyState?.title ?? tableEmptyFallback ?? layoutEmptyFallback,
|
|
26815
26916
|
description: tableEmptyState?.description ?? (filteringActive ? filterEmptyDescription : void 0),
|
|
26816
|
-
actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ (0,
|
|
26917
|
+
actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
|
|
26817
26918
|
};
|
|
26818
26919
|
}
|
|
26819
26920
|
|
|
26820
26921
|
// src/components/Layout/PreventBrowserScroll.tsx
|
|
26821
|
-
var
|
|
26922
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
26822
26923
|
function PreventBrowserScroll({
|
|
26823
26924
|
children
|
|
26824
26925
|
}) {
|
|
@@ -26826,15 +26927,15 @@ function PreventBrowserScroll({
|
|
|
26826
26927
|
// Take over the full viewport and hide any overflown content.
|
|
26827
26928
|
// Using `-webkit-fill-available`, otherwise `height: 100vh` includes the app bars in mobile Safari. See https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
|
|
26828
26929
|
// Setting the multiple "(min|max-)height" properties is necessary, as Truss will turn this into an object and there can only be one `height` property.
|
|
26829
|
-
/* @__PURE__ */ (0,
|
|
26930
|
+
/* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "oh vh100 mh_negwebkit_fill_available maxh_negwebkit_fill_available", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "h100 df fdc mh0 oa", children }) })
|
|
26830
26931
|
);
|
|
26831
26932
|
}
|
|
26832
26933
|
|
|
26833
26934
|
// src/components/Layout/RightPaneLayout/RightPaneLayout.tsx
|
|
26834
26935
|
var import_framer_motion4 = require("framer-motion");
|
|
26835
26936
|
var import_react135 = require("react");
|
|
26836
|
-
var
|
|
26837
|
-
var
|
|
26937
|
+
var import_runtime127 = require("@homebound/truss/runtime");
|
|
26938
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
26838
26939
|
var __maybeInc22 = (inc) => {
|
|
26839
26940
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
26840
26941
|
};
|
|
@@ -26852,11 +26953,11 @@ function RightPaneLayout(props) {
|
|
|
26852
26953
|
} = useRightPaneOpenState();
|
|
26853
26954
|
const rightPaneContent = useRightPaneContent();
|
|
26854
26955
|
(0, import_react135.useEffect)(() => closePane2, [closePane2]);
|
|
26855
|
-
return /* @__PURE__ */ (0,
|
|
26856
|
-
/* @__PURE__ */ (0,
|
|
26956
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "h100 df oxh", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
|
|
26957
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime127.trussProps)({
|
|
26857
26958
|
...{
|
|
26858
26959
|
width: ["w_var", {
|
|
26859
|
-
"--width": (0,
|
|
26960
|
+
"--width": (0, import_runtime127.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
|
|
26860
26961
|
}],
|
|
26861
26962
|
transition: "transitionWidth",
|
|
26862
26963
|
height: "h100",
|
|
@@ -26872,13 +26973,13 @@ function RightPaneLayout(props) {
|
|
|
26872
26973
|
...{
|
|
26873
26974
|
...!!defaultPaneContent ? {
|
|
26874
26975
|
width: ["w_var", {
|
|
26875
|
-
"--width": (0,
|
|
26976
|
+
"--width": (0, import_runtime127.maybeCssVar)(__maybeInc22(`calc(100% - ${paneWidth + 24}px)`))
|
|
26876
26977
|
}],
|
|
26877
26978
|
marginRight: "mr3"
|
|
26878
26979
|
} : {}
|
|
26879
26980
|
}
|
|
26880
26981
|
}), children }),
|
|
26881
|
-
/* @__PURE__ */ (0,
|
|
26982
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime127.trussProps)({
|
|
26882
26983
|
position: "relative",
|
|
26883
26984
|
...!!defaultPaneContent ? {
|
|
26884
26985
|
width: ["w_var", {
|
|
@@ -26886,7 +26987,7 @@ function RightPaneLayout(props) {
|
|
|
26886
26987
|
}]
|
|
26887
26988
|
} : {}
|
|
26888
26989
|
}), children: [
|
|
26889
|
-
defaultPaneContent && /* @__PURE__ */ (0,
|
|
26990
|
+
defaultPaneContent && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime127.trussProps)({
|
|
26890
26991
|
height: "h100",
|
|
26891
26992
|
width: ["w_var", {
|
|
26892
26993
|
"--width": `${paneWidth}px`
|
|
@@ -26899,14 +27000,14 @@ function RightPaneLayout(props) {
|
|
|
26899
27000
|
left: "l_100"
|
|
26900
27001
|
} : {}
|
|
26901
27002
|
}), children: defaultPaneContent }),
|
|
26902
|
-
/* @__PURE__ */ (0,
|
|
27003
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_framer_motion4.AnimatePresence, { children: isRightPaneOpen && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
26903
27004
|
import_framer_motion4.motion.div,
|
|
26904
27005
|
{
|
|
26905
27006
|
layout: "position",
|
|
26906
27007
|
"data-testid": "rightPaneContent",
|
|
26907
|
-
...(0,
|
|
27008
|
+
...(0, import_runtime127.trussProps)({
|
|
26908
27009
|
backgroundColor: ["bgColor_var", {
|
|
26909
|
-
"--backgroundColor": (0,
|
|
27010
|
+
"--backgroundColor": (0, import_runtime127.maybeCssVar)(paneBgColor)
|
|
26910
27011
|
}],
|
|
26911
27012
|
height: "h100",
|
|
26912
27013
|
width: ["w_var", {
|
|
@@ -26943,8 +27044,8 @@ function RightPaneLayout(props) {
|
|
|
26943
27044
|
// src/components/Layout/RightPaneLayout/internal/DeleteAction.tsx
|
|
26944
27045
|
var import_utils41 = require("@react-aria/utils");
|
|
26945
27046
|
var import_react136 = require("react");
|
|
26946
|
-
var
|
|
26947
|
-
var
|
|
27047
|
+
var import_runtime128 = require("@homebound/truss/runtime");
|
|
27048
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
26948
27049
|
function MaybeDeleteAction(props) {
|
|
26949
27050
|
const {
|
|
26950
27051
|
count = 0,
|
|
@@ -26952,7 +27053,7 @@ function MaybeDeleteAction(props) {
|
|
|
26952
27053
|
...buttonProps
|
|
26953
27054
|
} = props;
|
|
26954
27055
|
if (!onClick) return null;
|
|
26955
|
-
return count > 1 ? /* @__PURE__ */ (0,
|
|
27056
|
+
return count > 1 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(BulkDeleteAction, { count, onClick, ...buttonProps }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(IconButton, { icon: "trash", label: "Delete", onClick, ...buttonProps });
|
|
26956
27057
|
}
|
|
26957
27058
|
function BulkDeleteAction(props) {
|
|
26958
27059
|
const {
|
|
@@ -26976,15 +27077,15 @@ function BulkDeleteAction(props) {
|
|
|
26976
27077
|
});
|
|
26977
27078
|
return (
|
|
26978
27079
|
// Offset the Button's padding so the trash aligns with the footer inset.
|
|
26979
|
-
/* @__PURE__ */ (0,
|
|
26980
|
-
/* @__PURE__ */ (0,
|
|
26981
|
-
/* @__PURE__ */ (0,
|
|
27080
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ref: containerRef, className: "relative fg1 mw0 ml_neg16px", children: [
|
|
27081
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { "aria-hidden": true, className: "absolute top0 l_0 w100 oh vh pen", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ref: contentRef, className: "wmaxc", children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Button, { variant: "quaternary", icon: "trash", label: `Delete (${count})`, onClick: noop }) }) }),
|
|
27082
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
26982
27083
|
Button,
|
|
26983
27084
|
{
|
|
26984
27085
|
variant: "quaternary",
|
|
26985
27086
|
icon: "trash",
|
|
26986
|
-
label: /* @__PURE__ */ (0,
|
|
26987
|
-
/* @__PURE__ */ (0,
|
|
27087
|
+
label: /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("span", { children: [
|
|
27088
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)("span", { ...(0, import_runtime128.trussProps)({
|
|
26988
27089
|
...overflows ? {
|
|
26989
27090
|
position: "absolute",
|
|
26990
27091
|
overflow: "oh",
|
|
@@ -27011,8 +27112,8 @@ function BulkDeleteAction(props) {
|
|
|
27011
27112
|
}
|
|
27012
27113
|
|
|
27013
27114
|
// src/components/Layout/RightPaneLayout/RightPanePanel.tsx
|
|
27014
|
-
var
|
|
27015
|
-
var
|
|
27115
|
+
var import_runtime129 = require("@homebound/truss/runtime");
|
|
27116
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
27016
27117
|
function RightPanePanel(props) {
|
|
27017
27118
|
const {
|
|
27018
27119
|
title,
|
|
@@ -27026,8 +27127,8 @@ function RightPanePanel(props) {
|
|
|
27026
27127
|
const {
|
|
27027
27128
|
closeRightPane
|
|
27028
27129
|
} = useRightPaneActions();
|
|
27029
|
-
return /* @__PURE__ */ (0,
|
|
27030
|
-
/* @__PURE__ */ (0,
|
|
27130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "relative df fdc h100", ...tid, children: [
|
|
27131
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { ...(0, import_runtime129.trussProps)({
|
|
27031
27132
|
display: "df",
|
|
27032
27133
|
alignItems: "aic",
|
|
27033
27134
|
justifyContent: "jcsb",
|
|
@@ -27043,11 +27144,11 @@ function RightPanePanel(props) {
|
|
|
27043
27144
|
}],
|
|
27044
27145
|
flexShrink: "fs0"
|
|
27045
27146
|
}), ...tid.header, children: [
|
|
27046
|
-
/* @__PURE__ */ (0,
|
|
27047
|
-
withClose && /* @__PURE__ */ (0,
|
|
27147
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "fw6 fz_16px lh_24px", children: title }),
|
|
27148
|
+
withClose && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(IconButton, { icon: "x", label: "Close", autoFocus: true, onClick: closeRightPane, ...tid.close })
|
|
27048
27149
|
] }),
|
|
27049
|
-
/* @__PURE__ */ (0,
|
|
27050
|
-
(deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ (0,
|
|
27150
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "fg1 mh0 oya pt3 pb3 pr3 pl3", ...tid.body, children }),
|
|
27151
|
+
(deleteAction || secondaryAction || primaryAction) && /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { ...(0, import_runtime129.trussProps)({
|
|
27051
27152
|
display: "df",
|
|
27052
27153
|
alignItems: "aic",
|
|
27053
27154
|
gap: "g_2",
|
|
@@ -27062,10 +27163,10 @@ function RightPanePanel(props) {
|
|
|
27062
27163
|
}],
|
|
27063
27164
|
flexShrink: "fs0"
|
|
27064
27165
|
}), ...tid.footer, children: [
|
|
27065
|
-
/* @__PURE__ */ (0,
|
|
27066
|
-
/* @__PURE__ */ (0,
|
|
27067
|
-
secondaryAction && /* @__PURE__ */ (0,
|
|
27068
|
-
primaryAction && /* @__PURE__ */ (0,
|
|
27166
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(MaybeDeleteAction, { ...deleteAction, ...tid.delete }),
|
|
27167
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "df aic g_1_5 fs0 mla", children: [
|
|
27168
|
+
secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Button, { ...secondaryAction, variant: "secondary", ...tid.secondaryAction }),
|
|
27169
|
+
primaryAction && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Button, { ...primaryAction, ...tid.primaryAction })
|
|
27069
27170
|
] })
|
|
27070
27171
|
] })
|
|
27071
27172
|
] });
|
|
@@ -27073,14 +27174,14 @@ function RightPanePanel(props) {
|
|
|
27073
27174
|
|
|
27074
27175
|
// src/components/Layout/ScrollableFooter.tsx
|
|
27075
27176
|
var import_react_dom7 = require("react-dom");
|
|
27076
|
-
var
|
|
27177
|
+
var import_jsx_runtime196 = require("react/jsx-runtime");
|
|
27077
27178
|
function ScrollableFooter(props) {
|
|
27078
27179
|
const { children } = props;
|
|
27079
27180
|
const { footerEl } = useScrollableParent();
|
|
27080
27181
|
if (!footerEl) {
|
|
27081
|
-
return /* @__PURE__ */ (0,
|
|
27182
|
+
return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_jsx_runtime196.Fragment, { children });
|
|
27082
27183
|
}
|
|
27083
|
-
return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0,
|
|
27184
|
+
return (0, import_react_dom7.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_jsx_runtime196.Fragment, { children }), footerEl);
|
|
27084
27185
|
}
|
|
27085
27186
|
|
|
27086
27187
|
// src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
|
|
@@ -27088,7 +27189,7 @@ var import_framer_motion5 = require("framer-motion");
|
|
|
27088
27189
|
var import_react137 = require("react");
|
|
27089
27190
|
|
|
27090
27191
|
// src/components/Layout/TableReviewLayout/SidePanel.tsx
|
|
27091
|
-
var
|
|
27192
|
+
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
27092
27193
|
function SidePanel(props) {
|
|
27093
27194
|
const {
|
|
27094
27195
|
title,
|
|
@@ -27098,19 +27199,19 @@ function SidePanel(props) {
|
|
|
27098
27199
|
} = props;
|
|
27099
27200
|
const tid = useTestIds(props, "sidePanel");
|
|
27100
27201
|
const hasFooter = primaryAction || secondaryAction;
|
|
27101
|
-
return /* @__PURE__ */ (0,
|
|
27102
|
-
/* @__PURE__ */ (0,
|
|
27103
|
-
/* @__PURE__ */ (0,
|
|
27104
|
-
hasFooter && /* @__PURE__ */ (0,
|
|
27105
|
-
secondaryAction && /* @__PURE__ */ (0,
|
|
27106
|
-
primaryAction && /* @__PURE__ */ (0,
|
|
27202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "h100 df fdc oh", ...tid, children: [
|
|
27203
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "pt3 pb3 pr3 pl3 fs0", ...tid.header, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("h2", { className: "fw6 fz_20px lh_28px mt0 mb0", ...tid.title, children: title }) }),
|
|
27204
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "fg1 oya mh0", ...tid.body, children: content2 }),
|
|
27205
|
+
hasFooter && /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: "df g_2 jcfe pt3 pb3 pr3 pl3 fs0", ...tid.footer, children: [
|
|
27206
|
+
secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Button, { ...secondaryAction, variant: "secondaryBlack" }),
|
|
27207
|
+
primaryAction && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Button, { ...primaryAction })
|
|
27107
27208
|
] })
|
|
27108
27209
|
] });
|
|
27109
27210
|
}
|
|
27110
27211
|
|
|
27111
27212
|
// src/components/Layout/TableReviewLayout/TableReviewLayout.tsx
|
|
27112
|
-
var
|
|
27113
|
-
var
|
|
27213
|
+
var import_runtime130 = require("@homebound/truss/runtime");
|
|
27214
|
+
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
27114
27215
|
var defaultRightPaneWidth = 450;
|
|
27115
27216
|
function TableReviewLayout(props) {
|
|
27116
27217
|
const {
|
|
@@ -27136,29 +27237,29 @@ function TableReviewLayout(props) {
|
|
|
27136
27237
|
let tableContent;
|
|
27137
27238
|
if (isGridTableProps(tableProps)) {
|
|
27138
27239
|
if (emptyState && !tableProps.rows.some((r) => r.kind !== "header")) {
|
|
27139
|
-
tableContent = /* @__PURE__ */ (0,
|
|
27240
|
+
tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { className: "h100 df fdc aic jcc", children: emptyState });
|
|
27140
27241
|
} else {
|
|
27141
|
-
tableContent = /* @__PURE__ */ (0,
|
|
27242
|
+
tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(GridTable, { ...tableProps, style: {
|
|
27142
27243
|
allWhite: true,
|
|
27143
27244
|
bordered: true
|
|
27144
27245
|
}, stickyHeader: true });
|
|
27145
27246
|
}
|
|
27146
27247
|
} else if (emptyState) {
|
|
27147
|
-
tableContent = /* @__PURE__ */ (0,
|
|
27248
|
+
tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { className: "h100 df fdc aic jcc", children: emptyState });
|
|
27148
27249
|
} else {
|
|
27149
|
-
tableContent = /* @__PURE__ */ (0,
|
|
27250
|
+
tableContent = /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(QueryTable, { ...tableProps, style: {
|
|
27150
27251
|
allWhite: true,
|
|
27151
27252
|
bordered: true
|
|
27152
27253
|
}, stickyHeader: true });
|
|
27153
27254
|
}
|
|
27154
|
-
return /* @__PURE__ */ (0,
|
|
27255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { ...(0, import_runtime130.trussProps)({
|
|
27155
27256
|
position: "fixed",
|
|
27156
27257
|
top: "top0",
|
|
27157
27258
|
bottom: "bot_0",
|
|
27158
27259
|
left: "l_0",
|
|
27159
27260
|
right: "r_0",
|
|
27160
27261
|
zIndex: ["z_var", {
|
|
27161
|
-
"--zIndex": (0,
|
|
27262
|
+
"--zIndex": (0, import_runtime130.maybeCssVar)(zIndices.pageOverlay)
|
|
27162
27263
|
}],
|
|
27163
27264
|
backgroundColor: ["bgColor_var", {
|
|
27164
27265
|
"--backgroundColor": "var(--b-surface)"
|
|
@@ -27166,16 +27267,16 @@ function TableReviewLayout(props) {
|
|
|
27166
27267
|
display: "df",
|
|
27167
27268
|
flexDirection: "fdc"
|
|
27168
27269
|
}), ...tid, children: [
|
|
27169
|
-
/* @__PURE__ */ (0,
|
|
27170
|
-
/* @__PURE__ */ (0,
|
|
27171
|
-
/* @__PURE__ */ (0,
|
|
27172
|
-
/* @__PURE__ */ (0,
|
|
27173
|
-
breadCrumb && /* @__PURE__ */ (0,
|
|
27174
|
-
/* @__PURE__ */ (0,
|
|
27270
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("header", { className: "pl3 pr3 pt3 pb2 fs0", ...tid.header, children: [
|
|
27271
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Toast, {}),
|
|
27272
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { className: "df jcsb aic", children: [
|
|
27273
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { children: [
|
|
27274
|
+
breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
|
|
27275
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)("h1", { className: "fw6 fz_24px lh_32px mt1 mb0", ...tid.pageTitle, children: pageTitle })
|
|
27175
27276
|
] }),
|
|
27176
|
-
/* @__PURE__ */ (0,
|
|
27277
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Button, { label: "Close", onClick: closeAction, ...tid.closeButton })
|
|
27177
27278
|
] }),
|
|
27178
|
-
/* @__PURE__ */ (0,
|
|
27279
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_runtime130.trussProps)({
|
|
27179
27280
|
fontWeight: "fw4",
|
|
27180
27281
|
fontSize: "fz_14px",
|
|
27181
27282
|
lineHeight: "lh_20px",
|
|
@@ -27185,8 +27286,8 @@ function TableReviewLayout(props) {
|
|
|
27185
27286
|
marginTop: "mt2"
|
|
27186
27287
|
}), ...tid.description, children: description })
|
|
27187
27288
|
] }),
|
|
27188
|
-
/* @__PURE__ */ (0,
|
|
27189
|
-
/* @__PURE__ */ (0,
|
|
27289
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { className: "fg1 df mh0", ...tid.content, children: [
|
|
27290
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_runtime130.trussProps)({
|
|
27190
27291
|
...{
|
|
27191
27292
|
flexGrow: "fg1",
|
|
27192
27293
|
overflowY: "oya",
|
|
@@ -27199,7 +27300,7 @@ function TableReviewLayout(props) {
|
|
|
27199
27300
|
} : {}
|
|
27200
27301
|
}
|
|
27201
27302
|
}), children: tableContent }),
|
|
27202
|
-
/* @__PURE__ */ (0,
|
|
27303
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_framer_motion5.AnimatePresence, { children: isPanelVisible && panelContent && /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_framer_motion5.motion.div, { initial: {
|
|
27203
27304
|
width: 0
|
|
27204
27305
|
}, animate: {
|
|
27205
27306
|
width: rightPaneWidth
|
|
@@ -27209,9 +27310,9 @@ function TableReviewLayout(props) {
|
|
|
27209
27310
|
ease: "linear",
|
|
27210
27311
|
duration: 0.2
|
|
27211
27312
|
}, className: "df fdc fs0 relative", children: [
|
|
27212
|
-
/* @__PURE__ */ (0,
|
|
27213
|
-
/* @__PURE__ */ (0,
|
|
27214
|
-
/* @__PURE__ */ (0,
|
|
27313
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { className: "absolute tp_neg32px df fdc aic l_neg24px z1", children: [
|
|
27314
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(IconButton, { bgColor: "--b-surface" /* Surface */, variant: "circle", icon: "x", inc: 3.5, onClick: handleClosePanel, ...tid.closePanelButton }),
|
|
27315
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { ...(0, import_runtime130.trussProps)({
|
|
27215
27316
|
width: "w_1px",
|
|
27216
27317
|
backgroundColor: ["bgColor_var", {
|
|
27217
27318
|
"--backgroundColor": "var(--b-field-border-default)"
|
|
@@ -27219,15 +27320,15 @@ function TableReviewLayout(props) {
|
|
|
27219
27320
|
height: "vh100"
|
|
27220
27321
|
}) })
|
|
27221
27322
|
] }),
|
|
27222
|
-
/* @__PURE__ */ (0,
|
|
27323
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { className: "fg1 oh mh0", children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(SidePanel, { ...panelContent }) })
|
|
27223
27324
|
] }, "panel") })
|
|
27224
27325
|
] })
|
|
27225
27326
|
] });
|
|
27226
27327
|
}
|
|
27227
27328
|
|
|
27228
27329
|
// src/components/Logos/BeamLogo.tsx
|
|
27229
|
-
var
|
|
27230
|
-
var
|
|
27330
|
+
var import_runtime131 = require("@homebound/truss/runtime");
|
|
27331
|
+
var import_jsx_runtime199 = require("react/jsx-runtime");
|
|
27231
27332
|
var __maybeInc23 = (inc) => {
|
|
27232
27333
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
27233
27334
|
};
|
|
@@ -27237,31 +27338,31 @@ function BeamLogo(props) {
|
|
|
27237
27338
|
width: width2 = "auto",
|
|
27238
27339
|
height = "auto"
|
|
27239
27340
|
} = props;
|
|
27240
|
-
return /* @__PURE__ */ (0,
|
|
27341
|
+
return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("svg", { viewBox: "0 0 500 500", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime131.trussProps)({
|
|
27241
27342
|
fill: ["fill_var", {
|
|
27242
|
-
"--fill": (0,
|
|
27343
|
+
"--fill": (0, import_runtime131.maybeCssVar)(fill)
|
|
27243
27344
|
}],
|
|
27244
27345
|
width: ["w_var", {
|
|
27245
|
-
"--width": (0,
|
|
27346
|
+
"--width": (0, import_runtime131.maybeCssVar)(__maybeInc23(width2))
|
|
27246
27347
|
}],
|
|
27247
27348
|
height: ["h_var", {
|
|
27248
|
-
"--height": (0,
|
|
27349
|
+
"--height": (0, import_runtime131.maybeCssVar)(__maybeInc23(height))
|
|
27249
27350
|
}]
|
|
27250
27351
|
}), children: [
|
|
27251
|
-
/* @__PURE__ */ (0,
|
|
27252
|
-
/* @__PURE__ */ (0,
|
|
27253
|
-
/* @__PURE__ */ (0,
|
|
27254
|
-
/* @__PURE__ */ (0,
|
|
27255
|
-
/* @__PURE__ */ (0,
|
|
27256
|
-
/* @__PURE__ */ (0,
|
|
27257
|
-
/* @__PURE__ */ (0,
|
|
27258
|
-
/* @__PURE__ */ (0,
|
|
27352
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "90", width: "32", height: "320" }),
|
|
27353
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "122", y: "172", width: "32", height: "158" }),
|
|
27354
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "346", y: "172", width: "32", height: "158" }),
|
|
27355
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "458", y: "90", width: "32", height: "320" }),
|
|
27356
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "90", width: "480", height: "32" }),
|
|
27357
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "378", width: "480", height: "32" }),
|
|
27358
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "172", width: "480", height: "32" }),
|
|
27359
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)("rect", { x: "10", y: "298", width: "480", height: "32" })
|
|
27259
27360
|
] });
|
|
27260
27361
|
}
|
|
27261
27362
|
|
|
27262
27363
|
// src/components/Logos/HomeboundLogo.tsx
|
|
27263
|
-
var
|
|
27264
|
-
var
|
|
27364
|
+
var import_runtime132 = require("@homebound/truss/runtime");
|
|
27365
|
+
var import_jsx_runtime200 = require("react/jsx-runtime");
|
|
27265
27366
|
var __maybeInc24 = (inc) => {
|
|
27266
27367
|
return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
|
|
27267
27368
|
};
|
|
@@ -27271,24 +27372,24 @@ function HomeboundLogo(props) {
|
|
|
27271
27372
|
width: width2 = "auto",
|
|
27272
27373
|
height = "auto"
|
|
27273
27374
|
} = props;
|
|
27274
|
-
return /* @__PURE__ */ (0,
|
|
27375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("svg", { viewBox: "0 0 158.1 97.6", xmlns: "http://www.w3.org/2000/svg", ...(0, import_runtime132.trussProps)({
|
|
27275
27376
|
fill: ["fill_var", {
|
|
27276
|
-
"--fill": (0,
|
|
27377
|
+
"--fill": (0, import_runtime132.maybeCssVar)(fill)
|
|
27277
27378
|
}],
|
|
27278
27379
|
width: ["w_var", {
|
|
27279
|
-
"--width": (0,
|
|
27380
|
+
"--width": (0, import_runtime132.maybeCssVar)(__maybeInc24(width2))
|
|
27280
27381
|
}],
|
|
27281
27382
|
height: ["h_var", {
|
|
27282
|
-
"--height": (0,
|
|
27383
|
+
"--height": (0, import_runtime132.maybeCssVar)(__maybeInc24(height))
|
|
27283
27384
|
}]
|
|
27284
|
-
}), children: /* @__PURE__ */ (0,
|
|
27385
|
+
}), children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("path", { d: "M158.1,97.6H0.2L0,39.7L76.8,0l68,38.7l-3.1,5.3l-65-37L6.2,43.4l0.2,48h151.7V97.6z" }) });
|
|
27285
27386
|
}
|
|
27286
27387
|
|
|
27287
27388
|
// src/components/MaxLines.tsx
|
|
27288
27389
|
var import_utils42 = require("@react-aria/utils");
|
|
27289
27390
|
var import_react138 = require("react");
|
|
27290
|
-
var
|
|
27291
|
-
var
|
|
27391
|
+
var import_runtime133 = require("@homebound/truss/runtime");
|
|
27392
|
+
var import_jsx_runtime201 = require("react/jsx-runtime");
|
|
27292
27393
|
function MaxLines({
|
|
27293
27394
|
maxLines,
|
|
27294
27395
|
children
|
|
@@ -27311,11 +27412,11 @@ function MaxLines({
|
|
|
27311
27412
|
ref: elRef,
|
|
27312
27413
|
onResize
|
|
27313
27414
|
});
|
|
27314
|
-
return /* @__PURE__ */ (0,
|
|
27315
|
-
/* @__PURE__ */ (0,
|
|
27415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { children: [
|
|
27416
|
+
/* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { ref: elRef, ...(0, import_runtime133.trussProps)({
|
|
27316
27417
|
...!expanded ? {
|
|
27317
27418
|
WebkitLineClamp: ["lineClamp_var", {
|
|
27318
|
-
"--WebkitLineClamp": (0,
|
|
27419
|
+
"--WebkitLineClamp": (0, import_runtime133.maybeCssVar)(maxLines)
|
|
27319
27420
|
}],
|
|
27320
27421
|
overflow: "oh",
|
|
27321
27422
|
display: "d_negwebkit_box",
|
|
@@ -27323,13 +27424,13 @@ function MaxLines({
|
|
|
27323
27424
|
textOverflow: "to_ellipsis"
|
|
27324
27425
|
} : {}
|
|
27325
27426
|
}), children }),
|
|
27326
|
-
hasMore && /* @__PURE__ */ (0,
|
|
27427
|
+
hasMore && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("button", { className: "db fw4 fz_14px lh_20px", onClick: () => setExpanded((prev) => !prev), children: expanded ? "Show Less" : "Show More" })
|
|
27327
27428
|
] });
|
|
27328
27429
|
}
|
|
27329
27430
|
|
|
27330
27431
|
// src/components/Pagination.tsx
|
|
27331
|
-
var
|
|
27332
|
-
var
|
|
27432
|
+
var import_runtime134 = require("@homebound/truss/runtime");
|
|
27433
|
+
var import_jsx_runtime202 = require("react/jsx-runtime");
|
|
27333
27434
|
var defaultPage = {
|
|
27334
27435
|
offset: 0,
|
|
27335
27436
|
limit: 100
|
|
@@ -27361,7 +27462,7 @@ function Pagination(props) {
|
|
|
27361
27462
|
}
|
|
27362
27463
|
}
|
|
27363
27464
|
const tid = useTestIds(props, "pagination");
|
|
27364
|
-
return /* @__PURE__ */ (0,
|
|
27465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { ...(0, import_runtime134.trussProps)({
|
|
27365
27466
|
display: "df",
|
|
27366
27467
|
borderColor: ["bc_var", {
|
|
27367
27468
|
"--borderColor": "var(--b-surface-separator)"
|
|
@@ -27378,24 +27479,24 @@ function Pagination(props) {
|
|
|
27378
27479
|
paddingRight: "pr2",
|
|
27379
27480
|
paddingTop: "pt2"
|
|
27380
27481
|
}), ...tid, children: [
|
|
27381
|
-
/* @__PURE__ */ (0,
|
|
27382
|
-
/* @__PURE__ */ (0,
|
|
27482
|
+
/* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "df mta mba mr2", ...tid.pageSizeLabel, children: "Page size:" }),
|
|
27483
|
+
/* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { className: "w_78px", children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(SelectField, { compact: true, label: "Page Size", labelStyle: "hidden", options: pageOptions, value: pageSize, onSelect: (val) => set({
|
|
27383
27484
|
pageNumber: 1,
|
|
27384
27485
|
pageSize: val
|
|
27385
27486
|
}), autoSort: false, ...tid.pageSize }) }),
|
|
27386
|
-
/* @__PURE__ */ (0,
|
|
27387
|
-
/* @__PURE__ */ (0,
|
|
27487
|
+
/* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "mla mta mba df", children: [
|
|
27488
|
+
/* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className: "df mta mba mr2", ...tid.pageInfoLabel, children: [
|
|
27388
27489
|
first,
|
|
27389
27490
|
" ",
|
|
27390
27491
|
showLast ? `- ${last}` : "",
|
|
27391
27492
|
" of ",
|
|
27392
27493
|
totalCount
|
|
27393
27494
|
] }),
|
|
27394
|
-
/* @__PURE__ */ (0,
|
|
27495
|
+
/* @__PURE__ */ (0, import_jsx_runtime202.jsx)(IconButton, { icon: "chevronLeft", color: hasPrevPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
|
|
27395
27496
|
pageNumber: pageNumber - 1,
|
|
27396
27497
|
pageSize
|
|
27397
27498
|
}), disabled: !hasPrevPage, ...tid.previousIcon }),
|
|
27398
|
-
/* @__PURE__ */ (0,
|
|
27499
|
+
/* @__PURE__ */ (0, import_jsx_runtime202.jsx)(IconButton, { icon: "chevronRight", color: hasNextPage ? "--b-text-link-default" /* TextLinkDefault */ : "--b-surface-separator" /* SurfaceSeparator */, onClick: () => set({
|
|
27399
27500
|
pageNumber: pageNumber + 1,
|
|
27400
27501
|
pageSize
|
|
27401
27502
|
}), disabled: !hasNextPage, ...tid.nextIcon })
|
|
@@ -27416,69 +27517,6 @@ function toPageNumberSize(page) {
|
|
|
27416
27517
|
};
|
|
27417
27518
|
}
|
|
27418
27519
|
|
|
27419
|
-
// src/components/Pills/SelectionSummaryPill/SelectionSummaryPill.tsx
|
|
27420
|
-
var import_react_aria60 = require("react-aria");
|
|
27421
|
-
var import_runtime134 = require("@homebound/truss/runtime");
|
|
27422
|
-
var import_jsx_runtime202 = require("react/jsx-runtime");
|
|
27423
|
-
function SelectionSummaryPill(props) {
|
|
27424
|
-
const {
|
|
27425
|
-
text,
|
|
27426
|
-
onClick,
|
|
27427
|
-
disabled = false,
|
|
27428
|
-
__storyState
|
|
27429
|
-
} = props;
|
|
27430
|
-
const tid = useTestIds(props, "selectionSummaryPill");
|
|
27431
|
-
const {
|
|
27432
|
-
hoverProps,
|
|
27433
|
-
isHovered: isHoveredFromEvents
|
|
27434
|
-
} = (0, import_react_aria60.useHover)({
|
|
27435
|
-
isDisabled: !!disabled
|
|
27436
|
-
});
|
|
27437
|
-
const isHovered = __storyState?.hovered ?? isHoveredFromEvents;
|
|
27438
|
-
return maybeTooltip({
|
|
27439
|
-
title: resolveTooltip(disabled),
|
|
27440
|
-
placement: "top",
|
|
27441
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("button", { type: "button", disabled: !!disabled, onClick, "aria-label": `Clear ${text}`, ...(0, import_runtime134.trussProps)(pillStyles2(!!disabled, isHovered)), ...hoverProps, ...tid, children: [
|
|
27442
|
-
text,
|
|
27443
|
-
/* @__PURE__ */ (0, import_jsx_runtime202.jsx)("span", { ...(0, import_runtime134.trussProps)({
|
|
27444
|
-
color: ["color_var", {
|
|
27445
|
-
"--color": (0, import_runtime134.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "--b-on-surface-active" /* OnSurfaceActive */)
|
|
27446
|
-
}]
|
|
27447
|
-
}), ...tid.clear, children: "Clear" })
|
|
27448
|
-
] })
|
|
27449
|
-
});
|
|
27450
|
-
}
|
|
27451
|
-
function pillStyles2(disabled, hovered) {
|
|
27452
|
-
return {
|
|
27453
|
-
fontWeight: "fw6",
|
|
27454
|
-
fontSize: "fz_14px",
|
|
27455
|
-
lineHeight: "lh_20px",
|
|
27456
|
-
display: "dif",
|
|
27457
|
-
alignItems: "aic",
|
|
27458
|
-
gap: "g_1",
|
|
27459
|
-
whiteSpace: "wsnw",
|
|
27460
|
-
borderStyle: "bss",
|
|
27461
|
-
borderWidth: "bw1",
|
|
27462
|
-
borderRadius: "brPill",
|
|
27463
|
-
paddingLeft: "pl_15px",
|
|
27464
|
-
paddingRight: "pr_15px",
|
|
27465
|
-
paddingTop: "pt_7px",
|
|
27466
|
-
paddingBottom: "pb_7px",
|
|
27467
|
-
borderColor: ["bc_var", {
|
|
27468
|
-
"--borderColor": "var(--b-surface-active-border)"
|
|
27469
|
-
}],
|
|
27470
|
-
color: ["color_var", {
|
|
27471
|
-
"--color": (0, import_runtime134.maybeCssVar)(disabled ? "--b-on-surface-active-disabled" /* OnSurfaceActiveDisabled */ : "rgba(36, 36, 36, 1)" /* Gray900 */)
|
|
27472
|
-
}],
|
|
27473
|
-
backgroundColor: ["bgColor_var", {
|
|
27474
|
-
"--backgroundColor": (0, import_runtime134.maybeCssVar)(hovered ? "--b-surface-active-hover" /* SurfaceActiveHover */ : "--b-surface-active" /* SurfaceActive */)
|
|
27475
|
-
}],
|
|
27476
|
-
...disabled ? {
|
|
27477
|
-
cursor: "cur_not_allowed"
|
|
27478
|
-
} : {}
|
|
27479
|
-
};
|
|
27480
|
-
}
|
|
27481
|
-
|
|
27482
27520
|
// src/components/ScrollShadows.tsx
|
|
27483
27521
|
var import_utils43 = require("@react-aria/utils");
|
|
27484
27522
|
var import_react139 = require("react");
|