@homebound/beam 2.317.2 → 2.318.0

package/dist/components/AutoSaveIndicator.js

@@ -17,7 +17,10 @@ function AutoSaveIndicator({ hideOnIdle, doNotReset }) {
          * state should clear before the next Indicator mounts
          */
         return () => resetStatus();
-    }, []);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     switch (status) {
         case _1.AutoSaveStatus.IDLE:
             return hideOnIdle ? null : (0, jsx_runtime_1.jsx)(Indicator, { icon: "cloudSave" });

package/dist/components/BeamContext.js

@@ -60,7 +60,10 @@ function BeamProvider({ children, ...presentationProps }) {
             drawerCanCloseDetailsChecks,
             sdHeaderDiv,
         };
-    }, [modalBodyDiv, modalFooterDiv]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [modalBodyDiv, modalFooterDiv]);
     return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, { value: { ...context }, children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { ...presentationProps, children: (0, jsx_runtime_1.jsx)(Layout_1.RightPaneProvider, { children: (0, jsx_runtime_1.jsx)(index_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)(SnackbarContext_1.SnackbarProvider, { children: (0, jsx_runtime_1.jsxs)(ToastContext_1.ToastProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, { ...modalRef.current })] }), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {})] }) }) }) }) }) }));
 }
 exports.BeamProvider = BeamProvider;

package/dist/components/CssReset.js

@@ -118,8 +118,16 @@ Improve consistency of default fonts in all browsers. (https://github.com/sindre
 */
 
   body {
-    font-family: system-ui, -apple-system, /* Firefox supports this but not yet system-ui */ "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    font-family:
+      system-ui,
+      -apple-system,
+      /* Firefox supports this but not yet system-ui */ "Segoe UI",
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji";
   }
 
   /*
@@ -376,8 +384,21 @@ const tailwindPreflightReset = (0, react_1.css) `
  *    to override it to ensure consistency even when using the default theme.
  */
   html {
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    font-family:
+      Inter,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
       "Noto Color Emoji"; /* 1 */
     line-height: 1.5; /* 2 */
   }

package/dist/components/DnDGrid/useDnDGridItem.js

@@ -25,7 +25,10 @@ function useDnDGridItem(props) {
                 },
             },
         };
-    }, [dragEl, id, itemRef]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dragEl, id, itemRef]);
     return { dragHandleProps, dragItemProps };
 }
 exports.useDnDGridItem = useDnDGridItem;

package/dist/components/IconButton.js

@@ -29,7 +29,10 @@ function IconButton(props) {
         ...(isHovered && (contrast ? exports.iconButtonContrastStylesHover : exports.iconButtonStylesHover)),
         ...(isFocusVisible || forceFocusStyles ? iconButtonStylesFocus : {}),
         ...(isDisabled && iconButtonStylesDisabled),
-    }), [isHovered, isFocusVisible, isDisabled, compact]);
+    }), 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isHovered, isFocusVisible, isDisabled, compact]);
     const iconColor = contrast ? contrastIconColor : defaultIconColor;
     const buttonAttrs = {
         ...testIds,

package/dist/components/Label.d.ts

@@ -5,9 +5,10 @@ interface LabelProps {
     suffix?: string;
     hidden?: boolean;
     contrast?: boolean;
+    multiline?: boolean;
 }
 /** An internal helper component for rendering form labels. */
 export declare const Label: React.MemoExoticComponent<(props: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 /** Used for showing labels within text fields. */
-export declare function InlineLabel({ labelProps, label, contrast, ...others }: LabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function InlineLabel({ labelProps, label, contrast, multiline, ...others }: LabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Label.js

@@ -15,7 +15,7 @@ exports.Label = react_1.default.memo((props) => {
     return hidden ? (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: labelEl }) : labelEl;
 });
 /** Used for showing labels within text fields. */
-function InlineLabel({ labelProps, label, contrast, ...others }) {
-    return ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.smMd.nowrap.gray900.prPx(4).add("color", "currentColor").$, children: [label, ":"] }));
+function InlineLabel({ labelProps, label, contrast, multiline = false, ...others }) {
+    return ((0, jsx_runtime_1.jsxs)("label", { ...labelProps, ...others, css: Css_1.Css.smMd.nowrap.gray900.prPx(4).add("color", "currentColor").asc.if(multiline).asfs.pt1.$, children: [label, ":"] }));
 }
 exports.InlineLabel = InlineLabel;

package/dist/components/Modal/Modal.js

@@ -52,7 +52,10 @@ function Modal(props) {
             if (forceScrolling === undefined && !isFixedHeight) {
                 setHasScroll(target.scrollHeight > target.clientHeight);
             }
-        }, []),
+        }, 
+        // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []),
     });
     // Even though we use raw-divs for the createPortal calls, we do actually need to
     // use refs + useEffect to stitch those raw divs back into the React component tree.
