@agilant/toga-blox 1.0.75 → 1.0.76

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import MultiSelectInput from "../MultiSelect/MultiSelect";
+import updateLocalStorage from "../../utils/updateLocalStorage";
 const DEFAULT_STORAGE_KEY = "searchCriteria";
 const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select", disabled = false, hasSelectAll = true, bgColor = "bg-sky-500", textHighlight = "text-sky-700", handleFilter, searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, ...rest }) => {
     // Are we able to store filters for this column?
     const canStore = !!column?.id && !!setSearchCriteria;
-    /** Helper: write the entire searchCriteria array to localStorage */
-    const updateLocalStorage = (criteria) => {
-        localStorage.setItem(localStorageKey, JSON.stringify(criteria));
-    };
     useEffect(() => {
         if (!canStore)
             return;
@@ -52,7 +49,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
         if (isEmpty) {
             setSearchCriteria?.((prev) => {
                 const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
-                updateLocalStorage(newCriteria);
+                updateLocalStorage(newCriteria, localStorageKey);
                 return newCriteria;
             });
         }
@@ -66,7 +63,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
                         submittedSearchText: selectedLabels,
                     },
                 ];
-                updateLocalStorage(newCriteria);
+                updateLocalStorage(newCriteria, localStorageKey);
                 return newCriteria;
             });
         }
@@ -78,7 +75,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
         if (canStore) {
             setSearchCriteria?.((prev) => {
                 const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
-                updateLocalStorage(newCriteria);
+                updateLocalStorage(newCriteria, localStorageKey);
                 return newCriteria;
             });
             setSearchItems?.([]);

package/dist/components/SearchInput/SearchInput.js

@@ -19,7 +19,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
                 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 }));
                 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 }));
