@homebound/beam 2.137.2 → 2.137.5

package/dist/components/ButtonDatePicker.d.ts

@@ -1,4 +1,4 @@
-import { DatePickerProps } from "./internal/DatePicker";
+import { DatePickerProps } from "./internal/DatePicker/DatePicker";
 import { OverlayTriggerProps } from "./internal/OverlayTrigger";
 interface ButtonDatePickerProps extends DatePickerProps, Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
     defaultOpen?: boolean;

package/dist/components/ButtonDatePicker.js

@@ -5,7 +5,7 @@ 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 DatePickerOverlay_1 = require("./internal/DatePickerOverlay");
+const DatePickerOverlay_1 = require("./internal/DatePicker/DatePickerOverlay");
 const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");

package/dist/components/internal/DatePicker/DatePicker.css

@@ -0,0 +1,315 @@
+:root {
+  /* Modified by Beam (40 -> 32) */
+  --rdp-cell-size: 32px;
+  /* Modified by Beam (#0000ff -> LightBlue700) */
+  --rdp-accent-color: rgba(3,105,161,1);
+  --rdp-background-color: #e7edff;
+  /* Switch to dark colors for dark themes */
+  --rdp-accent-color-dark: #3003e1;
+  --rdp-background-color-dark: #180270;
+  /* Outline border for focused elements */
+  --rdp-outline: 2px solid var(--rdp-accent-color);
+  /* Outline border for focused and selected elements */
+  /* Modified by Beam (rgba(0, 0, 0, 0.75) -> LightBlue700) */
+  --rdp-outline-selected: 2px solid rgba(3,105,161,1);
+}
+
+.rdp {
+  /* Modified by Beam (1em -> 16px) */
+  margin: 16px;
+}
+
+/* Hide elements for devices that are not screen readers */
+.rdp-vhidden {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  border: 0 !important;
+}
+
+/* Buttons */
+.rdp-button_reset {
+  appearance: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: default;
+  color: inherit;
+  outline: none;
+  background: none;
+  font: inherit;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+.rdp-button {
+  border: 2px solid transparent;
+}
+
+.rdp-button[aria-disabled='true'] {
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+.rdp-button:not([aria-disabled='true']) {
+  cursor: pointer;
+}
+
+.rdp-button:focus,
+.rdp-button:active {
+  color: inherit;
+  border: var(--rdp-outline);
+  background-color: var(--rdp-background-color);
+}
+
+.rdp-button:hover:not([aria-disabled='true']) {
+  background-color: var(--rdp-background-color);
+}
+
+.rdp-months {
+  display: flex;
+}
+
+.rdp-month {
+  margin: 0 1em;
+}
+
+.rdp-month:first-child {
+  margin-left: 0;
+}
+
+.rdp-month:last-child {
+  margin-right: 0;
+}
+
+.rdp-table {
+  margin: 0;
+  max-width: calc(var(--rdp-cell-size) * 7);
+  border-collapse: collapse;
+}
+
+.rdp-with_weeknumber .rdp-table {
+  max-width: calc(var(--rdp-cell-size) * 8);
+  border-collapse: collapse;
+}
+
+.rdp-caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  text-align: left;
+}
+
+.rdp-multiple_months .rdp-caption {
+  position: relative;
+  display: block;
+  text-align: center;
+}
+
+.rdp-caption_dropdowns {
+  position: relative;
+  display: inline-flex;
+}
+
+.rdp-caption_label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  color: currentColor;
+  border: 0;
+  border: 2px solid transparent;
+  font-family: inherit;
+  font-size: 140%;
+  font-weight: bold;
+}
+
+.rdp-nav {
+  white-space: nowrap;
+}
+
+.rdp-multiple_months .rdp-caption_start .rdp-nav {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-multiple_months .rdp-caption_end .rdp-nav {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-nav_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  padding: 0.25em;
+  border-radius: 100%;
+}
+
+/* ---------- */
+/* Dropdowns  */
+/* ---------- */
+
+.rdp-dropdown_year,
+.rdp-dropdown_month {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.rdp-dropdown[disabled] {
+  opacity: unset;
+  color: unset;
+}
+
+.rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
+.rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
+  border: var(--rdp-outline);
+  border-radius: 6px;
+  background-color: var(--rdp-background-color);
+}
+
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
+}
+
+.rdp-head {
+  border: 0;
+}
+
+.rdp-head_row,
+.rdp-row {
+  height: 100%;
+}
+
+.rdp-head_cell {
+  vertical-align: middle;
+  text-transform: uppercase;
+  font-size: 0.75em;
+  font-weight: 700;
+  text-align: center;
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+}
+
+.rdp-tbody {
+  border: 0;
+}
+
+.rdp-tfoot {
+  margin: 0.5em;
+}
+
+.rdp-cell {
+  width: var(--rdp-cell-size);
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+  text-align: center;
+}
+
+.rdp-weeknumber {
+  font-size: 0.75em;
+}
+
+.rdp-weeknumber,
+.rdp-day {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rdp-cell-size);
+  max-width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 100%;
+}
+
+.rdp-day_today:not(.rdp-day_outside) {
+  font-weight: bold;
+}
+
+.rdp-day_selected:not([aria-disabled='true']),
+.rdp-day_selected:focus:not([aria-disabled='true']),
+.rdp-day_selected:active:not([aria-disabled='true']),
+.rdp-day_selected:hover:not([aria-disabled='true']) {
+  color: white;
+  background-color: var(--rdp-accent-color);
+}
+
+.rdp-day_selected:focus:not([aria-disabled='true']) {
+  border: var(--rdp-outline-selected);
+}
+
+.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp-day_range_end.rdp-day_range_start {
+  border-radius: 100%;
+}
+
+.rdp-day_range_middle {
+  border-radius: 0;
+}

