@agilant/toga-blox 1.0.61 → 1.0.63

package/dist/components/SearchInput/SearchInput.stories.js

@@ -52,17 +52,21 @@ const Template = (args) => {
     const [selectedDate, setSelectedDate] = useState(args.selectedDate);
     const [selectedStartDate, setSelectedStartDate] = useState(args.selectedStartDate);
     const [selectedEndDate, setSelectedEndDate] = useState(args.selectedEndDate);
-    // NEW: State for searchCriteria and editingHeader
+    // NEW: State for searchCriteria and editingHeader.
+    // Set editingHeader to 0 so that the search input renders.
     const [searchCriteria, setSearchCriteria] = useState([]);
-    const [editingHeader, setEditingHeader] = useState(null);
-    // Handle onChange from the multi-select
+    const [editingHeader, setEditingHeader] = useState(0);
+    // Log current state to verify updates.
+    console.log("Template render: editingHeader =", editingHeader);
+    console.log("Template render: searchCriteria =", searchCriteria);
+    // Handle onChange from the multi-select.
     const handleOnChange = (newSelected) => {
         setSelectedValue(newSelected);
         args.onChange?.(newSelected);
         console.log("Selected items:", newSelected);
     };
     return (_jsx(SearchInput, { ...args, column: mockColumn, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate, setSearchCriteria: setSearchCriteria, setEditingHeader: setEditingHeader, 
-        // Optionally pass in handleFilter, or use the default from args
+        // Optionally pass in handleFilter, or use the default from args.
         handleFilter: args.handleFilter }));
 };
 export const Default = Template.bind({});

package/dist/components/SearchInput/SearchTextInput.js

@@ -14,7 +14,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
-    // On mount, load any persisted search criteria from local storage using the provided key
+    // Focus on mount and load persisted search criteria for this column.
     useEffect(() => {
         inputRef.current?.focus();
         const stored = localStorage.getItem(localStorageKey);
@@ -31,7 +31,6 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
             }
         }
     }, [column.id, localStorageKey]);
-    // Helper to update local storage using the dynamic key
     const updateLocalStorage = (criteria) => {
         localStorage.setItem(localStorageKey, JSON.stringify(criteria));
     };
@@ -39,9 +38,15 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
         setLocalSearchText(event.target.value);
     };
     const handleSearchBadgeClick = (item) => {
-        // Remove criterion
-        const filteredItems = searchItems.filter((ele) => ele !== item);
-        setSearchItems && setSearchItems(filteredItems);
+        // Remove from searchItems.
+        const newSearchItems = searchItems.filter((ele) => ele !== item);
+        setSearchItems && setSearchItems(newSearchItems);
+        // Remove from searchCriteria based on the submittedSearchText.
+        setSearchCriteria((prev) => {
+            const newCriteria = prev.filter((crit) => crit.submittedSearchText !== item);
+            updateLocalStorage(newCriteria);
+            return newCriteria;
+        });
     };
     const handleKeyDown = (e) => {
         if (e.key === "Enter" && localSearchText.length > 0) {
@@ -54,42 +59,26 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
     const handleSubmit = () => {
         const trimmed = localSearchText.trim();
         if (!trimmed) {
+            // If input is empty, remove all criteria for this column.
             setSearchCriteria((prev) => {
-                const updated = prev.filter((c) => c.searchColumn.id !== column.id);
-                updateLocalStorage(updated);
-                return updated;
+                const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                updateLocalStorage(newCriteria);
+                return newCriteria;
             });
         }
         else {
+            // Always append a new criterion, even if one already exists.
             setSearchCriteria((prev) => {
-                const existingIndex = prev.findIndex((c) => c.searchColumn.id === column.id);
-                let updated;
-                if (existingIndex >= 0) {
-                    updated = [...prev];
-                    updated[existingIndex] = {
-                        searchColumn: column,
-                        submittedSearchText: trimmed,
-                    };
-                }
-                else {
-                    updated = [
-                        ...prev,
-                        {
-                            searchColumn: column,
-                            submittedSearchText: trimmed,
-                        },
-                    ];
-                }
-                updateLocalStorage(updated);
-                return updated;
+                const newCriteria = [
+                    ...prev,
+                    { searchColumn: column, submittedSearchText: trimmed },
+                ];
+                updateLocalStorage(newCriteria);
+                return newCriteria;
             });
         }
         setEditingHeader(null);
     };
-    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: "min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => {
-                                                    setLocalSearchText("");
-                                                }, "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => {
-                                setLocalSearchText("");
-                            } })] }), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 rounded-md", children: searchItems.map((item, index) => (_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: "font-serif", size: "text-sm", tag: "span", text: item }), 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] }) }));
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: "min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => setLocalSearchText(""), "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => setLocalSearchText("") })] }), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 rounded-md", children: searchItems.map((item, index) => (_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: "font-serif", size: "text-sm", tag: "span", text: item }), 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] }) }));
 };
 export default SearchTextInput;

package/package.json

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