@homebound/beam 2.337.1 → 2.339.0

package/dist/Css.d.ts

@@ -1092,6 +1092,10 @@ declare class CssBuilder<T extends Properties> {
     flexWrap(value: Properties["flexWrap"]): CssBuilder<T & {
         flexWrap: import("csstype").Property.FlexWrap | undefined;
     }>;
+    /** Sets `order: value`. */
+    order(value: Properties["order"]): CssBuilder<T & {
+        order: import("csstype").Property.Order | undefined;
+    }>;
     /** Sets `float: "left"`. */
     get fl(): CssBuilder<T & {
         float: import("csstype").Property.Float | undefined;
@@ -1566,6 +1570,30 @@ declare class CssBuilder<T extends Properties> {
     objectFit(value: Properties["objectFit"]): CssBuilder<T & {
         objectFit: import("csstype").Property.ObjectFit | undefined;
     }>;
+    /** Sets `opacity: "0"`. */
+    get o0(): CssBuilder<T & {
+        opacity: import("csstype").Property.Opacity | undefined;
+    }>;
+    /** Sets `opacity: "0.25"`. */
+    get o25(): CssBuilder<T & {
+        opacity: import("csstype").Property.Opacity | undefined;
+    }>;
+    /** Sets `opacity: "0.5"`. */
+    get o50(): CssBuilder<T & {
+        opacity: import("csstype").Property.Opacity | undefined;
+    }>;
+    /** Sets `opacity: "0.75"`. */
+    get o75(): CssBuilder<T & {
+        opacity: import("csstype").Property.Opacity | undefined;
+    }>;
+    /** Sets `opacity: "1"`. */
+    get o100(): CssBuilder<T & {
+        opacity: import("csstype").Property.Opacity | undefined;
+    }>;
+    /** Sets `opacity: value`. */
+    o(value: Properties["opacity"]): CssBuilder<T & {
+        opacity: import("csstype").Property.Opacity | undefined;
+    }>;
     /** Sets `outline: "1px solid"`. */
     get outline1(): CssBuilder<T & {
         outline: import("csstype").Property.Outline<string | 0> | undefined;

package/dist/Css.js

@@ -1088,6 +1088,10 @@ class CssBuilder {
     flexWrap(value) {
         return this.add("flexWrap", value);
     }
+    /** Sets `order: value`. */
+    order(value) {
+        return this.add("order", value);
+    }
     // float
     /** Sets `float: "left"`. */
     get fl() {
@@ -1518,6 +1522,31 @@ class CssBuilder {
     objectFit(value) {
         return this.add("objectFit", value);
     }
+    // opacity
+    /** Sets `opacity: "0"`. */
+    get o0() {
+        return this.add("opacity", "0");
+    }
+    /** Sets `opacity: "0.25"`. */
+    get o25() {
+        return this.add("opacity", "0.25");
+    }
+    /** Sets `opacity: "0.5"`. */
+    get o50() {
+        return this.add("opacity", "0.5");
+    }
+    /** Sets `opacity: "0.75"`. */
+    get o75() {
+        return this.add("opacity", "0.75");
+    }
+    /** Sets `opacity: "1"`. */
+    get o100() {
+        return this.add("opacity", "1");
+    }
+    /** Sets `opacity: value`. */
+    o(value) {
+        return this.add("opacity", value);
+    }
     // outline
     /** Sets `outline: "1px solid"`. */
     get outline1() {

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

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

package/dist/inputs/internal/ComboBoxBase.js

@@ -13,6 +13,7 @@ const ComboBoxInput_1 = require("./ComboBoxInput");
 const ListBox_1 = require("./ListBox");
 const Value_1 = require("../Value");
 const utils_1 = require("../utils");
+const use_debounce_1 = require("use-debounce");
 /**
  * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
  *
@@ -25,7 +26,7 @@ const utils_1 = require("../utils");
 function ComboBoxBase(props) {
     var _a, _b, _c, _d, _e;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, ...otherProps } = props;
+    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, onSearch, ...otherProps } = props;
     const labelStyle = (_c = (_b = otherProps.labelStyle) !== null && _b !== void 0 ? _b : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _c !== void 0 ? _c : "above";
     // Memoize the callback functions and handle the `unset` option if provided.
     const getOptionLabel = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? unsetLabel : propOptionLabel(o)), 
@@ -166,8 +167,11 @@ function ComboBoxBase(props) {
         selectedKeys,
         onSelectionChange,
     });
+    const [debouncedSearch] = (0, use_debounce_1.useDebounce)(searchValue, 300);
     // Reset inputValue when closed or selected changes
     (0, react_1.useEffect)(() => {
+        if (debouncedSearch)
+            return;
         if (state.isOpen && multiselect) {
             // While the multiselect is open, let the user keep typing
             setFieldState((prevState) => ({
@@ -183,7 +187,11 @@ function ComboBoxBase(props) {
                 inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
             }));
         }
-    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly]);
+    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly, debouncedSearch]);
+    // Call on search callback when the user types in the input field
+    (0, react_1.useEffect)(() => {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(debouncedSearch !== null && debouncedSearch !== void 0 ? debouncedSearch : "");
+    }, [onSearch, debouncedSearch]);
     // For the most part, the returned props contain `aria-*` and `id` attributes for accessibility purposes.
     const { buttonProps: triggerProps, inputProps, listBoxProps, labelProps, } = (0, react_aria_1.useComboBox)({
         ...comboBoxProps,

package/package.json

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