@agilant/toga-blox 1.0.131 → 1.0.133

package/dist/components/Input/Input.d.ts

@@ -29,6 +29,7 @@ interface InputFieldProps {
     register?: UseFormRegister<any>;
     focusRingColor?: string;
     firstIconClasses?: string;
+    firstIconTop?: string;
 }
 /**
  * A properly formed forwardRef component: exactly two parameters:

package/dist/components/Input/Input.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  * A properly formed forwardRef component: exactly two parameters:
  * (props, ref). We pass `ref` to the <input ref={ref} ...>.
  */
-const InputField = forwardRef(function InputField({ label, placeholder, required, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, }, ref) {
+const InputField = forwardRef(function InputField({ label, placeholder, required, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, firstIconTop = "top-[8px]", }, ref) {
     const [isFocused, setIsFocused] = useState(false);
     const hasValue = value != null && !!value.toString().trim();
     const isNumberInput = type === "number";
@@ -27,7 +27,7 @@ const InputField = forwardRef(function InputField({ label, placeholder, required
     const renderFirstIcon = () => {
         if (!firstIcon)
             return null;
-        return (_jsx("span", { onClick: onIconClick, className: `input-icon input-icon--first-icon absolute top-[8px] left-4 ${firstIconClasses} ${disabled
+        return (_jsx("span", { onClick: onIconClick, className: `input-icon input-icon--first-icon absolute  left-4 ${firstIconTop} ${firstIconClasses} ${disabled
                 ? "text-gray-500"
                 : isValid
                     ? `text-${iconColor}`
@@ -77,7 +77,7 @@ const InputField = forwardRef(function InputField({ label, placeholder, required
               ${isValid ? "" : "border-redText focus:ring-red-500"}
               ${firstIcon ? "pl-10" : ""}
               ${secondIcon ? "pr-10" : ""}
-              ${isFocused ? "hover:border-transparent" : ""}
+              ${isFocused ? "" : ""}
               ${additionalClasses}
             `, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, checked: type === "checkbox" ? checked : undefined, onChange: onChange, onKeyDown: onKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue })] })] }));
 });

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -8,7 +8,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -20,7 +20,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
                 case "text":
                     return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily, removePattern: removePattern, textHighlight: textHighlight, hasOperator: hasOperator, tooltipText: tooltipText }));
                 case "number":
-                    return (_jsx(SearchNumberInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText }));
+                    return (_jsx(SearchNumberInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText, numberTypeIcon: numberTypeIcon, firstIconTop: firstIconTop }));
                 case "multiSelect":
                     return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean, isSearchable: isSearchable, setSearchItems: setSearchItems, fontFamily: fontFamily, pillColor: pillColor, hoverBgColor: hoverBgColor, clearTextHoverColor: clearTextHoverColor }));
                 case "date":

package/dist/components/SearchInput/SearchInput.types.d.ts

@@ -52,6 +52,11 @@ export type SearchInputProps<T extends object> = {
     tooltipText?: string;
     hoverBgColor?: string;
     clearTextHoverColor?: string;
+    numberTypeIcon?: {
+        icon: string;
+        weight: string;
+    };
+    firstIconTop?: string;
 };
 export interface OptionType {
     uuid: string;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -10,38 +10,62 @@ import Text from "../Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import updateLocalStorage from "../../utils/updateLocalStorage";
 import { getCleanedText } from "../../utils/getCleanedText";
-// A tiny helper to parse e.g. "lt:2025-03-28" into operator="lt:" + dateStr="2025-03-28"
+import { Input } from "../Input";
+// Helper to parse strings like "lt:2025-03-28"
 function parseOperatorAndDate(text) {
     const colonIndex = text.indexOf(":");
     if (colonIndex > -1) {
         return {
-            operator: text.slice(0, colonIndex + 1), // "lt:"
-            dateStr: text.slice(colonIndex + 1), // "2025-03-28"
+            operator: text.slice(0, colonIndex + 1),
+            dateStr: text.slice(colonIndex + 1),
         };
     }
-    // If there's no colon, just return operator="", dateStr=the entire thing
     return { operator: "", dateStr: text };
 }
-/** Formats a JS Date as YYYY-MM-DD */
+/** Formats a JS Date as YYYY-MM-DD in local time */
 function formatAsYMD(date) {
     if (!date)
         return "";
-    return date.toISOString().slice(0, 10);
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date.getDate().toString().padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+/** Attempts to parse a date string input by the user as a local date */
+function parseUserDateInput(input) {
+    if (!input)
+        return undefined;
+    // Check for YYYY-MM-DD explicitly.
+    const ymdRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
+    const match = input.match(ymdRegex);
+    if (match) {
+        const year = parseInt(match[1], 10);
+        const month = parseInt(match[2], 10);
+        const day = parseInt(match[3], 10);
+        return new Date(year, month - 1, day);
+    }
+    // Fallback to standard Date parsing.
+    const date = new Date(input);
+    if (!isNaN(date.getTime()))
+        return date;
+    // Try MM/DD/YYYY or MM-DD-YYYY.
+    const mdyRegex = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/;
+    const mdyMatch = input.match(mdyRegex);
+    if (mdyMatch) {
+        const month = parseInt(mdyMatch[1], 10);
+        const day = parseInt(mdyMatch[2], 10);
+        const year = parseInt(mdyMatch[3], 10);
+        return new Date(year, month - 1, day);
+    }
+    return undefined;
 }
 function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], dropdownIconProp = {
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, 
-// Single-date external states
-selectedDate, onDateSelect, 
-// Range external states
-selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, 
-// Operator from the parent
-selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, }) {
+}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, }) {
     const containerRef = useRef(null);
-    // Track local operator so the user sees the dropdown selection
-    // If no selectedDropdownOption from parent, fallback to first or blank
+    // Local operator state.
     const [localOperator, setLocalOperator] = useState(() => {
         if (selectedDropdownOption?.value)
             return selectedDropdownOption;
@@ -49,14 +73,18 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
             return dropdownOptions[0];
         return { label: "", value: "" };
     });
-    // Local single-date
+    // Local single-date and its input value.
     const [localDate, setLocalDate] = useState(selectedDate);
-    // Local start/end if range is toggled
+    const [dateInputValue, setDateInputValue] = useState(selectedDate ? formatAsYMD(selectedDate) : "");
+    // Local start/end for range mode and their input values.
     const [localStartDate, setLocalStartDate] = useState(selectedStartDate);
+    const [startDateInputValue, setStartDateInputValue] = useState(selectedStartDate ? formatAsYMD(selectedStartDate) : "");
     const [localEndDate, setLocalEndDate] = useState(selectedEndDate);
+    const [endDateInputValue, setEndDateInputValue] = useState(selectedEndDate ? formatAsYMD(selectedEndDate) : "");
     const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+    // activeInput can be "start", "end", "single" or null (when not editing)
     const [activeInput, setActiveInput] = useState(null);
-    // Load from localStorage if there's an existing criterion for this column
+    // Load from localStorage if there's an existing criterion for this column.
     useEffect(() => {
         if (!column?.id)
             return;
@@ -66,23 +94,34 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
                 const parsed = JSON.parse(stored);
                 const existing = parsed.find((crit) => crit.searchColumn?.id === column.id);
                 if (existing?.submittedSearchText) {
-                    // e.g. "lt:2025-03-28" or "2025-03-28"
                     const { operator, dateStr } = parseOperatorAndDate(existing.submittedSearchText);
-                    // If there's an operator, find it in the dropdown
                     if (operator && dropdownOptions.length) {
                         const foundOp = dropdownOptions.find((opt) => opt.value === operator);
                         if (foundOp)
                             setLocalOperator(foundOp);
                     }
-                    // If single date mode
                     if (!toggleStatus && dateStr) {
                         const d = new Date(dateStr.trim());
                         if (!isNaN(d.getTime())) {
                             setLocalDate(d);
+                            setDateInputValue(formatAsYMD(d));
+                        }
+                    }
+                    else if (toggleStatus && dateStr) {
+                        const parts = dateStr.split(" - ");
+                        if (parts.length === 2) {
+                            const startDate = new Date(parts[0].trim());
+                            const endDate = new Date(parts[1].trim());
+                            if (!isNaN(startDate.getTime())) {
+                                setLocalStartDate(startDate);
+                                setStartDateInputValue(formatAsYMD(startDate));
+                            }
+                            if (!isNaN(endDate.getTime())) {
+                                setLocalEndDate(endDate);
+                                setEndDateInputValue(formatAsYMD(endDate));
+                            }
                         }
                     }
-                    // If range mode, you'd parse "2025-03-10 - 2025-03-15" etc.
-                    // but let's keep it simple for now.
                 }
             }
             catch (err) {
@@ -90,27 +129,59 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
             }
         }
     }, [column?.id, localStorageKey, dropdownOptions, toggleStatus]);
-    // If the parent changes selectedDate, sync it to local state
+    // Sync props with local state—but only update if the user isn’t actively editing.
     useEffect(() => {
-        setLocalDate(selectedDate);
-    }, [selectedDate]);
-    // If the parent changes selectedOperator, sync that too
+        if (selectedDate && activeInput !== "single") {
+            setLocalDate(selectedDate);
+            setDateInputValue(formatAsYMD(selectedDate));
+        }
+    }, [selectedDate, activeInput]);
+    useEffect(() => {
+        if (selectedStartDate && activeInput !== "start") {
+            setLocalStartDate(selectedStartDate);
+            setStartDateInputValue(formatAsYMD(selectedStartDate));
+        }
+    }, [selectedStartDate, activeInput]);
+    useEffect(() => {
+        if (selectedEndDate && activeInput !== "end") {
+            setLocalEndDate(selectedEndDate);
+            setEndDateInputValue(formatAsYMD(selectedEndDate));
+        }
+    }, [selectedEndDate, activeInput]);
     useEffect(() => {
         if (selectedDropdownOption && selectedDropdownOption.value) {
             setLocalOperator(selectedDropdownOption);
         }
     }, [selectedDropdownOption]);
-    // Handler for the operator dropdown
+    // When toggling between single and range, close any open picker.
+    useEffect(() => {
+        setIsDatePickerOpen(false);
+        setActiveInput(null);
+    }, [toggleStatus]);
+    // Handler for the operator dropdown.
     const handleOperatorSelect = (option) => {
         setLocalOperator(option);
         onDropdownOptionSelect?.(option);
     };
-    // Single date pick
+    // Single-date handlers.
     const openSinglePicker = () => {
-        setActiveInput(null);
+        setActiveInput("single");
         setIsDatePickerOpen(!isDatePickerOpen);
     };
-    // Range pick
+    const handleSingleDateInputChange = (e) => {
+        const value = e.target.value;
+        setDateInputValue(value);
+        const parsedDate = parseUserDateInput(value);
+        if (parsedDate) {
+            setLocalDate(parsedDate);
+            onDateSelect?.(parsedDate);
+        }
+        else {
+            setLocalDate(undefined);
+            onDateSelect?.(undefined);
+        }
+    };
+    // Range-date handlers.
     const openStartPicker = () => {
         setActiveInput("start");
         setIsDatePickerOpen(true);
@@ -119,16 +190,41 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
         setActiveInput("end");
         setIsDatePickerOpen(true);
     };
-    /** Called when user clicks "Filter" */
+    const handleStartDateInputChange = (e) => {
+        const value = e.target.value;
+        setStartDateInputValue(value);
+        const parsedDate = parseUserDateInput(value);
+        if (parsedDate) {
+            setLocalStartDate(parsedDate);
+            onStartDateSelect?.(parsedDate);
+        }
+        else {
+            setLocalStartDate(undefined);
+            onStartDateSelect?.(undefined);
+        }
+    };
+    const handleEndDateInputChange = (e) => {
+        const value = e.target.value;
+        setEndDateInputValue(value);
+        const parsedDate = parseUserDateInput(value);
+        if (parsedDate) {
+            setLocalEndDate(parsedDate);
+            onEndDateSelect?.(parsedDate);
+        }
+        else {
+            setLocalEndDate(undefined);
+            onEndDateSelect?.(undefined);
+        }
+    };
+    // When the user clicks "Filter", build the final text and store criteria.
     const handleFilterClick = () => {
         let finalText = "";
         if (!toggleStatus) {
-            // Single date: operator + date
             const dateStr = localDate ? formatAsYMD(localDate) : "";
             finalText = localOperator.value + dateStr;
+            onDateSelect?.(localDate);
         }
         else {
-            // Range date
             const startStr = localStartDate ? formatAsYMD(localStartDate) : "";
             const endStr = localEndDate ? formatAsYMD(localEndDate) : "";
             if (startStr && endStr) {
@@ -140,10 +236,11 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
             else if (endStr) {
                 finalText = endStr;
             }
+            onStartDateSelect?.(localStartDate);
+            onEndDateSelect?.(localEndDate);
         }
         const trimmed = finalText.trim();
         if (!trimmed) {
-            // remove existing criterion for this column
             setSearchCriteria?.((prev) => {
                 const newCriteria = prev.filter((c) => c.searchColumn?.id !== column?.id);
                 updateLocalStorage(newCriteria, localStorageKey);
@@ -151,7 +248,6 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
             });
         }
         else {
-            // store new or updated criterion
             setSearchCriteria?.((prev) => {
                 const filtered = prev.filter((c) => c.searchColumn?.id !== column?.id);
                 const newCriterion = {
@@ -167,41 +263,79 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
         setEditingHeader?.(null);
         setIsDatePickerOpen(false);
         setActiveInput(null);
-        if (!toggleStatus && onDateSelect) {
-            onDateSelect(localDate);
-        }
     };
-    // The daypicker for single or range
+    // Close the picker when clicking outside.
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target) &&
+                isDatePickerOpen) {
+                setIsDatePickerOpen(false);
+                setActiveInput(null);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isDatePickerOpen]);
+    // Render the DayPicker – for both single and range modes.
     const dayPicker = !toggleStatus
-        ? // Single date
-            isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: localDate, onSelect: (day) => {
-                        if (day) {
-                            setLocalDate(day);
-                        }
-                        setIsDatePickerOpen(false);
-                    } }) }))
-        : activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: localStartDate, onSelect: (day) => {
-                    if (day)
+        ? isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: parseUserDateInput(dateInputValue) || localDate, onSelect: (day) => {
+                    if (day) {
+                        setLocalDate(day);
+                        setDateInputValue(formatAsYMD(day));
+                        onDateSelect?.(day);
+                    }
+                    setIsDatePickerOpen(false);
+                    setActiveInput(null);
+                } }) }))
+        : isDatePickerOpen &&
+            activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: parseUserDateInput(startDateInputValue) ||
+                    localStartDate, onSelect: (day) => {
+                    if (day) {
                         setLocalStartDate(day);
+                        setStartDateInputValue(formatAsYMD(day));
+                        onStartDateSelect?.(day);
+                    }
                     setIsDatePickerOpen(false);
                     setActiveInput(null);
-                } })) : (_jsx(DayPicker, { mode: "single", selected: localEndDate, onSelect: (day) => {
-                    if (day)
+                } })) : (_jsx(DayPicker, { mode: "single", selected: parseUserDateInput(endDateInputValue) ||
+                    localEndDate, onSelect: (day) => {
+                    if (day) {
                         setLocalEndDate(day);
+                        setEndDateInputValue(formatAsYMD(day));
+                        onEndDateSelect?.(day);
+                    }
                     setIsDatePickerOpen(false);
                     setActiveInput(null);
                 } })) }));
-    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: localStartDate
-                                ? formatAsYMD(localStartDate)
-                                : "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: localEndDate
-                                ? formatAsYMD(localEndDate)
-                                : "End Date" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: localDate ? formatAsYMD(localDate) : "Select Date" })] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
+    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [activeInput === "start" ? (_jsx(Input, { type: "text", value: startDateInputValue, onChange: handleStartDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    setIsDatePickerOpen(false);
+                                    setActiveInput(null);
+                                }
+                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localStartDate
+                                    ? formatAsYMD(localStartDate)
+                                    : "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    setIsDatePickerOpen(false);
+                                    setActiveInput(null);
+                                }
+                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44", hasAutoFocus: true })) : (_jsxs("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localEndDate
+                                    ? formatAsYMD(localEndDate)
+                                    : "mm/dd/yyyy"] }))] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), activeInput === "single" ? (_jsx("div", { children: _jsx(Input, { type: "text", value: dateInputValue, onChange: handleSingleDateInputChange, placeholder: "mm/dd/yyy", onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        setIsDatePickerOpen(false);
+                                        setActiveInput(null);
+                                    }
+                                }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", hasAutoFocus: true }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
+                                        ? formatAsYMD(localDate)
+                                        : "mm/dd/yyyy"] }) }))] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
                     const cleanedText = getCleanedText(item, removePattern);
                     return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", onClick: () => {
-                            // remove from searchItems
                             const newSearchItems = searchItems.filter((it) => it !== item);
                             setSearchItems?.(newSearchItems);
-                            // remove from searchCriteria
                             setSearchCriteria?.((prev) => {
                                 const filtered = prev.filter((crit) => crit.submittedSearchText !==
                                     item);
@@ -209,6 +343,6 @@ selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonCol
                                 return filtered;
                             });
                         }, text: _jsx(Text, { color: "text-white", size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4 mb-1`, type: "span" }, index));
-                }) })) : null, _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
+                }) })) : null, _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
 }
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchNumberInput.d.ts

@@ -44,6 +44,11 @@ type SearchNumberInputProps<T extends object> = {
     fontFamily?: string;
     hasOperator?: boolean;
     tooltipText?: string;
+    numberTypeIcon?: {
+        icon: string;
+        weight: string;
+    };
+    firstIconTop?: string;
 };
 /**
  * A numeric filter component that:
@@ -51,5 +56,5 @@ type SearchNumberInputProps<T extends object> = {
  * 2. On Filter => either remove or store a string in localStorage
  * 3. On mount => read any existing filter for this column, parse, and set min/max
  */
-declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, pillColor, fontFamily, removePattern, hasOperator, tooltipText, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon, firstIconTop, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -22,7 +22,7 @@ const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp =
     weight: "solid",
 }, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, toggleStatus = false, setToggleStatus, minValue = "", setMinValue, maxValue = "", setMaxValue, handleFilter, 
 // local-storage
-searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", pillColor, fontFamily, removePattern, hasOperator, tooltipText, }) => {
+searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon = { icon: "x", weight: "regular" }, firstIconTop, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     /** Decide if we can store for this column */
@@ -167,7 +167,7 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
                     _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || {
                                     label: "",
                                     value: "",
-                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "border-t border-gray-300 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 rounded-md", children: searchItems.map((item, index) => {
+                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 flex items-center", placeholder: "Amount", hasIcons: true, iconPosition: "both", firstIcon: _jsx("div", { children: getFontAwesomeIcon(numberTypeIcon.icon, numberTypeIcon.weight) }), firstIconTop: firstIconTop })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "border-t border-gray-300 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 rounded-md", children: searchItems.map((item, index) => {
                             const cleanedText = getCleanedText(item, removePattern);
                             return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", "data-testid": "item-clear-icon", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor}  cursor-pointer p-1  max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4 mb-1`, type: "span" }, index));
                         }) }) })) : null] }) }));

package/dist/components/ToggleButton/ToggleButton.js

@@ -36,6 +36,6 @@ const ToggleButton = ({ initialStatus, onClick, id, textPosition, textSize, acti
     const toggleClasses = getToggleClasses(initialStatus, smallToggle, borderStyle, activeColorBorder, inactiveColorBorder, activeColorBackground, inactiveColorBackground);
     return (_jsx("div", { className: `flex justify-center ${hasDivider && textPosition === "right"
             ? "border-r-1 border-navy-200 pr-2"
-            : ""} mr-2 ${pillHeight}`, children: hasDisabledStatus ? (_jsx("div", { className: `${pillHeight}`, children: _jsx(Text, { fontFamily: fontFamily, size: textSize, color: textColor, text: initialStatus ? activeLabel : inactiveLabel }) })) : (_jsxs("div", { className: `justify-between w-full ${textPositionClasses} ${textSize} ${textColor} ${additionalClasses} `, children: [_jsx("label", { htmlFor: id, "data-testid": "inactive-label", className: `flex justify-center ${smallToggle ? " min-w-10" : "min-w-20"}`, children: initialStatus ? activeLabel : inactiveLabel }), _jsxs("label", { className: "relative inline-flex cursor-pointer items-center", children: [_jsx("input", { id: id, type: "checkbox", className: "peer sr-only", checked: initialStatus, onChange: handleToggle }), _jsx("div", { className: toggleClasses })] })] })) }));
+            : ""} mr-2 ${pillHeight}`, children: hasDisabledStatus ? (_jsx("div", { className: `${pillHeight}`, children: _jsx(Text, { fontFamily: fontFamily, size: textSize, color: textColor, text: initialStatus ? activeLabel : inactiveLabel }) })) : (_jsxs("div", { className: `justify-between w-full ${textPositionClasses} ${textSize} ${textColor} ${additionalClasses} `, children: [_jsx("label", { htmlFor: id, "data-testid": "inactive-label", className: `flex justify-center pl-2 ${smallToggle ? " min-w-10" : "min-w-20"}`, children: initialStatus ? activeLabel : inactiveLabel }), _jsxs("label", { className: "relative inline-flex cursor-pointer items-center", children: [_jsx("input", { id: id, type: "checkbox", className: "peer sr-only", checked: initialStatus, onChange: handleToggle }), _jsx("div", { className: toggleClasses })] })] })) }));
 };
 export default ToggleButton;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.131",
+	"version": "1.0.133",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",