+                    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 }));
                 case "multiSelect":
                     return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight, handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria }));
                 case "date":

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -8,6 +8,7 @@ import BaseButton from "../BaseButton";
 import Badge from "../Badge/Badge";
 import Text from "../Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import updateLocalStorage from "../../utils/updateLocalStorage";
 /**
  * A helper to convert a Date object to 'YYYY-MM-DD'
  * so we don't get slashes in the final string.
@@ -71,9 +72,6 @@ searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEd
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const updateLocalStorage = (criteria) => {
-        localStorage.setItem(localStorageKey, JSON.stringify(criteria));
-    };
     /**
      * Build a string in 'YYYY-MM-DD' (or range) format,
      * so it won't break in your URL as "mm%2Fdd%2Fyyyy"
@@ -111,7 +109,7 @@ searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEd
             if (canStore) {
                 setSearchCriteria?.((prev) => {
                     const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
-                    updateLocalStorage(newCriteria);
+                    updateLocalStorage(newCriteria, localStorageKey);
                     return newCriteria;
                 });
             }
@@ -130,7 +128,7 @@ searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEd
                             submittedSearchText: dateString,
                         },
                     ];
-                    updateLocalStorage(newCriteria);
+                    updateLocalStorage(newCriteria, localStorageKey);
                     return newCriteria;
                 });
             }
@@ -188,7 +186,7 @@ searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEd
                             setSearchCriteria?.((prev) => {
                                 const filtered = prev.filter((crit) => crit.submittedSearchText !==
                                     item);
-                                updateLocalStorage(filtered);
+                                updateLocalStorage(filtered, localStorageKey);
                                 return filtered;
                             });
                         }

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

@@ -1,5 +1,7 @@
 import React from "react";
+import { ColumnInstance } from "react-table";
 import { searchDropdownIconProps } from "./SearchInput.types";
+/** The parent can pass these props to replicate local-storage filter usage. */
 type SearchNumberInputProps<T extends object> = {
     pillColor?: string;
     textHighlight?: string;
@@ -13,7 +15,28 @@ type SearchNumberInputProps<T extends object> = {
     setMinValue?: React.Dispatch<React.SetStateAction<string>>;
     maxValue?: string;
     setMaxValue?: React.Dispatch<React.SetStateAction<string>>;
+    /** Called after we store or remove the filter in localStorage. */
     handleFilter?: () => void;
+    /** The array of “badges” (previously added filters) for this column. */
+    searchItems?: string[];
+    setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
+    /** The full array of all filters for the table. */
+    setSearchCriteria?: React.Dispatch<React.SetStateAction<any[]>>;
+    /** The column object must have an .id so we know which filter is ours. */
+    column?: ColumnInstance<any> | {
+        id: string;
+        [key: string]: any;
+    };
+    /** If you want to close the popover or overlay once we filter/clear */
+    setEditingHeader?: React.Dispatch<React.SetStateAction<any>>;
+    /** localStorage key to store all the table’s filters (default "searchCriteria"). */
+    localStorageKey?: string;
 };
-declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A numeric filter component that:
+ * 1. Uses toggleStatus to switch single vs. range
+ * 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, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -5,37 +5,142 @@ import Dropdown from "../Dropdown/Dropdown";
 import ToggleButton from "../ToggleButton/ToggleButton";
 import BaseButton from "../BaseButton";
 import Text from "../Text";
+import updateLocalStorage from "../../utils/updateLocalStorage";
+const DEFAULT_STORAGE_KEY = "searchCriteria";
+/**
+ * A numeric filter component that:
+ * 1. Uses toggleStatus to switch single vs. range
+ * 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
+ */
 const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp = {
-    iconClasses: textHighlight,
+    iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, toggleStatus = false, setToggleStatus, minValue = "", setMinValue, maxValue = "", setMaxValue, handleFilter, 
+// local-storage
+searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    // Focus the input when editing starts (if needed)
+    const canStore = !!column?.id && !!setSearchCriteria;
+    useEffect(() => {
+        if (!canStore)
+            return;
+        const stored = localStorage.getItem(localStorageKey);
+        if (!stored)
+            return;
+        try {
+            const parsed = JSON.parse(stored);
+            const existing = parsed.find((c) => c.searchColumn?.id === column.id);
+            if (existing) {
+                const savedString = existing.submittedSearchText;
+                if (savedString && typeof savedString === "string") {
+                    if (savedString.includes(" - ")) {
+                        setToggleStatus?.(true);
+                        const [minPart, maxPart] = savedString.split(" - ");
+                        setMinValue?.(minPart.trim());
+                        setMaxValue?.(maxPart.trim());
+                    }
+                    else {
+                        setToggleStatus?.(false);
+                        const segments = savedString.split(" ");
+                        if (segments.length > 1 &&
+                            dropdownOptions.includes(segments[0])) {
+                            onDropdownOptionSelect?.(segments[0]);
+                            setMinValue?.(segments[1]);
+                        }
+                        else {
+                            // no special prefix => assume it's just the number
+                            setMinValue?.(savedString);
+                        }
+                    }
+                    // Also set searchItems so the "badge" might show
+                    setSearchItems?.([savedString]);
+                }
+            }
+        }
+        catch (err) {
+            console.error("Error reading stored number filter:", err);
+        }
+    }, []);
+    // Focus on mount if needed
     useEffect(() => {
         inputRef.current?.focus();
     }, []);
-    const handleInputChange = (event) => {
-        setMinValue(event.target.value);
+    /** Build the final string to store. Feel free to tweak logic here. */
+    const buildNumberString = () => {
+        if (toggleStatus) {
+            // Range mode => "min - max"
+            if (minValue && maxValue) {
+                return `${minValue} - ${maxValue}`;
+            }
+            else if (minValue) {
+                return `${minValue} - `;
+            }
+            else if (maxValue) {
+                return ` - ${maxValue}`;
+            }
+            else {
+                return ""; // no input => empty
+            }
+        }
+        else {
+            // Single value mode => e.g. "Exactly 123" or just "123"
+            // If you want "Less Than 123", you might do:
+            if (selectedDropdownOption && minValue) {
+                return `${selectedDropdownOption} ${minValue}`;
+            }
+            else if (minValue) {
+                return minValue; // fallback
+            }
+            else {
+                return "";
+            }
+        }
     };
-    const handleMaximumInputChange = (event) => {
-        setMaxValue(event.target.value);
+    /** Called when user clicks "Filter" button at the bottom. */
+    const handleFilterClick = () => {
+        const finalString = buildNumberString().trim();
+        if (!finalString) {
+            // If it's empty => remove existing filter for this column
+            if (canStore) {
+                setSearchCriteria?.((prev) => {
+                    const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                    updateLocalStorage(newCriteria, localStorageKey);
+                    return newCriteria;
+                });
+            }
+        }
+        else {
+            // store it
+            if (!searchItems.includes(finalString)) {
+                setSearchItems?.([...searchItems, finalString]);
+            }
+            if (canStore) {
+                setSearchCriteria?.((prev) => {
+                    // remove old for this column if you want to keep it unique
+                    const filtered = prev.filter((c) => c.searchColumn.id !== column.id);
+                    const newCriteria = [
+                        ...filtered,
+                        {
+                            searchColumn: column,
+                            submittedSearchText: finalString,
+                        },
+                    ];
+                    updateLocalStorage(newCriteria, localStorageKey);
+                    return newCriteria;
+                });
+            }
+        }
+        // Optionally close the popover
+        setEditingHeader?.(null);
+        // Let the parent know a filter was applied
+        handleFilter?.();
     };
-    // const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    // 	console.log("Key Pressed:", e.key);
-    // 	if (e.key === "Enter") {
-    // 		e.preventDefault();
-    // 	}
-    // };
-    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: `flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md`, children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", 
-                                // onKeyDown={handleKeyDown}
-                                required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", 
-                                // onKeyDown={handleKeyDown}
-                                required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 focus:border- ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", 
-                                // onKeyDown={handleKeyDown}
-                                required: false, id: "", name: "", type: "number", onChange: handleInputChange, 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 bg-white px-2  ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
-                                setToggleStatus(!toggleStatus);
-                            }, activeColorBackground: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", 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: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilter, shape: "rounded-full" })] })] }) }));
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (
+                    // Range mode
+                    _jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max" })] })) : (
+                    // Single value mode
+                    _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _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 bg-white px-2", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", 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: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }) }));
 };
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchTextInput.js

