@homebound/beam 2.416.2 → 2.416.3

package/dist/index.js

@@ -14115,7 +14115,7 @@ function ToggleChips(props) {
 
 // src/components/Accordion.tsx
 import { useId, useResizeObserver as useResizeObserver2 } from "@react-aria/utils";
-import { useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo26, useRef as useRef40, useState as useState29 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo26, useState as useState29 } from "react";
 import { useFocusRing as useFocusRing10 } from "react-aria";
 import { jsx as jsx84, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 function Accordion(props) {
@@ -14139,19 +14139,20 @@ function Accordion(props) {
   const id = useId();
   const [expanded, setExpanded] = useState29(defaultExpanded && !disabled);
   const { isFocusVisible, focusProps } = useFocusRing10();
-  const contentRef = useRef40(null);
+  const [contentEl, setContentEl] = useState29(null);
+  const contentRef = useMemo26(() => ({ current: contentEl }), [contentEl]);
   const [contentHeight, setContentHeight] = useState29(expanded ? "auto" : "0");
   useEffect19(() => {
     setExpanded(defaultExpanded && !disabled);
   }, [defaultExpanded, disabled]);
   useEffect19(() => {
-    setContentHeight(expanded && contentRef.current ? `${contentRef.current.scrollHeight}px` : "0");
-  }, [expanded]);
+    setContentHeight(expanded && contentEl ? `${contentEl.scrollHeight}px` : "0");
+  }, [expanded, contentEl]);
   const onResize = useCallback17(() => {
-    if (contentRef.current && expanded) {
-      setContentHeight(`${contentRef.current.scrollHeight}px`);
+    if (contentEl && expanded) {
+      setContentHeight(`${contentEl.scrollHeight}px`);
     }
-  }, [expanded, setContentHeight]);
+  }, [expanded, contentEl, setContentHeight]);
   useResizeObserver2({ ref: contentRef, onResize });
   const toggle = useCallback17(() => {
     setExpanded((prev) => !prev);
@@ -14213,7 +14214,7 @@ function Accordion(props) {
             id,
             "aria-hidden": !expanded,
             css: Css.oh.h(contentHeight).add("transition", "height 250ms ease-in-out").$,
-            children: expanded && /* @__PURE__ */ jsx84("div", { css: Css.px2.pb2.pt1.if(omitPadding).p0.$, ref: contentRef, ...tid.content, children })
+            children: expanded && /* @__PURE__ */ jsx84("div", { css: Css.px2.pb2.pt1.if(omitPadding).p0.$, ref: setContentEl, ...tid.content, children })
           }
         )
       ]
@@ -14340,17 +14341,17 @@ var variantStyles2 = {
 };
 
 // src/components/BeamContext.tsx
-import { createContext as createContext6, useContext as useContext16, useMemo as useMemo40, useReducer, useRef as useRef46 } from "react";
+import { createContext as createContext6, useContext as useContext16, useMemo as useMemo40, useReducer, useRef as useRef45 } from "react";
 import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
 import { useResizeObserver as useResizeObserver3 } from "@react-aria/utils";
-import { useCallback as useCallback18, useEffect as useEffect22, useRef as useRef42, useState as useState31 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect22, useRef as useRef41, useState as useState31 } from "react";
 import { FocusScope as FocusScope4, OverlayContainer as OverlayContainer2, useDialog, useModal as useModal2, useOverlay as useOverlay2, usePreventScroll } from "react-aria";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/Modal/useModal.tsx
-import { useEffect as useEffect21, useMemo as useMemo28, useRef as useRef41 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo28, useRef as useRef40 } from "react";
 
 // src/components/Modal/ModalContext.tsx
 import { createContext as createContext3, useContext as useContext12, useMemo as useMemo27 } from "react";
@@ -14368,8 +14369,8 @@ function useModalContext() {
 function useModal() {
   const { modalState, modalCanCloseChecks } = useBeamContext();
   const { inModal } = useModalContext();
-  const lastCanClose = useRef41();
-  const api = useRef41();
+  const lastCanClose = useRef40();
+  const api = useRef40();
   useEffect21(() => {
     return () => {
       modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
@@ -14414,7 +14415,7 @@ import { Fragment as Fragment20, jsx as jsx89, jsxs as jsxs51 } from "@emotion/r
 function Modal(props) {
   const { size = "md", content, forceScrolling, api, drawHeaderBorder = false, allowClosing = true } = props;
   const isFixedHeight = typeof size !== "string";
-  const ref = useRef42(null);
+  const ref = useRef41(null);
   const { modalBodyDiv, modalFooterDiv, modalHeaderDiv } = useBeamContext();
   const { closeModal } = useModal();
   const { overlayProps, underlayProps } = useOverlay2(
@@ -14432,9 +14433,9 @@ function Modal(props) {
   const { modalProps } = useModal2();
   const { dialogProps, titleProps } = useDialog({ role: "dialog" }, ref);
   const [[width2, height], setSize] = useState31(getSize(size));
-  const modalBodyRef = useRef42(null);
-  const modalFooterRef = useRef42(null);
-  const modalHeaderRef = useRef42(null);
+  const modalBodyRef = useRef41(null);
+  const modalFooterRef = useRef41(null);
+  const modalHeaderRef = useRef41(null);
   const testId = useTestIds({}, testIdPrefix);
   usePreventScroll();
   const { sm } = useBreakpoint();
@@ -14603,7 +14604,7 @@ function useSnackbarContext() {
 // src/components/SuperDrawer/SuperDrawer.tsx
 import { Global as Global3 } from "@emotion/react";
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect as useEffect23, useRef as useRef43 } from "react";
+import { useEffect as useEffect23, useRef as useRef42 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/SuperDrawer/utils.ts
@@ -14619,7 +14620,7 @@ import { createElement as createElement2 } from "@emotion/react";
 function SuperDrawer() {
   const { drawerContentStack: contentStack, sdHeaderDiv } = useBeamContext();
   const { closeDrawer } = useSuperDrawer();
-  const headerRef = useRef43(null);
+  const headerRef = useRef42(null);
   const testId = useTestIds({}, "superDrawer");
   const currentContent = contentStack.current[contentStack.current.length - 1]?.opts;
   const { content } = currentContent ?? {};
@@ -14675,7 +14676,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo34, useRef as useRef44, useState as useState37 } from "react";
+import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo34, useRef as useRef43, useState as useState37 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -16128,7 +16129,7 @@ function SectionNavLink(props) {
     sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
   }, [sectionRef]);
   const tids = useTestIds(props);
-  const buttonRef = useRef44(null);
+  const buttonRef = useRef43(null);
   const { buttonProps, isPressed } = useButton9({ onPress: handleNavClick }, buttonRef);
   const { isFocusVisible, focusProps } = useFocusRing11();
   const { hoverProps, isHovered } = useHover({});
@@ -16211,7 +16212,7 @@ function FullBleed({ children, omitPadding = false }) {
 import React17, { useEffect as useEffect27, useMemo as useMemo38, useState as useState40 } from "react";
 
 // src/components/ButtonMenu.tsx
-import { useRef as useRef45 } from "react";
+import { useRef as useRef44 } from "react";
 import { useMenuTrigger as useMenuTrigger3 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState3 } from "react-stately";
 import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
@@ -16223,7 +16224,7 @@ function ButtonMenu(props) {
     onChange = props.onChange;
   }
   const state = useMenuTriggerState3({ isOpen: defaultOpen });
-  const buttonRef = useRef45(null);
+  const buttonRef = useRef44(null);
   const { menuTriggerProps, menuProps } = useMenuTrigger3({ isDisabled: !!disabled }, state, buttonRef);
   const tid = useTestIds(
     props,
@@ -17441,18 +17442,18 @@ var BeamContext = createContext6({
 });
 function BeamProvider({ children, ...presentationProps }) {
   const [, tick] = useReducer((prev) => prev + 1, 0);
-  const modalRef = useRef46();
+  const modalRef = useRef45();
   const modalHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const modalBodyDiv = useMemo40(() => {
     const el = document.createElement("div");
     el.style.height = "100%";
     return el;
   }, []);
-  const modalCanCloseChecksRef = useRef46([]);
+  const modalCanCloseChecksRef = useRef45([]);
   const modalFooterDiv = useMemo40(() => document.createElement("div"), []);
-  const drawerContentStackRef = useRef46([]);
-  const drawerCanCloseChecks = useRef46([]);
-  const drawerCanCloseDetailsChecks = useRef46([]);
+  const drawerContentStackRef = useRef45([]);
+  const drawerCanCloseChecks = useRef45([]);
+  const drawerCanCloseDetailsChecks = useRef45([]);
   const sdHeaderDiv = useMemo40(() => document.createElement("div"), []);
   const context = useMemo40(() => {
     return {
@@ -17495,14 +17496,14 @@ function useBeamContext() {
 }
 
 // src/components/ButtonDatePicker.tsx
-import { useRef as useRef47 } from "react";
+import { useRef as useRef46 } from "react";
 import { useMenuTrigger as useMenuTrigger4 } from "react-aria";
 import { useMenuTriggerState as useMenuTriggerState4 } from "react-stately";
 import { jsx as jsx151 } from "@emotion/react/jsx-runtime";
 function ButtonDatePicker(props) {
   const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
   const state = useMenuTriggerState4({ isOpen: defaultOpen });
-  const buttonRef = useRef47(null);
+  const buttonRef = useRef46(null);
   const {
     menuTriggerProps,
     menuProps: { autoFocus: _af, ...menuProps }
@@ -17525,7 +17526,7 @@ function ButtonDatePicker(props) {
 }
 
 // src/components/ButtonGroup.tsx
-import { useRef as useRef48 } from "react";
+import { useRef as useRef47 } from "react";
 import { useButton as useButton10, useFocusRing as useFocusRing12, useHover as useHover15 } from "react-aria";
 import { jsx as jsx152, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 function ButtonGroup(props) {
@@ -17542,7 +17543,7 @@ function ButtonGroup(props) {
 function GroupButton(props) {
   const { icon, iconInc, iconColor, text, active, onClick: onPress, disabled, size, tooltip, ...otherProps } = props;
   const ariaProps = { onPress, isDisabled: !!disabled, ...otherProps };
-  const ref = useRef48(null);
+  const ref = useRef47(null);
   const { buttonProps, isPressed } = useButton10(ariaProps, ref);
   const { isFocusVisible, focusProps } = useFocusRing12();
   const { hoverProps, isHovered } = useHover15(ariaProps);
@@ -17606,14 +17607,14 @@ import { useHover as useHover16 } from "react-aria";
 
 // src/components/Tag.tsx
 import { useResizeObserver as useResizeObserver4 } from "@react-aria/utils";
-import { useRef as useRef49, useState as useState42 } from "react";
+import { useRef as useRef48, useState as useState42 } from "react";
 import { jsx as jsx153, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 function Tag(props) {
   const { text, type, xss, preventTooltip = false, ...otherProps } = props;
   const typeStyles2 = getStyles(type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = useState42(false);
-  const ref = useRef49(null);
+  const ref = useRef48(null);
   useResizeObserver4({
     ref,
     onResize: () => {
@@ -17727,7 +17728,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback24, useRef as useRef50 } from "react";
+import { useCallback as useCallback24, useRef as useRef49 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext7, useContext as useContext17 } from "react";
@@ -17744,12 +17745,12 @@ function useDnDGridContext() {
 import { jsx as jsx156 } from "@emotion/react/jsx-runtime";
 function DnDGrid(props) {
   const { children, gridStyles, onReorder, activeItemStyles } = props;
-  const gridEl = useRef50(null);
-  const dragEl = useRef50();
-  const cloneEl = useRef50();
-  const initialOrder = useRef50();
-  const reorderViaKeyboard = useRef50(false);
-  const transformFrom = useRef50({ x: 0, y: 0 });
+  const gridEl = useRef49(null);
+  const dragEl = useRef49();
+  const cloneEl = useRef49();
+  const initialOrder = useRef49();
+  const reorderViaKeyboard = useRef49(false);
+  const transformFrom = useRef49({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
   const getGridItems = useCallback24(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
@@ -18117,10 +18118,10 @@ function HbSpinnerProvider({ quips = [], children }) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef51, useState as useState43 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef50, useState as useState43 } from "react";
 import { jsx as jsx161, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function MaxLines({ maxLines, children }) {
-  const elRef = useRef51(null);
+  const elRef = useRef50(null);
   const [hasMore, setHasMore] = useState43(false);
   const [expanded, setExpanded] = useState43(false);
   useLayoutEffect2(() => {
@@ -18143,7 +18144,7 @@ function MaxLines({ maxLines, children }) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback26, useMemo as useMemo45, useRef as useRef52, useState as useState44 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo45, useRef as useRef51, useState as useState44 } from "react";
 import { jsx as jsx162, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 function ScrollShadows(props) {
   const { children, xss, horizontal = false, bgColor = "rgba(255,255,255,1)" /* White */ } = props;
@@ -18154,7 +18155,7 @@ function ScrollShadows(props) {
   }
   const [showStartShadow, setShowStartShadow] = useState44(false);
   const [showEndShadow, setShowEndShadow] = useState44(false);
-  const scrollRef = useRef52(null);
+  const scrollRef = useRef51(null);
   const [startShadowStyles, endShadowStyles] = useMemo45(() => {
     const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
     const commonStyles = Css.absolute.z3.add({ pointerEvents: "none" }).$;
@@ -18265,7 +18266,7 @@ function useSnackbar() {
 var snackbarId = 1;
 
 // src/components/Stepper.tsx
-import { useRef as useRef53 } from "react";
+import { useRef as useRef52 } from "react";
 import { useButton as useButton11, useFocusRing as useFocusRing14, useHover as useHover18 } from "react-aria";
 import { jsx as jsx163, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 function Stepper(props) {
@@ -18309,7 +18310,7 @@ function Stepper(props) {
 function StepButton(props) {
   const { label, disabled, state, isCurrent, onClick } = props;
   const ariaProps = { onPress: onClick, isDisabled: disabled };
-  const ref = useRef53(null);
+  const ref = useRef52(null);
   const { buttonProps, isPressed } = useButton11(ariaProps, ref);
   const { isFocusVisible, focusProps } = useFocusRing14();
   const { hoverProps, isHovered } = useHover18(ariaProps);
@@ -18598,7 +18599,7 @@ var SuperDrawerContent = ({ children, actions }) => {
 
 // src/components/Tabs.tsx
 import { camelCase as camelCase5 } from "change-case";
-import { useEffect as useEffect31, useMemo as useMemo47, useRef as useRef54, useState as useState45 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo47, useRef as useRef53, useState as useState45 } from "react";
 import { mergeProps as mergeProps13, useFocusRing as useFocusRing15, useHover as useHover19 } from "react-aria";
 import { matchPath, Route } from "react-router";
 import { Link as Link5, useLocation } from "react-router-dom";
@@ -18645,7 +18646,7 @@ function Tabs(props) {
   const { isFocusVisible, focusProps } = useFocusRing15();
   const tid = useTestIds(others, "tabs");
   const [active, setActive] = useState45(selected);
-  const ref = useRef54(null);
+  const ref = useRef53(null);
   useEffect31(() => setActive(selected), [selected]);
   function onKeyUp(e) {
     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {