@homebound/beam 2.378.1 → 2.379.0

package/dist/inputs/ChipSelectField.js

@@ -1,203 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.persistentItemPrefix = void 0;
-exports.ChipSelectField = ChipSelectField;
-exports.isPersistentItem = isPersistentItem;
-exports.isPersistentKey = isPersistentKey;
-exports.isListBoxSection = isListBoxSection;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const change_case_1 = require("change-case");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const react_stately_1 = require("react-stately");
-const components_1 = require("../components");
-const internal_1 = require("../components/internal");
-const Label_1 = require("../components/Label");
-const PresentationContext_1 = require("../components/PresentationContext");
-const Css_1 = require("../Css");
-const ChipTextField_1 = require("./ChipTextField");
-const ListBox_1 = require("./internal/ListBox");
-const ListBoxChip_1 = require("./internal/ListBoxChip");
-const Value_1 = require("./Value");
-const utils_1 = require("../utils");
-const options_1 = require("../utils/options");
-function ChipSelectField(props) {
-    const firstRender = (0, react_1.useRef)(true);
-    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { label, value, disabled = false, placeholder = "Select an option", options, onSelect, getOptionValue = options_1.defaultOptionValue, // if unset, assume O implements HasId
-    getOptionLabel = options_1.defaultOptionLabel, // if unset, assume O implements HasName
-    onFocus, onBlur, clearable = false, onCreateNew, } = props;
-    const tid = (0, utils_1.useTestIds)(props, "chipSelectField");
-    const typeScale = fieldProps?.typeScale ?? "sm";
-    const isDisabled = !!disabled;
-    const showClearButton = !disabled && clearable && !!value;
-    const chipStyles = (0, react_1.useMemo)(() => Css_1.Css[typeScale].tal.bgGray300.gray900.br16.pxPx(10).pyPx(2).$, [typeScale]);
-    // Controls showing the focus border styles.
-    const [visualFocus, setVisualFocus] = (0, react_1.useState)(false);
-    const [isClearFocused, setIsClearFocused] = (0, react_1.useState)(false);
-    const { focusProps } = (0, react_aria_1.useFocus)({
-        onFocus: (e) => {
-            // Do not call `onFocus` if focus was returned to the trigger element from the Popover
-            if (popoverRef.current && popoverRef.current.contains(e.relatedTarget)) {
-                return;
-            }
-            (0, utils_1.maybeCall)(onFocus);
-        },
-        onBlur: (e) => {
-            // Do not call onBlur if focus moved to within the Popover
-            if ((popoverRef.current && popoverRef.current.contains(e.relatedTarget)) || showInput) {
-                return;
-            }
-            (0, utils_1.maybeCall)(onBlur);
-        },
-        // Do not change visual focus state if select menu is opened
-        onFocusChange: (isFocused) => !state.isOpen && setVisualFocus(isFocused),
-    });
-    const { focusProps: clearFocusProps } = (0, react_aria_1.useFocus)({ onFocusChange: setIsClearFocused });
-    const buttonRef = (0, react_1.useRef)(null);
-    const popoverRef = (0, react_1.useRef)(null);
-    const listBoxRef = (0, react_1.useRef)(null);
-    const wrapperRef = (0, react_1.useRef)(null);
-    // Using `ListData` in order to dynamically update the items
-    const listData = (0, react_stately_1.useListData)({
-        initialItems: !onCreateNew
-            ? options
-            : [
-                { title: "Options", options },
-                { title: "Actions", isPersistent: true, options: [createNewOpt] },
-            ],
-        initialSelectedKeys: [(0, Value_1.valueToKey)(value)],
-        getKey: (item) => (isListBoxSection(item) ? item.title : getOptionValue(item)),
-    });
-    (0, react_1.useEffect)(() => {
-        // Avoid unnecessary update of `options` on first render. We define the initial set of items based on the options in the `useListData` hook.
-        if (!firstRender.current) {
-            if (onCreateNew) {
-                // if we have the options in a section, update that section
-                listData.update("Options", { title: "Options", options });
-            }
-            else {
-                // otherwise, reset the list completely. We could traverse through the list and update/add/remove when needed, though this is simpler for now.
-                listData.remove(...state.collection.getKeys());
-                listData.append(...options);
-            }
-        }
-        firstRender.current = false;
-    }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [options]);
-    const selectChildren = (0, react_1.useMemo)(() => listData.items.map((s) => {
-        if (isListBoxSection(s)) {
-            return ((0, jsx_runtime_1.jsx)(react_stately_1.Section, { title: s.title, items: s.options, children: (item) => {
-                    if (isPersistentItem(item)) {
-                        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: item.name, children: item.name }, item.id));
-                    }
-                    const label = getOptionLabel(item);
-                    return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: label, children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }) }, getOptionValue(item)));
-                } }, (0, change_case_1.camelCase)(s.title)));
-        }
-        const label = getOptionLabel(s);
-        return ((0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: label, children: (0, jsx_runtime_1.jsx)(ListBoxChip_1.ListBoxChip, { label: label }) }, getOptionValue(s)));
-    }), [listData.items, getOptionLabel, getOptionValue]);
-    const selectHookProps = {
-        label,
-        isDisabled,
-        items: listData.items,
-        children: selectChildren,
-        autoFocus: true,
-        disallowEmptySelection: false,
-    };
-    const state = (0, react_stately_1.useSelectState)({
-        ...selectHookProps,
-        selectedKey: (0, Value_1.valueToKey)(value),
-        onSelectionChange: (key) => {
-            if (key === createNewOpt.id) {
-                setShowInput(true);
-                return;
-            }
-            const selectedItem = options.find((o) => getOptionValue(o) === key);
-            if (selectedItem) {
-                onSelect(key, selectedItem);
-            }
-            // Per UX, we do not want to show visual focus upon selection change.
-            setVisualFocus(false);
-        },
-        onOpenChange: (isOpen) => {
-            if (!isOpen) {
-                // When closing, reset the focus to the button element. This is to retain "tab position" in the document, allowing hte user to hit "Tab" and move to the next tabbable element.
-                // If the menu closed due to a user selecting an option, then the field will not visually appear focused.
-                buttonRef.current?.focus();
-            }
-            else {
-                // If opened, set visual focus to true. It is possible to be in a state where the browser focus is on this element, but we are not "visually" focused (see `onSelectionChange`). If the user opens the menu again, we should trigger the visual focus.
-                setVisualFocus(true);
-            }
-        },
-    });
-    const { labelProps, triggerProps, valueProps, menuProps } = (0, react_aria_1.useSelect)(selectHookProps, state, buttonRef);
-    const { buttonProps } = (0, react_aria_1.useButton)({ ...triggerProps, isDisabled }, buttonRef);
-    const { overlayProps } = (0, react_aria_1.useOverlayPosition)({
-        targetRef: buttonRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        shouldFlip: true,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        placement: "bottom left",
-        offset: 8,
-    });
-    overlayProps.style = {
-        ...overlayProps.style,
-        width: wrapperRef?.current?.clientWidth,
-        // Ensures the menu never gets too small.
-        minWidth: 200,
-    };
-    // State management for the "Create new" flow with ChipTextField.
-    const [showInput, setShowInput] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(CreateNewField, { onBlur: () => setShowInput(false), onEnter: async (value) => {
-                    await onCreateNew(value);
-                    setShowInput(false);
-                }, ...tid.createNewField })), (0, components_1.maybeTooltip)({
-                title: (0, components_1.resolveTooltip)(disabled),
-                placement: "top",
-                children: ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, css: {
-                        ...chipStyles,
-                        ...Css_1.Css.dif.relative.p0.mwPx(32).if(!value).bgGray200.$,
-                        ...(visualFocus ? Css_1.Css.bshFocus.$ : {}),
-                        ...(showInput ? Css_1.Css.dn.$ : {}),
-                    }, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, labelProps: labelProps, hidden: true, ...tid.label }), (0, jsx_runtime_1.jsx)("button", { ...(0, react_aria_1.mergeProps)(focusProps, buttonProps), ref: buttonRef, css: {
-                                ...Css_1.Css.tal.br16.pxPx(10).pyPx(2).outline0.if(showClearButton).prPx(4).borderRadius("16px 0 0 16px").$,
-                                ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray700.$ : {}),
-                                "&:hover:not(:disabled)": Css_1.Css.bgGray400.if(!value).bgGray300.$,
-                            }, title: state.selectedItem ? state.selectedItem.textValue : placeholder, ...tid, children: (0, jsx_runtime_1.jsx)("span", { ...valueProps, css: Css_1.Css.lineClamp1.wbba.$, children: state.selectedItem ? state.selectedItem.textValue : placeholder }) }), showClearButton && ((0, jsx_runtime_1.jsx)("button", { ...clearFocusProps, css: {
-                                ...Css_1.Css.prPx(4).borderRadius("0 16px 16px 0").outline0.$,
-                                "&:hover": Css_1.Css.bgGray400.$,
-                                ...(isClearFocused ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(3,105,161,1)`).$ : {}),
-                            }, onClick: () => {
-                                onSelect(undefined, undefined);
-                                setIsClearFocused(false);
-                            }, "aria-label": "Remove", ...tid.clearButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }) }))] })),
-            }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...menuProps, listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps }) }))] }));
-}
-exports.persistentItemPrefix = "persistentItem:";
-const createNewOpt = {
-    id: `${exports.persistentItemPrefix}createNew`,
-    name: "Create new",
-};
-function isPersistentItem(opt) {
-    return typeof opt === "object" && "id" in opt && isPersistentKey(opt.id);
-}
-function isPersistentKey(key) {
-    return typeof key === "string" && key.startsWith(exports.persistentItemPrefix);
-}
-function isListBoxSection(obj) {
-    return obj && typeof obj === "object" && "options" in obj;
-}
-// Wrapper for the ChipTextField used in the "Create New" flow on ChipSelectField
-function CreateNewField(props) {
-    const { onBlur, onEnter } = props;
-    const [value, setValue] = (0, react_1.useState)("Add new");
-    const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsx)(ChipTextField_1.ChipTextField, { autoFocus: true, label: "Add new", value: value, onChange: setValue, onEnter: () => onEnter(value), onBlur: onBlur, ...tid }));
-}

package/dist/inputs/ChipTextField.d.ts

@@ -1,14 +0,0 @@
-interface ChipTextFieldProps {
-    label: string;
-    value?: string;
-    required?: boolean;
-    blurOnEscape?: false;
-    onChange: (value: string) => void;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    onEnter?: () => void;
-    autoFocus?: boolean;
-}
-export declare function ChipTextField(props: ChipTextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ChipTextField.d.ts.map

package/dist/inputs/ChipTextField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChipTextField.d.ts","sourceRoot":"","sources":["../../src/inputs/ChipTextField.tsx"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAE1B,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,YAAY,CAAC,EAAE,KAAK,CAAC;IAErB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,oDAuEtD"}

package/dist/inputs/ChipTextField.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChipTextField = ChipTextField;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const PresentationContext_1 = require("../components/PresentationContext");
-const Css_1 = require("../Css");
-const utils_1 = require("../utils");
-// A TextField styled to look like a Chip
-function ChipTextField(props) {
-    const { autoFocus, onFocus, onBlur, onEnter, onChange, required, label, value, blurOnEscape = true } = props;
-    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    // Use a ref for the value to not cause a re-render when it changes, avoiding cursor position resetting.
-    const valueRef = (0, react_1.useRef)(value);
-    const tid = (0, utils_1.useTestIds)(props, "chipField");
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const { focusProps } = (0, react_aria_1.useFocus)({
-        onFocus: (e) => {
-            if (fieldRef.current) {
-                // The range/selection logic is to select the text within the field on focus
-                const range = document.createRange();
-                range.selectNodeContents(fieldRef.current);
-                const selection = window.getSelection();
-                if (selection) {
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                }
-            }
-            (0, utils_1.maybeCall)(onFocus);
-        },
-        onBlur: () => (0, utils_1.maybeCall)(onBlur),
-        onFocusChange: setIsFocused,
-    });
-    const fieldRef = (0, react_1.useRef)(null);
-    const typeScale = fieldProps?.typeScale ?? "sm";
-    (0, react_1.useEffect)(() => {
-        autoFocus && fieldRef.current?.focus();
-    }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // React doesn't like contentEditable because it takes the children of the node out of React's scope. This is fine in this case as it is just a text value and we are managing it.
-    return ((0, jsx_runtime_1.jsx)("span", { ref: fieldRef, contentEditable: true, suppressContentEditableWarning: true, "aria-required": required, "aria-label": label, onKeyDown: (e) => {
-            if (e.key === "Enter") {
-                e.preventDefault();
-                (0, utils_1.maybeCall)(onEnter);
-            }
-            else if (blurOnEscape && e.key === "Escape") {
-                e.target.blur();
-            }
-        }, onInput: (e) => {
-            const target = e.target;
-            if ("inputType" in e.nativeEvent && e.nativeEvent.inputType === "insertFromPaste") {
-                // Clean up any formatting from pasted text
-                target.innerHTML = target.textContent?.replace(/[A\n\r]/g, " ") ?? "";
-            }
-            onChange(target.textContent ?? "");
-        }, ...focusProps, css: {
-            ...Css_1.Css[typeScale].dib.br16.pl1.pxPx(10).pyPx(2).gray900.bgGray300.outline0.mwPx(32).$,
-            ...(isFocused ? Css_1.Css.bshFocus.$ : {}),
-        }, ...tid, children: valueRef.current }));
-}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../src/inputs/DateFields/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,wBAAwB,EAAE,wBAA4C;AAE9F,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC;CAAG;AAEjF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDAE9C"}

package/dist/inputs/DateFields/DateField.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateField = DateField;
-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, { ...props, mode: "single" });
-}

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

@@ -1,4 +0,0 @@
-import { DateFieldProps } from "..";
-/** Mocks out `DateField` as a text `<input>` field. */
-export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DateField.mock.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DateField.mock.d.ts","sourceRoot":"","sources":["../../../src/inputs/DateFields/DateField.mock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,WAAmB;AAG5C,uDAAuD;AACvD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,oDAqB9C"}

package/dist/inputs/DateFields/DateField.mock.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateField = DateField;
-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");
-/** Mocks out `DateField` as a text `<input>` field. */
-function DateField(props) {
-    const { onChange = () => { }, errorMsg, onBlur, onFocus } = props;
-    const [value, setValue] = (0, react_1.useState)(props.value ? (0, date_fns_1.format)(props.value, "MM/dd/yy") : "");
-    const tid = (0, utils_1.useTestIds)(props, "date");
-    return ((0, jsx_runtime_1.jsx)("input", { ...tid, "data-error": !!errorMsg, value: value, onChange: (e) => {
-            const { value } = e.target;
-            setValue(value);
-            onChange((0, date_fns_1.parse)(value, "MM/dd/yy", new Date()));
-        }, onBlur: () => (0, utils_1.maybeCall)(onBlur), onFocus: () => (0, utils_1.maybeCall)(onFocus), disabled: !!props.disabled, readOnly: !!props.readOnly, "data-disabled-days": JSON.stringify(props.disabledDays) }));
-}

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

@@ -1,50 +0,0 @@
-import { ReactNode } from "react";
-import { Matcher } from "react-day-picker";
-import { Properties } from "../../Css";
-import { DateFieldMode, dateFormats } from "./utils";
-import { TextFieldBaseProps } from "../TextFieldBase";
-import { DateRange } from "../../types";
-export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact" | "fullWidth"> {
-    label: string;
-    /** Called when the component loses focus */
-    onBlur?: () => void;
-    /** Called when the component is in focus. */
-    onFocus?: () => void;
-    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
-    disabled?: boolean | ReactNode;
-    errorMsg?: string;
-    required?: boolean;
-    /** Whether the field is readOnly. If a ReactNode, it's treated as a "readOnly reason" that's shown in a tooltip. */
-    readOnly?: boolean | ReactNode;
-    helperText?: string | ReactNode;
-    placeholder?: string;
-    format?: keyof typeof dateFormats;
-    iconLeft?: boolean;
-    hideCalendarIcon?: 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?: Matcher | Matcher[];
-    onEnter?: VoidFunction;
-    /** for storybook */
-    defaultOpen?: boolean;
-    onChange: ((value: Date | undefined) => void) | ((value: DateRange | undefined) => void);
-    mode: DateFieldMode;
-    /** Range filters should only allow a full DateRange or nothing */
-    isRangeFilterField?: boolean;
-    /** Render header that skips years in addition to months */
-    useYearPicker?: boolean;
-}
-export interface DateSingleFieldBaseProps extends DateFieldBaseProps {
-    mode: "single";
-    value: Date | undefined;
-    onChange: (value: Date | undefined) => void;
-}
-export interface DateRangeFieldBaseProps extends DateFieldBaseProps {
-    mode: "range";
-    value: DateRange | undefined;
-    onChange: (value: DateRange | undefined) => void;
-}
-export declare function DateFieldBase(props: DateRangeFieldBaseProps | DateSingleFieldBaseProps): import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DateFieldBase.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DateFieldBase.d.ts","sourceRoot":"","sources":["../../../src/inputs/DateFields/DateFieldBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAe,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKxD,OAAO,EAAgB,UAAU,EAAE,kBAAgB;AACnD,OAAO,EACL,aAAa,EACb,WAAW,EAOZ,gBAAoC;AACrC,OAAO,EAAiB,kBAAkB,EAAE,yBAAiC;AAC7E,OAAO,EAAE,SAAS,EAAE,oBAAkB;AAItC,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,kBAAkB,CAAC,UAAU,CAAC,EAC9B,YAAY,GAAG,kBAAkB,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,CAC3E;IACD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oHAAoH;IACpH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oHAAoH;IACpH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oBAAoB;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC;IACzF,IAAI,EAAE,aAAa,CAAC;IACpB,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAClE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,uBAAuB,GAAG,wBAAwB,oDA6RtF"}

package/dist/inputs/DateFields/DateFieldBase.js

@@ -1,175 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateFieldBase = DateFieldBase;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-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 utils_1 = require("./utils");
-const TextFieldBase_1 = require("../TextFieldBase");
-const utils_2 = require("../../utils");
-const defaultTestId_1 = require("../../utils/defaultTestId");
-function DateFieldBase(props) {
-    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, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, isRangeFilterField = false, useYearPicker = 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);
-    const overlayRef = (0, react_1.useRef)(null);
-    // Local focus ref used to avoid updating WIP values
-    const isFocused = (0, react_1.useRef)(false);
-    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)((isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat)) ?? "");
-    const tid = (0, utils_2.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    const isDisabled = !!disabled;
-    const isReadOnly = !!readOnly;
-    const textFieldProps = {
-        ...others,
-        label,
-        isDisabled,
-        isReadOnly,
-        "aria-haspopup": "dialog",
-        value: inputValue,
-    };
-    const state = (0, react_stately_1.useOverlayTriggerState)({ isOpen: defaultOpen });
-    const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
-        ...textFieldProps,
-        // Setting `inputMode` to none. This disables the virtual keyboard from being triggered on touch devices
-        inputMode: "none",
-        onFocus: () => {
-            isFocused.current = true;
-            (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((isRangeMode
-                    ? (0, utils_1.formatDateRange)(props.value, utils_1.dateFormats.short)
-                    : (0, utils_1.formatDate)(props.value, utils_1.dateFormats.short)) ?? "");
-            }
-        },
-        onBlur: (e) => {
-            // Resets the ref variables when the input loses focus.
-            isFocused.current = false;
-            // If interacting with the overlay or the input, then assume the user is still working within the DatePicker and return early to not trigger onBlur functionality.
-            if ((inputWrapRef.current && inputWrapRef.current.contains(e.relatedTarget)) ||
-                (overlayRef.current && overlayRef.current.contains(e.relatedTarget))) {
-                return;
-            }
-            // Otherwise, if we are actually leaving the DatePicker component, then
-            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((isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat)) ?? "");
-            }
-            else if (dateFormat !== utils_1.dateFormats.short) {
-                // Or if we need to reset the dateFormat back from `short` to whatever the user specified
-                setInputValue((isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat)) ?? "");
-            }
-            // Only call `onBlur` if the DatePicker is closed, meaning the user has actually left the DateField component.
-            if (!state.isOpen) {
-                (0, utils_2.maybeCall)(onBlur);
-            }
-        },
-        onKeyDown: (e) => {
-            if (e.key === "Enter") {
-                (0, utils_2.maybeCall)(onEnter);
-                inputRef.current?.blur();
-            }
-        },
-    }, inputRef);
-    const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: "dialog" }, state, buttonRef);
-    const { buttonProps } = (0, react_aria_1.useButton)({ ...triggerProps, isDisabled: isDisabled || isReadOnly, onPress: state.open }, buttonRef);
-    const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
-        targetRef: inputWrapRef,
-        overlayRef,
-        shouldFlip: true,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        placement: "bottom left",
-        shouldUpdatePosition: true,
-        offset: 4,
-    });
-    // Handle case where the input value is updated from outside the component.
-    (0, react_1.useEffect)(() => {
-        // Avoid updating any WIP values.
-        if (!isFocused.current && !state.isOpen) {
-            setWipValue(value);
-            setInputValue((isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat)) ?? "");
-        }
-        // We don't want to update the internal `wipValue` or `inputValue` back to `value` just because focus state changes or the overlay opens
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [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 (isRangeMode && (0, react_day_picker_1.isDateRange)(d)) {
-                props.onChange(d);
-                return;
-            }
-            if (!isRangeMode && !(0, react_day_picker_1.isDateRange)(d)) {
-                props.onChange(d);
-                return;
-            }
-        }
-        else {
-            props.onChange(undefined);
-            return;
-        }
-    }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [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 = !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);
-            } })) }));
-    const calendarButton = ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, ...tid.calendarButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }) }));
-    const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, internalProps: { forceFocus: state.isOpen }, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize, onClick: state.open }, inputRef: inputRef, inputWrapRef: inputWrapRef, 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 = isRangeMode ? (0, utils_1.parseDateRange)(v, utils_1.dateFormats.short) : (0, utils_1.parseDate)(v, utils_1.dateFormats.short);
-                        onChange(parsed);
-                    }
-                    // 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 }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen, children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, { autoFocus: true, contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: overlayProps, children: isRangeMode ? ((0, jsx_runtime_1.jsx)(internal_1.DateRangePicker, { range: wipValue, disabledDays: disabledDays, onSelect: (dr) => {
-                                // Note: Do not close date range picker on select to allow the user to select multiple dates at a time
-                                setInputValue((0, utils_1.formatDateRange)(dr, utils_1.dateFormats.short) ?? "");
-                                onChange(dr);
-                            }, useYearPicker: isRangeFilterField || useYearPicker, ...tid.datePicker })) : ((0, jsx_runtime_1.jsx)(internal_1.DatePicker, { value: wipValue, disabledDays: disabledDays, onSelect: (d) => {
-                                state.close();
-                                setInputValue((0, utils_1.formatDate)(d, utils_1.dateFormats.short) ?? "");
-                                onChange(d);
-                            }, useYearPicker: useYearPicker, ...tid.datePicker })) }) }) }))] }));
-}
-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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"DateRangeField.d.ts","sourceRoot":"","sources":["../../../src/inputs/DateFields/DateRangeField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,uBAAuB,EAAE,wBAA4C;AAE7F,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAC;CAAG;AAErF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,oDAExD"}

package/dist/inputs/DateFields/DateRangeField.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateRangeField = DateRangeField;
-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, { ...props, mode: "range" });
-}

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

@@ -1,6 +0,0 @@
-export { DateField } from "./DateField";
-export type { DateFieldProps } from "./DateField";
-export { DateRangeField } from "./DateRangeField";
-export type { DateRangeFieldProps } from "./DateRangeField";
-export * from "./utils";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/inputs/DateFields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,cAAc,SAAS,CAAC"}

package/dist/inputs/DateFields/index.js

@@ -1,22 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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);