@agilant/toga-blox 1.0.116 → 1.0.118

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -8,10 +8,7 @@ import Text from "../Text";
 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;
-    // IMPORTANT: Start at 0, not options.length.
-    // This is the # of items matched by the child's filter, updated live.
     const [filteredCount, setFilteredCount] = useState(0);
-    // On mount, read localStorage if we have a stored selection for this column
     useEffect(() => {
         if (!canStore)
             return;
@@ -24,8 +21,12 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             if (existing && setSearchItems) {
                 const raw = existing.submittedSearchText;
                 setSearchItems([raw]);
+                let delimiter = ",";
+                if (raw.includes(":")) {
+                    delimiter = ":";
+                }
                 const storedValues = raw
-                    .split(",")
+                    .split(delimiter)
                     .map((s) => s.trim());
                 const matched = options.filter((o) => storedValues.includes(o.value));
                 onChange(matched);
@@ -42,7 +43,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
         onChange,
         options,
     ]);
-    // Called when user clicks the "Filter" button in the footer
     const handleFooterFilter = () => {
         const actualSelections = selectedValue.filter((opt) => opt.value !== "__footer__" && opt.label !== "Select All");
         const selectedLabels = actualSelections
@@ -54,7 +54,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             return;
         }
         if (isEmpty) {
-            // Remove from local storage
             setSearchCriteria?.((prev) => {
                 const newCriteria = prev.filter((c) => c.searchColumn.id !== column?.id);
                 updateLocalStorage(newCriteria, localStorageKey);
@@ -62,7 +61,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             });
         }
         else {
-            // Store to local storage
             setSearchCriteria?.((prev) => {
                 const filtered = prev.filter((c) => c.searchColumn.id !== column?.id);
                 const newCriteria = [
@@ -103,7 +101,6 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
                             handleFooterFilter();
                         }, children: buttonText })] }));
         }
-        // If it's the "Select All" item => do something special here
         if (option.label === "Select All") {
             return (_jsxs("label", { className: "select-all-item flex justify-between items-center px-4 cursor-pointer", style: {
                     display: "flex",
@@ -116,9 +113,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
                 }, onClick: (e) => {
                     e.stopPropagation();
                     onClick(e);
-                }, children: [_jsxs("div", { children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }), selectedValue.length > 0 && (
-                    // Example badge if you want a count
-                    _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", onClick: () => console.log("Select All Badge clicked"), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: `${selectedValue.length} picked` }), badgeContainerClasses: `${pillColor} p-1 max-w-fit rounded-full flex justify-between items-center text-white text-xs px-4 border-none`, type: "span" }, option.value))] }));
+                }, children: [_jsxs("div", { children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }), selectedValue.length > 0 && (_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", onClick: () => console.log("Select All Badge clicked"), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: `${selectedValue.length} picked` }), badgeContainerClasses: `${pillColor} p-1 max-w-fit rounded-full flex justify-between items-center text-white text-xs px-4 border-none`, type: "span" }, option.value))] }));
         }
         // Normal item
         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 })] }));
@@ -127,13 +122,9 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             text: placeholder,
             icon: "magnifyingGlass",
             iconStyle: "regular",
-        }, disabled: disabled, hasSelectAll: isBoolean ? false : hasSelectAll, 
-        // Provide our custom item renderer
-        otherProps: {
+        }, disabled: disabled, hasSelectAll: isBoolean ? false : hasSelectAll, otherProps: {
             ItemRenderer: itemRenderer,
             ...rest.otherProps,
-        }, isBoolean: isBoolean, isSearchable: isSearchable, 
-        // The child calls this to update how many items are matched by the current search
-        setInputSearchValue: setFilteredCount, ...rest }));
+        }, isBoolean: isBoolean, isSearchable: isSearchable, setInputSearchValue: setFilteredCount, ...rest }));
 };
 export default SearchDropdownInput;

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

@@ -2,7 +2,7 @@ import React from "react";
 import "react-day-picker/dist/style.css";
 import { searchDropdownIconProps } from "./SearchInput.types";
 import { DropdownOption } from "./SearchNumberInput";
