@homebound/beam 2.416.0-alpha.1 → 2.416.1

package/dist/index.js

@@ -5127,7 +5127,7 @@ function CollapseToggle(props) {
 import { useContext as useContext11 } from "react";
 
 // src/inputs/Autocomplete.tsx
-import { useRef as useRef25 } from "react";
+import { useCallback as useCallback13, useRef as useRef25 } from "react";
 import { useComboBox as useComboBox3, useOverlayPosition as useOverlayPosition5 } from "react-aria";
 import { Item as Item5, useComboBoxState as useComboBoxState3 } from "react-stately";
 
@@ -10207,23 +10207,22 @@ function TreeSelectFieldBase(props) {
       }));
     }
   }
+  const comboBoxChildren = useCallback11(
+    ([item]) => /* @__PURE__ */ jsx55(Item3, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
     placeholder: !values || values.length === 0 ? placeholder : "",
     label: props.label,
     inputValue: fieldState.inputValue,
-    // where we might want to do flatmap and return diff kind of array (children ? add level prop) inside children callback - can put markup wrapper div adds padding
-    // so we're not doing it multiple places
     items: fieldState.filteredOptions,
     isDisabled,
     isReadOnly,
     onInputChange,
     onOpenChange,
-    children: ([item]) => (
-      // what we're telling it to render. look at padding here - don't have to pass down to tree option - filtered options is where we're flat mapping
-      /* @__PURE__ */ jsx55(Item3, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item)))
-    )
+    children: comboBoxChildren
   };
   const state = useComboBoxState({
     ...comboBoxProps,
@@ -10741,6 +10740,10 @@ function ComboBoxBase(props) {
   const listBoxRef = useRef24(null);
   const popoverRef = useRef24(null);
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const comboBoxChildren = useCallback12(
+    (item) => /* @__PURE__ */ jsx57(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -10750,7 +10753,7 @@ function ComboBoxBase(props) {
     isReadOnly,
     onInputChange,
     onOpenChange,
-    children: (item) => /* @__PURE__ */ jsx57(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item)))
+    children: comboBoxChildren
   };
   const state = useComboBoxState2({
     ...comboBoxProps,
@@ -10950,6 +10953,10 @@ function Autocomplete(props) {
     ...others
   } = props;
   const disabledOptionsWithReasons = Object.fromEntries(disabledOptions?.map(disabledOptionToKeyedTuple) ?? []);
+  const comboBoxChildren = useCallback13(
+    (item) => /* @__PURE__ */ jsx58(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    [getOptionValue, getOptionLabel, getOptionMenuLabel]
+  );
   const comboBoxProps = {
     isDisabled: !!disabled,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -10958,7 +10965,7 @@ function Autocomplete(props) {
     items: options,
     // Allow the user to type in a value that is not in the list. Allows for the text to stay in the input when the user clicks away
     allowsCustomValue: true,
-    children: (item) => /* @__PURE__ */ jsx58(Item5, { textValue: getOptionLabel(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item)),
+    children: comboBoxChildren,
     onSelectionChange: (key) => {
       if (key == null) return;
       const selectedItem = options.find((i) => getOptionValue(i) === key);
@@ -11166,7 +11173,7 @@ function DateFieldMock(props) {
 }
 
 // src/inputs/DateFields/DateFieldBase.tsx
-import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRef28, useState as useState23 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect16, useRef as useRef28, useState as useState23 } from "react";
 import { FocusScope as FocusScope3, useButton as useButton8, useOverlayPosition as useOverlayPosition6, useOverlayTrigger, useTextField as useTextField2 } from "react-aria";
 import { isDateRange } from "react-day-picker";
 import { useOverlayTriggerState } from "react-stately";
@@ -11346,7 +11353,7 @@ function DateFieldBase(props) {
       );
     }
   }, [value, dateFormat]);
-  const onChange = useCallback13(
+  const onChange = useCallback14(
     (d) => {
       setWipValue(d);
       if (d && isParsedDateValid(d)) {
@@ -13445,10 +13452,10 @@ function maybeApply(maybeFn) {
 }
 
 // src/components/Table/hooks/useColumnResizeHandlers.ts
-import { useCallback as useCallback14, useRef as useRef37 } from "react";
+import { useCallback as useCallback15, useRef as useRef37 } from "react";
 function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWidth, setResizedWidths) {
   const hasLockedColumnsRef = useRef37(false);
-  const distributeAdjustment = useCallback14(
+  const distributeAdjustment = useCallback15(
     (rightColumns, totalRightWidth, adjustment) => {
       const updates = {};
       let remainingAdjustment = adjustment;
@@ -13463,7 +13470,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     []
   );
-  const calculateResizeUpdates = useCallback14(
+  const calculateResizeUpdates = useCallback15(
     (columnId, newWidth, columnIndex) => {
       if (!tableWidth || !columnSizes || columnSizes.length === 0) {
         return null;
@@ -13509,7 +13516,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [tableWidth, columnSizes, columns, distributeAdjustment]
   );
-  const calculatePreviewWidth = useCallback14(
+  const calculatePreviewWidth = useCallback15(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -13519,7 +13526,7 @@ function useColumnResizeHandlers(columns, columnSizes, tableWidth, setResizedWid
     },
     [calculateResizeUpdates]
   );
-  const handleColumnResize = useCallback14(
+  const handleColumnResize = useCallback15(
     (columnId, newWidth, columnIndex) => {
       const result = calculateResizeUpdates(columnId, newWidth, columnIndex);
       if (!result) {
@@ -13575,10 +13582,10 @@ function useScrollStorage(tableId, enabled = true) {
 }
 
 // src/hooks/useRenderCount.ts
-import { useCallback as useCallback15, useRef as useRef38 } from "react";
+import { useCallback as useCallback16, useRef as useRef38 } from "react";
 function useRenderCount() {
   const ref = useRef38(/* @__PURE__ */ new Map());
-  const getCount = useCallback15((id) => {
+  const getCount = useCallback16((id) => {
     const count = ref.current.get(id) || 1;
     ref.current.set(id, count + 1);
     return { "data-render": count };
@@ -14095,7 +14102,7 @@ function ToggleChips(props) {
 
 // src/components/Accordion.tsx
 import { useId, useResizeObserver as useResizeObserver2 } from "@react-aria/utils";
-import { useCallback as useCallback16, useEffect as useEffect19, useMemo as useMemo25, useRef as useRef40, useState as useState29 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo25, useRef as useRef40, 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) {
@@ -14127,13 +14134,13 @@ function Accordion(props) {
   useEffect19(() => {
     setContentHeight(expanded && contentRef.current ? `${contentRef.current.scrollHeight}px` : "0");
   }, [expanded]);
-  const onResize = useCallback16(() => {
+  const onResize = useCallback17(() => {
     if (contentRef.current && expanded) {
       setContentHeight(`${contentRef.current.scrollHeight}px`);
     }
   }, [expanded, setContentHeight]);
   useResizeObserver2({ ref: contentRef, onResize });
-  const toggle = useCallback16(() => {
+  const toggle = useCallback17(() => {
     setExpanded((prev) => !prev);
     if (setExpandedIndex) setExpandedIndex(index);
     if (onToggle) onToggle();
@@ -14325,7 +14332,7 @@ import { OverlayProvider } from "react-aria";
 
 // src/components/Modal/Modal.tsx
 import { useResizeObserver as useResizeObserver3 } from "@react-aria/utils";
-import { useCallback as useCallback17, useEffect as useEffect22, useRef as useRef42, useState as useState31 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect22, useRef as useRef42, 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";
 
@@ -14424,7 +14431,7 @@ function Modal(props) {
   const [hasScroll, setHasScroll] = useState31(forceScrolling ?? false);
   useResizeObserver3({
     ref: modalBodyRef,
-    onResize: useCallback17(
+    onResize: useCallback18(
       () => {
         const target = modalBodyRef.current;
         if (forceScrolling === void 0 && !isFixedHeight) {
@@ -14655,7 +14662,7 @@ function SuperDrawer() {
 }
 
 // src/components/Layout/FormPageLayout.tsx
-import React16, { createRef, useCallback as useCallback21, useEffect as useEffect24, useMemo as useMemo33, useRef as useRef44, useState as useState37 } from "react";
+import React16, { createRef, useCallback as useCallback22, useEffect as useEffect24, useMemo as useMemo33, useRef as useRef44, useState as useState37 } from "react";
 import { useButton as useButton9, useFocusRing as useFocusRing11 } from "react-aria";
 
 // src/forms/BoundCheckboxField.tsx
@@ -14881,7 +14888,7 @@ function BoundDateRangeField(props) {
 }
 
 // src/forms/BoundForm.tsx
-import { useCallback as useCallback19, useMemo as useMemo30 } from "react";
+import { useCallback as useCallback20, useMemo as useMemo30 } from "react";
 
 // src/forms/BoundIconCardField.tsx
 import { Observer as Observer6 } from "mobx-react";
@@ -14910,7 +14917,7 @@ function BoundIconCardField(props) {
 import { Observer as Observer7 } from "mobx-react";
 
 // src/inputs/IconCardGroup.tsx
-import { useCallback as useCallback18, useMemo as useMemo29, useState as useState33 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo29, useState as useState33 } from "react";
 import { mergeProps as mergeProps11, useField } from "react-aria";
 import { jsx as jsx100, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 function IconCardGroup(props) {
@@ -14927,7 +14934,7 @@ function IconCardGroup(props) {
   } = props;
   const [selected, setSelected] = useState33(values);
   const exclusiveOptions = useMemo29(() => options.filter((o) => o.exclusive), [options]);
-  const toggleValue = useCallback18(
+  const toggleValue = useCallback19(
     (value) => {
       if (isDisabled) return;
       const option = options.find((o) => o.value === value);
@@ -15590,7 +15597,7 @@ var listFieldPrefix = "listField";
 function BoundForm(props) {
   const { rows, formState } = props;
   const tid = useTestIds({}, "boundForm");
-  const getRowKey = useCallback19((row, rowType) => {
+  const getRowKey = useCallback20((row, rowType) => {
     return `${rowType}-${Object.keys(row).join("-")}`;
   }, []);
   return /* @__PURE__ */ jsx115("div", { ...tid, children: /* @__PURE__ */ jsx115(FormLines, { width: "full", gap: 3.5, children: rows.map(
@@ -15932,7 +15939,7 @@ function IconButtonList({ content, selectedIcon, onIconClick }) {
 }
 
 // src/components/Toast/ToastContext.tsx
-import { createContext as createContext5, useCallback as useCallback20, useContext as useContext14, useMemo as useMemo31, useState as useState35 } from "react";
+import { createContext as createContext5, useCallback as useCallback21, useContext as useContext14, useMemo as useMemo31, useState as useState35 } from "react";
 import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
 var ToastContext = createContext5({
   setNotice: () => {
@@ -15944,7 +15951,7 @@ var ToastContext = createContext5({
 });
 function ToastProvider(props) {
   const [notice, setNotice] = useState35();
-  const clear = useCallback20(() => setNotice(void 0), [setNotice]);
+  const clear = useCallback21(() => setNotice(void 0), [setNotice]);
   const contextValue = useMemo31(() => ({ setNotice, notice, clear }), [notice, clear]);
   return /* @__PURE__ */ jsx122(ToastContext.Provider, { value: contextValue, children: props.children });
 }
@@ -16104,7 +16111,7 @@ function SectionNavLink(props) {
   const { sectionWithRef, activeSection } = props;
   const { section, ref: sectionRef } = sectionWithRef;
   const active = activeSection === sectionWithRef.sectionKey;
-  const handleNavClick = useCallback21(() => {
+  const handleNavClick = useCallback22(() => {
     sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
   }, [sectionRef]);
   const tids = useTestIds(props);
@@ -17316,7 +17323,7 @@ function PreventBrowserScroll({ children }) {
 }
 
 // src/components/Layout/RightPaneLayout/RightPaneContext.tsx
-import React18, { useCallback as useCallback22, useContext as useContext15, useMemo as useMemo38, useState as useState41 } from "react";
+import React18, { useCallback as useCallback23, useContext as useContext15, useMemo as useMemo38, useState as useState41 } from "react";
 import { jsx as jsx148 } from "@emotion/react/jsx-runtime";
 var RightPaneContext = React18.createContext({
   openInPane: () => {
@@ -17331,15 +17338,15 @@ var RightPaneContext = React18.createContext({
 function RightPaneProvider({ children }) {
   const [rightPaneContent, setRightPaneContent] = useState41(void 0);
   const [isRightPaneOpen, setIsRightPaneOpen] = useState41(false);
-  const openInPane = useCallback22(
+  const openInPane = useCallback23(
     (opts) => {
       setRightPaneContent(opts?.content);
       setIsRightPaneOpen(true);
     },
     [setRightPaneContent]
   );
-  const closePane = useCallback22(() => setIsRightPaneOpen(false), []);
-  const clearPane = useCallback22(() => setRightPaneContent(void 0), [setRightPaneContent]);
+  const closePane = useCallback23(() => setIsRightPaneOpen(false), []);
+  const clearPane = useCallback23(() => setRightPaneContent(void 0), [setRightPaneContent]);
   const context = useMemo38(
     () => ({ openInPane, closePane, clearPane, rightPaneContent, isRightPaneOpen }),
     [openInPane, closePane, rightPaneContent, clearPane, isRightPaneOpen]
@@ -17707,7 +17714,7 @@ function Copy(props) {
 
 // src/components/DnDGrid/DnDGrid.tsx
 import equal2 from "fast-deep-equal";
-import { useCallback as useCallback23, useRef as useRef50 } from "react";
+import { useCallback as useCallback24, useRef as useRef50 } from "react";
 
 // src/components/DnDGrid/DnDGridContext.tsx
 import { createContext as createContext7, useContext as useContext17 } from "react";
@@ -17731,19 +17738,19 @@ function DnDGrid(props) {
   const reorderViaKeyboard = useRef50(false);
   const transformFrom = useRef50({ x: 0, y: 0 });
   const tid = useTestIds(props, "dndGrid");
-  const getGridItems = useCallback23(() => {
+  const getGridItems = useCallback24(() => {
     return gridEl.current ? Array.from(gridEl.current.querySelectorAll(`[${gridItemIdKey}]`)) : [];
   }, []);
-  const getGridItemIdOrder = useCallback23(() => {
+  const getGridItemIdOrder = useCallback24(() => {
     return getGridItems().map((child) => child.getAttribute(gridItemIdKey)).filter(isDefined);
   }, [getGridItems]);
-  const initReorder = useCallback23(() => {
+  const initReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       initialOrder.current = getGridItemIdOrder();
       dragEl.current.classList.add(activeGridItemClass);
     }
   }, [getGridItemIdOrder]);
-  const commitReorder = useCallback23(() => {
+  const commitReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) onReorder(currentOrder);
@@ -17753,7 +17760,7 @@ function DnDGrid(props) {
       initialOrder.current = currentOrder;
     }
   }, [onReorder, getGridItemIdOrder]);
-  const cancelReorder = useCallback23(() => {
+  const cancelReorder = useCallback24(() => {
     if (gridEl.current && dragEl.current && initialOrder.current) {
       const currentOrder = getGridItemIdOrder();
       if (!equal2(currentOrder, initialOrder.current)) {
@@ -17775,7 +17782,7 @@ function DnDGrid(props) {
       reorderViaKeyboard.current = false;
     }
   }, [getGridItemIdOrder, getGridItems]);
-  const onMove = useCallback23((e) => {
+  const onMove = useCallback24((e) => {
     if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
       const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
       const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
@@ -17796,7 +17803,7 @@ function DnDGrid(props) {
       }
     }
   }, []);
-  const onDragStart = useCallback23(
+  const onDragStart = useCallback24(
     (e) => {
       if (!reorderViaKeyboard.current && dragEl.current && gridEl.current) {
         initReorder();
@@ -17826,7 +17833,7 @@ function DnDGrid(props) {
     },
     [initReorder, onMove]
   );
-  const onDragEnd = useCallback23(
+  const onDragEnd = useCallback24(
     (e) => {
       if (!reorderViaKeyboard.current && dragEl.current && cloneEl.current && gridEl.current) {
         e.preventDefault();
@@ -17842,7 +17849,7 @@ function DnDGrid(props) {
     },
     [commitReorder, onMove]
   );
-  const onDragHandleKeyDown = useCallback23(
+  const onDragHandleKeyDown = useCallback24(
     (e) => {
       const moveHandle = e.target;
       if (dragEl.current instanceof HTMLElement && moveHandle instanceof HTMLElement && gridEl.current) {
@@ -18097,7 +18104,7 @@ function HbSpinnerProvider({ quips = [], children }) {
 
 // src/components/MaxLines.tsx
 import { useLayoutEffect as useLayoutEffect2, useResizeObserver as useResizeObserver5 } from "@react-aria/utils";
-import { useCallback as useCallback24, useEffect as useEffect29, useRef as useRef51, useState as useState43 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef51, 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);
@@ -18110,7 +18117,7 @@ function MaxLines({ maxLines, children }) {
   useEffect29(() => {
     setExpanded(false);
   }, [children]);
-  const onResize = useCallback24(() => {
+  const onResize = useCallback25(() => {
     if (!elRef.current) return;
     !expanded && setHasMore(elRef.current.scrollHeight > elRef.current.clientHeight);
   }, [expanded]);
@@ -18123,7 +18130,7 @@ function MaxLines({ maxLines, children }) {
 
 // src/components/ScrollShadows.tsx
 import { useResizeObserver as useResizeObserver6 } from "@react-aria/utils";
-import { useCallback as useCallback25, useMemo as useMemo44, useRef as useRef52, useState as useState44 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo44, useRef as useRef52, 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;
@@ -18147,7 +18154,7 @@ function ScrollShadows(props) {
       { ...commonStyles, ...endShadowStyles2, ...Css.add("background", endGradient).$ }
     ];
   }, [horizontal, bgColor]);
-  const updateScrollProps = useCallback25(
+  const updateScrollProps = useCallback26(
     (el) => {
       const { scrollTop, scrollHeight, clientHeight, scrollWidth, scrollLeft, clientWidth } = el;
       const start = horizontal ? scrollLeft : scrollTop;
@@ -18158,7 +18165,7 @@ function ScrollShadows(props) {
     },
     [horizontal]
   );
-  const onResize = useCallback25(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
+  const onResize = useCallback26(() => scrollRef.current && updateScrollProps(scrollRef.current), [updateScrollProps]);
   useResizeObserver6({ ref: scrollRef, onResize });
   return /* @__PURE__ */ jsxs80(
     "div",
@@ -18186,10 +18193,10 @@ function ScrollShadows(props) {
 }
 
 // src/components/Snackbar/useSnackbar.tsx
-import { useCallback as useCallback26, useEffect as useEffect30 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect30 } from "react";
 function useSnackbar() {
   const { setNotices, setOffset } = useSnackbarContext();
-  const onClose = useCallback26(
+  const onClose = useCallback27(
     (noticeId) => {
       setNotices((prev) => {
         let returnValue = prev;
@@ -18206,7 +18213,7 @@ function useSnackbar() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const triggerNotice = useCallback26(
+  const triggerNotice = useCallback27(
     (props) => {
       const noticeId = props.id ?? `beamSnackbar:${snackbarId++}`;
       let maybeTimeout;
@@ -18235,7 +18242,7 @@ function useSnackbar() {
     },
     [onClose, setNotices]
   );
-  const closeNotice = useCallback26((id) => onClose(id), [onClose]);
+  const closeNotice = useCallback27((id) => onClose(id), [onClose]);
   const useSnackbarOffset = ({ bottom }) => useEffect30(() => {
     setOffset({ bottom });
     return () => setOffset({});
@@ -18740,10 +18747,10 @@ function hideTabs(props) {
 }
 
 // src/components/Toast/useToast.tsx
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback28 } from "react";
 function useToast() {
   const { setNotice, clear } = useToastContext();
-  const showToast = useCallback27((props) => setNotice(props), [setNotice]);
+  const showToast = useCallback28((props) => setNotice(props), [setNotice]);
   return { showToast, clear };
 }
 export {