@homebound/beam 2.91.7 → 2.93.0

package/dist/components/Button.js

@@ -5,18 +5,17 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_router_dom_1 = require("react-router-dom");
-const src_1 = require("..");
 const components_1 = require("./");
-const Tooltip_1 = require("./Tooltip");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
+const useTestIds_1 = require("../utils/useTestIds");
 function Button(props) {
     const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, ...otherProps } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, ...otherProps, ...menuTriggerProps };
     const { label, icon, variant = "primary", size = "sm", buttonRef } = ariaProps;
     const ref = buttonRef || (0, react_1.useRef)(null);
-    const tid = (0, src_1.useTestIds)(props, label);
+    const tid = (0, useTestIds_1.useTestIds)(props, label);
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,
         onPress: typeof onPress === "string" ? utils_1.noop : onPress,
@@ -42,12 +41,13 @@ function Button(props) {
         },
         ...tid,
     };
-    const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsxs)("a", Object.assign({}, buttonAttrs, { href: onPress, className: src_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: [buttonContent, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "linkExternal" }, void 0) }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: src_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
+    const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsxs)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: [buttonContent, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ml1.$ }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "linkExternal" }, void 0) }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
-    if ((isDisabled && typeof disabled !== "boolean") || tooltip) {
-        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, Object.assign({ title: isDisabled && typeof disabled !== "boolean" ? disabled : tooltip, placement: "top" }, { children: button }), void 0));
-    }
-    return button;
+    return (0, components_1.maybeTooltip)({
+        title: (0, components_1.resolveTooltip)(disabled, tooltip),
+        placement: "top",
+        children: button,
+    });
 }
 exports.Button = Button;
 function getButtonStyles(variant, size) {

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/IconButton.js

@@ -33,10 +33,11 @@ function IconButton(props) {
     const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: inc }, void 0));
     const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
-    if ((isDisabled && typeof disabled !== "boolean") || tooltip) {
-        return ((0, jsx_runtime_1.jsx)(components_1.Tooltip, Object.assign({ title: isDisabled && typeof disabled !== "boolean" ? disabled : tooltip, placement: "top" }, { children: button }), void 0));
-    }
-    return button;
+    return (0, components_1.maybeTooltip)({
+        title: (0, components_1.resolveTooltip)(disabled, tooltip),
+        placement: "top",
+        children: button,
+    });
 }
 exports.IconButton = IconButton;
 const iconButtonStylesReset = Css_1.Css.hPx(28).wPx(28).br8.bTransparent.bsSolid.bw2.bgTransparent.cursorPointer.outline0.p0.dif.aic.jcc.transition.$;

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/PresentationContext.d.ts

@@ -8,6 +8,7 @@ export interface PresentationFieldProps {
     borderless?: boolean;
     compact?: boolean;
     typeScale?: Typography;
+    visuallyDisabled?: false;
 }
 export declare type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;

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

@@ -152,7 +152,13 @@ export interface GridTableProps<R extends Kinded, S, X> {
      */
     persistCollapse?: string;
     xss?: X;
+    /** Experimental API allowing one to scroll to a table index. Primarily intended for stories at the moment */
+    api?: MutableRefObject<GridTableApi | undefined>;
 }
