@homebound/beam 2.244.4 → 2.246.0

package/dist/hooks/useComputed.d.ts

@@ -1,2 +1,2 @@
 /** Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes. */
-export declare function useComputed<T>(fn: () => T, deps: readonly any[]): T;
+export declare function useComputed<T>(fn: (prev: T | undefined) => T, deps: readonly any[]): T;

package/dist/hooks/useComputed.js

@@ -29,9 +29,9 @@ function useComputed(fn, deps) {
         // If deps has changed, we're already re-running, so don't trigger a 2nd one
         current.hasRan = false;
         current.runner = (0, mobx_1.autorun)(() => {
-            // Always eval fn() (even on 1st render) to register our observable.
-            const newValue = fn();
             const { value: oldValue, hasRan: oldHasRun } = current;
+            // Always eval fn() (even on 1st render) to register our observable.
+            const newValue = fn(oldValue);
             current.value = newValue;
             current.hasRan = true;
             // Only trigger a re-render if this is not the 1st autorun. Note
@@ -51,7 +51,7 @@ function useComputed(fn, deps) {
     // accept running the eval fn twice (here to get the value for the 1st render,
     // and again for mobx to watch what observables we touch).
     if (!ref.current.hasRan) {
-        ref.current.value = fn();
+        ref.current.value = fn(undefined);
     }
     // We can use `!` here b/c we know that `autorun` set current
     return ref.current.value;

package/dist/inputs/Autocomplete.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { PresentationFieldProps } from "../components/PresentationContext";
+import { TextFieldBaseProps } from "./TextFieldBase";
+interface AutocompleteProps<T> extends Pick<PresentationFieldProps, "labelStyle">, Pick<TextFieldBaseProps<any>, "label" | "clearable" | "startAdornment"> {
+    onSelect: (item: T) => void;
+    /** A function that returns how to render the an option in the menu. If not set, `getOptionLabel` will be used */
+    getOptionMenuLabel?: (o: T) => ReactNode;
+    /** A function that returns the string value of the option. Used for accessibility purposes */
+    getOptionLabel: (o: T) => string;
+    /** A function that returns a unique key for an option */
+    getOptionValue: (o: T) => string;
+    /** Called when the input value changes */
+    onInputChange: (value: string | undefined) => void;
+    /** The current value of the input */
+    value: string | undefined;
+    /** The list of options to choose from */
+    options: T[];
+    /** The placeholder text to show when the input is empty */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+}
+export declare function Autocomplete<T extends object>(props: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/inputs/Autocomplete.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = 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_stately_1 = require("react-stately");
+const components_1 = require("../components");
+const internal_1 = require("../components/internal");
+const ListBox_1 = require("./internal/ListBox");
+const TextFieldBase_1 = require("./TextFieldBase");
+const Value_1 = require("./Value");
+function Autocomplete(props) {
+    var _a;
+    const { onSelect, getOptionLabel, getOptionValue, getOptionMenuLabel, onInputChange, value, options, disabled, ...others } = props;
+    const comboBoxProps = {
+        isDisabled: !!disabled,
+        onInputChange: onInputChange,
+        inputValue: value,
+        items: options,
+        // Allow the user to type in a value that is not in the list. Allows for the text to stay in the input when the user clicks away
+        allowsCustomValue: true,
+        children: (item) => ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: getOptionValue(item), children: getOptionMenuLabel ? getOptionMenuLabel(item) : getOptionLabel(item) }, getOptionValue(item))),
+        onSelectionChange: (key) => {
+            const selectedItem = options.find((i) => getOptionValue(i) === key);
+            if (selectedItem) {
+                onInputChange(getOptionLabel(selectedItem));
+                onSelect(selectedItem);
+            }
+        },
+        ...others,
+    };
+    const state = (0, react_stately_1.useComboBoxState)(comboBoxProps);
+    const inputWrapRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const listBoxRef = (0, react_1.useRef)(null);
+    const popoverRef = (0, react_1.useRef)(null);
+    const { inputProps, listBoxProps, labelProps } = (0, react_aria_1.useComboBox)({
+        ...comboBoxProps,
+        inputRef,
+        listBoxRef,
+        popoverRef,
+        // When the input is focused and there are options, open the menu
+        onFocus: () => options.length > 0 && state.open(),
+    }, state);
+    // useOverlayPosition moves the overlay to the top of the DOM to avoid any z-index issues. Uses the `targetRef` to DOM placement
+    const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
+        targetRef: inputWrapRef,
+        overlayRef: popoverRef,
+        scrollRef: listBoxRef,
+        isOpen: state.isOpen,
+        onClose: state.close,
+        placement: "bottom left",
+    });
+    positionProps.style = {
+        ...positionProps.style,
+        width: (_a = inputWrapRef === null || inputWrapRef === void 0 ? void 0 : inputWrapRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
+        // Ensures the menu never gets too small.
+        minWidth: 200,
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { inputRef: inputRef, inputWrapRef: inputWrapRef, inputProps: inputProps, labelProps: labelProps, onChange: onInputChange, clearable: true, 
+                // Respect if caller to passes in `startAdornment={undefined}`
+                startAdornment: "startAdornment" in props ? props.startAdornment : (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "search" }), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), getOptionLabel: getOptionLabel }) }))] }));
+}
+exports.Autocomplete = Autocomplete;

package/dist/inputs/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./Autocomplete";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChipSelectField";

package/dist/inputs/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupField = void 0;
+__exportStar(require("./Autocomplete"), exports);
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CheckboxGroup"), exports);
 __exportStar(require("./ChipSelectField"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.244.4",
+  "version": "2.246.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",