@homebound/beam 2.91.5 → 2.91.9

package/dist/components/Icon.d.ts

@@ -1,5 +1,5 @@
 import { DOMProps } from "@react-types/shared";
-import { AriaAttributes } from "react";
+import React, { AriaAttributes } from "react";
 import { Margin, Palette, Xss } from "../Css";
 export interface IconProps extends AriaAttributes, DOMProps {
     /** The name of an icon */
@@ -11,7 +11,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
     /** Styles overrides */
     xss?: Xss<Margin>;
 }
-export declare function Icon(props: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Icon: React.MemoExoticComponent<(props: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 /**
  * Map of icons paths mapped to their respective name.
  *

package/dist/components/Icon.js

@@ -1,14 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icons = exports.Icon = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const Css_1 = require("../Css");
-function Icon(props) {
+exports.Icon = react_1.default.memo((props) => {
     const { icon, inc = 3, color = "currentColor", xss, ...other } = props;
     const size = (0, Css_1.increment)(inc);
     return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ "aria-hidden": true, width: size, height: size, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", css: { path: Css_1.Css.fill(color).$, ...xss }, "data-icon": icon }, other, { children: exports.Icons[icon] }), void 0));
-}
-exports.Icon = Icon;
+});
 /**
  * Map of icons paths mapped to their respective name.
  *

package/dist/components/Label.d.ts

@@ -1,4 +1,4 @@
-import { LabelHTMLAttributes } from "react";
+import React, { LabelHTMLAttributes } from "react";
 interface LabelProps {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     label: string;
@@ -7,7 +7,7 @@ interface LabelProps {
     contrast?: boolean;
 }
 /** An internal helper component for rendering form labels. */
-export declare function Label(props: LabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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 {};

package/dist/components/Label.js

@@ -1,16 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineLabel = exports.Label = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const react_aria_1 = require("react-aria");
 const Css_1 = require("../Css");
 /** An internal helper component for rendering form labels. */
-function Label(props) {
+exports.Label = react_1.default.memo((props) => {
     const { labelProps, label, hidden, suffix, contrast = false, ...others } = props;
     const labelEl = ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, labelProps, others, { css: Css_1.Css.dib.sm.gray700.mbPx(4).if(contrast).white.$ }, { children: [label, suffix && ` ${suffix}`] }), void 0));
     return hidden ? (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: labelEl }, void 0) : labelEl;
-}
-exports.Label = Label;
+});
 /** Used for showing labels within text fields. */
 function InlineLabel({ labelProps, label, contrast, ...others }) {
     return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, labelProps, others, { css: Css_1.Css.smEm.nowrap.gray900.prPx(4).add("color", "currentColor").$ }, { children: [label, ":"] }), void 0));

package/dist/components/Table/GridTable.js

@@ -260,10 +260,16 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
 function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: { List: VirtualRoot(style, columns, id, firstLastColumnWidth, xss) }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
-        topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), 
-        // Both the `Item` and `itemContent` use `display: contents`, so their height is 0,
-        // so instead drill into the 1st real content cell.
-        itemSize: (el) => el.firstElementChild.firstElementChild.offsetHeight, itemContent: (index) => {
+        topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), itemSize: (el) => {
+            const maybeContentsDiv = el.firstElementChild;
+            // If it is a chrome row, then we are not using `display: contents;`, return the height of this element.
+            if ("chrome" in maybeContentsDiv.dataset) {
+                return maybeContentsDiv.offsetHeight;
+            }
+            // Both the `Item` and `itemContent` use `display: contents`, so their height is 0,
+            // so instead drill into the 1st real content cell.
+            return maybeContentsDiv.firstElementChild.offsetHeight;
+        }, itemContent: (index) => {
             // We keep header and filter rows separate, but react-virtuoso is a flat list,
             // so we pick the right header / first row message / actual row.
             let i = index;

package/dist/components/Table/nestedCards.d.ts

@@ -12,6 +12,8 @@ import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardStyle, RowTuple }
  * a content row itself, the nested padding is handled separately by the
  * GridRow component.
  */
