@homebound/beam 2.338.0 → 2.340.0

package/dist/components/internal/DatePicker/DatePicker.d.ts

@@ -5,5 +5,6 @@ export interface DatePickerProps {
     onSelect: (value: Date) => void;
     disabledDays?: Matcher | Matcher[];
     dottedDays?: Matcher[];
+    useYearPicker?: boolean;
 }
 export declare function DatePicker(props: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/internal/DatePicker/DatePicker.js

@@ -10,9 +10,9 @@ const Css_1 = require("../../../Css");
 const utils_1 = require("../../../utils");
 require("./DatePicker.css");
 function DatePicker(props) {
-    const { value, onSelect, disabledDays, dottedDays } = props;
+    const { value, onSelect, disabledDays, dottedDays, useYearPicker } = props;
     const tid = (0, utils_1.useTestIds)(props, "datePicker");
-    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dib.bgWhite.xs.$, ...tid, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { components: { Caption: Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, 
+    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dib.bgWhite.xs.$, ...tid, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { components: { Caption: useYearPicker ? Header_1.YearSkipHeader : Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, 
             // DatePicker only allows for a single date to be `selected` (per our props) though DayPicker expects an array of dates
             selected: value ? [value] : [], defaultMonth: value !== null && value !== void 0 ? value : new Date(), onDayClick: (day, modifiers) => {
                 if (modifiers.disabled)

package/dist/inputs/DateFields/DateFieldBase.d.ts

@@ -33,6 +33,8 @@ export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<Properties>,
     mode: DateFieldMode;
     /** Range filters should only allow a full DateRange or nothing */
     isRangeFilterField?: boolean;
+    /** Render header that skips years in addition to months */
+    useYearPicker?: boolean;
 }
 export interface DateSingleFieldBaseProps extends DateFieldBaseProps {
     mode: "single";

package/dist/inputs/DateFields/DateFieldBase.js

@@ -18,7 +18,7 @@ function DateFieldBase(props) {
     var _a;
     const { label, disabled, required, value, onFocus, onBlur, 
     // Pull `onChange` out of the props, but we're not directly using it. Do not want to keep it in `...others`
-    onChange: _onChange, errorMsg, helperText, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, isRangeFilterField = false, ...others } = props;
+    onChange: _onChange, errorMsg, helperText, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, isRangeFilterField = false, useYearPicker = false, ...others } = props;
     const isRangeMode = mode === "range";
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
@@ -169,12 +169,12 @@ function DateFieldBase(props) {
                                 // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
                                 setInputValue((_a = (0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                                 onChange(dr);
-                            }, useYearPicker: isRangeFilterField, ...tid.datePicker })) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, { value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
+                            }, useYearPicker: isRangeFilterField || useYearPicker, ...tid.datePicker })) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, { value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
                                 var _a;
                                 state.close();
                                 setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                                 onChange(d);
-                            }, ...tid.datePicker })) }) }) }))] }));
+                            }, useYearPicker: useYearPicker, ...tid.datePicker })) }) }) }))] }));
 }
 exports.DateFieldBase = DateFieldBase;
 function isParsedDateValid(d) {

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.338.0",
+  "version": "2.340.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",