+/** NOTE: This API is experimental and primarily intended for story and testing purposes */
+export declare type GridTableApi = {
+    scrollToIndex: (index: number) => void;
+};
 /**
  * Renders data in our table layout.
  *

package/dist/components/Table/GridTable.js

@@ -82,10 +82,15 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a;
-    const { id = "grid-table", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, } = props;
+    const { id = "grid-table", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
     const [collapsedIds, toggleCollapsedId] = useToggleIds(rows, persistCollapse);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
+    if (api) {
+        api.current = {
+            scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
+        };
+    }
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
     // Disclaimer that technically even though this is a useMemo, sortRows is mutating `rows` directly
     const maybeSorted = (0, react_1.useMemo)(() => {
@@ -258,12 +263,23 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
 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) }, 
+    var _a;
+    const { paddingBottom } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: {
+            List: VirtualRoot(style, columns, id, firstLastColumnWidth, xss),
+            Footer: () => (0, jsx_runtime_1.jsx)("div", { css: { paddingBottom } }, void 0),
+        }, 
         // 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/Tooltip.d.ts

@@ -9,4 +9,6 @@ interface TooltipProps {
 }
 export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type Placement = "top" | "bottom" | "left" | "right" | "auto";
+export declare function maybeTooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactNode): ReactNode | undefined;
 export {};

package/dist/components/Tooltip.js

@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
+exports.resolveTooltip = exports.maybeTooltip = exports.Tooltip = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_aria_1 = require("react-aria");
@@ -48,3 +48,14 @@ function Popper({ triggerRef, content, placement = "auto" }) {
     });
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: popperRef, style: styles.popper }, attributes.popper, { css: Css_1.Css.maxw("320px").bgGray900.white.px1.py("4px").br4.xs.z999.$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }, void 0), content] }), void 0), document.body);
 }
+// Helper function to conditionally wrap component with Tooltip if necessary.
+function maybeTooltip(props) {
+    return props.title ? (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({}, props), void 0) : props.children;
+}
+exports.maybeTooltip = maybeTooltip;
+// Helper function for resolving showing the Tooltip text via a 'disabled' prop, or the 'tooltip' prop.
+function resolveTooltip(disabled, tooltip) {
+    // If `disabled` is a ReactNode, then return that. Otherwise, return `tooltip`
+    return typeof disabled !== "boolean" && disabled ? disabled : tooltip !== null && tooltip !== void 0 ? tooltip : undefined;
+}
+exports.resolveTooltip = resolveTooltip;

package/dist/inputs/ChipSelectField.js

@@ -13,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);
@@ -63,20 +66,34 @@ function ChipSelectField(props) {
         initialSelectedKeys: [(0, Value_1.valueToKey)(value)],
         getKey: (item) => (isListBoxSection(item) ? item.title : getOptionValue(item)),
     });
-    (0, react_1.useEffect)(() => listData.update("Options", { title: "Options", options }), [options]);
-    const selectChildren = listData.items.map((s) => {
+    (0, react_1.useEffect)(() => {
+        // 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 = (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)("span", Object.assign({ css: { ...Css_1.Css.lineClamp1.breakAll.$, ...chipStyles }, title: label }, { children: label }), void 0) }), getOptionValue(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)("span", Object.assign({ css: { ...Css_1.Css.lineClamp1.breakAll.$, ...chipStyles }, title: label }, { children: label }), void 0) }), getOptionValue(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,
@@ -135,36 +152,36 @@ 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)(() => {
         setShowInput(false);
-        setInputValue("Add new");
         // Trigger onBlur to initiate any auto-saving behavior.
         (0, utils_1.maybeCall)(onBlur);
-    }, [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);
+    }, [setShowInput]);
+    return ((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: {
-                    ...chipStyles,
-                    ...Css_1.Css.dif.relative.p0.mwPx(32).if(!value).bgGray200.$,
-                    ...(visualFocus ? Css_1.Css.bshFocus.$ : {}),
-                    ...(showInput ? Css_1.Css.dn.$ : {}),
-                } }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label, labelProps: labelProps, hidden: true }, tid.label), void 0), (0, jsx_runtime_1.jsx)("button", Object.assign({}, (0, react_aria_1.mergeProps)(focusProps, buttonProps), { ref: buttonRef, css: {
-                            ...Css_1.Css.tl.br16.pxPx(10).pyPx(2).outline0.if(showClearButton).prPx(4).borderRadius("16px 0 0 16px").$,
-                            ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray700.$ : {}),
-                            "&:hover:not(:disabled)": Css_1.Css.bgGray400.if(!value).bgGray300.$,
-                        }, title: state.selectedItem ? state.selectedItem.textValue : placeholder }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({}, valueProps, { css: Css_1.Css.lineClamp1.breakAll.$ }, { children: state.selectedItem ? state.selectedItem.textValue : placeholder }), void 0) }), void 0), showClearButton && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, clearFocusProps, { css: {
-                            ...Css_1.Css.prPx(4).borderRadius("0 16px 16px 0").outline0.$,
-                            "&:hover": Css_1.Css.bgGray400.$,
-                            ...(isClearFocused ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(3,105,161,1)`).$ : {}),
-                        }, onClick: () => {
-                            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 }), 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);
+                } }, tid.createNewField), void 0)), (0, components_1.maybeTooltip)({
+                title: (0, components_1.resolveTooltip)(disabled),
+                placement: "top",
+                children: ((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.$ : {}),
+                        ...(showInput ? Css_1.Css.dn.$ : {}),
+                    } }, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label, labelProps: labelProps, hidden: true }, tid.label), void 0), (0, jsx_runtime_1.jsx)("button", Object.assign({}, (0, react_aria_1.mergeProps)(focusProps, buttonProps), { ref: buttonRef, css: {
+                                ...Css_1.Css.tl.br16.pxPx(10).pyPx(2).outline0.if(showClearButton).prPx(4).borderRadius("16px 0 0 16px").$,
+                                ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray700.$ : {}),
+                                "&:hover:not(:disabled)": Css_1.Css.bgGray400.if(!value).bgGray300.$,
+                            }, title: state.selectedItem ? state.selectedItem.textValue : placeholder }, tid, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({}, valueProps, { css: Css_1.Css.lineClamp1.breakAll.$ }, { children: state.selectedItem ? state.selectedItem.textValue : placeholder }), void 0) }), void 0), showClearButton && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, clearFocusProps, { css: {
+                                ...Css_1.Css.prPx(4).borderRadius("0 16px 16px 0").outline0.$,
+                                "&:hover": Css_1.Css.bgGray400.$,
+                                ...(isClearFocused ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(3,105,161,1)`).$ : {}),
+                            }, onClick: () => {
+                                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 }), void 0) }), void 0))] }, void 0));
 }
 exports.ChipSelectField = ChipSelectField;
 exports.persistentItemPrefix = "persistentItem:";
@@ -184,3 +201,10 @@ 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/DateField.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
+import { TextFieldBaseProps } from "./TextFieldBase";
 import "./DateField.css";
-export interface DateFieldProps {
+export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     value: Date | undefined;
     label: string;
     onChange: (value: Date) => void;
@@ -8,7 +9,7 @@ export interface DateFieldProps {
     onBlur?: () => void;
     /** Called when the component is in focus. */
     onFocus?: () => void;
