@homebound/beam 2.168.0 → 2.169.2

package/dist/components/Filters/DateRangeFilter.d.ts

@@ -0,0 +1,17 @@
+import { Key } from "react";
+import { Matcher } from "react-day-picker";
+import { Filter } from "./types";
+import { Value } from "../../inputs";
+import { DateRange } from "../../types";
+export declare type DateRangeFilterProps<V extends Value, DV extends DateRangeFilterValue<V>> = {
+    label: string;
+    defaultValue?: DV;
+    placeholderText?: string;
+    disabledDays?: Matcher | Matcher[];
+    testFieldLabel?: string;
+};
+export declare type DateRangeFilterValue<V extends Value> = {
+    op: V;
+    value: DateRange | undefined;
+};
+export declare function dateRangeFilter<V extends Key>(props: DateRangeFilterProps<V, DateRangeFilterValue<V>>): (key: string) => Filter<DateRangeFilterValue<V>>;

package/dist/components/Filters/DateRangeFilter.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateRangeFilter = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const BaseFilter_1 = require("./BaseFilter");
+const Label_1 = require("../Label");
+const inputs_1 = require("../../inputs");
+const defaultTestId_1 = require("../../utils/defaultTestId");
+function dateRangeFilter(props) {
+    return (key) => new DateRangeFilter(key, props);
+}
+exports.dateRangeFilter = dateRangeFilter;
+class DateRangeFilter extends BaseFilter_1.BaseFilter {
+    render(value, setValue, tid, inModal, vertical) {
+        const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), (0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, Object.assign({ compact: true, inlineLabel: true, isRangeFilterField: true, placeholder: placeholderText, label: testFieldLabel !== null && testFieldLabel !== void 0 ? testFieldLabel : "Date", 
+                    // Making sure that DateRange is Date type and not string before passing. Will never have undefined from/to
+                    value: (value === null || value === void 0 ? void 0 : value.value)
+                        ? { from: new Date(value.value.from), to: new Date(value.value.to) }
+                        : undefined, onChange: (d) => (d ? setValue({ op: defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.op, value: d }) : setValue(undefined)), disabledDays: disabledDays }, tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateField`]), void 0)] }, void 0));
+    }
+}

package/dist/components/Filters/index.d.ts

@@ -1,5 +1,7 @@
 export { dateFilter } from "./DateFilter";
 export type { DateFilterValue } from "./DateFilter";
+export { dateRangeFilter } from "./DateRangeFilter";
+export type { DateRangeFilterValue } from "./DateRangeFilter";
 export { multiFilter } from "./MultiFilter";
 export { singleFilter } from "./SingleFilter";
 export { booleanFilter } from "./BooleanFilter";

package/dist/components/Filters/index.js

@@ -10,9 +10,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.dateFilter = void 0;
+exports.toggleFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
 var DateFilter_1 = require("./DateFilter");
 Object.defineProperty(exports, "dateFilter", { enumerable: true, get: function () { return DateFilter_1.dateFilter; } });
+var DateRangeFilter_1 = require("./DateRangeFilter");
+Object.defineProperty(exports, "dateRangeFilter", { enumerable: true, get: function () { return DateRangeFilter_1.dateRangeFilter; } });
 var MultiFilter_1 = require("./MultiFilter");
 Object.defineProperty(exports, "multiFilter", { enumerable: true, get: function () { return MultiFilter_1.multiFilter; } });
 var SingleFilter_1 = require("./SingleFilter");

package/dist/components/Filters/testDomain.d.ts

@@ -1,4 +1,5 @@
 import { DateFilterValue } from "./DateFilter";
+import { DateRangeFilterValue } from "./DateRangeFilter";
 import { FilterDefs } from "./types";
 export declare enum Stage {
     StageOne = "ONE",
@@ -37,13 +38,16 @@ export declare type ProjectFilter = {
     isTest?: boolean | null;
     doNotUse?: boolean | null;
     date?: DateFilterValue<string>;
+    dateRange?: DateRangeFilterValue<string>;
 };
 export declare type StageFilter = NonNullable<FilterDefs<ProjectFilter>["stage"]>;
 export declare type StageSingleFilter = NonNullable<FilterDefs<ProjectFilter>["stageSingle"]>;
 export declare type DateFilter = NonNullable<FilterDefs<ProjectFilter>["date"]>;
+export declare type DateRangeFilter = NonNullable<FilterDefs<ProjectFilter>["dateRange"]>;
 export declare const stageFilter: StageFilter;
 export declare const stageSingleFilter: StageSingleFilter;
 export declare const taskDueFilter: DateFilter;
+export declare const taskCompleteFilter: DateRangeFilter;
 export declare enum TaskStatus {
     NotStarted = "NOT_STARTED",
     InProgress = "IN_PROGRESS",

package/dist/components/Filters/testDomain.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScheduleTypes = exports.TaskStatus = exports.taskDueFilter = exports.stageSingleFilter = exports.stageFilter = exports.Stage = void 0;
+exports.ScheduleTypes = exports.TaskStatus = exports.taskCompleteFilter = exports.taskDueFilter = exports.stageSingleFilter = exports.stageFilter = exports.Stage = void 0;
 const DateFilter_1 = require("./DateFilter");
+const DateRangeFilter_1 = require("./DateRangeFilter");
 const MultiFilter_1 = require("./MultiFilter");
 const SingleFilter_1 = require("./SingleFilter");
 var Stage;
@@ -33,6 +34,10 @@ exports.taskDueFilter = (0, DateFilter_1.dateFilter)({
     getOperationLabel: (o) => o.label,
     getOperationValue: (o) => o.value,
 });
+exports.taskCompleteFilter = (0, DateRangeFilter_1.dateRangeFilter)({
+    label: "Task Completed",
+    placeholderText: "This is some placeholder text",
+});
 var TaskStatus;
 (function (TaskStatus) {
     TaskStatus["NotStarted"] = "NOT_STARTED";

package/dist/components/Table/GridTable.js

@@ -665,7 +665,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     content =
         isGridCellContent(maybeContent) && !!maybeContent.onClick
             ? (0, getInteractiveElement_1.getButtonOrLink)(content, maybeContent.onClick, {
-                css: Css_1.Css.maxw100.lightBlue700.if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
+                css: Css_1.Css.maxw100.lightBlue700.ta("inherit").if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
             })
             : content;
     if (content && typeof content === "string" && isHeader && canSortColumn) {

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

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

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

@@ -11,9 +11,9 @@ const utils_1 = require("../../../utils");
 require("./DatePicker.css");
 function DateRangePicker(props) {
     var _a;
-    const { range, onSelect, disabledDays, dottedDays } = props;
+    const { range, onSelect, disabledDays, dottedDays, useYearPicker } = props;
     const tid = (0, utils_1.useTestIds)(props, "datePicker");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dib.bgWhite.xs.$ }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { mode: "range", selected: range, components: { Caption: Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, defaultMonth: (_a = range === null || range === void 0 ? void 0 : range.to) !== null && _a !== void 0 ? _a : new Date(), onSelect: (selection, day, activeModifiers) => {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dib.bgWhite.xs.$ }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { mode: "range", selected: range, components: { Caption: useYearPicker ? Header_1.YearSkipHeader : Header_1.Header, Head: WeekHeader_1.WeekHeader, Day: Day_1.Day }, defaultMonth: (_a = range === null || range === void 0 ? void 0 : range.to) !== null && _a !== void 0 ? _a : new Date(), onSelect: (selection, day, activeModifiers) => {
                 // Disallow returning disabled dates.
                 if (activeModifiers.disabled)
                     return;

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

@@ -1,2 +1,3 @@
 import { CaptionProps } from "react-day-picker";
 export declare function Header(props: CaptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function YearSkipHeader(props: CaptionProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
+exports.YearSkipHeader = exports.Header = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const date_fns_1 = require("date-fns");
 const react_day_picker_1 = require("react-day-picker");
@@ -12,3 +12,10 @@ function Header(props) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.aic.mlPx(12).mrPx(2).hPx(32).$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.base.$ }, { children: (0, date_fns_1.format)(displayMonth, "MMMM yyyy") }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, -1)) }, void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, 1)) }, void 0)] }, void 0)] }), void 0));
 }
 exports.Header = Header;
+// Header with year skip option
+function YearSkipHeader(props) {
+    const { displayMonth } = props;
+    const { goToMonth } = (0, react_day_picker_1.useNavigation)();
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.aic.mlPx(12).mrPx(12).hPx(32).$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdr.jcsb.$ }, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, -1)) }, void 0), (0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.base.$ }, { children: (0, date_fns_1.format)(displayMonth, "MMM") }), void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addMonths)(displayMonth, 1)) }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdr.jcsb.$ }, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronLeft", onClick: () => goToMonth((0, date_fns_1.addYears)(displayMonth, -1)) }, void 0), (0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.base.$ }, { children: (0, date_fns_1.format)(displayMonth, "yyyy") }), void 0), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: Css_1.Palette.Gray700, icon: "chevronRight", onClick: () => goToMonth((0, date_fns_1.addYears)(displayMonth, 1)) }, void 0)] }), void 0)] }), void 0));
+}
+exports.YearSkipHeader = YearSkipHeader;

package/dist/forms/BoundDateField.d.ts

@@ -3,7 +3,7 @@ import { DateFieldProps } from "../inputs";
 export declare type BoundDateFieldProps = Omit<DateFieldProps, "label" | "value" | "onChange"> & {
     field: FieldState<any, Date | null | undefined>;
     label?: string;
-    onChange?: (value: Date) => void;
+    onChange?: (value: Date | undefined) => void;
 };
 /** Wraps `TextField` and binds it to a form field. */
 export declare function BoundDateField(props: BoundDateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/BoundDateRangeField.d.ts

@@ -4,7 +4,7 @@ import { DateRange } from "../types";
 export declare type BoundDateRangeFieldProps = Omit<DateRangeFieldProps, "label" | "value" | "onChange"> & {
     field: FieldState<any, DateRange | null | undefined>;
     label?: string;
-    onChange?: (value: DateRange) => void;
+    onChange?: (value: DateRange | undefined) => void;
 };
 /** Wraps `TextField` and binds it to a form field. */
 export declare function BoundDateRangeField(props: BoundDateRangeFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -30,17 +30,19 @@ export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "border
     onEnter?: VoidFunction;
     /** for storybook */
     defaultOpen?: boolean;
-    onChange: ((value: Date) => void) | ((value: DateRange) => void);
+    onChange: ((value: Date | undefined) => void) | ((value: DateRange | undefined) => void);
     mode: DateFieldMode;
+    /** Range filters should only allow a full DateRange or nothing */
+    isRangeFilterField?: boolean;
 }
 export interface DateSingleFieldBaseProps extends DateFieldBaseProps {
     mode: "single";
     value: Date | undefined;
-    onChange: (value: Date) => void;
+    onChange: (value: Date | undefined) => void;
 }
 export interface DateRangeFieldBaseProps extends DateFieldBaseProps {
     mode: "range";
     value: DateRange | undefined;
-    onChange: (value: DateRange) => void;
+    onChange: (value: DateRange | undefined) => void;
 }
 export declare function DateFieldBase(props: DateRangeFieldBaseProps | DateSingleFieldBaseProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/DateFields/DateFieldBase.js

@@ -18,7 +18,8 @@ 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, inlineLabel = false, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, ...others } = props;
+    onChange: _onChange, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, isRangeFilterField = false, ...others } = props;
+    const isRangeMode = mode === "range";
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -30,7 +31,7 @@ function DateFieldBase(props) {
     // The `wipValue` allows the "range" mode to set the value to `undefined`, even if the `onChange` response cannot be undefined.
     // This makes working within the DateRangePicker much more user friendly.
     const [wipValue, setWipValue] = (0, react_1.useState)(value);
-    const [inputValue, setInputValue] = (0, react_1.useState)((_a = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
+    const [inputValue, setInputValue] = (0, react_1.useState)((_a = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
     const tid = (0, utils_2.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
@@ -61,7 +62,7 @@ function DateFieldBase(props) {
             (0, utils_2.maybeCall)(onFocus);
             if (wipValue && dateFormat !== utils_1.dateFormats.short) {
                 // When focused, change to use the "short" date format, as it is simpler to update by hand and parse.
-                setInputValue((_a = (props.mode === "range"
+                setInputValue((_a = (isRangeMode
                     ? (0, utils_1.formatDateRange)(props.value, utils_1.dateFormats.short)
                     : (0, utils_1.formatDate)(props.value, utils_1.dateFormats.short))) !== null && _a !== void 0 ? _a : "");
             }
@@ -75,15 +76,17 @@ function DateFieldBase(props) {
                 (overlayRef.current && overlayRef.current.contains(e.relatedTarget))) {
                 return;
             }
-            const parsedDate = mode === "range" ? (0, utils_1.parseDateRange)(inputValue, utils_1.dateFormats.short) : (0, utils_1.parseDate)(inputValue, utils_1.dateFormats.short);
+            const parsedDate = isRangeMode
+                ? (0, utils_1.parseDateRange)(inputValue, utils_1.dateFormats.short)
+                : (0, utils_1.parseDate)(inputValue, utils_1.dateFormats.short);
             // If the user leaves the input and has an invalid date, reset to previous value.
             if (!isParsedDateValid(parsedDate)) {
                 setWipValue(value);
-                setInputValue((_a = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
+                setInputValue((_a = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
             }
             else if (dateFormat !== utils_1.dateFormats.short) {
                 // Or if we need to reset the dateFormat back from `short` to whatever the user specified
-                setInputValue((_b = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _b !== void 0 ? _b : "");
+                setInputValue((_b = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _b !== void 0 ? _b : "");
             }
             state.close();
             (0, utils_2.maybeCall)(onBlur);
@@ -120,48 +123,62 @@ function DateFieldBase(props) {
         // Avoid updating any WIP values.
         if (!isFocused && !state.isOpen) {
             setWipValue(value);
-            setInputValue((_a = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
+            setInputValue((_a = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps - Do not include `isFocused` or `state.isOpen`.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         // We don't want to update the internal `wipValue` or `inputValue` back to `value` just because focus state changes or the overlay opens
     }, [value, dateFormat]);
     // Create a type safe `onChange` to handle both Single and Range date fields.
     const onChange = (0, react_1.useCallback)((d) => {
         setWipValue(d);
         if (d && isParsedDateValid(d)) {
-            if (props.mode === "range" && (0, react_day_picker_1.isDateRange)(d)) {
+            if (isRangeMode && (0, react_day_picker_1.isDateRange)(d)) {
                 props.onChange(d);
                 return;
             }
-            if (props.mode === "single" && !(0, react_day_picker_1.isDateRange)(d)) {
+            if (!isRangeMode && !(0, react_day_picker_1.isDateRange)(d)) {
                 props.onChange(d);
                 return;
             }
         }
-    }, [mode, props.onChange]);
+        else {
+            props.onChange(undefined);
+            return;
+        }
+    }, [isRangeMode, props.onChange]);
     // If showing the short date format, "01/01/20", so set size to 8. If medium (Wed, Nov 23) use 10 characters (leaving out the `,` character in the count because it is so small)
     // Otherwise the long format can be `undefined`.
     // Setting the size attribute only impacts the fields when displayed in a container that doesn't allow the field to grow to its max width, such as in an inline container.
     // TODO: figure this out... seems weird to have now that we support multiple dates formats....
     // 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 = mode !== "range" ? (format === "short" ? 8 : format === "medium" ? 10 : undefined) : undefined;
+    const inputSize = !isRangeMode ? (format === "short" ? 8 : format === "medium" ? 10 : undefined) : undefined;
+    // Support input range filter field w/ a clear btn that will appear when overlay is closed and input is not focused
+    const clearButton = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inputValue !== "" && !state.isOpen && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
+                setInputValue("");
+                onChange(undefined);
+            } }, 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));
+    const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }, void 0));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { 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();
                     if (v) {
                         setInputValue(v);
                         // If changing the value directly (vs using the DatePicker), then we always use the short format
-                        const parsed = mode === "range" ? (0, utils_1.parseDateRange)(v, utils_1.dateFormats.short) : (0, utils_1.parseDate)(v, utils_1.dateFormats.short);
+                        const parsed = isRangeMode ? (0, utils_1.parseDateRange)(v, utils_1.dateFormats.short) : (0, utils_1.parseDate)(v, utils_1.dateFormats.short);
                         onChange(parsed);
                     }
-                }, endAdornment: (!hideCalendarIcon && !iconLeft) && calendarButton, startAdornment: (!hideCalendarIcon && iconLeft) && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: props.mode === "range" ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
+                    // User has deleted all text in field
+                    else if (v === undefined) {
+                        setInputValue("");
+                    }
+                }, endAdornment: !iconLeft && EndFieldButtons, startAdornment: !hideCalendarIcon && iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: overlayProps }, { children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, Object.assign({ range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
                             var _a;
                             // 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);
-                        } }, tid.datePicker), void 0)) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, Object.assign({ value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
+                        }, useYearPicker: isRangeFilterField }, tid.datePicker), void 0)) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, Object.assign({ value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
                             var _a;
                             setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
                             onChange(d);

package/dist/inputs/Switch.js

@@ -25,8 +25,8 @@ function Switch(props) {
         children: ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, hoverProps, { css: {
                 ...Css_1.Css.relative.cursorPointer.df.w("max-content").smEm.selectNone.$,
                 ...(labelStyle === "form" && Css_1.Css.fdc.$),
-                ...(labelStyle === "inline" && Css_1.Css.childGap2.aic.$),
-                ...(labelStyle === "filter" && Css_1.Css.jcsb.aic.w("auto").sm.$),
+                ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
+                ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.w("auto").sm.$),
                 ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
             }, "aria-label": label }, { children: [!hideLabel && labelStyle === "form" && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), !hideLabel && labelStyle === "filter" && (0, jsx_runtime_1.jsx)("span", { children: label }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-hidden": "true", css: {
                         ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,

package/package.json

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