+declare type Chrome = () => JSX.Element;
+declare type ChromeBuffer = Chrome[];
 export declare class NestedCards {
     private columns;
     private filteredRows;
@@ -40,7 +42,7 @@ export declare class NestedCards {
  * I.e. due to the flatness of our DOM, we inherently have to add a "close"
  * row separate from the card's actual content.
  */
-export declare function makeOpenOrCloseCard(openCards: NestedCardStyle[], kind: "open" | "close"): JSX.Element;
+export declare function makeOpenOrCloseCard(openCards: NestedCardStyle[], kind: "open" | "close"): Chrome;
 /**
  * For the first or last cell of actual content, wrap them in divs that re-create the
  * outer cards' padding + background.
@@ -52,7 +54,7 @@ export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column
  * Our height is not based on `openCards`, b/c for the top-most level, we won't
  * have any open cards, but still want a space between top-level cards.
  */
-export declare function makeSpacer(height: number, openCards: NestedCardStyle[]): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function makeSpacer(height: number, openCards: NestedCardStyle[]): Chrome;
 /**
  * Takes the current buffer of close row(s), spacers, and open row, and creates a single chrome DOM row.
  *
@@ -65,5 +67,11 @@ export declare function makeSpacer(height: number, openCards: NestedCardStyle[])
  * - nested card2 content row
  * - chrome row (card2 close, card1 close)
  */
-export declare function maybeCreateChromeRow(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], chromeBuffer: JSX.Element[]): void;
+export declare function maybeCreateChromeRow(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], chromeBuffer: ChromeBuffer): void;
+interface ChromeRowProps {
+    chromeBuffer: ChromeBuffer;
+    columns: number;
+}
+export declare function ChromeRow({ chromeBuffer, columns }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function dropChromeRows<R extends Kinded>(filteredRows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
+export {};

package/dist/components/Table/nestedCards.js

@@ -1,21 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dropChromeRows = exports.maybeCreateChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
+exports.dropChromeRows = exports.ChromeRow = exports.maybeCreateChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
-/**
- * A helper class to create our nested card DOM shenanigans.
- *
- * This acts as a one-off visitor that accepts "begin row", "between row",
- * "end row" calls from GridTable while its translating the user's nested
- * GridDataRows into a flat list of RowTuples, and interjects fake/chrome
- * rows into `filteredRows` as necessary.
- *
- * Note that this class only handles *between row* chrome and that within
- * a content row itself, the nested padding is handled separately by the
- * GridRow component.
- */
 class NestedCards {
     constructor(columns, filteredRows, style) {
         this.columns = columns;
@@ -68,29 +56,32 @@ exports.NestedCards = NestedCards;
  * row separate from the card's actual content.
  */
 function makeOpenOrCloseCard(openCards, kind) {
-    let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
-    const place = kind === "open" ? "Top" : "Bottom";
-    const btOrBb = kind === "open" ? "bt" : "bb";
-    // Create nesting for the all open cards, i.e.:
-    //
-    // | card1 | card2  --------------   card2 | card1 |
-    // | card1 | card2 / ... card3 ... \ card2 | card1 |
-    // | card1 | card2 | ... card3 ... | card2 | card1 |
-    //
-    [...openCards].reverse().forEach((card, i) => {
-        const first = i === 0;
-        div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-                ...Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).$,
-                // Only the 1st div needs border left/right radius + border top/bottom.
-                ...(first &&
-                    Css_1.Css.add({
-                        [`border${place}RightRadius`]: `${card.brPx}px`,
-                        [`border${place}LeftRadius`]: `${card.brPx}px`,
-                    }).hPx(card.brPx).$),
-                ...(card.bColor && Css_1.Css.bc(card.bColor).bl.br.if(first)[btOrBb].$),
-            } }, { children: div }), void 0));
-    });
-    return div;
+    const scopeCards = [...openCards];
+    return () => {
+        let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
+        const place = kind === "open" ? "Top" : "Bottom";
+        const btOrBb = kind === "open" ? "bt" : "bb";
+        // Create nesting for the all open cards, i.e.:
+        //
+        // | card1 | card2  --------------   card2 | card1 |
+        // | card1 | card2 / ... card3 ... \ card2 | card1 |
+        // | card1 | card2 | ... card3 ... | card2 | card1 |
+        //
+        [...scopeCards].reverse().forEach((card, i) => {
+            const first = i === 0;
+            div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                    ...Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).$,
+                    // Only the 1st div needs border left/right radius + border top/bottom.
+                    ...(first &&
+                        Css_1.Css.add({
+                            [`border${place}RightRadius`]: `${card.brPx}px`,
+                            [`border${place}LeftRadius`]: `${card.brPx}px`,
+                        }).hPx(card.brPx).$),
+                    ...(card.bColor && Css_1.Css.bc(card.bColor).bl.br.if(first)[btOrBb].$),
+                } }, { children: div }), void 0));
+        });
+        return div;
+    };
 }
 exports.makeOpenOrCloseCard = makeOpenOrCloseCard;
 /**
@@ -116,13 +107,16 @@ exports.maybeAddCardPadding = maybeAddCardPadding;
  * have any open cards, but still want a space between top-level cards.
  */
 function makeSpacer(height, openCards) {
-    let div = (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(height).$ }, void 0);
-    // Start at the current/inside card, and wrap outward padding + borders.
-    // | card1 | card2 | ... card3 ... | card2 | card1 |
-    [...openCards].reverse().forEach((card) => {
-        div = (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0);
-    });
-    return div;
+    const scopeCards = [...openCards];
+    return () => {
+        let div = (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(height).$ }, void 0);
+        // Start at the current/inside card, and wrap outward padding + borders.
+        // | card1 | card2 | ... card3 ... | card2 | card1 |
+        [...scopeCards].reverse().forEach((card) => {
+            div = (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0);
+        });
+        return div;
+    };
 }
 exports.makeSpacer = makeSpacer;
 /**
@@ -139,16 +133,18 @@ exports.makeSpacer = makeSpacer;
  */
 function maybeCreateChromeRow(columns, filteredRows, chromeBuffer) {
     if (chromeBuffer.length > 0) {
-        filteredRows.push([
-            undefined,
-            // We add 2 to account for our dedicated open/close columns
-            (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns.length + 2}`).$, "data-chrome": "true" }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c }, i))) }), void 0),
-        ]);
+        filteredRows.push([undefined, (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...chromeBuffer], columns: columns.length }, void 0)]);
         // clear the buffer
         chromeBuffer.splice(0, chromeBuffer.length);
     }
 }
 exports.maybeCreateChromeRow = maybeCreateChromeRow;
+function ChromeRow({ chromeBuffer, columns }) {
+    return (
+    // We add 2 to account for our dedicated open/close columns
+    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns + 2}`).$, "data-chrome": "true" }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }), void 0));
+}
+exports.ChromeRow = ChromeRow;
 function dropChromeRows(filteredRows) {
     return filteredRows.filter(([r]) => !!r);
 }