-    disabled?: boolean;
+    disabled?: boolean | ReactNode;
     errorMsg?: string;
     required?: boolean;
     readOnly?: boolean;
@@ -16,11 +17,8 @@ export interface DateFieldProps {
     /** Renders the label inside the input field, i.e. for filters. */
     inlineLabel?: boolean;
     placeholder?: string;
-    compact?: boolean;
     format?: keyof typeof dateFormats;
     iconLeft?: boolean;
-    hideLabel?: boolean;
-    borderless?: boolean;
 }
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const dateFormats: {

package/dist/inputs/DateField.js

@@ -16,7 +16,7 @@ const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 require("./DateField.css");
 function DateField(props) {
-    const { label, disabled = false, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, ...others } = props;
+    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -26,6 +26,7 @@ function DateField(props) {
     const dateFormat = getDateFormat(format);
     const [inputValue, setInputValue] = (0, react_1.useState)(value ? formatDate(value, dateFormat) : "");
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
+    const isDisabled = !!disabled;
     (0, react_1.useEffect)(() => {
         // Avoid updating any WIP values.
         if (!isFocused) {
@@ -35,7 +36,7 @@ function DateField(props) {
     const textFieldProps = {
         ...others,
         label,
-        isDisabled: disabled,
+        isDisabled,
         isReadOnly: readOnly,
         "aria-haspopup": "dialog",
         value: inputValue,
@@ -86,7 +87,7 @@ function DateField(props) {
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: "dialog" }, state, buttonRef);
     const { buttonProps } = (0, react_aria_1.useButton)({
         ...triggerProps,
-        isDisabled: disabled || readOnly,
+        isDisabled: isDisabled || readOnly,
         // When pressed or focused then move focus the input, which will select the text and trigger the DatePicker to open
         onPress: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
         onFocus: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
@@ -107,7 +108,7 @@ function DateField(props) {
     // How do other applications handle this defined sizing? Appears they use hard coded widths depending on format, which is similar here (using `size` instead of css `width`).
     // But would also need to allow for the input to be `fullWidth`, which is basically also what we're accomplishing here... so maybe fine?
     const inputSize = format === "short" ? 8 : format === "medium" ? 10 : undefined;
-    const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: disabled, css: Css_1.Css.if(disabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
+    const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { readOnly: readOnly, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
                     state.close();
@@ -119,7 +120,7 @@ function DateField(props) {
                             onChange(parsed);
                         }
                     }
-                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: { ...overlayProps, ...positionProps }, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ state: state, value: value, positionProps: positionProps, onChange: (d) => {
+                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: isDisabled && typeof disabled !== "boolean" ? disabled : undefined }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: { ...overlayProps, ...positionProps }, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ state: state, value: value, positionProps: positionProps, onChange: (d) => {
                         setInputValue(formatDate(d, dateFormat));
                         onChange(d);
                     } }, tid.datePicker), void 0) }), void 0))] }, void 0));