package/dist/components/internal/{DatePicker.d.ts → DatePicker/DatePicker.d.ts}

@@ -1,9 +1,9 @@
-import { Modifier } from "react-day-picker";
+import { Matcher } from "react-day-picker";
 import "./DatePicker.css";
 export interface DatePickerProps {
     value?: Date;
     onSelect: (value: Date) => void;
-    disabledDays?: Modifier | Modifier[];
-    dottedDays?: Modifier[];
+    disabledDays?: Matcher | Matcher[];
+    dottedDays?: Matcher[];
 }
 export declare function DatePicker(props: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_day_picker_1 = require("react-day-picker");
+const Day_1 = require("./Day");
+const Header_1 = require("./Header");
+const WeekHeader_1 = require("./WeekHeader");
+const Css_1 = require("../../../Css");
+const utils_1 = require("../../../utils");
+require("./DatePicker.css");
+function DatePicker(props) {
+    const { value, onSelect, disabledDays, dottedDays } = 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, { components: { Caption: 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)
+                    return;
+                // Set the day value
+                onSelect(day);
+            }, disabled: disabledDays, modifiers: { indicatorDot: dottedDays !== null && dottedDays !== void 0 ? dottedDays : [] } }, void 0) }), void 0));
+}
+exports.DatePicker = DatePicker;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerOverlay = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DatePicker_1 = require("./DatePicker");
+const Css_1 = require("../../../Css");
+// Small wrapper around DatePicker to provide necessary styling and state handling when displayed as an overlay.
+function DatePickerOverlay({ overlayProps, state, ...datePickerProps }) {
+    return (
+    // Adds `tabIndex` so clicking within the DatePicker will provide a `e.relatedTarget` on blur and focus events.
+    // This allows for components such as the DateField to conditionally trigger their 'onBlur' prop. E.g. If the user leaves the field to interact with the DatePicker, then don't call onBlur
+    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.br4.bshModal.$ }, overlayProps, { tabIndex: 0 }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
+                datePickerProps.onSelect(d);
+                state.close();
+            } }), void 0) }), void 0));
+}
+exports.DatePickerOverlay = DatePickerOverlay;

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