-type SearchDatePickerInputProps<T extends object> = {
+export interface SearchDatePickerInputProps<T extends object> {
     themeBgColor?: string;
     lightThemeBg?: string;
     pillColor?: string;
@@ -17,6 +17,8 @@ type SearchDatePickerInputProps<T extends object> = {
     onStartDateSelect?: (date: Date | undefined) => void;
     selectedEndDate?: Date;
     onEndDateSelect?: (date: Date | undefined) => void;
+    selectedDropdownOption?: DropdownOption;
+    onDropdownOptionSelect?: (option: DropdownOption) => void;
     buttonText?: string;
     buttonColor?: string;
     searchItems?: string[];
@@ -32,6 +34,6 @@ type SearchDatePickerInputProps<T extends object> = {
     removePattern?: RegExp | string;
     hasOperator?: boolean;
     tooltipText?: string;
-};
-declare const SearchDatePickerInput: <T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, buttonText, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, }: SearchDatePickerInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+}
+declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { DayPicker } from "react-day-picker";
 import "react-day-picker/dist/style.css";
 import Dropdown from "../Dropdown/Dropdown";
@@ -10,137 +10,205 @@ import Text from "../Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import updateLocalStorage from "../../utils/updateLocalStorage";
 import { getCleanedText } from "../../utils/getCleanedText";
+// A tiny helper to parse e.g. "lt:2025-03-28" into operator="lt:" + dateStr="2025-03-28"
+function parseOperatorAndDate(text) {
+    const colonIndex = text.indexOf(":");
+    if (colonIndex > -1) {
+        return {
+            operator: text.slice(0, colonIndex + 1), // "lt:"
+            dateStr: text.slice(colonIndex + 1), // "2025-03-28"
+        };
+    }
+    // If there's no colon, just return operator="", dateStr=the entire thing
+    return { operator: "", dateStr: text };
+}
+/** Formats a JS Date as YYYY-MM-DD */
 function formatAsYMD(date) {
     if (!date)
         return "";
     return date.toISOString().slice(0, 10);
 }
-const SearchDatePickerInput = ({ themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], dropdownIconProp = {
+function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], dropdownIconProp = {
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, buttonText = "Filter", localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, }) => {
+}, toggleStatus = false, setToggleStatus, 
+// Single-date external states
+selectedDate, onDateSelect, 
+// Range external states
+selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, 
+// Operator from the parent
+selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, }) {
     const containerRef = useRef(null);
+    // Track local operator so the user sees the dropdown selection
+    // If no selectedDropdownOption from parent, fallback to first or blank
+    const [localOperator, setLocalOperator] = useState(() => {
+        if (selectedDropdownOption?.value)
+            return selectedDropdownOption;
+        if (dropdownOptions.length)
+            return dropdownOptions[0];
+        return { label: "", value: "" };
+    });
+    // Local single-date
+    const [localDate, setLocalDate] = useState(selectedDate);
+    // Local start/end if range is toggled
+    const [localStartDate, setLocalStartDate] = useState(selectedStartDate);
+    const [localEndDate, setLocalEndDate] = useState(selectedEndDate);
     const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
     const [activeInput, setActiveInput] = useState(null);
-    // --- NEW: Local state for the operator (dropdown selection)
-    const [selectedOperator, setSelectedOperator] = useState(
-    // Initialize with first option if available, otherwise empty
-    (dropdownOptions && dropdownOptions[0]) || {
-        label: "",
-        value: "",
-        uuid: "",
-    });
-    // Build a date string in YYYY-MM-DD (or range) format.
-    const buildDateString = () => {
-        if (toggleStatus) {
-            if (selectedStartDate && selectedEndDate) {
-                return `${formatAsYMD(selectedStartDate)} - ${formatAsYMD(selectedEndDate)}`;
+    // Load from localStorage if there's an existing criterion for this column
+    useEffect(() => {
+        if (!column?.id)
+            return;
+        const stored = localStorage.getItem(localStorageKey);
+        if (stored) {
+            try {
+                const parsed = JSON.parse(stored);
+                const existing = parsed.find((crit) => crit.searchColumn?.id === column.id);
+                if (existing?.submittedSearchText) {
+                    // e.g. "lt:2025-03-28" or "2025-03-28"
+                    const { operator, dateStr } = parseOperatorAndDate(existing.submittedSearchText);
+                    // If there's an operator, find it in the dropdown
+                    if (operator && dropdownOptions.length) {
+                        const foundOp = dropdownOptions.find((opt) => opt.value === operator);
+                        if (foundOp)
+                            setLocalOperator(foundOp);
+                    }
+                    // If single date mode
+                    if (!toggleStatus && dateStr) {
+                        const d = new Date(dateStr.trim());
+                        if (!isNaN(d.getTime())) {
+                            setLocalDate(d);
+                        }
+                    }
+                    // If range mode, you'd parse "2025-03-10 - 2025-03-15" etc.
+                    // but let's keep it simple for now.
+                }
             }
-            else if (selectedStartDate) {
-                return formatAsYMD(selectedStartDate);
+            catch (err) {
+                console.error("Error loading from localStorage:", err);
             }
-            else if (selectedEndDate) {
-                return formatAsYMD(selectedEndDate);
-            }
-            return "";
         }
-        else {
-            return selectedDate ? formatAsYMD(selectedDate) : "";
+    }, [column?.id, localStorageKey, dropdownOptions, toggleStatus]);
+    // If the parent changes selectedDate, sync it to local state
+    useEffect(() => {
+        setLocalDate(selectedDate);
+    }, [selectedDate]);
+    // If the parent changes selectedOperator, sync that too
+    useEffect(() => {
+        if (selectedDropdownOption && selectedDropdownOption.value) {
+            setLocalOperator(selectedDropdownOption);
         }
+    }, [selectedDropdownOption]);
+    // Handler for the operator dropdown
+    const handleOperatorSelect = (option) => {
+        setLocalOperator(option);
+        onDropdownOptionSelect?.(option);
     };
-    const handleFilterClick = () => {
-        const dateString = buildDateString().trim();
-        const operator = selectedOperator?.value || "";
-        const combinedText = operator + dateString;
-        if (!combinedText) {
-            if (column && setSearchCriteria) {
-                setSearchCriteria((prev) => {
-                    const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
-                    updateLocalStorage(newCriteria, localStorageKey);
-                    return newCriteria;
-                });
-            }
-        }
-        else {
-            if (setSearchItems && !searchItems.includes(combinedText)) {
-                setSearchItems([...searchItems, combinedText]);
-            }
-            if (column && setSearchCriteria) {
-                setSearchCriteria((prev) => {
-                    const filtered = prev.filter((c) => c.searchColumn.id !== column.id);
-                    const newCriteria = [
-                        ...filtered,
-                        {
-                            searchColumn: column,
-                            submittedSearchText: combinedText,
-                        },
-                    ];
-                    updateLocalStorage(newCriteria, localStorageKey);
-                    return newCriteria;
-                });
-            }
-        }
-        setEditingHeader && setEditingHeader(null);
-        handleFilter && handleFilter();
-        setIsDatePickerOpen(false);
+    // Single date pick
+    const openSinglePicker = () => {
         setActiveInput(null);
+        setIsDatePickerOpen(!isDatePickerOpen);
     };
-    // DayPicker styling
-    const modifiersClassNames = {
-        selected: `${themeBgColor} text-white rounded-full`,
-        today: `${lightThemeBg} ${textHighlight}`,
-    };
-    // Open pickers
+    // Range pick
     const openStartPicker = () => {
-        setIsDatePickerOpen(true);
         setActiveInput("start");
+        setIsDatePickerOpen(true);
     };
     const openEndPicker = () => {
-        setIsDatePickerOpen(true);
         setActiveInput("end");
+        setIsDatePickerOpen(true);
     };
-    const openSinglePicker = () => {
+    /** Called when user clicks "Filter" */
+    const handleFilterClick = () => {
+        let finalText = "";
+        if (!toggleStatus) {
+            // Single date: operator + date
+            const dateStr = localDate ? formatAsYMD(localDate) : "";
+            finalText = localOperator.value + dateStr;
+        }
+        else {
+            // Range date
+            const startStr = localStartDate ? formatAsYMD(localStartDate) : "";
+            const endStr = localEndDate ? formatAsYMD(localEndDate) : "";
+            if (startStr && endStr) {
+                finalText = `${startStr} - ${endStr}`;
+            }
+            else if (startStr) {
+                finalText = startStr;
+            }
+            else if (endStr) {
+                finalText = endStr;
+            }
+        }
+        const trimmed = finalText.trim();
+        if (!trimmed) {
+            // remove existing criterion for this column
+            setSearchCriteria?.((prev) => {
+                const newCriteria = prev.filter((c) => c.searchColumn?.id !== column?.id);
+                updateLocalStorage(newCriteria, localStorageKey);
+                return newCriteria;
+            });
+        }
+        else {
+            // store new or updated criterion
+            setSearchCriteria?.((prev) => {
+                const filtered = prev.filter((c) => c.searchColumn?.id !== column?.id);
+                const newCriterion = {
+                    searchColumn: column,
+                    submittedSearchText: trimmed,
+                };
+                const newCriteria = [...filtered, newCriterion];
+                updateLocalStorage(newCriteria, localStorageKey);
+                return newCriteria;
+            });
+        }
+        handleFilter?.();
+        setEditingHeader?.(null);
+        setIsDatePickerOpen(false);
         setActiveInput(null);
-        setIsDatePickerOpen((prev) => !prev);
+        if (!toggleStatus && onDateSelect) {
+            onDateSelect(localDate);
+        }
     };
-    // Determine if we can store (based on column and setSearchCriteria)
-    const canStore = !!(column && setSearchCriteria);
-    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (
-                // Range mode: Two buttons for start and end dates.
-                _jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedStartDate
-                                ? formatAsYMD(selectedStartDate)
-                                : "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedEndDate
-                                ? formatAsYMD(selectedEndDate)
-                                : "End Date" })] })) : (
-                // Single-date mode: Render a dropdown for operator and a button for the date.
-                _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedOperator, onOptionSelect: (option) => setSelectedOperator(option), optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-10 left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
-                                ? formatAsYMD(selectedDate)
-                                : "Select Date" })] })) }), toggleStatus ? (activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: selectedStartDate, onSelect: (day) => {
-                        onStartDateSelect?.(day || undefined);
-                        setIsDatePickerOpen(false);
-                        setActiveInput(null);
-                    }, modifiersClassNames: modifiersClassNames })) : (_jsx(DayPicker, { mode: "single", selected: selectedEndDate, onSelect: (day) => {
-                        onEndDateSelect?.(day || undefined);
+    // The daypicker for single or range
+    const dayPicker = !toggleStatus
+        ? // Single date
+            isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: localDate, onSelect: (day) => {
+                        if (day) {
+                            setLocalDate(day);
+                        }
                         setIsDatePickerOpen(false);
-                        setActiveInput(null);
-                    }, 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 }) })) : null, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
+                    } }) }))
+        : activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: localStartDate, onSelect: (day) => {
+                    if (day)
+                        setLocalStartDate(day);
+                    setIsDatePickerOpen(false);
+                    setActiveInput(null);
+                } })) : (_jsx(DayPicker, { mode: "single", selected: localEndDate, onSelect: (day) => {
+                    if (day)
+                        setLocalEndDate(day);
+                    setIsDatePickerOpen(false);
+                    setActiveInput(null);
+                } })) }));
+    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: localStartDate
+                                ? formatAsYMD(localStartDate)
+                                : "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: localEndDate
+                                ? formatAsYMD(localEndDate)
+                                : "End Date" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: localOperator, onOptionSelect: handleOperatorSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-10 left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: localDate ? formatAsYMD(localDate) : "Select Date" })] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
                     const cleanedText = getCleanedText(item, removePattern);
-                    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: () => {
-                            const newSearchItems = searchItems.filter((searchItem) => searchItem !== item);
+                    return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", onClick: () => {
+                            // remove from searchItems
+                            const newSearchItems = searchItems.filter((it) => it !== item);
                             setSearchItems?.(newSearchItems);
-                            if (canStore) {
-                                setSearchCriteria?.((prev) => {
-                                    const filtered = prev.filter((crit) => crit.submittedSearchText !==
-                                        item);
-                                    updateLocalStorage(filtered, localStorageKey);
-                                    return filtered;
-                                });
-                            }
-                        }, text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: cleanedText }), 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, _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
-};
+                            // remove from searchCriteria
+                            setSearchCriteria?.((prev) => {
+                                const filtered = prev.filter((crit) => crit.submittedSearchText !==
+                                    item);
+                                updateLocalStorage(filtered, localStorageKey);
+                                return filtered;
+                            });
+                        }, text: _jsx(Text, { color: "text-white", size: "text-sm", tag: "span", text: cleanedText }), 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, _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
+}
 export default SearchDatePickerInput;

package/package.json

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