@homebound/beam 2.166.1 → 2.169.0

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.d.ts

@@ -274,7 +274,7 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
-declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined) => ReactNode;
+declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined) => ReactNode;
 /** Defines row-specific styling for each given row `kind` in `R` */
 export declare type GridRowStyles<R extends Kinded> = {
     [P in R["kind"]]?: RowStyle<DiscriminateUnion<R, "kind", P>>;
@@ -316,6 +316,8 @@ export declare type GridCellContent = {
     onClick?: () => {} | string;
     /** Custom css to apply directly to this cell, i.e. cell-specific borders. */
     css?: Properties;
+    /** Allows cell to reveal content when the user hovers over a row. Content must be wrapped in an element in order to be hidden. IE <div>{value}</div>*/
+    revealOnRowHover?: true;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -490,6 +490,7 @@ function GridRow(props) {
             .map((openCardKind) => style.nestedCards.kinds[openCardKind])
             .filter((style) => style)
         : undefined;
+    const revealOnRowHoverClass = "revealOnRowHover";
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
         // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
@@ -502,6 +503,10 @@ function GridRow(props) {
         // Maybe add the sticky header styles
         ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
+        ...{
+            [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
+            [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
+        },
     };
     let currentColspan = 1;
     let firstContentColumnStylesApplied = false;
@@ -523,6 +528,7 @@ function GridRow(props) {
             }
             const maybeContent = applyRowFn(column, row, api, level);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+            const revealOnRowHover = isGridCellContent(maybeContent) ? maybeContent.revealOnRowHover : false;
             const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
                 (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = getAlignment(column, maybeContent);
@@ -598,6 +604,7 @@ function GridRow(props) {
                 },
                 ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
+            const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? rowLinkRenderFn(as)
                 : isHeader
@@ -605,7 +612,7 @@ function GridRow(props) {
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
                         ? rowClickRenderFn(as, api)
                         : defaultRenderFn(as);
-            return renderFn(columnIndex, cellCss, content, row, rowStyle);
+            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames);
         }) }), void 0));
     return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
@@ -696,12 +703,12 @@ function applyRowFn(column, row, api, level) {
 }
 exports.applyRowFn = applyRowFn;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
-const defaultRenderFn = (as) => (key, css, content) => {
+const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: content }), key));
 };
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
-const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content) => {
+const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content, row, rowStyle, classNames) => {
     const [currentKey, direction] = sortState || [];
     // If server-side sorting, use the user's key for this column; client-side sorting, use the index.
     const ourSortKey = column.serverSideSortKey || columns.indexOf(column);
@@ -709,21 +716,21 @@ const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css
         sorted: ourSortKey === currentKey ? direction : undefined,
         toggleSort: () => setSortKey(ourSortKey),
     };
-    const Row = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as, column) } }, { children: content }), void 0) }), key));
+    const Cell = as === "table" ? "th" : "div";
+    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as, column) }, className: classNames }, { children: content }), void 0) }), key));
 };
 /** Renders a cell element when a row link is in play. */
-const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle) => {
+const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
     const to = rowStyle.rowLink(row);
     if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink }, { children: content }), void 0) }), key));