package/dist/inputs/ChipSelectField.d.ts

@@ -24,4 +24,10 @@ declare type PersistentItem = {
 };
 export declare function isPersistentItem<T extends PersistentItem>(opt: any): opt is PersistentItem;
 export declare function isPersistentKey(key: Key): boolean;
+declare type ListBoxSection<O> = {
+    title: string;
+    options: O[];
+    isPersistent?: boolean;
+};
+export declare function isListBoxSection<O>(obj: O | ListBoxSection<O>): obj is ListBoxSection<O>;
 export {};

package/dist/inputs/ChipSelectField.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isPersistentKey = exports.isPersistentItem = exports.persistentItemPrefix = exports.ChipSelectField = void 0;
+exports.isListBoxSection = exports.isPersistentKey = exports.isPersistentItem = exports.persistentItemPrefix = exports.ChipSelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const change_case_1 = require("change-case");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
@@ -12,19 +13,22 @@ const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
 const ChipTextField_1 = require("./ChipTextField");
 const ListBox_1 = require("./internal/ListBox");
+const ListBoxChip_1 = require("./internal/ListBoxChip");
 const Value_1 = require("./Value");
 const utils_1 = require("../utils");
+const options_1 = require("../utils/options");
 function ChipSelectField(props) {
     var _a, _b;
+    const firstRender = (0, react_1.useRef)(true);
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { label, value, disabled = false, placeholder = "Select an option", options, onSelect, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
-    getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
+    const { label, value, disabled = false, placeholder = "Select an option", options, onSelect, getOptionValue = options_1.defaultOptionValue, // if unset, assume O implements HasId
+    getOptionLabel = options_1.defaultOptionLabel, // if unset, assume O implements HasName
     onFocus, onBlur, clearable = false, onCreateNew, } = props;
     const tid = (0, utils_1.useTestIds)(props, "chipSelectField");
     const typeScale = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _a !== void 0 ? _a : "sm";
     const isDisabled = !!disabled;
     const showClearButton = !disabled && clearable && !!value;
-    const chipStyles = Css_1.Css[typeScale].tl.bgGray300.gray900.br16.pxPx(10).pyPx(2).$;
+    const chipStyles = (0, react_1.useMemo)(() => Css_1.Css[typeScale].tl.bgGray300.gray900.br16.pxPx(10).pyPx(2).$, [typeScale]);
     // Controls showing the focus border styles.
     const [visualFocus, setVisualFocus] = (0, react_1.useState)(false);
     const [isClearFocused, setIsClearFocused] = (0, react_1.useState)(false);
@@ -53,26 +57,43 @@ function ChipSelectField(props) {
     const wrapperRef = (0, react_1.useRef)(null);
     // Using `ListData` in order to dynamically update the items
     const listData = (0, react_stately_1.useListData)({
-        initialItems: [...options, ...(onCreateNew ? [createNewOpt] : [])],
+        initialItems: !onCreateNew
+            ? options
+            : [
+                { title: "Options", options },
+                { title: "Actions", isPersistent: true, options: [createNewOpt] },
+            ],
         initialSelectedKeys: [(0, Value_1.valueToKey)(value)],
-        getKey: (item) => (isPersistentItem(item) ? item.id : getOptionValue(item)),
+        getKey: (item) => (isListBoxSection(item) ? item.title : getOptionValue(item)),
     });
-    // If the options change, blow away existing items and replace with new values.
     (0, react_1.useEffect)(() => {
-        // Create a list of all existing keys to be removed.
-        const optionKeys = listData.items.reduce(
-        // Filter out Persistent Items
-        (acc, o) => (isPersistentItem(o) ? acc : acc.concat(getOptionValue(o))), []);
-        listData.remove(...optionKeys);
-        // Using `prepend` to keep Persistent Items (if they exist) at the bottom of the list.
-        listData.prepend(...options);
+        // Avoid unnecessary update of `options` on first render. We define the initial set of items based on the options in the `useListData` hook.
+        if (!firstRender.current) {
+            if (onCreateNew) {
+                // if we have the options in a section, update that section
+                listData.update("Options", { title: "Options", options });
+            }
+            else {
+                // otherwise, reset the list completely. We could traverse through the list and update/add/remove when needed, though this is simpler for now.
+                listData.remove(...state.collection.getKeys());
+                listData.append(...options);
+            }
+        }
+        firstRender.current = false;
     }, [options]);
-    const selectChildren = listData.items.map((o) => {
-        const isPersistent = isPersistentItem(o);
-        const value = isPersistent ? o.id : getOptionValue(o);
-        const label = isPersistent ? o.name : getOptionLabel(o);
-        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: label }, { children: isPersistent ? (label) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: { ...Css_1.Css.lineClamp1.breakAll.$, ...chipStyles }, title: label }, { children: label }), void 0)) }), value));
-    });
+    const selectChildren = (0, react_1.useMemo)(() => listData.items.map((s) => {
+        if (isListBoxSection(s)) {
+            return ((0, jsx_runtime_1.jsx)(react_stately_1.Section, Object.assign({ title: s.title, items: s.options }, { children: (item) => {
+                    if (isPersistentItem(item)) {
+                        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: item.name }, { children: item.name }), item.id));
+                    }
+                    const label = getOptionLabel(item);
+                    return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: label }, { children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }, void 0) }), getOptionValue(item)));
+                } }), (0, change_case_1.camelCase)(s.title)));
+        }
+        const label = getOptionLabel(s);
+        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, Object.assign({ textValue: label }, { children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }, void 0) }), getOptionValue(s)));
+    }), [listData.items, getOptionLabel, getOptionValue]);
     const selectHookProps = {
         label,
         isDisabled,
@@ -121,6 +142,7 @@ function ChipSelectField(props) {
         isOpen: state.isOpen,
         onClose: state.close,
         placement: "bottom left",
+        offset: 8,
     });
     overlayProps.style = {
         ...overlayProps.style,
@@ -130,17 +152,15 @@ function ChipSelectField(props) {
     };
     // State management for the "Create new" flow with ChipTextField.
     const [showInput, setShowInput] = (0, react_1.useState)(false);
-    const [inputValue, setInputValue] = (0, react_1.useState)("Add new");
     const removeCreateNewField = (0, react_1.useCallback)(() => {
-        var _a;
         setShowInput(false);
-        setInputValue("Add new");
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [setShowInput, setInputValue]);
-    const field = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(ChipTextField_1.ChipTextField, Object.assign({ autoFocus: true, label: "Add new", value: inputValue, onChange: setInputValue, onEnter: async () => {
-                    await onCreateNew(inputValue);
+        // Trigger onBlur to initiate any auto-saving behavior.
+        (0, utils_1.maybeCall)(onBlur);
+    }, [setShowInput]);
+    const field = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(CreateNewField, Object.assign({ onBlur: removeCreateNewField, onEnter: async (value) => {
+                    await onCreateNew(value);
                     removeCreateNewField();
-                }, onBlur: removeCreateNewField }, tid.createNewField), void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: wrapperRef, css: {
+                } }, tid.createNewField), void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: wrapperRef, css: {
                     ...chipStyles,
                     ...Css_1.Css.dif.relative.p0.mwPx(32).if(!value).bgGray200.$,
                     ...(visualFocus ? Css_1.Css.bshFocus.$ : {}),
@@ -157,7 +177,7 @@ function ChipSelectField(props) {
                             onSelect(undefined, undefined);
                             (0, utils_1.maybeCall)(onBlur);
                             setIsClearFocused(false);
-                        }, "aria-label": "Remove" }, tid.clearButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }, void 0) }), void 0))] }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, menuProps, { listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps, positionOffset: 8 }), void 0) }), void 0))] }, void 0));
+                        }, "aria-label": "Remove" }, tid.clearButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }, void 0) }), void 0))] }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, menuProps, { listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps }), void 0) }), void 0))] }, void 0));
     const tooltipText = selectHookProps.isDisabled && typeof disabled !== "boolean" ? disabled : undefined;
     return tooltipText ? ((0, jsx_runtime_1.jsx)(components_1.Tooltip, Object.assign({ title: tooltipText, placement: "top" }, { children: field }), void 0)) : (field);
 }
@@ -175,3 +195,14 @@ function isPersistentKey(key) {
     return typeof key === "string" && key.startsWith(exports.persistentItemPrefix);
 }
 exports.isPersistentKey = isPersistentKey;
+function isListBoxSection(obj) {
+    return typeof obj === "object" && "options" in obj;
+}
+exports.isListBoxSection = isListBoxSection;
+// Wrapper for the ChipTextField used in the "Create New" flow on ChipSelectField
+function CreateNewField(props) {
+    const { onBlur, onEnter } = props;
+    const [value, setValue] = (0, react_1.useState)("Add new");
+    const tid = (0, utils_1.useTestIds)(props);
+    return ((0, jsx_runtime_1.jsx)(ChipTextField_1.ChipTextField, Object.assign({ autoFocus: true, label: "Add new", value: value, onChange: setValue, onEnter: () => onEnter(value), onBlur: onBlur }, tid), void 0));
+}

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

@@ -8,7 +8,6 @@ interface ListBoxProps<O, V extends Key> {
     getOptionValue: (opt: O) => V;
     contrast?: boolean;
     positionProps: React.HTMLAttributes<Element>;
-    positionOffset?: number;
 }
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 export declare function ListBox<O, V extends Key>(props: ListBoxProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/internal/ListBox.js

@@ -4,51 +4,41 @@ exports.ListBox = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const react_virtuoso_1 = require("react-virtuoso");
-const ToggleChip_1 = require("../../components/ToggleChip");
 const Css_1 = require("../../Css");
-const Option_1 = require("./Option");
+const constants_1 = require("./constants");
+const ListBoxSection_1 = require("./ListBoxSection");
+const ListBoxToggleChip_1 = require("./ListBoxToggleChip");
+const VirtualizedOptions_1 = require("./VirtualizedOptions");
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 function ListBox(props) {
     var _a;
-    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, positionOffset = 4, } = props;
-    const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, shouldFocusOnHover: true, ...props }, state, listBoxRef);
+    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, } = props;
+    const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, ...props }, state, listBoxRef);
     const positionMaxHeight = (_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.maxHeight;
-    // The maxListHeight will be based on the value defined by the positionProps returned from `useOverlayPosition` (which will always be a defined as a `number` based on React-Aria's `calculatePosition`).
-    // If `maxHeight` is set use that, otherwise use `273` as a default (`42px` is the min-height of each option, so this allows
-    // 6.5 options in view at a time (doing `.5` so the user can easily tell if there are more).
-    const maxListHeight = positionMaxHeight && typeof positionMaxHeight === "number" ? positionMaxHeight : 273;
-    const [listHeight, setListHeight] = (0, react_1.useState)(maxListHeight);
+    // The popoverMaxHeight will be based on the value defined by the positionProps returned from `useOverlayPosition` (which will always be a defined as a `number` based on React-Aria's `calculatePosition`).
+    // If `maxHeight` is set use that, otherwise use `maxPopoverHeight` as a default, per UX guidelines.
+    // (`positionMaxHeight` should always be set and defined as a number, but we need to do these type checks to make TS happy)
+    const popoverMaxHeight = positionMaxHeight && typeof positionMaxHeight === "number"
+        ? Math.min(positionMaxHeight, maxPopoverHeight)
+        : maxPopoverHeight;
+    const [popoverHeight, setPopoverHeight] = (0, react_1.useState)(popoverMaxHeight);
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
-    const virtuosoRef = (0, react_1.useRef)(null);
-    const focusedItem = state.collection.getItem(state.selectionManager.focusedKey);
-    // Handle scrolling to the item in focus when navigating options via Keyboard
-    (0, react_1.useEffect)(() => {
-        if (virtuosoRef.current && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.index)) {
-            virtuosoRef.current.scrollToIndex({ index: focusedItem.index, align: "center" });
-        }
-    }, [focusedItem]);
+    const firstItem = state.collection.at(0);
+    const hasSections = firstItem && firstItem.type === "section";
+    const onListHeightChange = (height) => {
+        // Using Math.min to choose between the smaller height, either the total height of the List (`height` arg), or the maximum height defined by the space allotted on screen or our hard coded max.
+        // If there are ListBoxSections, then we assume it is the persistent section with a single item and account for that height.
+        setPopoverHeight(Math.min(popoverMaxHeight, hasSections ? height + constants_1.persistentItemHeight + constants_1.sectionSeparatorHeight : height));
+    };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.bgWhite.br4.w100.bshBasic.myPx(positionOffset).if(contrast).bgGray700.$,
+            ...Css_1.Css.bgWhite.br4.w100.bshBasic.if(contrast).bgGray700.$,
             "&:hover": Css_1.Css.bshHover.$,
