@agilant/toga-blox 1.0.52 → 1.0.54

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

@@ -16,9 +16,9 @@ type SearchTextInputProps<T extends object> = {
     setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
     searchCriteria?: SearchCriterion<T>[];
     setSearchCriteria?: React.Dispatch<React.SetStateAction<SearchCriterion<T>[]>>;
-    column: ColumnInstance<T>;
+    column?: ColumnInstance<T>;
     handleFilter?: () => void;
     localStorageKey?: string;
 };
-declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchCriteria, setSearchCriteria, column, handleFilter, localStorageKey, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, searchCriteria, setSearchCriteria, column, handleFilter, localStorageKey, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchTextInput;

package/dist/components/SearchInput/SearchTextInput.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SearchTextInput.tsx
 import { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Input } from "../Input";
@@ -10,42 +11,49 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
     iconClasses: textHighlight,
     name: "chevronDown",
     weight: "solid",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchCriteria = [], setSearchCriteria, column, handleFilter, localStorageKey = "zu-table-store", }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems, setSearchItems, searchCriteria, setSearchCriteria, column, handleFilter, 
+// Use a default key for simple mode if no column is provided.
+localStorageKey = column ? "zu-table-store" : "searchItems", }) => {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
-    // On mount, focus input and optionally load criteria from local storage.
+    // On mount, focus input and load from local storage
     useEffect(() => {
         inputRef.current?.focus();
         const stored = localStorage.getItem(localStorageKey);
-        if (stored && setSearchCriteria) {
+        if (stored) {
             try {
                 const parsed = JSON.parse(stored);
-                if (parsed?.state?.searchCriteria) {
+                // For advanced mode, expect an object with state.searchCriteria
+                if (column &&
+                    parsed?.state?.searchCriteria &&
+                    setSearchCriteria) {
                     setSearchCriteria(parsed.state.searchCriteria);
                 }
+                // Otherwise, for simple mode, expect a plain array
+                else if (!column && setSearchItems) {
+                    setSearchItems(parsed);
+                }
             }
             catch (e) {
-                console.error("Error parsing local storage data:", e);
+                console.error("Error parsing local storage:", e);
             }
         }
-    }, [localStorageKey, setSearchCriteria]);
+    }, [localStorageKey, column, setSearchCriteria, setSearchItems]);
     const handleInputChange = (event) => {
         setLocalSearchText(event.target.value);
     };
-    // Update local storage in the format used in your working app.
-    const updateLocalStorage = (criteria) => {
-        localStorage.setItem(localStorageKey, JSON.stringify({
-            state: { searchCriteria: criteria },
-            version: 0,
-        }));
+    const updateLocalStorage = (data) => {
+        localStorage.setItem(localStorageKey, JSON.stringify(data));
     };
-    const handleSubmit = () => {
+    // Advanced mode: use searchCriteria with column info
+    const handleSubmitAdvanced = () => {
         const trimmed = localSearchText.trim();
-        if (!trimmed)
+        if (!trimmed || !column || !setSearchCriteria || !searchCriteria)
             return;
         let newCriteria;
-        if (searchCriteria.some((c) => c.searchColumn.id === column.id)) {
+        const exists = searchCriteria.some((c) => c.searchColumn.id === column.id);
+        if (exists) {
             newCriteria = searchCriteria.map((c) => c.searchColumn.id === column.id
                 ? { searchColumn: column, submittedSearchText: trimmed }
                 : c);
@@ -56,13 +64,33 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
                 { searchColumn: column, submittedSearchText: trimmed },
             ];
         }
-        if (setSearchCriteria) {
-            setSearchCriteria(newCriteria);
-        }
-        updateLocalStorage(newCriteria);
+        setSearchCriteria(newCriteria);
+        updateLocalStorage({
+            state: { searchCriteria: newCriteria },
+            version: 0,
+        });
+        setLocalSearchText("");
+        if (handleFilter)
+            handleFilter();
+    };
+    // Simple mode: use searchItems as plain string array
+    const handleSubmitSimple = () => {
+        const trimmed = localSearchText.trim();
+        if (!trimmed || !setSearchItems || !searchItems)
+            return;
+        const newItems = [...searchItems, trimmed];
+        setSearchItems(newItems);
+        updateLocalStorage(newItems);
         setLocalSearchText("");
-        if (handleFilter) {
+        if (handleFilter)
             handleFilter();
+    };
+    const handleSubmit = () => {
+        if (column) {
+            handleSubmitAdvanced();
+        }
+        else {
+            handleSubmitSimple();
         }
     };
     const handleKeyDown = (e) => {
@@ -71,20 +99,41 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
             handleSubmit();
         }
     };
-    // Clear the criterion for this column.
-    const handleClearCriterion = () => {
+    // Clear functions for each mode
+    const handleClearAdvanced = () => {
+        if (!column || !setSearchCriteria || !searchCriteria)
+            return;
         const newCriteria = searchCriteria.filter((c) => c.searchColumn.id !== column.id);
-        if (setSearchCriteria) {
-            setSearchCriteria(newCriteria);
-        }
-        updateLocalStorage(newCriteria);
+        setSearchCriteria(newCriteria);
+        updateLocalStorage({
+            state: { searchCriteria: newCriteria },
+            version: 0,
+        });
+        setLocalSearchText("");
+    };
+    const handleClearSimple = () => {
+        if (!setSearchItems || !searchItems)
+            return;
+        const newItems = searchItems.filter((item) => item !== localSearchText);
+        setSearchItems(newItems);
+        updateLocalStorage(newItems);
         setLocalSearchText("");
     };
+    const handleClear = () => {
+        if (column) {
+            handleClearAdvanced();
+        }
+        else {
+            handleClearSimple();
+        }
+    };
     const pillClassnames = `${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`;
-    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 ${searchCriteria.some((c) => c.searchColumn.id === column.id)
+    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 ${(column ? searchCriteria?.length : 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, { ref: inputRef, 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", onClick: handleSubmit, children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: handleClearCriterion, "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: handleClearCriterion })] }), searchCriteria.some((c) => c.searchColumn.id === column.id) && (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 rounded-md", children: searchCriteria
-                        .filter((c) => c.searchColumn.id === column.id)
-                        .map((criterion, 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: criterion.submittedSearchText, onClick: handleClearCriterion, text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: criterion.submittedSearchText }), badgeContainerClasses: pillClassnames, type: "span" }, index))) }))] }) }));
+                        : ""} 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, { ref: inputRef, 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", onClick: handleSubmit, children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: handleClear, "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: handleClear })] }), (column ? searchCriteria?.length : searchItems?.length) ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 rounded-md", children: column
+                        ? searchCriteria
+                            ?.filter((c) => c.searchColumn.id === column.id)
+                            .map((criterion, 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: criterion.submittedSearchText, onClick: handleClear, text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: criterion.submittedSearchText }), badgeContainerClasses: pillClassnames, type: "span" }, index)))
+                        : 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: handleClear, text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: pillClassnames, type: "span" }, index))) })) : null] }) }));
 };
 export default SearchTextInput;

package/package.json

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