@agilant/toga-blox 1.0.73 → 1.0.74

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

@@ -1,21 +1,33 @@
 import React from "react";
-import { OptionType } from "../MultiSelect/MultiSelect.types";
-import "./SearchDropdown.scss";
+import { MultiSelectInputProps, OptionType } from "../MultiSelect/MultiSelect.types";
 interface SearchDropdownInputProps {
     options?: OptionType[];
+    /** The currently‐selected items (each has { name, value } ) **/
     selectedValue?: OptionType[];
+    /** Called whenever the selectedValue changes **/
     onChange: (selected: OptionType[]) => void;
     placeholder?: string;
     disabled?: boolean;
     hasSelectAll?: boolean;
     bgColor?: string;
     textHighlight?: string;
-    [key: string]: any;
     handleFilter?: () => void;
+    /** The array of “badges” or stored strings for this particular column’s filter(s) **/
+    searchItems?: string[];
+    setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
+    /** The full array of all column filters for your table **/
+    setSearchCriteria?: React.Dispatch<React.SetStateAction<any[]>>;
+    /** The column object must have an .id property */
+    column?: {
+        id: string;
+        [key: string]: any;
+    };
+    /** Tells the parent to close the UI, etc. */
+    setEditingHeader?: React.Dispatch<React.SetStateAction<any>>;
+    /** localStorage key used to store the entire “searchCriteria” array */
+    localStorageKey?: string;
+    otherProps?: MultiSelectInputProps["otherProps"];
+    additionalClasses?: string;
 }
-/**
- * A wrapper around MultiSelectInput that appends a special "__footer__" option
- * and uses a custom item renderer to display "Clear" and "Filter" buttons.
- */
 declare const SearchDropdownInput: React.FC<SearchDropdownInputProps>;
 export default SearchDropdownInput;

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -1,25 +1,104 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import MultiSelectInput from "../MultiSelect/MultiSelect";
-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.
- */
-const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select", disabled = false, hasSelectAll = true, bgColor, textHighlight, handleFilter, ...rest }) => {
+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;
+        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 && setSearchItems) {
+                const raw = existing.submittedSearchText;
+                setSearchItems([raw]);
+                const storedValues = raw
+                    .split(",")
+                    .map((s) => s.trim());
+                const matched = options.filter((o) => storedValues.includes(o.value));
+                onChange(matched);
+            }
+        }
+        catch (err) {
+            console.error("Error reading stored dropdown filter:", err);
+        }
+    }, [
+        canStore,
+        column?.id,
+        localStorageKey,
+        setSearchItems,
+        onChange,
+        options,
+    ]);
+    const handleFooterFilter = () => {
+        const actualSelections = selectedValue.filter((opt) => opt.value !== "__footer__" && opt.label !== "Select All");
+        const selectedLabels = actualSelections
+            .map((opt) => opt.value)
+            .join(",");
+        const isEmpty = !selectedLabels.trim();
+        if (!canStore) {
+            // If we have no place to store it, just do handleFilter
+            handleFilter?.();
+            return;
+        }
+        if (isEmpty) {
+            setSearchCriteria?.((prev) => {
+                const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                updateLocalStorage(newCriteria);
+                return newCriteria;
+            });
+        }
+        else {
+            if (!searchItems.includes(selectedLabels)) {
+                setSearchItems?.([...searchItems, selectedLabels]);
+            }
+            setSearchCriteria?.((prev) => {
+                const newCriteria = [
+                    ...prev,
+                    {
+                        searchColumn: column,
+                        submittedSearchText: selectedLabels,
+                    },
+                ];
+                updateLocalStorage(newCriteria);
+                return newCriteria;
+            });
+        }
+        setEditingHeader?.(null);
+        handleFilter?.();
+    };
+    const handleClear = () => {
+        onChange([]);
+        if (canStore) {
+            setSearchCriteria?.((prev) => {
+                const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                updateLocalStorage(newCriteria);
+                return newCriteria;
+            });
+            setSearchItems?.([]);
+            setEditingHeader?.(null);
+        }
+    };
     const footerOption = [{ name: "", value: "__footer__" }];
     const extendedOptions = [...options, ...footerOption];
     const itemRenderer = ({ option, checked, disabled, onClick }) => {
-        // If it's our footer option, display the custom footer row
         if (option.value === "__footer__") {
-            return (_jsxs("div", { className: "footer px-4 py-2 flex justify-between", children: [_jsx("button", { type: "button", className: `${textHighlight}`, onClick: (e) => {
+            return (_jsxs("div", { className: "footer px-4 py-2 flex justify-between", children: [_jsx("div", { role: "button", className: `${textHighlight}`, onClick: handleClear, children: "Clear" }), _jsx("button", { type: "button", className: `${bgColor} text-white px-3 py-1 rounded`, onClick: (e) => {
                             e.stopPropagation();
-                            onChange([]); // Clear all selections
-                        }, children: "Clear" }), _jsx("button", { type: "button", className: `${bgColor} text-white px-3 py-1 rounded`, onClick: (e) => {
-                            e.stopPropagation();
-                            handleFilter();
+                            handleFooterFilter();
                         }, children: "Filter" })] }));
         }
-        else if (option.label === "Select All") {
+        // If it's the "Select All" item
+        if (option.label === "Select All") {
             return (_jsxs("label", { className: "select-all-item", style: {
                     display: "flex",
                     alignItems: "center",
@@ -30,20 +109,16 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
                     zIndex: 10,
                 }, onClick: (e) => {
                     e.stopPropagation();
-                    onClick(e); // Let the library handle toggling
+                    onClick(e);
                 }, children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }));
         }
-        else {
-            return (_jsxs("div", { className: "item px-4 py-1 cursor-pointer flex items-center", onClick: (e) => onClick(option, e), children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { className: "ml-2", children: option.label })] }));
-        }
+        return (_jsxs("div", { className: "item px-4 py-1 cursor-pointer flex items-center", onClick: (e) => onClick(option, e), children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { className: "ml-2", children: option.label })] }));
     };
     return (_jsx(MultiSelectInput, { options: extendedOptions, selectedValue: selectedValue, onChange: onChange, placeholder: {
             text: placeholder,
             icon: "magnifyingGlass",
             iconStyle: "regular",
-        }, disabled: disabled, hasSelectAll: hasSelectAll, 
-        /** Provide the custom item renderer and any additional props via otherProps */
-        otherProps: {
+        }, disabled: disabled, hasSelectAll: hasSelectAll, otherProps: {
             ItemRenderer: itemRenderer,
             ...rest.otherProps,
         }, ...rest }));

package/dist/components/SearchInput/SearchInput.js

@@ -21,7 +21,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
                 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":
-                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, isSearchable: true, placeholder: "Search", isMulti: true, hideSelectedOptions: true, closeMenuOnSelect: false, inputWidth: "w-full", inputTextSize: "text-sm", additionalClasses: "", customClassNames: {}, onChange: onChange, value: [], selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight, handleFilter: handleFilter }));
+                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight, handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria }));
                 case "date":
                     return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, 
                         // pass the same local-storage props:

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

