@homebound/beam 2.141.0 → 2.142.0

package/dist/Css.d.ts

@@ -2849,6 +2849,9 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         backgroundColor: import("csstype").Property.BackgroundColor | undefined;
     }>;
+    get contentEmpty(): CssBuilder<T & {
+        content: import("csstype").Property.Content | undefined;
+    }>;
     get $(): T;
     if(t: boolean | Breakpoint): CssBuilder<T>;
     get else(): CssBuilder<T>;

package/dist/Css.js

@@ -859,6 +859,8 @@ class CssBuilder {
     get listReset() { return this.add("padding", 0).add("margin", 0).add("listStyle", "none"); }
     // underlay
     get underlay() { return this.add("position", "fixed").add("top", 0).add("bottom", 0).add("left", 0).add("right", 0).add("display", "flex").add("alignItems", "center").add("justifyContent", "center").add("backgroundColor", "rgba(36,36,36,0.2)"); }
+    // contentEmpty
+    get contentEmpty() { return this.add("content", "''"); }
     // aliases
     get $() { return maybeImportant(sortObject(this.rules), this.opts.important); }
     if(t) {

package/dist/components/ButtonDatePicker.js

@@ -5,16 +5,20 @@ 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 DatePicker_1 = require("./internal/DatePicker/DatePicker");
 const DatePickerOverlay_1 = require("./internal/DatePicker/DatePickerOverlay");
 const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonDatePicker(props) {
-    const { defaultOpen, disabled, trigger } = props;
+    const { defaultOpen, disabled, trigger, onSelect, ...datePickerProps } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : trigger.icon);
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({}, props, { state: state, overlayProps: menuProps }, tid.datePicker), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ overlayProps: menuProps }, { children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, datePickerProps, { onSelect: (d) => {
+                    onSelect(d);
+                    state.close();
+                } }, tid.datePicker), void 0) }), void 0) }), void 0));
 }
 exports.ButtonDatePicker = ButtonDatePicker;

package/dist/components/NavLink.d.ts

@@ -13,7 +13,7 @@ export interface NavLinkProps extends BeamFocusableProps {
 }
 declare type NavLinkVariant = "side" | "global";
 export declare function NavLink(props: NavLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function getNavLinkStyles(variant: NavLinkVariant, contrast?: boolean): {
+export declare function getNavLinkStyles(variant: NavLinkVariant, contrast: boolean): {
     baseStyles: {};
     hoverStyles: {};
     disabledStyles: {};

package/dist/components/NavLink.js

@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const Icon_1 = require("./Icon");
 function NavLink(props) {
-    const { disabled: isDisabled, label, openInNew, ...otherProps } = props;
+    const { disabled: isDisabled, label, openInNew, contrast = false, ...otherProps } = props;
     const ariaProps = { children: label, isDisabled, ...otherProps };
     const { href, active = false, icon = false, variant } = ariaProps;
     const ref = (0, react_1.useRef)();
@@ -19,7 +19,7 @@ function NavLink(props) {
     const { type, ...otherButtonProps } = buttonProps;
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
-    const { baseStyles, activeStyles, focusRingStyles, hoverStyles, disabledStyles, pressedStyles } = (0, react_1.useMemo)(() => getNavLinkStyles(variant), [variant]);
+    const { baseStyles, activeStyles, focusRingStyles, hoverStyles, disabledStyles, pressedStyles } = (0, react_1.useMemo)(() => getNavLinkStyles(variant, contrast), [variant, contrast]);
     const external = (0, utils_1.isAbsoluteUrl)(href) || openInNew;
     const linkAttributes = {
         className: components_1.navLink,
@@ -43,7 +43,7 @@ function NavLink(props) {
     return external ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: href }, (0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), linkAttributes, { children: linkContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: href }, (0, react_aria_1.mergeProps)(otherButtonProps, focusProps, hoverProps), linkAttributes, { children: linkContent }), void 0));
 }
 exports.NavLink = NavLink;
-function getNavLinkStyles(variant, contrast = false) {
+function getNavLinkStyles(variant, contrast) {
     return navLinkVariantStyles(contrast)[variant];
 }
 exports.getNavLinkStyles = getNavLinkStyles;

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

@@ -14,6 +14,11 @@
   --rdp-outline-selected: 2px solid rgba(3,105,161,1);
 }
 
+/* Added in By Beam */
+.rdp-cell:focus-visible {
+  outline: 0;
+}
+
 .rdp {
   /* Modified by Beam (1em -> 16px) */
   margin: 16px;

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

@@ -1,9 +1,6 @@
-import { HTMLAttributes } from "react";
-import { OverlayTriggerState } from "react-stately";
-import { DatePickerProps } from "./DatePicker";
-interface DatePickerOverlayProps extends DatePickerProps {
+import { HTMLAttributes, PropsWithChildren } from "react";
+interface DatePickerOverlayProps {
     overlayProps: HTMLAttributes<HTMLElement>;
-    state: OverlayTriggerState;
 }
-export declare function DatePickerOverlay({ overlayProps, state, ...datePickerProps }: DatePickerOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function DatePickerOverlay({ overlayProps, children }: PropsWithChildren<DatePickerOverlayProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,16 +2,12 @@
 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 }) {
+function DatePickerOverlay({ overlayProps, children }) {
     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));
+    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.br4.bshModal.$ }, overlayProps, { tabIndex: 0 }, { children: children }), void 0));
 }
 exports.DatePickerOverlay = DatePickerOverlay;

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

