@agilant/toga-blox 1.0.119 → 1.0.120

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -1,34 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// ===================== SearchDropdownInput.tsx =====================
 import { useEffect, useState } 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, clearText = "Clear", clearTextColor = "text-sky-500", buttonText = "Filter", buttonColor = "bg-sky-500", localStorageKey = DEFAULT_STORAGE_KEY, isBoolean = false, isSearchable, fontFamily, pillColor, ...rest }) => {
     const canStore = !!column?.id && !!setSearchCriteria;
-    // We'll track how many items are visible in the child, for the "Filter" footer
     const [filteredCount, setFilteredCount] = useState(0);
     // --------------------------------------------------------------------
-    // [NEW FIX] On mount, read from localStorage, parse the selected values
+    // On mount, read from localStorage to see previously selected items
     // --------------------------------------------------------------------
     useEffect(() => {
         if (!canStore)
-            return; // we need column.id + setSearchCriteria
+            return;
         const stored = localStorage.getItem(localStorageKey);
         if (!stored)
             return;
         try {
             const parsed = JSON.parse(stored);
+            // see if there's a criterion for this specific column ID
             const existing = parsed.find((c) => c.searchColumn?.id === column?.id);
             if (existing && setSearchItems) {
+                // e.g. "fulfilled,pendingApproval"
                 const raw = existing.submittedSearchText;
-                setSearchItems([raw]); // e.g. "fulfilled,canceled"
-                // We assume it's stored with commas
-                // If you might have colons, handle that too:
+                setSearchItems([raw]);
+                // Split by comma. If you sometimes store colons, handle that:
                 const delimiter = raw.includes(":") ? ":" : ",";
                 const storedValues = raw.split(delimiter).map((s) => s.trim());
-                // Now find matching options
+                // Match them to your full list of options
                 const matched = options.filter((o) => storedValues.includes(o.value));
+                // Re-check these items
                 onChange(matched);
             }
         }
@@ -39,15 +39,15 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
         canStore,
         column?.id,
         localStorageKey,
-        setSearchItems,
-        onChange,
         options,
+        onChange,
+        setSearchItems,
     ]);
-    // Called when user clicks the "Filter" button in the footer
+    // Called when user clicks the Filter button in the multiSelect footer
     const handleFooterFilter = () => {
-        // remove any special "footer" options
+        // We skip any special "footer" or "Select All" item
         const actualSelections = selectedValue.filter((opt) => opt.value !== "__footer__" && opt.label !== "Select All");
-        // store them as comma-joined
+        // Store them in localStorage as a comma-joined string
         const selectedLabels = actualSelections
             .map((opt) => opt.value)
             .join(",");
@@ -57,7 +57,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             return;
         }
         if (isEmpty) {
-            // Remove from local storage
+            // user cleared everything, remove from localStorage
             setSearchCriteria?.((prev) => {
                 const newCriteria = prev.filter((c) => c.searchColumn.id !== column?.id);
                 updateLocalStorage(newCriteria, localStorageKey);
@@ -65,16 +65,14 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             });
         }
         else {
-            // Store to local storage
+            // store new criterion
             setSearchCriteria?.((prev) => {
                 const filtered = prev.filter((c) => c.searchColumn.id !== column?.id);
-                const newCriteria = [
-                    ...filtered,
-                    {
-                        searchColumn: column,
-                        submittedSearchText: selectedLabels, // e.g. "fulfilled,canceled"
-                    },
-                ];
+                const newCriterion = {
+                    searchColumn: column,
+                    submittedSearchText: selectedLabels, // e.g. "fulfilled,pendingApproval"
+                };
+                const newCriteria = [...filtered, newCriterion];
                 updateLocalStorage(newCriteria, localStorageKey);
                 return newCriteria;
             });
@@ -82,7 +80,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
         setEditingHeader?.(null);
         handleFilter?.();
     };
-    // Called when user clicks Clear
+    // Called when user clicks "Clear"
     const handleClear = () => {
         onChange([]);
         if (canStore) {
@@ -95,18 +93,18 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             setEditingHeader?.(null);
         }
     };
-    // Insert a “footer” pseudo-option
+    // We add a "footer" pseudo-option so we can place a Filter button, etc. at the bottom
     const footerOption = [{ name: "", value: "__footer__" }];
     const extendedOptions = [...options, ...footerOption];
-    // Custom item renderer for multiSelect
+    // Provide a custom item renderer so we can handle the "Footer" row
     const itemRenderer = ({ option, checked, disabled, onClick }) => {
         if (option.value === "__footer__") {
-            return (_jsxs("div", { className: "footer px-4 py-2 flex justify-between items-center text-gray-300 border-t border-gray-300", children: [filteredCount === 0 ? (_jsx("div", { onClick: handleClear, className: `${textHighlight} cursor-pointer`, children: clearText })) : (_jsxs("div", { children: [filteredCount, " Results"] })), _jsx("button", { type: "button", className: `${bgColor} ${fontFamily} text-white px-3 py-1 rounded-full`, onClick: (e) => {
+            return (_jsxs("div", { className: "\n            footer\n            px-4 py-2\n            flex justify-between items-center\n            text-gray-300\n            border-t border-gray-300\n          ", children: [filteredCount === 0 ? (_jsx("div", { onClick: handleClear, className: `${textHighlight} cursor-pointer`, children: clearText })) : (_jsxs("div", { children: [filteredCount, " Results"] })), _jsx("button", { type: "button", className: `${bgColor} ${fontFamily} text-white px-3 py-1 rounded-full`, onClick: (e) => {
                             e.stopPropagation();
                             handleFooterFilter();
                         }, children: buttonText })] }));
         }
-        // Another example: "Select All" row
+        // "Select All" if you want to implement that
         if (option.label === "Select All") {
             // ...
         }

package/package.json

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