@agilant/toga-blox 1.0.50 → 1.0.52

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { OptionType } from "../MultiSelect/MultiSelect.types";
-import "./SearchDrowpdown.scss";
+import "./SearchDropdown.scss";
 interface SearchDropdownInputProps {
     options?: OptionType[];
     selectedValue?: OptionType[];

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MultiSelectInput from "../MultiSelect/MultiSelect";
-import "./SearchDrowpdown.scss";
+import "./SearchDropdown.scss";
 /**
  * A wrapper around MultiSelectInput that appends a special "__footer__" option
  * and uses a custom item renderer to display "Clear" and "Filter" buttons.

package/dist/components/SearchInput/SearchInput.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// SearchInput.tsx
 import { useEffect, useRef } from "react";
 import SearchTextInput from "./SearchTextInput";
 import SearchNumberInput from "./SearchNumberInput";
@@ -17,7 +18,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
     return (_jsx("div", { ref: containerRef, className: "", children: (() => {
             switch (inputType) {
                 case "text":
-                    return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter }));
+                    return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, column: undefined }));
                 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 }));
                 case "multiSelect":

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

@@ -1,5 +1,10 @@
 import React from "react";
+import { ColumnInstance } from "react-table";
 import { searchDropdownIconProps } from "./SearchInput.types";
+export type SearchCriterion<T extends object> = {
+    searchColumn: ColumnInstance<T>;
+    submittedSearchText: string;
+};
 type SearchTextInputProps<T extends object> = {
     pillColor?: string;
     textHighlight?: string;
@@ -9,7 +14,11 @@ type SearchTextInputProps<T extends object> = {
     dropdownOptions?: string[];
     searchItems?: string[];
     setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
+    searchCriteria?: SearchCriterion<T>[];
+    setSearchCriteria?: React.Dispatch<React.SetStateAction<SearchCriterion<T>[]>>;
+    column: ColumnInstance<T>;
     handleFilter?: () => void;
+    localStorageKey?: string;
 };
-declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, handleFilter, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+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;
 export default SearchTextInput;

package/dist/components/SearchInput/SearchTextInput.js

@@ -2,45 +2,89 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Input } from "../Input";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import Dropdown from "../Dropdown/Dropdown";
 import Badge from "../Badge/Badge";
 import Text from "../Text";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-500", dropdownIconProp = {
     iconClasses: textHighlight,
     name: "chevronDown",
     weight: "solid",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchCriteria = [], setSearchCriteria, column, handleFilter, localStorageKey = "zu-table-store", }) => {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
-    // Focus the input when editing starts (if needed)
+    // On mount, focus input and optionally load criteria from local storage.
     useEffect(() => {
         inputRef.current?.focus();
-    }, []);
+        const stored = localStorage.getItem(localStorageKey);
+        if (stored && setSearchCriteria) {
+            try {
+                const parsed = JSON.parse(stored);
+                if (parsed?.state?.searchCriteria) {
+                    setSearchCriteria(parsed.state.searchCriteria);
+                }
+            }
+            catch (e) {
+                console.error("Error parsing local storage data:", e);
+            }
+        }
+    }, [localStorageKey, setSearchCriteria]);
     const handleInputChange = (event) => {
         setLocalSearchText(event.target.value);
     };
-    const handleIconClick = (item) => {
-        // Remove criterion
-        const filteredItems = searchItems.filter((ele) => ele !== item);
-        setSearchItems(filteredItems);
+    // 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 handleSubmit = () => {
+        const trimmed = localSearchText.trim();
+        if (!trimmed)
+            return;
+        let newCriteria;
+        if (searchCriteria.some((c) => c.searchColumn.id === column.id)) {
+            newCriteria = searchCriteria.map((c) => c.searchColumn.id === column.id
+                ? { searchColumn: column, submittedSearchText: trimmed }
+                : c);
+        }
+        else {
+            newCriteria = [
+                ...searchCriteria,
+                { searchColumn: column, submittedSearchText: trimmed },
+            ];
+        }
+        if (setSearchCriteria) {
+            setSearchCriteria(newCriteria);
+        }
+        updateLocalStorage(newCriteria);
+        setLocalSearchText("");
+        if (handleFilter) {
+            handleFilter();
+        }
     };
     const handleKeyDown = (e) => {
-        if (e.key === "Enter" && localSearchText.length > 0) {
+        if (e.key === "Enter") {
             e.preventDefault();
-            setSearchItems([...searchItems, localSearchText]);
-            setLocalSearchText("");
-            handleFilter();
+            handleSubmit();
+        }
+    };
+    // Clear the criterion for this column.
+    const handleClearCriterion = () => {
+        const newCriteria = searchCriteria.filter((c) => c.searchColumn.id !== column.id);
+        if (setSearchCriteria) {
+            setSearchCriteria(newCriteria);
         }
+        updateLocalStorage(newCriteria);
+        setLocalSearchText("");
     };
     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 ${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) => {
-                        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: () => handleIconClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: pillClassnames, type: "span" }));
-                    }) })) : 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 ${searchCriteria.some((c) => c.searchColumn.id === column.id)
+                        ? "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))) }))] }) }));
 };
 export default SearchTextInput;

package/package.json

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