@@ -0,0 +1,3 @@
+import { DayProps } from "react-day-picker";
+/** Follows the same pattern as defined by the React-Day-Picker 'Day' component, plus sprinkling our own styling */
+export declare function Day(props: DayProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Day = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_day_picker_1 = require("react-day-picker");
+const Css_1 = require("../../../Css");
+const utils_1 = require("../../../utils");
+/** Follows the same pattern as defined by the React-Day-Picker 'Day' component, plus sprinkling our own styling */
+function Day(props) {
+    // Was hoping we could pass the `datePicker` testid through, but was breaking something.
+    const tid = (0, utils_1.useTestIds)(props, "datePickerDay");
+    const buttonRef = (0, react_1.useRef)(null);
+    const { isHidden, isButton, activeModifiers, buttonProps, divProps } = (0, react_day_picker_1.useDayRender)(props.date, props.displayMonth, buttonRef);
+    if (isHidden) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+    if (!isButton) {
+        return (0, jsx_runtime_1.jsx)("div", Object.assign({}, divProps), void 0);
+    }
+    const { className, children, ...otherProps } = buttonProps;
+    const { selected = false, indicatorDot = false, disabled = false, today = false } = activeModifiers;
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, otherProps, { ref: buttonRef, type: "button", css: {
+            ...Css_1.Css.overflowHidden.pbPx(4).if(disabled).cursorNotAllowed.$,
+            // Do not apply interaction styles for disabled or already selected days.
+            ...(!selected &&
+                !disabled && {
+                "&:hover:not(:active) > div": Css_1.Css.bgGray100.$,
+                "&:active > div": Css_1.Css.bgGray400.$,
+            }),
+        } }, tid, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+                ...Css_1.Css.relative.br4.df.aic.jcc.wPx(28).hPx(30).mtPx(2).br4.$,
+                ...(selected && Css_1.Css.white.bgLightBlue700.$),
+                ...(disabled && Css_1.Css.gray500.$),
+                ...(today && Css_1.Css.bgGray100.$),
+            } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mtPx(-2).$ }, { children: children }), void 0), indicatorDot && ((0, jsx_runtime_1.jsx)("div", Object.assign({ 
+                    // Using `absolute` position as to not change the placement of the day's number when this is introduced
+                    css: Css_1.Css.absolute.bottomPx(4).wPx(4).hPx(4).bgLightBlue700.br4.if(selected).bgWhite.$ }, tid.indicatorDot), void 0))] }), void 0) }), void 0));
+}
+exports.Day = Day;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const IconButton_1 = require("../../IconButton");
+const Css_1 = require("../../../Css");
+function Header(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(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;

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

@@ -0,0 +1 @@
+export declare function WeekHeader(): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WeekHeader = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const date_fns_1 = require("date-fns");
+const Css_1 = require("../../../Css");
+function WeekHeader() {
+    const start = (0, date_fns_1.startOfWeek)(new Date());
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        days.push((0, date_fns_1.addDays)(start, i));
+    }
+    // Copies the existing structure and classes defined by React-Day-Picker. Adds in Beam styling and formatting.
+    return ((0, jsx_runtime_1.jsx)("thead", Object.assign({ className: "rdp-head" }, { children: (0, jsx_runtime_1.jsx)("tr", Object.assign({ className: "rdp-head_row" }, { children: days.map((day) => ((0, jsx_runtime_1.jsxs)("th", Object.assign({ scope: "col", css: Css_1.Css.p1.pbPx(12).xs.gray400.$ }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ "aria-hidden": "true" }, { children: (0, date_fns_1.format)(day, "EEEEE") }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "rdp-vhidden" }, { children: (0, date_fns_1.format)(day, "EEEE") }), void 0)] }), (0, date_fns_1.format)(day, "EEEE")))) }), void 0) }), void 0));
+}
+exports.WeekHeader = WeekHeader;

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

@@ -0,0 +1,2 @@
+export * from "./DatePicker";
+export * from "./DatePickerOverlay";

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

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./DatePickerOverlay"), exports);

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

@@ -1,3 +1,4 @@
+export * from "./DatePicker";
 export * from "./Menu";
 export * from "./MenuItem";
 export * from "./MenuSection";

package/dist/components/internal/index.js

@@ -10,6 +10,7 @@ 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 });
+__exportStar(require("./DatePicker"), exports);
 __exportStar(require("./Menu"), exports);
 __exportStar(require("./MenuItem"), exports);
 __exportStar(require("./MenuSection"), exports);

