@homebound/beam 4.14.4 → 4.14.6
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 +100 -80
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +64 -44
- package/dist/index.js.map +1 -1
- package/dist/truss.css +4 -2
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -7615,6 +7615,10 @@ var pageContentPaddingX = {
|
|
|
7615
7615
|
"--mdandup_paddingRight": (0, import_runtime15.maybeCssVar)(__maybeInc6(pageContentPaddingXValue))
|
|
7616
7616
|
}]
|
|
7617
7617
|
};
|
|
7618
|
+
var selfTopSpacedAttr = "data-self-top-spaced";
|
|
7619
|
+
var selfTopSpaced = {
|
|
7620
|
+
[selfTopSpacedAttr]: true
|
|
7621
|
+
};
|
|
7618
7622
|
function headerContentPaddingX(compact = false) {
|
|
7619
7623
|
return compact ? {
|
|
7620
7624
|
paddingLeft: "pl1",
|
|
@@ -14426,7 +14430,7 @@ function GridTable(props) {
|
|
|
14426
14430
|
}
|
|
14427
14431
|
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
|
|
14428
14432
|
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ref: resizeRef, ...(0, import_runtime42.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)), ...tid.probe }),
|
|
14429
|
-
loading && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...(0, import_runtime42.trussProps)(loadingOverlayCss), ...tid.loadingOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loader, { ...tid.loadingSpinner }) }),
|
|
14433
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...(0, import_runtime42.trussProps)(loadingOverlayCss), ...tid.loadingOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Loader, { ...tid.loadingSpinner, size: "md" }) }),
|
|
14430
14434
|
as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition, loading }) : _as === "virtual" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(VirtualGridTableView, { style: tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition, loading }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, loading, infiniteScroll, tableContainerRef, persistScrollPosition)
|
|
14431
14435
|
] }) });
|
|
14432
14436
|
}
|
|
@@ -24484,7 +24488,9 @@ function useScrollPinnedViewportBounds(anchorRef, enabled, getPinTopPx) {
|
|
|
24484
24488
|
const isPinned = rect.top <= pinTopPx + 1;
|
|
24485
24489
|
const topPx = isPinned ? pinTopPx : Math.round(rect.top);
|
|
24486
24490
|
const heightPx = Math.max(0, Math.round(window.innerHeight - topPx));
|
|
24487
|
-
setBounds(
|
|
24491
|
+
setBounds(
|
|
24492
|
+
(prev) => prev?.topPx === topPx && prev?.heightPx === heightPx && prev?.isPinned === isPinned ? prev : { topPx, heightPx, isPinned }
|
|
24493
|
+
);
|
|
24488
24494
|
}, [anchorRef]);
|
|
24489
24495
|
(0, import_react120.useLayoutEffect)(() => {
|
|
24490
24496
|
getPinTopPxRef.current = getPinTopPx;
|
|
@@ -24703,7 +24709,10 @@ function DocumentScrollRightPane({
|
|
|
24703
24709
|
borderLeftWidth: "blw_1px",
|
|
24704
24710
|
borderColor: ["bc_var", {
|
|
24705
24711
|
"--borderColor": "var(--b-surface-separator)"
|
|
24706
|
-
}]
|
|
24712
|
+
}],
|
|
24713
|
+
...!!paneBounds?.isPinned ? {
|
|
24714
|
+
transition: "tsn_top_200ms_cubic_bezier_0_4_0_0_2_1_height_200ms_cubic_bezier_0_4_0_0_2_1"
|
|
24715
|
+
} : {}
|
|
24707
24716
|
}),
|
|
24708
24717
|
initial: {
|
|
24709
24718
|
x: slideX
|
|
@@ -25167,6 +25176,7 @@ function GridTableLayoutActionsComponent(props) {
|
|
|
25167
25176
|
display: "df",
|
|
25168
25177
|
flexDirection: "fdc",
|
|
25169
25178
|
gap: "g_1",
|
|
25179
|
+
paddingTop: "pt3",
|
|
25170
25180
|
paddingBottom: "pb2",
|
|
25171
25181
|
...view === "card" ? {
|
|
25172
25182
|
paddingBottom: "pb3"
|
|
@@ -25313,11 +25323,12 @@ function GridTableLayoutComponent(props) {
|
|
|
25313
25323
|
const emptyState = (0, import_react130.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
|
|
25314
25324
|
const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef, actions });
|
|
25315
25325
|
const cardAs = view === "card" ? "card" : void 0;
|
|
25326
|
+
const tableStyle = (0, import_react130.useMemo)(() => getDefaultStyle(tableProps.style), [tableProps.style]);
|
|
25316
25327
|
const tableBody = /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(import_jsx_runtime178.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(GridTable, { ...tableProps, ...cardAs ? {
|
|
25317
25328
|
as: cardAs
|
|
25318
|
-
} : {}, api, emptyState, filter: clientSearch, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) : /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(QueryTable, { ...tableProps, ...cardAs ? {
|
|
25329
|
+
} : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) : /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(QueryTable, { ...tableProps, ...cardAs ? {
|
|
25319
25330
|
as: cardAs
|
|
25320
|
-
} : {}, api, emptyState, filter: clientSearch, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
|
|
25331
|
+
} : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
|
|
25321
25332
|
const tableScrollContent = /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
|
|
25322
25333
|
showTableActions && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime117.trussProps)({
|
|
25323
25334
|
...inDocumentScrollLayout ? {
|
|
@@ -25359,10 +25370,17 @@ function GridTableLayoutComponent(props) {
|
|
|
25359
25370
|
} : {
|
|
25360
25371
|
display: "df",
|
|
25361
25372
|
flexDirection: "fdc"
|
|
25362
|
-
}), ...tid.tableWrapper, children: tableScrollContent })
|
|
25373
|
+
}), ...showTableActions ? selfTopSpaced : {}, ...tid.tableWrapper, children: tableScrollContent })
|
|
25363
25374
|
);
|
|
25364
25375
|
}
|
|
25365
25376
|
var GridTableLayout = import_react130.default.memo(GridTableLayoutComponent);
|
|
25377
|
+
function getDefaultStyle(style) {
|
|
25378
|
+
if (style !== void 0 && !isGridStyleDef(style)) return style;
|
|
25379
|
+
return {
|
|
25380
|
+
allWhite: true,
|
|
25381
|
+
...style
|
|
25382
|
+
};
|
|
25383
|
+
}
|
|
25366
25384
|
function validateColumns(columns) {
|
|
25367
25385
|
for (const col of columns) {
|
|
25368
25386
|
if (!col.id || !col.name) {
|
|
@@ -29659,7 +29677,7 @@ function FormSectionLayout(props) {
|
|
|
29659
29677
|
}
|
|
29660
29678
|
|
|
29661
29679
|
// src/layouts/NavbarLayout/NavbarLayout.tsx
|
|
29662
|
-
var
|
|
29680
|
+
var import_react166 = require("react");
|
|
29663
29681
|
var import_runtime153 = require("@homebound/truss/runtime");
|
|
29664
29682
|
|
|
29665
29683
|
// src/layouts/useAutoHideOnScroll.ts
|
|
@@ -29667,49 +29685,41 @@ var import_react162 = require("react");
|
|
|
29667
29685
|
var THRESHOLD = 80;
|
|
29668
29686
|
function getInitialAutoHideState() {
|
|
29669
29687
|
if (typeof window === "undefined" || window.scrollY <= 0) {
|
|
29670
|
-
return
|
|
29688
|
+
return "resting";
|
|
29671
29689
|
}
|
|
29672
|
-
return
|
|
29690
|
+
return "hidden";
|
|
29673
29691
|
}
|
|
29674
29692
|
function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
|
|
29675
29693
|
const initial = getInitialAutoHideState();
|
|
29676
|
-
const [state, setState] = (0, import_react162.useState)(initial
|
|
29677
|
-
const stateRef = (0, import_react162.useRef)(initial
|
|
29678
|
-
const [atTop, setAtTop] = (0, import_react162.useState)(initial.atTop);
|
|
29679
|
-
const atTopRef = (0, import_react162.useRef)(initial.atTop);
|
|
29694
|
+
const [state, setState] = (0, import_react162.useState)(initial);
|
|
29695
|
+
const stateRef = (0, import_react162.useRef)(initial);
|
|
29680
29696
|
const getTopOffsetRef = (0, import_react162.useRef)(getTopOffset);
|
|
29681
29697
|
getTopOffsetRef.current = getTopOffset;
|
|
29682
29698
|
const lastScrollY = (0, import_react162.useRef)(Number.POSITIVE_INFINITY);
|
|
29683
29699
|
const lastScrollHeight = (0, import_react162.useRef)(0);
|
|
29684
29700
|
(0, import_react162.useLayoutEffect)(() => {
|
|
29685
29701
|
if (!enabled) {
|
|
29686
|
-
stateRef.current = "
|
|
29687
|
-
atTopRef.current = true;
|
|
29702
|
+
stateRef.current = "resting";
|
|
29688
29703
|
lastScrollY.current = Number.POSITIVE_INFINITY;
|
|
29689
29704
|
lastScrollHeight.current = 0;
|
|
29690
|
-
setState("
|
|
29691
|
-
setAtTop(true);
|
|
29705
|
+
setState("resting");
|
|
29692
29706
|
return;
|
|
29693
29707
|
}
|
|
29694
|
-
const commit = (nextState
|
|
29708
|
+
const commit = (nextState) => {
|
|
29695
29709
|
if (nextState !== stateRef.current) {
|
|
29696
29710
|
stateRef.current = nextState;
|
|
29697
29711
|
setState(nextState);
|
|
29698
29712
|
}
|
|
29699
|
-
if (nextAtTop !== atTopRef.current) {
|
|
29700
|
-
atTopRef.current = nextAtTop;
|
|
29701
|
-
setAtTop(nextAtTop);
|
|
29702
|
-
}
|
|
29703
29713
|
};
|
|
29704
29714
|
const autoHideStateOnLayoutChange = (rect, topOffset) => {
|
|
29705
29715
|
const nextAtTop = rect.top >= topOffset;
|
|
29706
29716
|
let next = stateRef.current;
|
|
29707
29717
|
if (nextAtTop) {
|
|
29708
|
-
next = "
|
|
29718
|
+
next = "resting";
|
|
29709
29719
|
} else if (rect.bottom < -THRESHOLD && next !== "revealed") {
|
|
29710
29720
|
next = "hidden";
|
|
29711
29721
|
}
|
|
29712
|
-
return
|
|
29722
|
+
return next;
|
|
29713
29723
|
};
|
|
29714
29724
|
const updateAutoHideState = () => {
|
|
29715
29725
|
const el = spacerRef.current;
|
|
@@ -29720,7 +29730,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
|
|
|
29720
29730
|
lastScrollHeight.current = currentScrollHeight;
|
|
29721
29731
|
if (window.scrollY <= 0) {
|
|
29722
29732
|
lastScrollY.current = 0;
|
|
29723
|
-
commit("
|
|
29733
|
+
commit("resting");
|
|
29724
29734
|
return;
|
|
29725
29735
|
}
|
|
29726
29736
|
const currentY = window.scrollY;
|
|
@@ -29728,8 +29738,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
|
|
|
29728
29738
|
const topOffset = getTopOffsetRef.current?.() ?? 0;
|
|
29729
29739
|
if (scrollHeightChanged) {
|
|
29730
29740
|
lastScrollY.current = currentY;
|
|
29731
|
-
|
|
29732
|
-
commit(next2, nextAtTop2);
|
|
29741
|
+
commit(autoHideStateOnLayoutChange(rect, topOffset));
|
|
29733
29742
|
return;
|
|
29734
29743
|
}
|
|
29735
29744
|
const dy = currentY - lastScrollY.current;
|
|
@@ -29738,18 +29747,18 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
|
|
|
29738
29747
|
const nextAtTop = rect.top >= topOffset;
|
|
29739
29748
|
let next = stateRef.current;
|
|
29740
29749
|
if (nextAtTop) {
|
|
29741
|
-
next = "
|
|
29750
|
+
next = "resting";
|
|
29742
29751
|
} else if (rect.bottom < -THRESHOLD) {
|
|
29743
29752
|
if (dy < 0 && !atBottom) next = "revealed";
|
|
29744
29753
|
else if (dy > 0) next = "hidden";
|
|
29745
29754
|
}
|
|
29746
|
-
commit(next
|
|
29755
|
+
commit(next);
|
|
29747
29756
|
};
|
|
29748
29757
|
updateAutoHideState();
|
|
29749
29758
|
window.addEventListener("scroll", updateAutoHideState, { passive: true });
|
|
29750
29759
|
return () => window.removeEventListener("scroll", updateAutoHideState);
|
|
29751
29760
|
}, [enabled, spacerRef]);
|
|
29752
|
-
return { state
|
|
29761
|
+
return { state };
|
|
29753
29762
|
}
|
|
29754
29763
|
|
|
29755
29764
|
// src/layouts/useMeasuredHeight.ts
|
|
@@ -29769,15 +29778,28 @@ function useMeasuredHeight(ref, enabled) {
|
|
|
29769
29778
|
return height;
|
|
29770
29779
|
}
|
|
29771
29780
|
|
|
29772
|
-
// src/layouts/
|
|
29781
|
+
// src/layouts/useTransitionAfterPaint.ts
|
|
29773
29782
|
var import_react164 = require("react");
|
|
29783
|
+
function useTransitionAfterPaint(ref, transition) {
|
|
29784
|
+
(0, import_react164.useLayoutEffect)(() => {
|
|
29785
|
+
const el = ref.current;
|
|
29786
|
+
if (!el) return;
|
|
29787
|
+
const id = requestAnimationFrame(() => {
|
|
29788
|
+
el.style.transition = transition;
|
|
29789
|
+
});
|
|
29790
|
+
return () => cancelAnimationFrame(id);
|
|
29791
|
+
}, [ref, transition]);
|
|
29792
|
+
}
|
|
29793
|
+
|
|
29794
|
+
// src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
|
|
29795
|
+
var import_react165 = require("react");
|
|
29774
29796
|
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
29775
|
-
var NavbarLayoutHeightContext = (0,
|
|
29797
|
+
var NavbarLayoutHeightContext = (0, import_react165.createContext)(0);
|
|
29776
29798
|
function NavbarLayoutHeightProvider({ value, children }) {
|
|
29777
29799
|
return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
|
|
29778
29800
|
}
|
|
29779
29801
|
function useNavbarLayoutHeight() {
|
|
29780
|
-
return (0,
|
|
29802
|
+
return (0, import_react165.useContext)(NavbarLayoutHeightContext);
|
|
29781
29803
|
}
|
|
29782
29804
|
|
|
29783
29805
|
// src/layouts/NavbarLayout/NavbarLayout.tsx
|
|
@@ -29791,14 +29813,13 @@ function NavbarLayout(props) {
|
|
|
29791
29813
|
children
|
|
29792
29814
|
} = props;
|
|
29793
29815
|
const tid = useTestIds(props, "navbarLayout");
|
|
29794
|
-
const navMetricsRef = (0,
|
|
29795
|
-
const spacerRef = (0,
|
|
29816
|
+
const navMetricsRef = (0, import_react166.useRef)(null);
|
|
29817
|
+
const spacerRef = (0, import_react166.useRef)(null);
|
|
29796
29818
|
const navHeight = useMeasuredHeight(navMetricsRef, true);
|
|
29797
29819
|
const {
|
|
29798
|
-
state: autoHideState
|
|
29799
|
-
atTop
|
|
29820
|
+
state: autoHideState
|
|
29800
29821
|
} = useAutoHideOnScroll(spacerRef, true);
|
|
29801
|
-
const navOccupiesViewportTop = autoHideState
|
|
29822
|
+
const navOccupiesViewportTop = autoHideState !== "hidden";
|
|
29802
29823
|
const navbarOffsetPx = navHeight > 0 && navOccupiesViewportTop ? navHeight : 0;
|
|
29803
29824
|
const cssVars = navbarOffsetPx > 0 ? {
|
|
29804
29825
|
[beamNavbarLayoutHeightVar]: `${navbarOffsetPx}px`
|
|
@@ -29812,14 +29833,14 @@ function NavbarLayout(props) {
|
|
|
29812
29833
|
}],
|
|
29813
29834
|
width: ["w_var", {
|
|
29814
29835
|
"--width": (0, import_runtime153.maybeCssVar)(__maybeInc33(innerWidth))
|
|
29815
|
-
}]
|
|
29816
|
-
transition: "transitionTop"
|
|
29836
|
+
}]
|
|
29817
29837
|
};
|
|
29838
|
+
useTransitionAfterPaint(navMetricsRef, "top 200ms cubic-bezier(0.4, 0, 0.2, 1)");
|
|
29818
29839
|
const bannerTop = `var(${beamEnvironmentBannerLayoutHeightVar}, 0px)`;
|
|
29819
29840
|
const innerStyle = {
|
|
29820
29841
|
top: autoHideState === "hidden" ? `calc(${bannerTop} - ${navHeight}px)` : bannerTop
|
|
29821
29842
|
};
|
|
29822
|
-
const navbarEl = (0,
|
|
29843
|
+
const navbarEl = (0, import_react166.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Navbar, { ...navbar }), [navbar]);
|
|
29823
29844
|
return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(MobileSubNavProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { ...(0, import_runtime153.mergeProps)(void 0, cssVars, {
|
|
29824
29845
|
display: "df",
|
|
29825
29846
|
flexDirection: "fdc",
|
|
@@ -29837,14 +29858,14 @@ function NavbarLayout(props) {
|
|
|
29837
29858
|
}
|
|
29838
29859
|
|
|
29839
29860
|
// src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
|
|
29840
|
-
var
|
|
29861
|
+
var import_react168 = require("react");
|
|
29841
29862
|
|
|
29842
29863
|
// src/hooks/useDocumentTitle.tsx
|
|
29843
|
-
var
|
|
29864
|
+
var import_react167 = require("react");
|
|
29844
29865
|
function useDocumentTitle(...titleSegments) {
|
|
29845
29866
|
const config = useDocumentTitleConfig();
|
|
29846
29867
|
const pageTitle = joinDocumentTitleSegments(...titleSegments);
|
|
29847
|
-
(0,
|
|
29868
|
+
(0, import_react167.useLayoutEffect)(() => {
|
|
29848
29869
|
if (!config || !pageTitle || typeof document === "undefined") {
|
|
29849
29870
|
return;
|
|
29850
29871
|
}
|
|
@@ -29967,17 +29988,16 @@ function PageHeaderLayout(props) {
|
|
|
29967
29988
|
} = props;
|
|
29968
29989
|
const tid = useTestIds(props, "pageHeaderLayout");
|
|
29969
29990
|
const bannerAndNavbarHeight = useBannerAndNavbarHeight();
|
|
29970
|
-
const bannerAndNavbarHeightRef = (0,
|
|
29991
|
+
const bannerAndNavbarHeightRef = (0, import_react168.useRef)(bannerAndNavbarHeight);
|
|
29971
29992
|
bannerAndNavbarHeightRef.current = bannerAndNavbarHeight;
|
|
29972
|
-
const getBannerAndNavbarHeight = (0,
|
|
29973
|
-
const headerMetricsRef = (0,
|
|
29974
|
-
const spacerRef = (0,
|
|
29993
|
+
const getBannerAndNavbarHeight = (0, import_react168.useCallback)(() => bannerAndNavbarHeightRef.current, []);
|
|
29994
|
+
const headerMetricsRef = (0, import_react168.useRef)(null);
|
|
29995
|
+
const spacerRef = (0, import_react168.useRef)(null);
|
|
29975
29996
|
const headerHeight = useMeasuredHeight(headerMetricsRef, true);
|
|
29976
29997
|
const {
|
|
29977
|
-
state: autoHideState
|
|
29978
|
-
atTop
|
|
29998
|
+
state: autoHideState
|
|
29979
29999
|
} = useAutoHideOnScroll(spacerRef, true, getBannerAndNavbarHeight);
|
|
29980
|
-
const headerOccupiesPosition = autoHideState
|
|
30000
|
+
const headerOccupiesPosition = autoHideState !== "hidden";
|
|
29981
30001
|
const cssVars = headerHeight > 0 && headerOccupiesPosition ? {
|
|
29982
30002
|
[beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
|
|
29983
30003
|
} : void 0;
|
|
@@ -29994,13 +30014,13 @@ function PageHeaderLayout(props) {
|
|
|
29994
30014
|
}],
|
|
29995
30015
|
zIndex: ["z_var", {
|
|
29996
30016
|
"--zIndex": (0, import_runtime156.maybeCssVar)(zIndices.pageStickyHeader)
|
|
29997
|
-
}]
|
|
29998
|
-
transition: "transitionAll"
|
|
30017
|
+
}]
|
|
29999
30018
|
};
|
|
30019
|
+
useTransitionAfterPaint(headerMetricsRef, "all 200ms cubic-bezier(0.4, 0, 0.2, 1)");
|
|
30000
30020
|
const innerStyle = {
|
|
30001
30021
|
top: autoHideState === "hidden" ? `calc(${outerTop} - ${headerHeight}px)` : outerTop
|
|
30002
30022
|
};
|
|
30003
|
-
const pageHeaderEl = (0,
|
|
30023
|
+
const pageHeaderEl = (0, import_react168.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
|
|
30004
30024
|
return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)("div", { ...(0, import_runtime156.mergeProps)(void 0, cssVars, {
|
|
30005
30025
|
display: "df",
|
|
30006
30026
|
flexDirection: "fdc",
|
|
@@ -30012,12 +30032,12 @@ function PageHeaderLayout(props) {
|
|
|
30012
30032
|
flexShrink: "fs0",
|
|
30013
30033
|
width: "w100"
|
|
30014
30034
|
}), children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime156.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
|
|
30015
|
-
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { className: "df fdc fg1 mh0 w100
|
|
30035
|
+
/* @__PURE__ */ (0, import_jsx_runtime236.jsx)("div", { className: "df fdc fg1 mh0 w100 first_child_n_data_self_top_spaced_mt3", ...tid.body, children })
|
|
30016
30036
|
] }) });
|
|
30017
30037
|
}
|
|
30018
30038
|
|
|
30019
30039
|
// src/layouts/Workflow/WorkflowPageLayout.tsx
|
|
30020
|
-
var
|
|
30040
|
+
var import_react171 = require("react");
|
|
30021
30041
|
|
|
30022
30042
|
// src/components/Headers/WorkflowHeader.tsx
|
|
30023
30043
|
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
@@ -30034,7 +30054,7 @@ function WorkflowHeader(props) {
|
|
|
30034
30054
|
}
|
|
30035
30055
|
|
|
30036
30056
|
// src/layouts/Workflow/RightPaneTriggers.tsx
|
|
30037
|
-
var
|
|
30057
|
+
var import_react169 = require("react");
|
|
30038
30058
|
var import_runtime157 = require("@homebound/truss/runtime");
|
|
30039
30059
|
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
30040
30060
|
var __maybeInc35 = (inc) => {
|
|
@@ -30055,7 +30075,7 @@ function WorkflowPageRightPaneTriggers(props) {
|
|
|
30055
30075
|
} = useRightPaneActions();
|
|
30056
30076
|
const tid = useTestIds(props, "rightPaneTriggers");
|
|
30057
30077
|
const pageTriggerInsetPx = 24;
|
|
30058
|
-
const onClick = (0,
|
|
30078
|
+
const onClick = (0, import_react169.useCallback)((trigger) => {
|
|
30059
30079
|
openRightPane({
|
|
30060
30080
|
content: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(RightPanePanel, { title: trigger.label, children: trigger.content })
|
|
30061
30081
|
});
|
|
@@ -30098,18 +30118,18 @@ function WorkflowPageRightPaneTriggers(props) {
|
|
|
30098
30118
|
}
|
|
30099
30119
|
|
|
30100
30120
|
// src/layouts/Workflow/useUnsavedChangesGuard.tsx
|
|
30101
|
-
var
|
|
30121
|
+
var import_react170 = require("react");
|
|
30102
30122
|
var import_react_router_dom9 = require("react-router-dom");
|
|
30103
30123
|
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
30104
30124
|
function useUnsavedChangesGuard(options) {
|
|
30105
30125
|
const { isDirty, allowNavigation, onCancel } = options;
|
|
30106
30126
|
const { openModal } = useModal();
|
|
30107
|
-
const isDirtyRef = (0,
|
|
30127
|
+
const isDirtyRef = (0, import_react170.useRef)(isDirty);
|
|
30108
30128
|
isDirtyRef.current = isDirty;
|
|
30109
|
-
const allowNavigationRef = (0,
|
|
30129
|
+
const allowNavigationRef = (0, import_react170.useRef)(allowNavigation);
|
|
30110
30130
|
allowNavigationRef.current = allowNavigation;
|
|
30111
|
-
const allowCancelNavigationRef = (0,
|
|
30112
|
-
(0,
|
|
30131
|
+
const allowCancelNavigationRef = (0, import_react170.useRef)(false);
|
|
30132
|
+
(0, import_react170.useEffect)(() => {
|
|
30113
30133
|
const onBeforeUnload = (e) => {
|
|
30114
30134
|
if (isDirtyRef.current?.()) {
|
|
30115
30135
|
e.preventDefault();
|
|
@@ -30145,7 +30165,7 @@ function useUnsavedChangesGuard(options) {
|
|
|
30145
30165
|
function UnsavedChangesNavigationModal(props) {
|
|
30146
30166
|
const { proceed, cancelNavigation } = props;
|
|
30147
30167
|
const { openModal, closeModal } = useModal();
|
|
30148
|
-
(0,
|
|
30168
|
+
(0, import_react170.useEffect)(() => {
|
|
30149
30169
|
openModal({
|
|
30150
30170
|
allowClosing: false,
|
|
30151
30171
|
content: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ConfirmCloseModal, { title: "Leave page?", onClose: proceed, onContinue: cancelNavigation })
|
|
@@ -30222,7 +30242,7 @@ function WorkflowPageLayout(props) {
|
|
|
30222
30242
|
const actions = /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(WorkflowActions, { ...actionProps, aiMode, onCancel: onCancelClick });
|
|
30223
30243
|
const triggers = rightPaneTriggers ?? [];
|
|
30224
30244
|
const pageTriggers = triggers.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(WorkflowPageRightPaneTriggers, { triggers }) : void 0;
|
|
30225
|
-
const headerMetricsRef = (0,
|
|
30245
|
+
const headerMetricsRef = (0, import_react171.useRef)(null);
|
|
30226
30246
|
const headerHeight = useMeasuredHeight(headerMetricsRef, true);
|
|
30227
30247
|
const headerWidth = documentScrollChromeWidth();
|
|
30228
30248
|
const outerTop = bannerAndNavbarChromeTop();
|
|
@@ -30230,7 +30250,7 @@ function WorkflowPageLayout(props) {
|
|
|
30230
30250
|
[beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
|
|
30231
30251
|
} : void 0;
|
|
30232
30252
|
const showFooter = isMobile;
|
|
30233
|
-
(0,
|
|
30253
|
+
(0, import_react171.useLayoutEffect)(() => {
|
|
30234
30254
|
const root = document.documentElement;
|
|
30235
30255
|
const previous = root.style.getPropertyValue(beamWorkflowLayoutFooterHeightVar);
|
|
30236
30256
|
root.style.setProperty(beamWorkflowLayoutFooterHeightVar, showFooter ? `${mobileFooterHeightPx}px` : "0px");
|
|
@@ -30360,7 +30380,7 @@ function FocusedFormLayout(props) {
|
|
|
30360
30380
|
}
|
|
30361
30381
|
|
|
30362
30382
|
// src/layouts/Workflow/StepperLayout.tsx
|
|
30363
|
-
var
|
|
30383
|
+
var import_react172 = require("react");
|
|
30364
30384
|
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
30365
30385
|
function StepperLayout(props) {
|
|
30366
30386
|
const {
|
|
@@ -30376,7 +30396,7 @@ function StepperLayout(props) {
|
|
|
30376
30396
|
...headerProps
|
|
30377
30397
|
} = props;
|
|
30378
30398
|
const stepTabs = steps.map((step) => ({ ...step, value: defaultTestId(step.label) }));
|
|
30379
|
-
const [currentStep, setCurrentStep] = (0,
|
|
30399
|
+
const [currentStep, setCurrentStep] = (0, import_react172.useState)(() => getInitialStep(stepTabs, defaultStep));
|
|
30380
30400
|
const tid = useTestIds(props, "stepperLayout");
|
|
30381
30401
|
const { closeRightPane } = useRightPaneActions();
|
|
30382
30402
|
const currentIndex = hasStep(stepTabs, currentStep) ? stepTabs.findIndex((step) => step.value === currentStep) : 0;
|
|
@@ -30579,9 +30599,9 @@ function StaticField(props) {
|
|
|
30579
30599
|
}
|
|
30580
30600
|
|
|
30581
30601
|
// src/hooks/useFilter.ts
|
|
30582
|
-
var
|
|
30602
|
+
var import_react173 = require("react");
|
|
30583
30603
|
function useFilter4({ filterDefs }) {
|
|
30584
|
-
const [filter, setFilter] = (0,
|
|
30604
|
+
const [filter, setFilter] = (0, import_react173.useState)(
|
|
30585
30605
|
Object.fromEntries(
|
|
30586
30606
|
safeEntries(filterDefs).filter(([key, def]) => def(key).defaultValue !== void 0).map(([key, def]) => [key, def(key).defaultValue])
|
|
30587
30607
|
)
|
|
@@ -30590,7 +30610,7 @@ function useFilter4({ filterDefs }) {
|
|
|
30590
30610
|
}
|
|
30591
30611
|
|
|
30592
30612
|
// src/inputs/Autocomplete.tsx
|
|
30593
|
-
var
|
|
30613
|
+
var import_react174 = require("react");
|
|
30594
30614
|
var import_react_aria66 = require("react-aria");
|
|
30595
30615
|
var import_react_stately18 = require("react-stately");
|
|
30596
30616
|
var import_jsx_runtime248 = require("react/jsx-runtime");
|
|
@@ -30610,7 +30630,7 @@ function Autocomplete(props) {
|
|
|
30610
30630
|
} = props;
|
|
30611
30631
|
const { effectiveValue, proposalProps } = useAiProposal(value, proposedValue);
|
|
30612
30632
|
const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
|
|
30613
|
-
const comboBoxChildren = (0,
|
|
30633
|
+
const comboBoxChildren = (0, import_react174.useCallback)(
|
|
30614
30634
|
(item) => /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_stately18.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
|
|
30615
30635
|
[getOptionValue, getOptionLabel, getOptionMenuLabel]
|
|
30616
30636
|
);
|
|
@@ -30635,10 +30655,10 @@ function Autocomplete(props) {
|
|
|
30635
30655
|
...others
|
|
30636
30656
|
};
|
|
30637
30657
|
const state = (0, import_react_stately18.useComboBoxState)(comboBoxProps);
|
|
30638
|
-
const inputWrapRef = (0,
|
|
30639
|
-
const inputRef = (0,
|
|
30640
|
-
const listBoxRef = (0,
|
|
30641
|
-
const popoverRef = (0,
|
|
30658
|
+
const inputWrapRef = (0, import_react174.useRef)(null);
|
|
30659
|
+
const inputRef = (0, import_react174.useRef)(null);
|
|
30660
|
+
const listBoxRef = (0, import_react174.useRef)(null);
|
|
30661
|
+
const popoverRef = (0, import_react174.useRef)(null);
|
|
30642
30662
|
const { inputProps, listBoxProps, labelProps } = (0, import_react_aria66.useComboBox)(
|
|
30643
30663
|
{
|
|
30644
30664
|
...comboBoxProps,
|
|
@@ -30706,7 +30726,7 @@ function Autocomplete(props) {
|
|
|
30706
30726
|
}
|
|
30707
30727
|
|
|
30708
30728
|
// src/inputs/ToggleButton.tsx
|
|
30709
|
-
var
|
|
30729
|
+
var import_react175 = require("react");
|
|
30710
30730
|
var import_react_aria67 = require("react-aria");
|
|
30711
30731
|
var import_react_stately19 = require("react-stately");
|
|
30712
30732
|
var import_runtime161 = require("@homebound/truss/runtime");
|
|
@@ -30721,7 +30741,7 @@ function ToggleButton(props) {
|
|
|
30721
30741
|
__storyState,
|
|
30722
30742
|
...otherProps
|
|
30723
30743
|
} = props;
|
|
30724
|
-
const [asyncInProgress, setAsyncInProgress] = (0,
|
|
30744
|
+
const [asyncInProgress, setAsyncInProgress] = (0, import_react175.useState)(false);
|
|
30725
30745
|
const isDisabled = !!disabled || asyncInProgress;
|
|
30726
30746
|
const ariaProps = {
|
|
30727
30747
|
"aria-label": label,
|
|
@@ -30740,8 +30760,8 @@ function ToggleButton(props) {
|
|
|
30740
30760
|
return result;
|
|
30741
30761
|
}
|
|
30742
30762
|
});
|
|
30743
|
-
const labelRef = (0,
|
|
30744
|
-
const ref = (0,
|
|
30763
|
+
const labelRef = (0, import_react175.useRef)(null);
|
|
30764
|
+
const ref = (0, import_react175.useRef)(null);
|
|
30745
30765
|
const tid = useTestIds(otherProps, label);
|
|
30746
30766
|
const {
|
|
30747
30767
|
isPressed: isPressedFromEvents,
|