@@ -135,6 +135,8 @@ DropdownInput.args = {
     disabled: false,
     isLoading: false,
     type: "multiSelect",
+    column: { id: "multiSelectColumn" },
+    localStorageKey: "searchCriteria",
 };
 export const BooleanInput = Template.bind({});
 BooleanInput.args = {

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -74,18 +74,6 @@ searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEd
     const updateLocalStorage = (criteria) => {
         localStorage.setItem(localStorageKey, JSON.stringify(criteria));
     };
-    // removing a date "badge"
-    const handleSearchBadgeClick = (item) => {
-        const newSearchItems = searchItems.filter((x) => x !== item);
-        setSearchItems?.(newSearchItems);
-        if (canStore) {
-            setSearchCriteria?.((prev) => {
-                const newCriteria = prev.filter((crit) => crit.submittedSearchText !== item);
-                updateLocalStorage(newCriteria);
-                return newCriteria;
-            });
-        }
-    };
     /**
      * Build a string in 'YYYY-MM-DD' (or range) format,
      * so it won't break in your URL as "mm%2Fdd%2Fyyyy"
@@ -192,6 +180,7 @@ searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEd
                         }, modifiersClassNames: modifiersClassNames })) }))
                 : isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: (day) => {
                             onDateSelect?.(day || undefined);
+                            setIsDatePickerOpen(false);
                         }, modifiersClassNames: modifiersClassNames }) })), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-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", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => {
                         const newSearchItems = searchItems.filter((x) => x !== item);
                         setSearchItems?.(newSearchItems);

package/package.json

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