package/dist/inputs/TextFieldBase.d.ts

@@ -2,7 +2,7 @@ import type { NumberFieldAria } from "@react-aria/numberfield";
 import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode, TextareaHTMLAttributes } from "react";
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
-interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "readOnly" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
+export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "readOnly" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
@@ -15,6 +15,6 @@ interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "r
     contrast?: boolean;
     clearable?: boolean;
     textAreaMinHeight?: number;
+    tooltip?: ReactNode;
 }
 export declare function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldBaseProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/inputs/TextFieldBase.js

@@ -15,10 +15,10 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 const useTestIds_1 = require("../utils/useTestIds");
 // Used by both TextField and TextArea
 function TextFieldBase(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, readOnly, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, } = props;
-    const typeScale = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _d !== void 0 ? _d : "sm";
+    const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, readOnly, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, } = props;
+    const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : "sm";
     const internalProps = props.internalProps || {};
     const { compound = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;
@@ -57,7 +57,9 @@ function TextFieldBase(props) {
         },
         hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
         focus: borderless ? Css_1.Css.bshFocus.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
-        disabled: Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$,
+        disabled: visuallyDisabled
+            ? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
+            : Css_1.Css.cursorNotAllowed.$,
         error: Css_1.Css.bRed600.if(contrast).bRed400.$,
     };
     // Watch for each WIP change, convert empty to undefined, and call the user's onChange
@@ -81,25 +83,30 @@ function TextFieldBase(props) {
                     ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
                     ...xss,
                 }, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
-                        ? (_e = inputProps.value) === null || _e === void 0 ? void 0 : _e.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ 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", {}, void 0)] }, j))) }), i)))
-                        : inputProps.value] }), void 0)), !readOnly && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-                    ...fieldStyles.inputWrapper,
-                    ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                    ...(isFocused && !readOnly ? fieldStyles.focus : {}),
-                    ...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
-                    ...(errorMsg ? fieldStyles.error : {}),
-                    ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
-                } }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: fieldRef, rows: multiline ? 1 : undefined, css: {
-                            ...fieldStyles.input,
+                        ? (_f = inputProps.value) === null || _f === void 0 ? void 0 : _f.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ 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", {}, void 0)] }, j))) }), i)))
+                        : inputProps.value] }), void 0)), !readOnly &&
+                (0, components_1.maybeTooltip)({
+                    title: tooltip,
+                    placement: "top",
+                    children: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+                            ...fieldStyles.inputWrapper,
                             ...(inputProps.disabled ? fieldStyles.disabled : {}),
+                            ...(isFocused && !readOnly ? fieldStyles.focus : {}),
                             ...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
-                            ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
-                            ...xss,
-                        } }, tid), void 0), 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();
-                        } }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)), errorMsg && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+                            ...(errorMsg ? fieldStyles.error : {}),
+                            ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
+                        } }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: fieldRef, rows: multiline ? 1 : undefined, css: {
+                                    ...fieldStyles.input,
+                                    ...(inputProps.disabled ? fieldStyles.disabled : {}),
+                                    ...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
+                                    ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
+                                    ...xss,
+                                } }, tid), void 0), 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();
+                                } }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
+                }), errorMsg && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
 }
 exports.TextFieldBase = TextFieldBase;

package/dist/inputs/internal/ListBox.js

@@ -4,10 +4,10 @@ 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 ToggleChip_1 = require("../../components/ToggleChip");
 const Css_1 = require("../../Css");
 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) {
@@ -33,19 +33,12 @@ function ListBox(props) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             ...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(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, 
+        }, 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/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/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.7",
+  "version": "2.93.0",
   "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",