@@ -60,7 +63,10 @@ function Modal(props) {
         modalHeaderRef.current.appendChild(modalHeaderDiv);
         modalBodyRef.current.appendChild(modalBodyDiv);
         modalFooterRef.current.appendChild(modalFooterDiv);
-    }, [modalBodyRef, modalFooterRef, modalHeaderRef]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [modalBodyRef, modalFooterRef, modalHeaderRef]);
     return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(components_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.underlay.z4.$, ...underlayProps, ...testId.underlay, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.br24.bgWhite.bshModal.overflowHidden
                             .maxh("90vh")
                             .df.fdc.wPx(width)

package/dist/components/ScrollShadows.js

@@ -37,9 +37,14 @@ function ScrollShadows(props) {
         const boxSize = horizontal ? clientWidth : clientHeight;
         setShowStartShadow(start > 0);
         setShowEndShadow(start + boxSize < end);
-    }, []);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // Use a ResizeObserver to update the scroll props to determine if the shadows should be shown.
     // This executes on render and subsequent resizes which could be due to content/`children` changes (such as responses from APIs).
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const onResize = (0, react_1.useCallback)(() => scrollRef.current && updateScrollProps(scrollRef.current), []);
     (0, utils_1.useResizeObserver)({ ref: scrollRef, onResize });
     return ((0, jsx_runtime_1.jsxs)("div", { css: src_1.Css.relative.overflowHidden

package/dist/components/Snackbar/useSnackbar.js

@@ -19,7 +19,10 @@ function useSnackbar() {
             }
             return returnValue;
         });
-    }, []);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     const triggerNotice = (0, react_1.useCallback)((props) => {
         var _a;
         // Sets `noticeId` to the current value of `snackbarId` and then increments.

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -51,7 +51,10 @@ function SuperDrawer() {
         if (((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes.length) === 0 && content) {
             headerRef.current.appendChild(sdHeaderDiv);
         }
-    }, [headerRef, content]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [headerRef, content]);
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
                     key: "superDrawer", 

package/dist/components/SuperDrawer/useSuperDrawer.js

@@ -85,7 +85,10 @@ function useSuperDrawer() {
                 onClose();
             },
         };
-    }, [canCloseChecks, canCloseDetailsChecks, contentStack, modalState, openModal]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [canCloseChecks, canCloseDetailsChecks, contentStack, modalState, openModal]);
     // useMemo the actions separately from the dynamic isDrawerOpen value
     const actions = (0, react_1.useMemo)(() => {
         return {
@@ -131,7 +134,10 @@ function useSuperDrawer() {
                 ];
             },
         };
-    }, [canCloseChecks, canCloseDetailsChecks, closeActions, contentStack]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [canCloseChecks, canCloseDetailsChecks, closeActions, contentStack]);
     return {
         ...actions,
         ...closeActions,

package/dist/components/Table/GridTable.js

@@ -105,7 +105,10 @@ function GridTable(props) {
         // to avoid "Cannot update component during render" errors.
         api.tableState.setColumns(columnsWithIds, visibleColumnsStorageKey);
         return api;
-    }, [props.api]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.api]);
     const style = (0, TableStyles_1.resolveStyles)(maybeStyle);
     const { tableState } = api;
     tableState.onRowSelect = onRowSelect;

package/dist/components/Table/hooks/useSetupColumnSizes.js

@@ -43,7 +43,10 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds) {
             const width = (_a = resizeRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
             width && setTableAndColumnWidths(width);
         }
-    }, [columns, setTableAndColumnWidths]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [columns, setTableAndColumnWidths]);
     const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
     const onResize = (0, react_1.useCallback)(() => {
         const target = resizeRef.current;
@@ -56,7 +59,10 @@ function useSetupColumnSizes(style, columns, resizeRef, expandedColumnIds) {
                 setTableAndColumnWidthsDebounced(target.clientWidth);
             }
         }
-    }, [tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]);
     (0, utils_1.useResizeObserver)({ ref: resizeRef, onResize });
     return columnSizes;
 }