package/dist/inputs/DateField.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Modifier } from "react-day-picker";
+import { Matcher } from "react-day-picker";
 import { TextFieldBaseProps } from "./TextFieldBase";
 export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     value: Date | undefined;
@@ -25,7 +25,7 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
      * Set custom logic for individual dates or date ranges to be disabled in the picker
      * exposed from `react-day-picker`: https://react-day-picker.js.org/api/DayPicker#modifiers
      */
-    disabledDays?: Modifier | Modifier[];
+    disabledDays?: Matcher | Matcher[];
     onEnter?: VoidFunction;
     defaultOpen?: boolean;
 }

package/dist/inputs/DateField.js

@@ -5,11 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const date_fns_1 = require("date-fns");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const react_day_picker_1 = require("react-day-picker");
 const react_stately_1 = require("react-stately");
 const components_1 = require("../components");
 const internal_1 = require("../components/internal");
-const DatePickerOverlay_1 = require("../components/internal/DatePickerOverlay");
+const DatePickerOverlay_1 = require("../components/internal/DatePicker/DatePickerOverlay");
 const Css_1 = require("../Css");
 const TextFieldBase_1 = require("./TextFieldBase");
 const utils_1 = require("../utils");
@@ -20,19 +19,22 @@ function DateField(props) {
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
     const overlayRef = (0, react_1.useRef)(null);
-    // Local focus state for determining which `dateFormat` to show. When in focus, always show `short` format, otherwise based on `format` prop value.
+    // Local focus state to conditionally call onBlur when the date picker closes.
+    // E.g. If the picker closes due to focus going back to the input field then don't call onBlur. Also used to avoid updating WIP values
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const dateFormat = getDateFormat(format);
     const [inputValue, setInputValue] = (0, react_1.useState)(value ? formatDate(value, dateFormat) : "");
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
+    // Handle case where the input value is updated from outside the component.
     (0, react_1.useEffect)(() => {
         // Avoid updating any WIP values.
         if (!isFocused) {
             setInputValue(value ? formatDate(value, dateFormat) : "");
         }
-    }, [value]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps - Do not include `isFocused`, we don't want to update the internal `inputValue` back to `value` just because focus state changes
+    }, [value, dateFormat]);
     const textFieldProps = {
         ...others,
         label,
@@ -70,10 +72,15 @@ function DateField(props) {
                 (overlayRef.current && overlayRef.current.contains(e.relatedTarget))) {
                 return;
             }
+            const parsedDate = parseDate(inputValue, dateFormats.short);
             // If the user leaves the input and has an invalid date, reset to previous value.
-            if (!parseDate(inputValue, dateFormat)) {
+            if (!parsedDate) {
                 setInputValue(value ? formatDate(value, dateFormat) : "");
             }
+            else if (dateFormat !== dateFormats.short) {
+                // Or if we need to reset the dateFormat back from `short` to whatever the user specified
+                setInputValue(formatDate(parsedDate, dateFormat));
+            }
             state.close();
             (0, utils_1.maybeCall)(onBlur);
         },
@@ -106,7 +113,7 @@ function DateField(props) {
     // 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....
+    // 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 = format === "short" ? 8 : format === "medium" ? 10 : undefined;
@@ -156,7 +163,7 @@ function parseDate(str, format) {
         return undefined;
     }
     const parsed = (0, date_fns_1.parse)(str, format, new Date());
-    if (!react_day_picker_1.DateUtils.isDate(parsed)) {
+    if (!(0, date_fns_1.isDate)(parsed)) {
         return undefined;
     }
     return parsed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.137.2",
+  "version": "2.137.5",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -32,18 +32,18 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
   },
   "dependencies": {
-    "@homebound/form-state": "2.15.1",
+    "@homebound/form-state": "^2.15.2",
     "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.11.3",
     "@react-hook/resize-observer": "^1.2.2",
     "change-case": "^4.1.2",
-    "date-fns": "^2.21.3",
+    "date-fns": "^2.28.0",
     "dompurify": "^2.3.0",
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^4.1.11",
     "memoize-one": "^5.2.1",
     "react-aria": "^3.14.1",
-    "react-day-picker": "^7.4.10",
+    "react-day-picker": "^8.0.6",
     "react-popper": "^2.2.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

package/dist/components/internal/DatePicker.css

@@ -1,186 +0,0 @@
-/**
- We don't usually do BEM/css files, but this is copy/pasted from react-day-picker
- with most of our local changes being deletions. Most CSS additions we do via truss
- in the DateField.tsx file, but doing deletions here means we can do avoid using
- `important!` for things we want to override.
- */
-
-.DayPicker {
-  display: inline-block;
-  font-size: 1rem;
-}
-
-.DayPicker-wrapper {
-  position: relative;
-
-  flex-direction: row;
-  padding-bottom: 1em;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.DayPicker-Months {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.DayPicker-Month {
-  display: table;
-  margin: 0 1em;
-  margin-top: 1em;
-  border-spacing: 0;
-  border-collapse: collapse;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.DayPicker-NavBar {
-}
-
-.DayPicker-NavButton {
-  position: absolute;
-  top: 1em;
-  right: 1.5em;
-  left: auto;
-
-  display: inline-block;
-  margin-top: 2px;
-  width: 1.25em;
-  height: 1.25em;
-  background-position: center;
-  background-size: 50%;
-  background-repeat: no-repeat;
-  color: #8b9898;
-  cursor: pointer;
-}
-
-.DayPicker-NavButton:hover {
-  opacity: 0.8;
-}
-
-.DayPicker-NavButton--interactionDisabled {
-  display: none;
-}
-
-.DayPicker-Caption {
-  display: table-caption;
-  margin-bottom: 0.5em;
-  padding: 0 0.5em;
-  text-align: left;
-}
-
-.DayPicker-Weekdays {
-  display: table-header-group;
-  margin-top: 1em;
-}
-
-.DayPicker-WeekdaysRow {
-  display: table-row;
-}
-
-.DayPicker-Weekday {
-  display: table-cell;
-  padding: 0.5em;
-  color: #8b9898;
-  text-align: center;
-  font-size: 0.875em;
-}
-
-.DayPicker-Weekday abbr[title] {
-  border-bottom: none;
-  text-decoration: none;
-}
-
-.DayPicker-Body {
-  display: table-row-group;
-}
-
-.DayPicker-Week {
-  display: table-row;
-}
-
-.DayPicker-Day {
-  display: table-cell;
-  padding: 0.5em;
-  border-radius: 50%;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-}
-
-.DayPicker-WeekNumber {
-  display: table-cell;
-  padding: 0.5em;
-  min-width: 1em;
-  border-right: 1px solid #eaecec;
-  color: #8b9898;
-  vertical-align: middle;
-  text-align: right;
-  font-size: 0.75em;
-  cursor: pointer;
-}
-
-.DayPicker--interactionDisabled .DayPicker-Day {
-  cursor: default;
-}
-
-.DayPicker-Footer {
-  padding-top: 0.5em;
-}
-
-.DayPicker-TodayButton {
-  border: none;
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
-  color: #4a90e2;
-  font-size: 0.875em;
-  cursor: pointer;
-}
-
-/* Default modifiers */
-
-.DayPicker-Day--outside {
-  color: #8b9898;
-  cursor: default;
-}
-
-.DayPicker-Day--disabled {
-  color: #dce0e0;
-  cursor: default;
-  /* background-color: #eff1f1; */
-}
-
-/* Example modifiers */
-
-.DayPicker-Day--sunday {
-  background-color: #f7f8f8;
-}
-
-.DayPicker-Day--sunday:not(.DayPicker-Day--today) {
-  color: #dce0e0;
-}
-
-/* DayPickerInput */
-
-.DayPickerInput {
-  display: inline-block;
-}
-
-.DayPickerInput-OverlayWrapper {
-  position: relative;
-}
-
-.DayPickerInput-Overlay {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-
-  background: white;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-}

package/dist/components/internal/DatePicker.js

@@ -1,57 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePicker = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_day_picker_1 = __importDefault(require("react-day-picker"));
-const index_1 = require("../index");
-const Css_1 = require("../../Css");
-const utils_1 = require("../../utils");
-require("./DatePicker.css");
-function DatePicker(props) {
-    const { value, onSelect, disabledDays, dottedDays } = 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.$,
-            // The S / M / T / W ... heading
-            "& .DayPicker-Weekday": Css_1.Css.pPx(8).xs.gray400.important.$,
-            // Un-collapse the borders so we can hover each cell
-            "& .DayPicker-Month": Css_1.Css.add({ borderCollapse: "separate" }).$,
-            // // Make the boxes smaller, this ends up being 32x32 which matches figma
-            "& .DayPicker-Day": Css_1.Css.px1.ptPx(6).pbPx(10).xs.ba.bWhite.br4.relative.$,
-            // For today, use a background
-            "& .DayPicker-Day--today": Css_1.Css.bgGray100.$,
-            // For selected, use a background - `--outside` modifier is set on placeholder days not within the viewed month
-            "& .DayPicker-Day--selected:not(.DayPicker-Day--outside)": Css_1.Css.bgLightBlue700.white.$,
-            // For pressed
-            "& .DayPicker-Day:active": Css_1.Css.bgGray400.$,
-            // Make the month title, i.e. "May 2021", match figma; pyPx nudge matches the NavbarElement nudging
-            "& .DayPicker-Caption > div": Css_1.Css.base.pyPx(2).$,
-            // For days that are disabled via `disabledDays`,
-            "& .DayPicker-Day--disabled": Css_1.Css.cursorNotAllowed.$,
-            // Override `.DayPicker-Day:active` background when the day is disabled
-            "& .DayPicker-Day--disabled:active": Css_1.Css.bgWhite.$,
-            // Display dottedDays using positioned pseudo elements.
-            "& .DayPicker-Day--indicatorDot": Css_1.Css.addIn("&:after", Css_1.Css.wPx(4).hPx(4).br4.absolute.bottomPx(5).left("calc(50% - 2px)").bgLightBlue700.add("content", "''").$).$,
-            // Update dottedDays color if day is "selected"
-            "& .DayPicker-Day--selected.DayPicker-Day--indicatorDot": Css_1.Css.addIn("&:after", Css_1.Css.bgWhite.$).$,
-        } }, tid, { children: (0, jsx_runtime_1.jsx)(react_day_picker_1.default, { navbarElement: NavbarElement, weekdayElement: Weekday, selectedDays: [value], initialMonth: value !== null && value !== void 0 ? value : new Date(), onDayClick: (day, modifiers) => {
-                if (modifiers.disabled)
-                    return;
-                // Set the day value
-                onSelect(day);
-            }, disabledDays: disabledDays, modifiers: { indicatorDot: dottedDays } }, void 0) }), void 0));
-}
-exports.DatePicker = DatePicker;
-/** Customize the prev/next button to be our SVG icons. */
-function NavbarElement(props) {
-    const { showPreviousButton, showNextButton, onPreviousClick, onNextClick, classNames } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classNames.navBar }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.absolute.top(2).right(6.5).$ }, { children: (0, jsx_runtime_1.jsx)(index_1.IconButton, { color: Css_1.Palette.Gray700, disabled: !showPreviousButton, icon: "chevronLeft", onClick: () => onPreviousClick() }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.absolute.top(2).right(3).$ }, { children: (0, jsx_runtime_1.jsx)(index_1.IconButton, { color: Css_1.Palette.Gray700, disabled: !showNextButton, icon: "chevronRight", onClick: () => onNextClick() }, void 0) }), void 0)] }), void 0));
-}
-/** Customize the weekday names to be only the first letter. */
-function Weekday({ weekday, className, localeUtils, locale }) {
-    const weekdayName = localeUtils.formatWeekdayLong(weekday, locale);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: className, title: weekdayName }, { children: weekdayName.slice(0, 1) }), void 0));
-}

package/dist/components/internal/DatePickerOverlay.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerOverlay = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const DatePicker_1 = require("./DatePicker");
-const Css_1 = require("../../Css");
-// Small wrapper around DatePicker to provide necessary styling and state handling when displayed as an overlay.
-function DatePickerOverlay({ overlayProps, state, ...datePickerProps }) {
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.br4.bshModal.$ }, overlayProps, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
-                datePickerProps.onSelect(d);
-                state.close();
-            } }), void 0) }), void 0));
-}
-exports.DatePickerOverlay = DatePickerOverlay;