-        }, ref: listBoxRef }, listBoxProps, { children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").$ }, { children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) }), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.hPx(Math.min(maxListHeight, listHeight)).$ }, { children: (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, totalListHeightChanged: setListHeight, totalCount: state.collection.size, 
-                    // We don't really need to set this, but it's handy for tests, which would
-                    // otherwise render just 1 row. A better way to do this would be to jest.mock
-                    // out Virtuoso with an impl that just rendered everything, but doing this for now.
-                    initialItemCount: 5, itemContent: (idx) => {
-                        // MapIterator doesn't have at/index lookup so make a copy
-                        const keys = [...state.collection.getKeys()];
-                        const item = state.collection.getItem(keys[idx]);
-                        if (item) {
-                            return (0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast }, item.key);
-                        }
-                    } }, void 0) }), void 0)] }), void 0));
+        }, ref: listBoxRef }, listBoxProps, { children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").$ }, { children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) }), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.hPx(popoverHeight).$ }, { children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
+                    // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
+                    scrollOnFocus: props.shouldUseVirtualFocus }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast, 
+                    // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
+                    scrollOnFocus: props.shouldUseVirtualFocus }, void 0)) }), void 0)] }), void 0));
 }
 exports.ListBox = ListBox;
-/** Chip used to display selections within ListBox when using the MultiSelectField */
-function ListBoxChip(props) {
-    const { state, option, getOptionLabel, getOptionValue, disabled = false } = props;
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.mr1.mb1.$ }, { children: (0, jsx_runtime_1.jsx)(ToggleChip_1.ToggleChip, { text: getOptionLabel(option), onClick: () => {
-                state.selectionManager.toggleSelection(String(getOptionValue(option)));
-            }, disabled: disabled }, void 0) }), void 0));
-}
+// UX specified maximum height for a ListBox (in pixels)
+const maxPopoverHeight = 512;

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