package/dist/components/internal/Menu.js

@@ -59,6 +59,8 @@ function Menu(props) {
     const tid = (0, utils_1.useTestIds)(props);
     // Bulk updates of MenuItems below. If we find this to be of sluggish performance, then we can change to be more surgical in our updating.
     // If our list of items change, update the "items" menu section. (key is based on label in `getKey` above)
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     (0, react_1.useEffect)(() => filteredTree.update("items", { label: "items", items }), [items]);
     return ((0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { children: (0, jsx_runtime_1.jsxs)("div", { 
             // Using `max-height: inherit` allows us to take advantage of the height set on the overlay container, which updates based on the available space for the overlay within the viewport

package/dist/components/internal/MenuItem.js

@@ -22,10 +22,20 @@ function MenuItemImpl(props) {
     const isDisabled = Boolean(disabled);
     const isSelected = state.selectionManager.selectedKeys.has(label);
     const isFocused = state.selectionManager.focusedKey === item.key;
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const ref = (0, react_1.useRef)(null);
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const history = (0, react_router_1.useHistory)();
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const tid = (0, utils_1.useTestIds)(props);
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { menuItemProps } = (0, react_aria_1.useMenuItem)({
         key: item.key,
         isDisabled,

package/dist/hooks/usePersistedFilter.js

@@ -36,7 +36,10 @@ function usePersistedFilter({ storageKey, filterDefs }) {
             // current storedFilter, use query params filter
             setStoredFilter(queryParamsFilter);
         }
-    }, [storedFilter, setStoredFilter, setQueryParams, queryParamsFilter]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [storedFilter, setStoredFilter, setQueryParams, queryParamsFilter]);
     return { setFilter, filter };
 }
 exports.usePersistedFilter = usePersistedFilter;

package/dist/inputs/ChipSelectField.js

@@ -80,7 +80,10 @@ function ChipSelectField(props) {
             }
         }
         firstRender.current = false;
-    }, [options]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [options]);
     const selectChildren = (0, react_1.useMemo)(() => listData.items.map((s) => {
         if (isListBoxSection(s)) {
             return ((0, jsx_runtime_1.jsx)(react_stately_1.Section, { title: s.title, items: s.options, children: (item) => {

package/dist/inputs/ChipTextField.js

@@ -38,7 +38,10 @@ function ChipTextField(props) {
     (0, react_1.useEffect)(() => {
         var _a;
         autoFocus && ((_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, []);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // React doesn't like contentEditable because it takes the children of the node out of React's scope. This is fine in this case as it is just a text value and we are managing it.
     return ((0, jsx_runtime_1.jsx)("span", { ref: fieldRef, contentEditable: true, suppressContentEditableWarning: true, "aria-required": required, "aria-label": label, onKeyDown: (e) => {
             if (e.key === "Enter") {

package/dist/inputs/DateFields/DateFieldBase.js

@@ -133,7 +133,10 @@ function DateFieldBase(props) {
             props.onChange(undefined);
             return;
         }
-    }, [isRangeMode, props.onChange]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isRangeMode, props.onChange]);
     // If showing the short date format, "01/01/20", so set size to 8. If medium (Wed, Nov 23) use 10 characters (leaving out the `,` character in the count because it is so small)
     // Otherwise the long format can be `undefined`.
     // Setting the size attribute only impacts the fields when displayed in a container that doesn't allow the field to grow to its max width, such as in an inline container.

package/dist/inputs/RichTextField.js

@@ -86,7 +86,10 @@ function RichTextField(props) {
         // The <trix-editor /> web component's `trix-initialize` event may fire before a `useEffect` hook in the component is executed, making it difficult ot attach the event listener locally.
         window.addEventListener("trix-initialize", onEditorInit);
         return id;
-    }, []);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     (0, react_2.useEffect)(() => {
         // If our value prop changes (without the change coming from us), reload it
         if (!readOnly && editor && value !== currentHtml.current) {

package/dist/inputs/TextAreaField.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAreaField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const components_1 = require("../components");
+const useGrowingTextField_1 = require("./hooks/useGrowingTextField");
 const TextFieldBase_1 = require("./TextFieldBase");
-const utils_2 = require("../utils");
+const utils_1 = require("../utils");
 /** Returns a <textarea /> element that auto-adjusts height based on the field's value */
 function TextAreaField(props) {
     const { value = "", disabled = false, readOnly = false, onBlur, onFocus, preventNewLines, onEnter, ...otherProps } = props;
@@ -16,31 +16,7 @@ function TextAreaField(props) {
     const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
-    // not in stately because this is so we know when to re-measure, which is a spectrum design
-    const onHeightChange = (0, react_1.useCallback)(() => {
-        const input = inputRef.current;
-        const inputWrap = inputWrapRef.current;
-        if (input && inputWrap) {
-            const prevAlignment = input.style.alignSelf;
-            input.style.alignSelf = "start";
-            input.style.height = "auto";
-            // Adding 2px to height avoids showing the scrollbar. This is to compensate for the border due to `box-sizing: border-box;`
-            inputWrap.style.height = `${input.scrollHeight + 2}px`;
-            // Set the textarea's height back to 100% so it takes up the full `inputWrap`
-            input.style.height = "100%";
-            input.style.alignSelf = prevAlignment;
-        }
-    }, [inputRef]);
-    (0, utils_1.useLayoutEffect)(() => {
-        if (inputRef.current) {
-            // Temp hack until we can figure out a better way to ensure proper measurements when rendered through a portal (i.e. Modals)
-            if (inputRef.current.scrollHeight === 0) {
-                setTimeout(() => onHeightChange(), 0);
-                return;
-            }
-            onHeightChange();
-        }
-    }, [onHeightChange, value, inputRef]);
+    (0, useGrowingTextField_1.useGrowingTextField)({ inputRef, inputWrapRef, value });
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
         inputElementType: "textarea",
@@ -51,7 +27,7 @@ function TextAreaField(props) {
                     // Prevent user from typing the new line character
                     if (e.key === "Enter") {
                         e.preventDefault();
-                        (0, utils_2.maybeCall)(onEnter);
+                        (0, utils_1.maybeCall)(onEnter);
                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
                     }
                 },

package/dist/inputs/TextFieldBase.js

@@ -101,7 +101,7 @@ function TextFieldBase(props) {
                                 ...fieldStyles.inputWrapperReadOnly,
                                 ...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.if(wrap === false).truncate.$),
                                 ...xss,
-                            }, "data-readonly": "true", ...tid, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), multiline
+                            }, "data-readonly": "true", ...tid, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), multiline
                                     ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { css: Css_1.Css.my1.$, children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {})] }, j))) }, i)))
                                     : inputProps.value] })) : ((0, jsx_runtime_1.jsxs)("div", { css: {
                                 ...fieldStyles.inputWrapper,
@@ -110,19 +110,19 @@ function TextFieldBase(props) {
                                 ...(showHover ? fieldStyles.hover : {}),
                                 // Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
                                 ...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
-                                ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
-                            }, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
+                                ...Css_1.Css.if(multiline).aifs.mhPx(textAreaMinHeight).$,
+                            }, ...hoverProps, ref: inputWrapRef, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
                                         ...fieldStyles.input,
                                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
                                         ...(showHover ? fieldStyles.hover : {}),
-                                        ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
+                                        ...(multiline ? Css_1.Css.h100.py1.add("resize", "none").$ : Css_1.Css.truncate.$),
                                         ...xss,
                                     }, ...tid }), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
                                         var _a;
                                         onChange(undefined);
                                         // Reset focus to input element
                                         (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    } })), errorInTooltip && errorMsg && !hideErrorMessage && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error", color: Css_1.Palette.Red600, tooltip: errorMsg }) })), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: endAdornment })] })),
+                                    } })), errorInTooltip && errorMsg && !hideErrorMessage && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.pl1.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error", color: Css_1.Palette.Red600, tooltip: errorMsg }) })), endAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.pl1.fs0.$, children: endAdornment })] })),
                     }), labelStyle !== "left" &&
                         (alwaysShowHelperText || (!compound && !inputProps.disabled && !inputProps.readOnly)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMsg && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMsg: errorMsg, hidden: hideErrorMessage, ...tid.errorMsg })), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }), labelStyle === "left" &&
                 (alwaysShowHelperText ||

package/dist/inputs/TreeSelectField/TreeOption.js

@@ -18,10 +18,20 @@ function TreeOption(props) {
     if (!leveledOption)
         return null;
     const [option, level] = leveledOption;
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const ref = (0, react_1.useRef)(null);
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const tid = (0, utils_1.useTestIds)(props, "treeOption");
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { collapsedKeys, setCollapsedKeys, getOptionValue } = (0, TreeSelectField_1.useTreeSelectFieldProvider)();
+    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { optionProps, isDisabled, isFocused, isSelected } = (0, react_aria_1.useOption)({ key: item.key, shouldSelectOnPressUp: true, shouldFocusOnHover: false }, state, ref);
     // If this item is not selected, then determine if some of its children are selected to show the indeterminate state.
     // Note: If `isSelected` will be true if all of the children were selected. That auto-parent-selection happens in the `onSelect` callback in TreeSelectField.

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -40,7 +40,10 @@ function TreeSelectField(props) {
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, values, defaultCollapsed = false, ...otherProps } = props;
     const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(Array.isArray(options) && defaultCollapsed ? options.map((o) => getOptionValue(o)) : []);
-    const contextValue = (0, react_1.useMemo)(() => ({ collapsedKeys, setCollapsedKeys, getOptionValue }), [collapsedKeys, setCollapsedKeys]);
+    const contextValue = (0, react_1.useMemo)(() => ({ collapsedKeys, setCollapsedKeys, getOptionValue }), 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collapsedKeys, setCollapsedKeys]);
     return ((0, jsx_runtime_1.jsx)(exports.CollapsedContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(TreeSelectFieldBase, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: ({ all, leaf, root }) => {
                 onSelect({ all, leaf, root });
             } }) }));