@@ -0,0 +1,10 @@
+import { Matcher } from "react-day-picker";
+import { DateRange } from "../../../types";
+import "./DatePicker.css";
+export interface DateRangePickerProps {
+    range: DateRange | undefined;
+    onSelect: (range: DateRange | undefined) => void;
+    disabledDays?: Matcher | Matcher[];
+    dottedDays?: Matcher[];
+}
+export declare function DateRangePicker(props: DateRangePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangePicker = 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 DateRangePicker(props) {
+    var _a;
+    const { range, 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, { 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) => {
+                // Disallow returning disabled dates.
+                if (activeModifiers.disabled)
+                    return;
+                onSelect(selection);
+            }, disabled: disabledDays, modifiers: { indicatorDot: dottedDays !== null && dottedDays !== void 0 ? dottedDays : [] } }, void 0) }), void 0));
+}
+exports.DateRangePicker = DateRangePicker;

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

@@ -19,22 +19,37 @@ function Day(props) {
         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;
+    const { selected = false, indicatorDot = false, disabled = false, today = false, range_middle = false, range_start = false, range_end = false, } = activeModifiers;
+    // It is possible that we have selected only one day for the range. In this case the date will be both the start and end.
+    // When this happens, do not show styling as if there is an existing range.
+    const showRangeStyles = !(range_end === true && range_start === true);
+    const showActiveStyles = !disabled;
     return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, otherProps, { ref: buttonRef, type: "button", css: {
-            ...Css_1.Css.overflowHidden.pbPx(4).if(disabled).cursorNotAllowed.$,
+            ...Css_1.Css.relative.pbPx(4).outline0.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.$,
             }),
+            ...(!disabled && { "&:active > div": Css_1.Css.bgGray400.gray900.$ }),
+            "&:focus:not(:active) > div": Css_1.Css.ba.bLightBlue700.if(selected).bLightBlue900.$,
+            ...(showRangeStyles &&
+                range_start &&
+                Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.rightPx(-2).wPx(8).$ }).$),
+            ...(showRangeStyles && range_end && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.wPx(8).leftPx(-2).$ }).$),
+            ...(showRangeStyles && range_middle && Css_1.Css.addIn(":after", { ...rangeBaseStyles, ...Css_1.Css.leftPx(-2).$ }).$),
         } }, 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.$,
-                ...(today && Css_1.Css.bgGray100.$),
-                ...(selected && Css_1.Css.white.bgLightBlue700.$),
+                ...Css_1.Css.overflowHidden.gray900.relative.z1.br4.df.aic.jcc.wPx(28).hPx(30).mtPx(2).br4.$,
+                ...(today && !range_middle && Css_1.Css.bgGray100.$),
+                ...(selected && !range_middle && Css_1.Css.white.bgLightBlue700.$),
                 ...(disabled && Css_1.Css.gray500.$),
             } }, { 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));