@@ -0,0 +1,5 @@
+interface ListBoxChipProps {
+    label: string;
+}
+export declare function ListBoxChip({ label }: ListBoxChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/internal/ListBoxChip.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListBoxChip = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const PresentationContext_1 = require("../../components/PresentationContext");
+const Css_1 = require("../../Css");
+function ListBoxChip({ label }) {
+    var _a;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css[(_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _a !== void 0 ? _a : "sm"].tl.bgGray300.gray900.br16.pxPx(10).pyPx(2).lineClamp1.breakAll.$, title: label }, { children: label }), void 0));
+}
+exports.ListBoxChip = ListBoxChip;

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

@@ -0,0 +1,12 @@
+import { Node } from "@react-types/shared";
+import { SelectState } from "react-stately";
+interface ListBoxSectionProps<O> {
+    section: Node<O>;
+    state: SelectState<O>;
+    contrast: boolean;
+    onListHeightChange: (height: number) => void;
+    popoverHeight: number;
+    scrollOnFocus?: boolean;
+}
+export declare function ListBoxSection<O>(props: ListBoxSectionProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/internal/ListBoxSection.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListBoxSection = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_aria_1 = require("react-aria");
+const Css_1 = require("../../Css");
+const constants_1 = require("./constants");
+const Option_1 = require("./Option");
+const VirtualizedOptions_1 = require("./VirtualizedOptions");
+// Creates a section of options within a ListBox.
+// Currently only expects two possible sections; 1. The list of options, and 2. A persistent action (in that order).
+function ListBoxSection(props) {
+    const { section, state, contrast, onListHeightChange, popoverHeight, scrollOnFocus } = props;
+    const { itemProps, groupProps } = (0, react_aria_1.useListBoxSection)(section);
+    const { separatorProps } = (0, react_aria_1.useSeparator)({ elementType: "li" });
+    const isPersistentSection = section.key !== state.collection.getFirstKey();
+    const childNodes = [...section.childNodes];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isPersistentSection && (0, jsx_runtime_1.jsx)("li", Object.assign({}, separatorProps, { css: Css_1.Css.bt.bGray200.$ }), void 0), (0, jsx_runtime_1.jsx)("li", Object.assign({}, itemProps, { css: Css_1.Css.if(!isPersistentSection).overflowAuto.$ }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.if(!isPersistentSection).hPx(popoverHeight - constants_1.sectionSeparatorHeight - constants_1.persistentItemHeight).$ }, groupProps, { children: isPersistentSection ? (childNodes.map((item) => (0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast }, item.key))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: childNodes, onListHeightChange: onListHeightChange, contrast: contrast, scrollOnFocus: scrollOnFocus }, void 0)) }), void 0) }), void 0)] }, void 0));
+}
+exports.ListBoxSection = ListBoxSection;

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