@@ -136,7 +139,10 @@ function TreeSelectFieldBase(props) {
             }));
         }
         reactToCollapse.current = true;
-    }, [collapsedKeys]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collapsedKeys]);
     // Update the filtered options when the input value changes
     const onInputChange = (0, react_1.useCallback)((inputValue) => {
         setFieldState((prevState) => {
@@ -147,7 +153,10 @@ function TreeSelectFieldBase(props) {
                 filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0).filter(([option]) => contains(getOptionLabel(option), inputValue))),
             };
         });
-    }, [setFieldState]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setFieldState]);
     // Handle loading of the options in the case that they are loaded via a Promise.
     const maybeInitLoad = (0, react_1.useCallback)(async (options, fieldState, setFieldState) => {
         if (!Array.isArray(options)) {
@@ -162,7 +171,10 @@ function TreeSelectFieldBase(props) {
                 optionsLoading: false,
             }));
         }
-    }, []);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // Only on the first open of the listbox, we want to load the options if they haven't been loaded yet.
     const firstOpen = (0, react_1.useRef)(true);
     function onOpenChange(isOpen) {

package/dist/inputs/hooks/useGrowingTextField.d.ts

@@ -0,0 +1,9 @@
+import { MutableRefObject } from "react";
+interface GrowingTextFieldProps {
+    inputRef: MutableRefObject<HTMLTextAreaElement | HTMLInputElement | null>;
+    inputWrapRef: MutableRefObject<HTMLDivElement | null>;
+    value: number | string | readonly string[] | undefined;
+    disabled?: boolean;
+}
+export declare function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }: GrowingTextFieldProps): void;
+export {};