@@ -6,6 +6,7 @@ import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import Dropdown from "../Dropdown/Dropdown";
 import Badge from "../Badge/Badge";
 import Text from "../Text";
+import updateLocalStorage from "../../utils/updateLocalStorage";
 const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-500", dropdownIconProp = {
     iconClasses: textHighlight,
     name: "chevronDown",
@@ -31,10 +32,6 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
             }
         }
     }, [column.id, localStorageKey]);
-    // Helper to update local storage.
-    const updateLocalStorage = (criteria) => {
-        localStorage.setItem(localStorageKey, JSON.stringify(criteria));
-    };
     const handleInputChange = (event) => {
         setLocalSearchText(event.target.value);
     };
@@ -46,7 +43,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
         // Remove corresponding criterion from searchCriteria.
         setSearchCriteria((prev) => {
             const newCriteria = prev.filter((crit) => crit.submittedSearchText !== item);
-            updateLocalStorage(newCriteria);
+            updateLocalStorage(newCriteria, localStorageKey);
             console.log("Removed badge criterion, newCriteria:", newCriteria);
             return newCriteria;
         });
@@ -70,7 +67,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
             // Remove any criteria for this column.
             setSearchCriteria((prev) => {
                 const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
-                updateLocalStorage(newCriteria);
+                updateLocalStorage(newCriteria, localStorageKey);
                 console.log("Removed criterion, newCriteria:", newCriteria);
                 return newCriteria;
             });
@@ -82,7 +79,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
                     ...prev,
                     { searchColumn: column, submittedSearchText: trimmed },
                 ];
-                updateLocalStorage(newCriteria);
+                updateLocalStorage(newCriteria, localStorageKey);
                 console.log("Appended criterion, newCriteria:", newCriteria);
                 return newCriteria;
             });

package/dist/utils/updateLocalStorage.d.ts

@@ -0,0 +1,2 @@
+declare const updateLocalStorage: (criteria: any[], localStorageKey: string) => void;
+export default updateLocalStorage;

package/dist/utils/updateLocalStorage.js

@@ -0,0 +1,4 @@
+const updateLocalStorage = (criteria, localStorageKey) => {
+    localStorage.setItem(localStorageKey, JSON.stringify(criteria));
+};
+export default updateLocalStorage;

package/package.json

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