@@ -0,0 +1,12 @@
+import { Key } from "react";
+import { SelectState } from "react-stately";
+interface ListBoxToggleChipProps<O, V extends Key> {
+    state: SelectState<O>;
+    option: O;
+    getOptionLabel: (opt: O) => string;
+    getOptionValue: (opt: O) => V;
+    disabled?: boolean;
+}
+/** Chip used to display selections within ListBox when using the MultiSelectField */
+export declare function ListBoxToggleChip<O, V extends Key>(props: ListBoxToggleChipProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/internal/ListBoxToggleChip.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListBoxToggleChip = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const components_1 = require("../../components");
+const Css_1 = require("../../Css");
+/** Chip used to display selections within ListBox when using the MultiSelectField */
+function ListBoxToggleChip(props) {
+    const { state, option, getOptionLabel, getOptionValue, disabled = false } = props;
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.mr1.mb1.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.ToggleChip, { text: getOptionLabel(option), onClick: () => {
+                state.selectionManager.toggleSelection(String(getOptionValue(option)));
+            }, disabled: disabled }, void 0) }), void 0));
+}
+exports.ListBoxToggleChip = ListBoxToggleChip;

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

@@ -4,6 +4,7 @@ interface OptionProps<O> {
     item: Node<O>;
     state: ListState<O> | TreeState<O>;
     contrast?: boolean;
+    scrollToIndex?: (index: number) => void;
 }
 /** Represents a single option within a ListBox - used by SelectField and MultiSelectField */
 export declare function Option<O>(props: OptionProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/internal/Option.js

@@ -9,7 +9,7 @@ const Css_1 = require("../../Css");
 const ChipSelectField_1 = require("../ChipSelectField");
 /** Represents a single option within a ListBox - used by SelectField and MultiSelectField */
 function Option(props) {
-    const { item, state, contrast = false } = props;
+    const { item, state, contrast = false, scrollToIndex } = props;
     const ref = (0, react_1.useRef)(null);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
     const themeStyles = {
@@ -21,7 +21,25 @@ function Option(props) {
     // Get props for the option element.
     // Prevent options from receiving browser focus via shouldUseVirtualFocus.
     const { optionProps, isDisabled, isFocused, isSelected } = (0, react_aria_1.useOption)({ key: item.key, shouldSelectOnPressUp: true, shouldFocusOnHover: false }, state, ref);
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, (0, react_aria_1.mergeProps)(optionProps, hoverProps), { ref: ref, css: {
+    // Additional onKeyDown logic to ensure the  the virtualized list (in <VirtualizedOptions />) scrolls to keep the "focused" option in view
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (!scrollToIndex || !(e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            return;
+        }
+        const toKey = e.key === "ArrowDown" ? item.nextKey : item.prevKey;
+        if (!toKey) {
+            return;
+        }
+        const toItem = state.collection.getItem(toKey);
+        // Only scroll the "options" (`state.collection` is a flat list of sections and items - we want to avoid scrolling to a "section" as it is not shown in the UI)
+        if (toItem &&
+            // Ensure we are only ever scrolling to an "option".
+            (toItem.parentKey === "options" || (!toItem.parentKey && toItem.type === "item")) &&
+            toItem.index !== undefined) {
+            scrollToIndex(toItem.index);
+        }
+    }, [scrollToIndex, state]);
+    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, (0, react_aria_1.mergeProps)(optionProps, hoverProps, { onKeyDown }), { ref: ref, css: {
             ...Css_1.Css.df.aic.jcsb.py1.px2.mh("42px").outline0.cursorPointer.sm.$,
             // Assumes only one Persistent Item per list - will need to change to utilize Sections if that assumption is incorrect.
             ...((0, ChipSelectField_1.isPersistentKey)(item.key) ? Css_1.Css.bt.bGray200.$ : {}),

package/dist/inputs/internal/SelectFieldBase.js

@@ -177,6 +177,7 @@ function SelectFieldBase(props) {
         isOpen: state.isOpen,
         onClose: state.close,
         placement: "bottom left",
+        offset: borderless ? 8 : 4,
     });
     positionProps.style = {
         ...positionProps.style,
@@ -184,8 +185,6 @@ function SelectFieldBase(props) {
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, 
-                    // If the field is set as `borderless`, then the focus state is done with a box-shadow and set further away from the input. If this happens then we want the ListBox to be positioned further away as well.
-                    positionOffset: borderless ? 8 : undefined }), void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
 }
 exports.SelectFieldBase = SelectFieldBase;

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

@@ -0,0 +1,11 @@
+import { Node } from "@react-types/shared";
+import { SelectState } from "react-stately";
+interface VirtualizedOptionsProps<O> {
+    state: SelectState<O>;
+    items: Node<O>[];
+    onListHeightChange: (height: number) => void;
+    contrast: boolean;
+    scrollOnFocus?: boolean;
+}
+export declare function VirtualizedOptions<O>(props: VirtualizedOptionsProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/internal/VirtualizedOptions.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedOptions = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_virtuoso_1 = require("react-virtuoso");
+const Option_1 = require("./Option");
+// Displays ListBox options in a virtualized container for performance reasons
+function VirtualizedOptions(props) {
+    const { state, items, onListHeightChange, contrast, scrollOnFocus } = props;
+    const virtuosoRef = (0, react_1.useRef)(null);
+    const focusedItem = state.collection.getItem(state.selectionManager.focusedKey);
+    const selectedItem = state.selectionManager.selectedKeys.size > 0
+        ? state.collection.getItem([...state.selectionManager.selectedKeys.values()][0])
+        : undefined;
+    // Handle scrolling to the item in focus when navigating options via Keyboard - this should only be applied when using a "virtual focus", such as a ComboBox where the browser's focus remains in the <input /> element.
+    (0, react_1.useEffect)(() => {
+        if (scrollOnFocus && virtuosoRef.current && (focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.index)) {
+            virtuosoRef.current.scrollToIndex({ index: focusedItem.index, align: "center" });
+        }
+    }, [focusedItem]);
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, totalListHeightChanged: onListHeightChange, totalCount: items.length, 
+        // Ensure the selected item is visible when the list renders
+        initialTopMostItemIndex: selectedItem ? selectedItem.index : 0, 
+        // We don't really need to set this, but it's handy for tests, which would
+        // otherwise render just 1 row. A better way to do this would be to jest.mock
+        // out Virtuoso with an impl that just rendered everything, but doing this for now.
+        initialItemCount: 5, itemContent: (idx) => {
+            var _a;
+            const item = items[idx];
+            if (item) {
+                return ((0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast, 
+                    // Only send scrollToIndex functionality forward if we are not auto-scrolling on focus.
+                    scrollToIndex: scrollOnFocus ? undefined : (_a = virtuosoRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex }, item.key));
+            }
+        } }, void 0));
+}
+exports.VirtualizedOptions = VirtualizedOptions;

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

@@ -0,0 +1,2 @@
+export declare const persistentItemHeight = 42;
+export declare const sectionSeparatorHeight = 1;

package/dist/inputs/internal/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sectionSeparatorHeight = exports.persistentItemHeight = void 0;
+exports.persistentItemHeight = 42;
+exports.sectionSeparatorHeight = 1;

package/dist/utils/options.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultOptionValue: <O>(opt: O) => any;
+export declare const defaultOptionLabel: <O>(opt: O) => any;

package/dist/utils/options.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultOptionLabel = exports.defaultOptionValue = void 0;
+const defaultOptionValue = (opt) => opt.id;
+exports.defaultOptionValue = defaultOptionValue;
+const defaultOptionLabel = (opt) => opt.name;
+exports.defaultOptionLabel = defaultOptionLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.91.5",
+  "version": "2.91.9",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -119,6 +119,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^16.14.0",
     "semantic-release": "^17.4.0",
+    "storybook-addon-performance": "^0.16.1",
     "ts-jest": "^26.5.3",
     "ts-node": "^9.1.1",
     "tslib": "^2.1.0",