package/dist/inputs/hooks/useGrowingTextField.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGrowingTextField = void 0;
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+function useGrowingTextField({ inputRef, inputWrapRef, value, disabled }) {
+    // not in stately because this is so we know when to re-measure, which is a spectrum design
+    const onHeightChange = (0, react_1.useCallback)(() => {
+        if (disabled)
+            return;
+        const input = inputRef.current;
+        const inputWrap = inputWrapRef.current;
+        if (input && inputWrap) {
+            const prevAlignment = input.style.alignSelf;
+            input.style.alignSelf = "start";
+            input.style.height = "auto";
+            // Adding 2px to height avoids showing the scrollbar. This is to compensate for the border due to `box-sizing: border-box;`
+            inputWrap.style.height = `${input.scrollHeight + 2}px`;
+            // Set the textarea's height back to 100% so it takes up the full `inputWrap`
+            input.style.height = "100%";
+            input.style.alignSelf = prevAlignment;
+        }
+    }, [inputRef, disabled, inputWrapRef]);
+    (0, utils_1.useLayoutEffect)(() => {
+        if (disabled)
+            return;
+        if (inputRef.current) {
+            // Temp hack until we can figure out a better way to ensure proper measurements when rendered through a portal (i.e. Modals)
+            if (inputRef.current.scrollHeight === 0) {
+                setTimeout(() => onHeightChange(), 0);
+                return;
+            }
+            onHeightChange();
+        }
+    }, [onHeightChange, value, inputRef, disabled]);
+}
+exports.useGrowingTextField = useGrowingTextField;