+        return ((0, jsx_runtime_1.jsx)("td", Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink }, { children: content }), void 0) }), key));
     }
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: CssReset_1.navLink }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}` }, { children: content }), key));
 };
 /** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle) => {
+const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames) => {
     const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
 };
 const alignmentToJustify = {
     left: "flex-start",

package/dist/components/Tabs.d.ts

@@ -16,6 +16,7 @@ export interface TabsProps<V extends string, X> {
     onChange: (value: V) => void;
     contentXss?: X;
     alwaysShowAllTabs?: boolean;
+    includeBottomBorder?: boolean;
 }
 export interface RouteTabsProps<V extends string, X> extends Omit<TabsProps<V, X>, "onChange" | "selected" | "tabs"> {
     tabs: RouteTab<V>[];
@@ -65,26 +66,36 @@ export declare function getTabStyles(): {
     } & {
         paddingRight: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
     } & {
-        borderRadius: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
+        outline: import("csstype").Property.Outline<0 | (string & {})> | undefined;
+    } & {
+        color: import("csstype").Property.Color | undefined;
+    } & {
+        width: import("csstype").Property.Width<0 | (string & {})> | undefined;
+    } & {
+        cursor: import("csstype").Property.Cursor | undefined;
     } & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    };
+    activeStyles: {
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
     } & {
-        outline: import("csstype").Property.Outline<0 | (string & {})> | undefined;
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
     } & {
-        color: import("csstype").Property.Color | undefined;
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
     } & {
-        width: import("csstype").Property.Width<0 | (string & {})> | undefined;
+        borderColor: import("csstype").Property.BorderColor | undefined;
     } & {
-        cursor: import("csstype").Property.Cursor | undefined;
-    };
-    activeStyles: {
-        color: import("csstype").Property.Color | undefined;
+        fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
-        backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    } & {
+        color: import("csstype").Property.Color | undefined;
     };
     disabledStyles: {
         color: import("csstype").Property.Color | undefined;
@@ -97,14 +108,24 @@ export declare function getTabStyles(): {
         boxShadow: import("csstype").Property.BoxShadow | undefined;
     };
     hoverStyles: {
-        color: import("csstype").Property.Color | undefined;
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
     } & {
-        backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
+    } & {
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
+    } & {
+        borderColor: import("csstype").Property.BorderColor | undefined;
     };
     activeHoverStyles: {
         backgroundColor: import("csstype").Property.BackgroundColor | undefined;
     } & {
-        color: import("csstype").Property.Color | undefined;
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
+    } & {
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
+    } & {
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
+    } & {
+        borderColor: import("csstype").Property.BorderColor | undefined;
     };
 };
 export declare function getNextTabValue<V extends string>(selected: V, key: "ArrowLeft" | "ArrowRight", tabs: Tab<V>[] | RouteTab<V>[]): V;

package/dist/components/Tabs.js

@@ -45,7 +45,7 @@ exports.TabContent = TabContent;
 /** The top list of tabs. */
 function Tabs(props) {
     const { tabActionsRef, tabActionsDiv } = (0, BeamContext_1.useBeamContext)();
-    const { ariaLabel, tabs, ...others } = props;
+    const { ariaLabel, tabs, includeBottomBorder, ...others } = props;
     const location = (0, react_router_1.useLocation)();
     const selected = isRouteTabs(props)
         ? uniqueTabValue(props.tabs.find((t) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0])
@@ -84,7 +84,7 @@ function Tabs(props) {
             setActive(selected);
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.childGap1.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: { ...Css_1.Css.dif.childGap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
                     const uniqueValue = uniqueTabValue(tab);
                     return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
                 }) }), void 0)), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.ml("auto").addIn("&>div", Css_1.Css.df.aic.childGap1.$).$, ref: tabActionsRef }, void 0)] }), void 0));
@@ -122,13 +122,20 @@ function TabImpl(props) {
     return isDisabled ? ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tabProps, { children: tabLabel }), void 0)) : isRouteTab(tab) ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, { ...tabProps, ...interactiveProps }, { className: "navLink", to: tab.href }, { children: tabLabel }), void 0)) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, { ...tabProps, ...interactiveProps }, { children: tabLabel }), void 0));
 }
 function getTabStyles() {
+    const borderBottomWidthPx = 4;
+    const verticalPaddingPx = 6;
+    // Decrease the bottom padding by the same amount of the new border width to prevent text layout shift
+    const borderBottomStyles = Css_1.Css.bb
+        .add("borderBottomWidth", `${borderBottomWidthPx}px`)
+        .pbPx(verticalPaddingPx - borderBottomWidthPx).$;
     return {
-        baseStyles: Css_1.Css.df.aic.hPx(32).pyPx(6).px1.br4.smEm.outline0.gray700.add("width", "fit-content").cursorPointer.$,
-        activeStyles: Css_1.Css.lightBlue700.bgLightBlue50.$,
+        baseStyles: Css_1.Css.df.aic.hPx(32).pyPx(verticalPaddingPx).px1.outline0.gray700.add("width", "fit-content")
+            .cursorPointer.sm.$,
+        activeStyles: Css_1.Css.add(borderBottomStyles).bLightBlue700.smEm.gray900.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
         focusRingStyles: Css_1.Css.bgLightBlue50.bshFocus.$,
-        hoverStyles: Css_1.Css.gray700.bgGray100.$,
-        activeHoverStyles: Css_1.Css.bgLightBlue200.lightBlue700.$,
+        hoverStyles: Css_1.Css.add(borderBottomStyles).bGray400.$,
+        activeHoverStyles: Css_1.Css.bgLightBlue50.add(borderBottomStyles).bLightBlue700.$,
     };
 }
 exports.getTabStyles = getTabStyles;

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/package.json

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