@homebound/beam 2.91.7 → 2.91.8

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/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,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)(() => {
         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]);
+    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.$ : {}),
@@ -184,3 +199,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/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.91.8",
   "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",