package/dist/inputs/internal/ComboBoxBase.d.ts

@@ -50,6 +50,7 @@ export interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProp
      */
     unsetLabel?: string;
     hideErrorMessage?: boolean;
+    multiline?: boolean;
 }
 /**
  * Provides a non-native select/dropdown widget that allows the user to type to filter the options.

package/dist/inputs/internal/ComboBoxBase.js

@@ -30,11 +30,20 @@ function ComboBoxBase(props) {
     // Call `initializeOptions` to prepend the `unset` option if the `unsetLabel` was provided.
     const maybeOptions = (0, react_1.useMemo)(() => initializeOptions(options, unsetLabel), [options, unsetLabel]);
     // Memoize the callback functions and handle the `unset` option if provided.
-    const getOptionLabel = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? unsetLabel : props.getOptionLabel(o)), [props.getOptionLabel, unsetLabel]);
-    const getOptionValue = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? undefined : props.getOptionValue(o)), [props.getOptionValue, unsetLabel]);
+    const getOptionLabel = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? unsetLabel : props.getOptionLabel(o)), 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.getOptionLabel, unsetLabel]);
+    const getOptionValue = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? undefined : props.getOptionValue(o)), 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.getOptionValue, unsetLabel]);
     const getOptionMenuLabel = (0, react_1.useCallback)((o) => props.getOptionMenuLabel
         ? props.getOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption)
-        : getOptionLabel(o), [props.getOptionValue, unsetLabel, getOptionLabel]);
+        : getOptionLabel(o), 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.getOptionValue, unsetLabel, getOptionLabel]);
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
@@ -203,7 +212,10 @@ function ComboBoxBase(props) {
                 };
             });
         }
-    }, [values]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [values]);
     (0, react_1.useEffect)(() => {
         // When options are an array, then use them as-is.
         // If options are an object, then use the `initial` array if the menu has not been opened
@@ -231,7 +243,10 @@ function ComboBoxBase(props) {
                 };
             });
         }
-    }, [maybeOptions]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [maybeOptions]);
     // For the most part, the returned props contain `aria-*` and `id` attributes for accessibility purposes.
     const { buttonProps: triggerProps, inputProps, listBoxProps, labelProps, } = (0, react_aria_1.useComboBox)({
         ...comboBoxProps,

package/dist/inputs/internal/ComboBoxInput.d.ts

@@ -28,6 +28,7 @@ interface ComboBoxInputProps<O, V extends Value> extends PresentationFieldProps
     resetField: VoidFunction;
     hideErrorMessage?: boolean;
     isTree?: boolean;
+    multiline?: boolean;
 }
 export declare function ComboBoxInput<O, V extends Value>(props: ComboBoxInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/ComboBoxInput.js

@@ -5,20 +5,27 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const components_1 = require("../../components");
+const PresentationContext_1 = require("../../components/PresentationContext");
 const Css_1 = require("../../Css");
+const useGrowingTextField_1 = require("../hooks/useGrowingTextField");
 const TextFieldBase_1 = require("../TextFieldBase");
 const TreeSelectField_1 = require("../TreeSelectField/TreeSelectField");
 const utils_1 = require("../TreeSelectField/utils");
 const utils_2 = require("../../utils");
 function ComboBoxInput(props) {
-    const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, isTree, listBoxRef, ...otherProps } = props;
+    const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, isTree, listBoxRef, inputRef, inputWrapRef, multiline = false, ...otherProps } = props;
+    const { wrap = false } = (0, PresentationContext_1.usePresentationContext)();
+    // Allow the field to wrap whether the caller has explicitly set `multiline=true` or the `PresentationContext.wrap=true`
+    const allowWrap = wrap || multiline;
     const { collapsedKeys, setCollapsedKeys } = (0, TreeSelectField_1.useTreeSelectFieldProvider)();
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
     const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
     // For MultiSelect only show the `fieldDecoration` when input is not in focus.
     const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: state.selectionManager.selectedKeys.size }))) ||
+    const multilineProps = allowWrap ? { textAreaMinHeight: 0, multiline: true } : {};
+    (0, useGrowingTextField_1.useGrowingTextField)({ disabled: !allowWrap, inputRef, inputWrapRef, value: inputProps.value });
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, ...multilineProps, inputRef: inputRef, inputWrapRef: inputWrapRef, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: state.selectionManager.selectedKeys.size }))) ||
             (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
                 ...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
@@ -78,6 +85,13 @@ function ComboBoxInput(props) {
                     }
                     inputProps.onKeyDown && inputProps.onKeyDown(e);
                 },
+                onChange: (e) => {
+                    // Prevent user from entering any content that has new line characters.
+                    const target = e.target;
+                    target.value = target.value.replace(/[\n\r]/g, "");
+                    // Call existing onChange handler if any.
+                    inputProps.onChange && inputProps.onChange(e);
+                },
                 onBlur: (e) => {
                     var _a;
                     // Do not call onBlur if readOnly or interacting within the input wrapper (such as the menu trigger button), or anything within the listbox.

package/dist/inputs/internal/ListBox.js

@@ -51,7 +51,10 @@ function ListBox(props) {
             onListHeightChange(virtuosoListHeight.current);
         }
         firstRender.current = false;
-    }, [state.selectionManager.selectedKeys.size]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.selectionManager.selectedKeys.size]);
     return ((0, jsx_runtime_1.jsxs)("div", { css: {
             // If `horizontalLayout`, then that means `labelStyle === "left"`. In this case the label the the field both take 50% of the horizontal space.
             // Add `w50` in that case to ensure the ListBox is only the width of the field. If the width definitions ever change, we need to update here as well.

package/dist/inputs/internal/VirtualizedOptions.js

@@ -21,7 +21,10 @@ function VirtualizedOptions(props) {
         if (scrollOnFocus && virtuosoRef.current && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.index)) {
             virtuosoRef.current.scrollToIndex({ index: focusedItem.index, align: "center" });
         }
-    }, [focusedItem]);
+    }, 
+    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusedItem]);
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, totalListHeightChanged: onListHeightChange, totalCount: items.length, ...(process.env.NODE_ENV === "test"
             ? {
                 // We don't really need to set this, but it's handy for tests, which would

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.317.2",
+  "version": "2.318.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -75,24 +75,24 @@
     "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/jest": "^11.10.5",
     "@emotion/react": "^11.10.6",
-    "@homebound/eslint-config": "1.6.1",
+    "@homebound/eslint-config": "^1.8.0",
     "@homebound/rtl-react-router-utils": "1.0.3",
     "@homebound/rtl-utils": "^2.65.0",
     "@homebound/truss": "^1.131.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^7.3.0",
-    "@storybook/addon-essentials": "^7.3.0",
-    "@storybook/addon-interactions": "^7.3.0",
-    "@storybook/addon-links": "^7.3.0",
-    "@storybook/addon-mdx-gfm": "^7.3.0",
-    "@storybook/addons": "^7.3.0",
-    "@storybook/manager-api": "^7.3.0",
+    "@storybook/addon-docs": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-mdx-gfm": "^7.4.5",
+    "@storybook/addons": "^7.4.5",
+    "@storybook/manager-api": "^7.4.5",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/react": "^7.3.0",
-    "@storybook/react-vite": "^7.3.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/react": "^7.4.5",
+    "@storybook/react-vite": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@tsconfig/recommended": "^1.0.2",
@@ -109,7 +109,7 @@
     "chromatic": "^6.17.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "eslint": "^8.12.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.14",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.4.3",
@@ -123,7 +123,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "semantic-release": "^20.1.0",
-    "storybook": "^7.3.0",
+    "storybook": "^7.4.5",
     "storybook-addon-designs": "beta",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
@@ -139,5 +139,5 @@
     "@types/react": "18.0.28",
     "react-router": "5.3.4"
   },
-  "packageManager": "yarn@3.3.0"
+  "packageManager": "yarn@3.6.3"
 }