@homebound/beam 2.96.3 → 2.97.0

package/dist/inputs/DateField.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { Modifier } from "react-day-picker";
 import { TextFieldBaseProps } from "./TextFieldBase";
 import "./DateField.css";
 export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
@@ -19,6 +20,11 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
     placeholder?: string;
     format?: keyof typeof dateFormats;
     iconLeft?: boolean;
+    /**
+     * 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;
 }
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const dateFormats: {

package/dist/inputs/DateField.js

@@ -16,7 +16,7 @@ const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 require("./DateField.css");
 function DateField(props) {
-    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, ...others } = props;
+    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, disabledDays, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -123,7 +123,7 @@ function DateField(props) {
                 }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: isDisabled && typeof disabled !== "boolean" ? disabled : undefined }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: { ...overlayProps, ...positionProps }, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ state: state, value: value, positionProps: positionProps, onChange: (d) => {
                         setInputValue(formatDate(d, dateFormat));
                         onChange(d);
-                    } }, tid.datePicker), void 0) }), void 0))] }, void 0));
+                    }, disabledDays: disabledDays }, tid.datePicker), void 0) }), void 0))] }, void 0));
 }
 exports.DateField = DateField;
 function formatDate(date, format) {

package/dist/inputs/internal/DatePickerOverlay.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
+import { Modifier } from "react-day-picker";
 import { OverlayTriggerState } from "react-stately";
 interface DatePickerOverlayProps {
     value: Date | undefined;
     state: OverlayTriggerState;
     positionProps: React.HTMLAttributes<Element>;
     onChange: (value: Date) => void;
+    disabledDays: Modifier;
 }
 export declare function DatePickerOverlay(props: DatePickerOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/DatePickerOverlay.js

@@ -11,7 +11,7 @@ const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 function DatePickerOverlay(props) {
     var _a;
-    const { value, state, positionProps, onChange } = props;
+    const { value, state, positionProps, onChange, disabledDays } = props;
     // We define some spacing between the Calendar overlay and the trigger element, and depending on where the overlay renders (above or below) we need to adjust the spacing.
     // We can determine if the position was flipped based on what style is defined, `top` (for positioned below the trigger), and `bottom` (for above the trigger).
     // The above assumption regarding `top` and `bottom` is true as long as we use `bottom` as our default `OverlayPosition.placement` (set in DateField).
@@ -35,11 +35,17 @@ function DatePickerOverlay(props) {
             "& .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).$,
-        } }, 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) => {
+            // 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.$,
+        } }, 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, and close the picker.
                 onChange(day);
                 state.close();
-            } }, void 0) }), void 0));
+            }, disabledDays: disabledDays }, void 0) }), void 0));
 }
 exports.DatePickerOverlay = DatePickerOverlay;
 /** Customize the prev/next button to be our SVG icons. */

package/package.json

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