+                    css: Css_1.Css.absolute
+                        .bottomPx(4)
+                        .wPx(4)
+                        .hPx(4)
+                        .bgLightBlue700.br4.if(selected && !range_middle).bgWhite.$ }, tid.indicatorDot), void 0))] }), void 0) }), void 0));
 }
 exports.Day = Day;
+const rangeBaseStyles = Css_1.Css.absolute.topPx(2).contentEmpty.hPx(30).wPx(32).bgLightBlue100.$;

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

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

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

@@ -12,3 +12,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DatePicker"), exports);
 __exportStar(require("./DatePickerOverlay"), exports);
+__exportStar(require("./DateRangePicker"), exports);

package/dist/forms/BoundDateField.js

@@ -8,12 +8,12 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextField` and binds it to a form field. */
 function BoundDateField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
+    const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
                 onChange(value);
                 field.maybeAutoSave();
-            }, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
+            }, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
                 field.blur();
                 (0, utils_1.maybeCall)(onBlur);
             }, onFocus: () => {

package/dist/forms/BoundDateRangeField.d.ts

@@ -0,0 +1,10 @@
+import { FieldState } from "@homebound/form-state";
+import { DateRangeFieldProps } from "../inputs";
+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;
+};
+/** Wraps `TextField` and binds it to a form field. */
+export declare function BoundDateRangeField(props: BoundDateRangeFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/BoundDateRangeField.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoundDateRangeField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
+const inputs_1 = require("../inputs");
+const utils_1 = require("../utils");
+const defaultLabel_1 = require("../utils/defaultLabel");
+/** Wraps `TextField` and binds it to a form field. */
+function BoundDateRangeField(props) {
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
+    const testId = (0, utils_1.useTestIds)(props, field.key);
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
+                onChange(value);
+                field.maybeAutoSave();
+            }, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            }, onEnter: () => {
+                (0, utils_1.maybeCall)(onEnter);
+                field.maybeAutoSave();
+            } }, testId, others), void 0)) }, void 0));
+}
+exports.BoundDateRangeField = BoundDateRangeField;

package/dist/forms/formStateDomain.d.ts

@@ -1,6 +1,8 @@
+import { DateRange } from "../types";
 export declare const jan1: Date;
 export declare const jan2: Date;
 export declare const jan10: Date;
+export declare const jan19: Date;
 export declare const jan29: Date;
 export declare const dd100: DeweyDecimalClassification;
 export declare const dd200: DeweyDecimalClassification;
@@ -20,6 +22,7 @@ export interface AuthorInput {
     isAvailable?: boolean | null;
     animals?: string[] | null;
     bio?: string | null;
+    saleDates?: DateRange | null;
 }
 export interface AuthorAddress {
     street?: string | null;

package/dist/forms/formStateDomain.js

@@ -3,10 +3,11 @@
 // by a GraphQL schema for a `saveAuthor` mutation that takes an author
 // plus the author's books.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan29 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
+exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan29 = exports.jan19 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
 exports.jan1 = new Date(2020, 0, 1);
 exports.jan2 = new Date(2020, 0, 2);
 exports.jan10 = new Date(2020, 0, 10);
+exports.jan19 = new Date(2020, 0, 19);
 exports.jan29 = new Date(2020, 0, 29);
 exports.dd100 = { number: "100", category: "Philosophy" };
 exports.dd200 = { number: "200", category: "Religion" };

package/dist/forms/index.d.ts

@@ -2,6 +2,7 @@ export * from "./BoundCheckboxField";
 export * from "./BoundCheckboxGroupField";
 export * from "./BoundChipSelectField";
 export * from "./BoundDateField";
+export * from "./BoundDateRangeField";
 export * from "./BoundMultiSelectField";
 export * from "./BoundNumberField";
 export * from "./BoundRadioGroupField";

package/dist/forms/index.js

@@ -14,6 +14,7 @@ __exportStar(require("./BoundCheckboxField"), exports);
 __exportStar(require("./BoundCheckboxGroupField"), exports);
 __exportStar(require("./BoundChipSelectField"), exports);
 __exportStar(require("./BoundDateField"), exports);
+__exportStar(require("./BoundDateRangeField"), exports);
 __exportStar(require("./BoundMultiSelectField"), exports);
 __exportStar(require("./BoundNumberField"), exports);
 __exportStar(require("./BoundRadioGroupField"), exports);

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

@@ -0,0 +1,4 @@
+import { DateSingleFieldBaseProps } from "./DateFieldBase";
+export interface DateFieldProps extends Omit<DateSingleFieldBaseProps, "mode"> {
+}
+export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/DateFields/DateField.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DateFieldBase_1 = require("./DateFieldBase");
+function DateField(props) {
+    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, Object.assign({}, props, { mode: "single" }), void 0);
+}
+exports.DateField = DateField;

package/dist/inputs/{DateField.mock.d.ts → DateFields/DateField.mock.d.ts}

@@ -1,3 +1,3 @@
-import { DateFieldProps } from "./";
+import { DateFieldProps } from "..";
 /** Mocks out `DateField` as a text `<input>` field. */
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/{DateField.mock.js → DateFields/DateField.mock.js}

@@ -4,7 +4,7 @@ exports.DateField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const date_fns_1 = require("date-fns");
 const react_1 = require("react");
-const utils_1 = require("../utils");
+const utils_1 = require("../../utils");
 /** Mocks out `DateField` as a text `<input>` field. */
 function DateField(props) {
     const { onChange = () => { }, errorMsg, onBlur, onFocus } = props;

package/dist/inputs/{DateField.d.ts → DateFields/DateFieldBase.d.ts}

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
 import { Matcher } from "react-day-picker";
-import { TextFieldBaseProps } from "./TextFieldBase";
-export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
-    value: Date | undefined;
+import { DateFieldMode, dateFormats } from "./utils";
+import { TextFieldBaseProps } from "../TextFieldBase";
+import { DateRange } from "../../types";
+export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     label: string;
-    onChange: (value: Date) => void;
     /** Called when the component loses focus */
     onBlur?: () => void;
     /** Called when the component is in focus. */
@@ -27,12 +27,19 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
      */
     disabledDays?: Matcher | Matcher[];
     onEnter?: VoidFunction;
+    /** for storybook */
     defaultOpen?: boolean;
+    onChange: ((value: Date) => void) | ((value: DateRange) => void);
+    mode: DateFieldMode;
+}
+export interface DateSingleFieldBaseProps extends DateFieldBaseProps {
+    mode: "single";
+    value: Date | undefined;
+    onChange: (value: Date) => void;
+}
+export interface DateRangeFieldBaseProps extends DateFieldBaseProps {
+    mode: "range";
+    value: DateRange | undefined;
+    onChange: (value: DateRange) => void;
 }
-export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare const dateFormats: {
-    short: string;
-    medium: string;
-    long: string;
-};
-export {};
+export declare function DateFieldBase(props: DateRangeFieldBaseProps | DateSingleFieldBaseProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/{DateField.js → DateFields/DateFieldBase.js}

@@ -1,20 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateField = void 0;
+exports.DateFieldBase = void 0;
 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/DatePicker/DatePickerOverlay");
-const Css_1 = require("../Css");
-const TextFieldBase_1 = require("./TextFieldBase");
-const utils_1 = require("../utils");
-const defaultTestId_1 = require("../utils/defaultTestId");
-function DateField(props) {
-    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, ...others } = props;
+const components_1 = require("../../components");
+const internal_1 = require("../../components/internal");
+const DatePickerOverlay_1 = require("../../components/internal/DatePicker/DatePickerOverlay");
+const Css_1 = require("../../Css");
+const utils_1 = require("./utils");
+const TextFieldBase_1 = require("../TextFieldBase");
+const utils_2 = require("../../utils");
+const defaultTestId_1 = require("../../utils/defaultTestId");
+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, disabledDays, onEnter, defaultOpen, mode, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -22,19 +26,14 @@ function DateField(props) {
     // 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 dateFormat = (0, utils_1.getDateFormat)(format);
+    // 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 tid = (0, utils_2.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) : "");
-        }
-        // 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,
@@ -47,7 +46,7 @@ function DateField(props) {
         onOpenChange: (isOpen) => {
             // Handles calling `onBlur` for the case where the user interacts with the overlay, removing focus from the input field, and eventually closes the overlay (whether clicking away, or selecting a date)
             if (!isOpen && !isFocused) {
-                (0, utils_1.maybeCall)(onBlur);
+                (0, utils_2.maybeCall)(onBlur);
             }
         },
         isOpen: defaultOpen,
@@ -55,16 +54,20 @@ function DateField(props) {
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
         onFocus: () => {
+            var _a;
             // Open overlay on focus of the input.
             state.open();
             setIsFocused(true);
-            (0, utils_1.maybeCall)(onFocus);
-            if (value) {
+            (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(formatDate(value, dateFormats.short));
+                setInputValue((_a = (props.mode === "range"
+                    ? (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 : "");
             }
         },
         onBlur: (e) => {
+            var _a, _b;
             setIsFocused(false);
             // If we are interacting any other part of `inputWrap` ref (such as the calendar button) return early as clicking anywhere within there will push focus to the input field.
             // Or if interacting with the DatePicker then also return early. The overlay will handle calling `onBlur` once it closes.
@@ -72,22 +75,23 @@ function DateField(props) {
                 (overlayRef.current && overlayRef.current.contains(e.relatedTarget))) {
                 return;
             }
-            const parsedDate = parseDate(inputValue, dateFormats.short);
+            const parsedDate = mode === "range" ? (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 (!parsedDate) {
-                setInputValue(value ? formatDate(value, dateFormat) : "");
+            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 : "");
             }
-            else if (dateFormat !== dateFormats.short) {
+            else if (dateFormat !== utils_1.dateFormats.short) {
                 // Or if we need to reset the dateFormat back from `short` to whatever the user specified
-                setInputValue(formatDate(parsedDate, dateFormat));
+                setInputValue((_b = (props.mode === "range" ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _b !== void 0 ? _b : "");
             }
             state.close();
-            (0, utils_1.maybeCall)(onBlur);
+            (0, utils_2.maybeCall)(onBlur);
         },
         onKeyDown: (e) => {
             var _a;
             if (e.key === "Enter") {
-                (0, utils_1.maybeCall)(onEnter);
+                (0, utils_2.maybeCall)(onEnter);
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             }
         },
@@ -110,13 +114,38 @@ function DateField(props) {
         shouldUpdatePosition: true,
         offset: 4,
     });
+    // Handle case where the input value is updated from outside the component.
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // 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 : "");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps - Do not include `isFocused` or `state.isOpen`.
+        // 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)) {
+                props.onChange(d);
+                return;
+            }
+            if (props.mode === "single" && !(0, react_day_picker_1.isDateRange)(d)) {
+                props.onChange(d);
+                return;
+            }
+        }
+    }, [mode, 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 = format === "short" ? 8 : format === "medium" ? 10 : undefined;
+    const inputSize = mode !== "range" ? (format === "short" ? 8 : format === "medium" ? 10 : undefined) : undefined;
     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));
     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
@@ -124,55 +153,23 @@ function DateField(props) {
                     if (v) {
                         setInputValue(v);
                         // If changing the value directly (vs using the DatePicker), then we always use the short format
-                        const parsed = parseDate(v, dateFormats.short);
-                        if (parsed) {
-                            onChange(parsed);
-                        }
+                        const parsed = mode === "range" ? (0, utils_1.parseDateRange)(v, utils_1.dateFormats.short) : (0, utils_1.parseDate)(v, utils_1.dateFormats.short);
+                        onChange(parsed);
                     }
-                }, endAdornment: !iconLeft && calendarButton, startAdornment: 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({ value: value, onSelect: (d) => {
-                        setInputValue(formatDate(d, dateFormat));
-                        onChange(d);
-                    }, state: state, disabledDays: disabledDays, overlayProps: overlayProps }, tid.datePicker), void 0) }), void 0))] }, void 0));
-}
-exports.DateField = DateField;
-function formatDate(date, format) {
-    return (0, date_fns_1.format)(date, format);
-}
-function parseDate(str, format) {
-    // Copy/pasted from react-day-picker so that typing "2/2/2" doesn't turn into "02/02/0002"
-    const split = str.split("/");
-    if (split.length !== 3) {
-        return undefined;
-    }
-    // Wait for the year to be 2 chars
-    if (split[2].length !== 2) {
-        return undefined;
-    }
-    const month = parseInt(split[0], 10) - 1;
-    const day = parseInt(split[1], 10);
-    let year = parseInt(split[2], 10);
-    // This is also ~verbatim copy/pasted from react-day-picker
-    if (isNaN(year) ||
-        String(year).length > 4 ||
-        isNaN(month) ||
-        isNaN(day) ||
-        day <= 0 ||
-        day > 31 ||
-        month < 0 ||
-        month >= 12) {
-        return undefined;
-    }
-    const parsed = (0, date_fns_1.parse)(str, format, new Date());
-    if (!(0, date_fns_1.isDate)(parsed)) {
-        return undefined;
-    }
-    return parsed;
+                }, endAdornment: !iconLeft && calendarButton, startAdornment: 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) => {
+                            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) => {
+                            var _a;
+                            setInputValue((_a = (0, utils_1.formatDate)(d, utils_1.dateFormats.short)) !== null && _a !== void 0 ? _a : "");
+                            onChange(d);
+                            state.close();
+                        } }, tid.datePicker), void 0)) }), void 0) }), void 0))] }, void 0));
 }
-const dateFormats = {
-    short: "MM/dd/yy",
-    medium: "EEE, MMM d",
-    long: "EEEE LLLL d, uuuu",
-};
-function getDateFormat(format) {
-    return format ? dateFormats[format] : dateFormats.short;
+exports.DateFieldBase = DateFieldBase;
+function isParsedDateValid(d) {
+    // Only consider a DateRange valid when both `from` and `to` values are valid dates
+    return d !== undefined && (!(0, react_day_picker_1.isDateRange)(d) || ((0, react_day_picker_1.isDateRange)(d) && (0, utils_1.isValidDate)(d.from) && (0, utils_1.isValidDate)(d.to)));
 }

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

@@ -0,0 +1,4 @@
+import { DateRangeFieldBaseProps } from "./DateFieldBase";
+export interface DateRangeFieldProps extends Omit<DateRangeFieldBaseProps, "mode"> {
+}
+export declare function DateRangeField(props: DateRangeFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/DateFields/DateRangeField.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DateFieldBase_1 = require("./DateFieldBase");
+function DateRangeField(props) {
+    return (0, jsx_runtime_1.jsx)(DateFieldBase_1.DateFieldBase, Object.assign({}, props, { mode: "range" }), void 0);
+}
+exports.DateRangeField = DateRangeField;

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

@@ -0,0 +1,5 @@
+export { DateField } from "./DateField";
+export type { DateFieldProps } from "./DateField";
+export { DateRangeField } from "./DateRangeField";
+export type { DateRangeFieldProps } from "./DateRangeField";
+export * from "./utils";

package/dist/inputs/DateFields/index.js

@@ -0,0 +1,18 @@
+"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 });
+exports.DateRangeField = exports.DateField = void 0;
+var DateField_1 = require("./DateField");
+Object.defineProperty(exports, "DateField", { enumerable: true, get: function () { return DateField_1.DateField; } });
+var DateRangeField_1 = require("./DateRangeField");
+Object.defineProperty(exports, "DateRangeField", { enumerable: true, get: function () { return DateRangeField_1.DateRangeField; } });
+__exportStar(require("./utils"), exports);

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

@@ -0,0 +1,14 @@
+import { DateRange } from "../../types";
+export declare type DateFieldModeTuple = readonly ["range", DateRange] | readonly ["single", Date];
+export declare type DateFieldMode = "single" | "range";
+export declare const dateFormats: {
+    short: string;
+    medium: string;
+    long: string;
+};
+export declare function getDateFormat(format: keyof typeof dateFormats | undefined): string;
+export declare function formatDate(date: Date | undefined, format: string): string;
+export declare function formatDateRange(date: DateRange | undefined, format: string): string | undefined;
+export declare function parseDate(str: string, format: string): Date | undefined;
+export declare function parseDateRange(str: string, format: string): DateRange | undefined;
+export declare function isValidDate(d: Date | undefined): boolean;

package/dist/inputs/DateFields/utils.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidDate = exports.parseDateRange = exports.parseDate = exports.formatDateRange = exports.formatDate = exports.getDateFormat = exports.dateFormats = void 0;
+const date_fns_1 = require("date-fns");
+exports.dateFormats = {
+    short: "MM/dd/yy",
+    medium: "EEE, MMM d",
+    long: "EEEE LLLL d, uuuu",
+};
+function getDateFormat(format) {
+    return format ? exports.dateFormats[format] : exports.dateFormats.short;
+}
+exports.getDateFormat = getDateFormat;
+function formatDate(date, format) {
+    if (!date)
+        return "";
+    return (0, date_fns_1.format)(date, format);
+}
+exports.formatDate = formatDate;
+function formatDateRange(date, format) {
+    if (!date)
+        return "";
+    const { from, to } = date;
+    const fromFormatted = from ? (0, date_fns_1.format)(from, format) : "";
+    const toFormatted = to ? (0, date_fns_1.format)(to, format) : "";
+    // return `undefined` if both dates are improperly formatted
+    return !fromFormatted && !toFormatted ? undefined : `${fromFormatted} - ${toFormatted}`;
+}
+exports.formatDateRange = formatDateRange;
+function parseDate(str, format) {
+    return parseDateString(str, format);
+}
+exports.parseDate = parseDate;
+function parseDateRange(str, format) {
+    const [from = "", to = ""] = str.split("-");
+    const fromDate = parseDateString(from.trim(), format);
+    const toDate = parseDateString(to.trim(), format);
+    // In the event the user mixes up the to/from dates then correct them.
+    if (toDate && fromDate && toDate < fromDate) {
+        return { from: toDate, to: fromDate };
+    }
+    // If both dates are undefined, return undefined rather than { from: undefined; to: undefined }
+    if (toDate === undefined && fromDate === undefined) {
+        return undefined;
+    }
+    return { from: fromDate, to: toDate };
+}
+exports.parseDateRange = parseDateRange;
+function parseDateString(str, format) {
+    // Copy/pasted from react-day-picker so that typing "2/2/2" doesn't turn into "02/02/0002"
+    const split = str.split("/");
+    if (split.length !== 3) {
+        return undefined;
+    }
+    // Wait for the year to be 2 chars
+    if (split[2].length !== 2) {
+        return undefined;
+    }
+    const month = parseInt(split[0], 10) - 1;
+    const day = parseInt(split[1], 10);
+    let year = parseInt(split[2], 10);
+    // This is also ~verbatim copy/pasted from react-day-picker
+    if (isNaN(year) ||
+        String(year).length > 4 ||
+        isNaN(month) ||
+        isNaN(day) ||
+        day <= 0 ||
+        day > 31 ||
+        month < 0 ||
+        month >= 12) {
+        return undefined;
+    }
+    const parsed = (0, date_fns_1.parse)(str, format, new Date());
+    if (!isValidDate(parsed)) {
+        return undefined;
+    }
+    return parsed;
+}
+function isValidDate(d) {
+    return d !== undefined && (0, date_fns_1.isDate)(d) && d.toString() !== "Invalid Date";
+}
+exports.isValidDate = isValidDate;

package/dist/inputs/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChipSelectField";
-export * from "./DateField";
+export * from "./DateFields";
 export * from "./MultiSelectField";
 export * from "./NumberField";
 export type { NumberFieldProps } from "./NumberField";

package/dist/inputs/index.js

@@ -14,7 +14,7 @@ exports.RadioGroupField = void 0;
 __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CheckboxGroup"), exports);
 __exportStar(require("./ChipSelectField"), exports);
-__exportStar(require("./DateField"), exports);
+__exportStar(require("./DateFields"), exports);
 __exportStar(require("./MultiSelectField"), exports);
 __exportStar(require("./NumberField"), exports);
 var RadioGroupField_1 = require("./RadioGroupField");

package/dist/types.d.ts

@@ -1,3 +1,5 @@
+import { DateRange as _DateRange } from "react-day-picker";
+export type { _DateRange as DateRange };
 export declare type HasIdAndName<V = string> = {
     id: V;
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.141.0",
+  "version": "2.142.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -43,7 +43,7 @@
     "framer-motion": "^4.1.11",
     "memoize-one": "^5.2.1",
     "react-aria": "^3.14.1",
-    "react-day-picker": "^8.0.6",
+    "react-day-picker": "^8.0.7",
     "react-popper": "^2.2.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",