@agilant/toga-blox 1.0.109 → 1.0.111

package/dist/components/Dropdown/Dropdown.js

@@ -9,7 +9,6 @@ const Dropdown = ({ options, selectedOption, onOptionSelect, optionClasses = "fl
 }, selectedOptionBgColor = "bg-gray-50", optionHoverBgColor = "hover:bg-gray-50", }) => {
     const [showMenu, setShowMenu] = useState(false);
     const toggleMenu = () => setShowMenu(!showMenu);
-    console.log(options, "DROP DOWN OPTIONS");
     return (_jsxs("div", { className: `flex items-center justify-between relative min-w-40 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: "flex cursor-pointer items-center group h-full", children: [_jsx("div", { className: `font-bold ${optionClasses} bg-white`, children: selectedOption.label }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, "data-testid": "dropdown-icon", children: getFontAwesomeIcon(icon.name) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((option) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b bg-white ${option.value ===
                                 selectedOption.value
                                 ? `${selectedOptionBgColor} font-semibold`

package/dist/components/Input/Input.d.ts

@@ -14,7 +14,7 @@ interface InputFieldProps {
     toolTipText?: string;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    checked?: boolean extends InputFieldProps["type"] ? boolean : undefined;
+    checked?: boolean;
     id?: string;
     name?: string;
     additionalClasses?: string;
@@ -30,5 +30,9 @@ interface InputFieldProps {
     focusRingColor?: string;
     firstIconClasses?: string;
 }
-declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<unknown>>;
+/**
+ * A properly formed forwardRef component: exactly two parameters:
+ * (props, ref). We pass `ref` to the <input ref={ref} ...>.
+ */
+declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default InputField;

package/dist/components/Input/Input.js

@@ -1,10 +1,14 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState, forwardRef } from "react";
-const InputField = forwardRef(({ label, placeholder, required = false, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, }) => {
+/**
+ * A properly formed forwardRef component: exactly two parameters:
+ * (props, ref). We pass `ref` to the <input ref={ref} ...>.
+ */
+const InputField = forwardRef(function InputField({ label, placeholder, required, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", firstIconClasses, }, ref) {
     const [isFocused, setIsFocused] = useState(false);
-    const hasValue = value != null && !!value.toString().trim(); // Check if input value has at least one non-space character
+    const hasValue = value != null && !!value.toString().trim();
     const isNumberInput = type === "number";
     let formattedValue = isNumberInput &&
         value != null &&
@@ -12,9 +16,14 @@ const InputField = forwardRef(({ label, placeholder, required = false, checked,
         isNaN(Number(value))
         ? ""
         : value;
+    // Example: sometimes number formatting can produce "NaN":
     if (formattedValue === "$NaN") {
         formattedValue = "";
     }
+    const registerProps = register
+        ? register(name || "", { required })
+        : {};
+    // Render icons
     const renderFirstIcon = () => {
         if (!firstIcon)
             return null;
@@ -22,16 +31,18 @@ const InputField = forwardRef(({ label, placeholder, required = false, checked,
                 ? "text-gray-500"
                 : isValid
                     ? `text-${iconColor}`
-                    : "text-redText"}`, children: _jsx(_Fragment, { children: firstIcon }) }));
+                    : "text-redText"}`, children: typeof firstIcon === "function" ? firstIcon() : firstIcon }));
     };
     const renderSecondIcon = () => {
         if (!secondIcon)
             return null;
-        return (_jsx("span", { onClick: onIconClick, className: `input-icon input-icon--second-icon absolute top-2 right-4 text-${disabled
+        return (_jsx("span", { onClick: onIconClick, className: `input-icon input-icon--second-icon absolute top-2 right-4 ${disabled
                 ? "text-gray-500"
                 : isValid
                     ? `text-${iconColor}`
-                    : "text-redText"}`, children: _jsx(_Fragment, { children: secondIcon }) }));
+                    : "text-redText"}`, children: typeof secondIcon === "function"
+                ? secondIcon()
+                : secondIcon }));
     };
     const renderIcons = () => {
         switch (iconPosition) {
@@ -45,25 +56,29 @@ const InputField = forwardRef(({ label, placeholder, required = false, checked,
                 return null;
         }
     };
-    const registerProps = register
-        ? register(name || "", { required })
-        : {};
-    return isReadOnly ? (_jsxs("div", { className: "input-wrapper relative", children: [renderIcons(), _jsxs("label", { htmlFor: id, className: `block font-light text-left mb-1 ${labelClasses} `, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] }), _jsx("div", { className: `
-					 text-left focus:outline-none focus:ring-2 block w-full py-2 px-2 rounded-lg shadow-input outline outline-0 outline-barelyPrimary focus:outline-4 md:w-full lg:w-full xl:w-full
-					${firstIcon ? "pl-10" : ""}
-					${secondIcon ? "pr-10" : ""}
-					${additionalClasses}
-				`, children: readOnlyInfo }), iconPosition === "after" && renderSecondIcon()] })) : (_jsxs(_Fragment, { children: [label && (_jsxs("label", { htmlFor: id, className: ` block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: " input-wrapper relative", children: [renderIcons(), _jsx("input", { autoComplete: "", ...registerProps, className: `focused:ring-0 ${focusRingColor} focus:ring-1
-						 focus:outline-none
-						${disabled
-                            ? "border-gray-500 focus:ring-gray-500"
-                            : isValid
-                                ? ""
-                                : "border-redText focus:ring-red-500"} block w-full py-2 px-2
-						${firstIcon ? "pl-10" : ""}
-						${secondIcon ? "pr-10" : ""}
-						 outline outline-0 outline-barelyPrimary focus:outline-4 md:w-full lg:w-full ${isFocused ? "hover:border-transparent" : ""} ${isFocused && !disabled
-                            ? ` ${isValid ? "" : "shadow-redText"}`
-                            : disabled} ${additionalClasses}`, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, onChange: onChange, checked: type === "checkbox" ? checked : undefined, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue, onKeyDown: onKeyDown }), iconPosition === "after" && renderSecondIcon()] })] }));
+    // If it's read-only, we show readOnlyInfo instead of an actual <input>
+    if (isReadOnly) {
+        return (_jsxs("div", { className: "input-wrapper relative", children: [renderIcons(), _jsxs("label", { htmlFor: id, className: `block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] }), _jsx("div", { className: `
+              text-left focus:outline-none focus:ring-2 block w-full py-2 px-2 rounded-lg
+              ${firstIcon ? "pl-10" : ""}
+              ${secondIcon ? "pr-10" : ""}
+              ${additionalClasses}
+            `, children: readOnlyInfo })] }));
+    }
+    // Normal input mode
+    return (_jsxs(_Fragment, { children: [label && (_jsxs("label", { htmlFor: id, className: `block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: "input-wrapper relative", children: [renderIcons(), _jsx("input", { ref: ref, autoComplete: "", ...registerProps, className: `
+              ${focusRingColor}
+              focus:ring-1
+              focus:outline-none
+              block w-full py-2 px-2
+              outline outline-0
+              md:w-full
+              ${disabled ? "border-gray-500 focus:ring-gray-500" : ""}
+              ${isValid ? "" : "border-redText focus:ring-red-500"}
+              ${firstIcon ? "pl-10" : ""}
+              ${secondIcon ? "pr-10" : ""}
+              ${isFocused ? "hover:border-transparent" : ""}
+              ${additionalClasses}
+            `, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, checked: type === "checkbox" ? checked : undefined, onChange: onChange, onKeyDown: onKeyDown, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue })] })] }));
 });
 export default InputField;

package/dist/components/MultiSelect/MultiSelect.js

@@ -5,15 +5,48 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
     text: "Select...",
     icon: "",
     iconStyle: "regular",
-}, isSearchable = true, isOpen, hasSelectAll = false, disabled = false, isLoading = false, onMenuToggle, overrideStrings, className, width = "w-72", isBoolean = false, otherProps, }) => {
+}, isSearchable = true, isOpen, hasSelectAll = false, disabled = false, isLoading = false, onMenuToggle, overrideStrings, className, width = "w-72", isBoolean = false, otherProps, setInputSearchValue, }) => {
+    // Convert your incoming options to the shape expected by react-multi-select-component
     const multiSelectOptions = options.map((option) => ({
         label: option.name,
         value: option.value,
     }));
+    // Convert the "selectedValue" prop similarly
     const multiSelectValue = selectedValue.map((item) => ({
         label: item.name,
         value: item.value,
     }));
+    function filterOptions(baseOptions, searchText) {
+        const footer = baseOptions.find((option) => option.value === "__footer__");
+        if (!searchText) {
+            // If the parent is already 0, don't set it again
+            setInputSearchValue?.((prevCount) => {
+                if (prevCount !== 0)
+                    return 0;
+                return prevCount; // no change => no re-render
+            });
+            return baseOptions;
+        }
+        // Normal filter
+        const filtered = baseOptions.filter((option) => {
+            if (option.value === "__footer__")
+                return false;
+            return option.label
+                .toLowerCase()
+                .includes(searchText.toLowerCase());
+        });
+        // Only update if it's different from current
+        setInputSearchValue?.((prevCount) => {
+            const newCount = filtered.length;
+            if (newCount !== prevCount)
+                return newCount;
+            return prevCount;
+        });
+        if (footer) {
+            return [...filtered, footer];
+        }
+        return filtered;
+    }
     const valueRenderer = (selected, _options) => {
         if (!selected || selected.length === 0) {
             return (_jsxs("span", { className: "flex items-center gap-2 text-gray-500", children: [placeholder?.icon
@@ -28,6 +61,7 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
     const handleSelectionChange = (selectedOptions) => {
         let finalSelection = selectedOptions;
         if (isBoolean && selectedOptions.length > 0) {
+            // If isBoolean is true, only allow one selection (last one clicked)
             finalSelection = [selectedOptions[selectedOptions.length - 1]];
         }
         const mapped = finalSelection.map((opt) => ({
@@ -36,8 +70,8 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
         }));
         onChange(mapped);
     };
-    return (_jsx("div", { className: width, children: _jsx(MultiSelect, { id: id, name: name, className: className, options: multiSelectOptions, value: multiSelectValue, onChange: handleSelectionChange, disableSearch: !isSearchable || isBoolean, isOpen: isOpen, hasSelectAll: hasSelectAll, disabled: disabled, isLoading: isLoading, onMenuToggle: onMenuToggle, overrideStrings: {
+    return (_jsx("div", { className: `${width} `, children: _jsx(MultiSelect, { id: id, name: name, className: className, options: multiSelectOptions, value: multiSelectValue, onChange: handleSelectionChange, disableSearch: !isSearchable || isBoolean, isOpen: isOpen, hasSelectAll: hasSelectAll, disabled: disabled, isLoading: isLoading, onMenuToggle: onMenuToggle, overrideStrings: {
                 ...overrideStrings,
-            }, labelledBy: "Select", valueRenderer: valueRenderer, ...otherProps }) }));
+            }, labelledBy: "Select", valueRenderer: valueRenderer, filterOptions: filterOptions, ...otherProps }) }));
 };
 export default MultiSelectInput;

package/dist/components/MultiSelect/MultiSelect.types.d.ts

@@ -30,4 +30,5 @@ export interface MultiSelectInputProps {
     width?: string;
     isBoolean?: boolean;
     otherProps?: any;
+    setInputSearchValue?: React.Dispatch<React.SetStateAction<number>>;
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { MultiSelectInputProps, OptionType } from "../MultiSelect/MultiSelect.types";
+import { OptionType } from "../MultiSelect/MultiSelect.types";
 interface SearchDropdownInputProps {
     options?: OptionType[];
     selectedValue?: OptionType[];
@@ -18,9 +18,8 @@ interface SearchDropdownInputProps {
         [key: string]: any;
     };
     setEditingHeader?: React.Dispatch<React.SetStateAction<any>>;
-    /** localStorage key used to store the entire “searchCriteria” array */
     localStorageKey?: string;
-    otherProps?: MultiSelectInputProps["otherProps"];
+    otherProps?: any;
     additionalClasses?: string;
     clearText?: string;
     clearTextColor?: string;
@@ -28,6 +27,8 @@ interface SearchDropdownInputProps {
     buttonColor?: string;
     isBoolean?: boolean;
     isSearchable?: boolean;
+    fontFamily?: string;
+    pillColor?: string;
 }
 declare const SearchDropdownInput: React.FC<SearchDropdownInputProps>;
 export default SearchDropdownInput;

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import MultiSelectInput from "../MultiSelect/MultiSelect";
+import { useEffect, useState } from "react";
+import MultiSelectInput from "../MultiSelect/MultiSelect"; // Adjust path as needed
 import updateLocalStorage from "../../utils/updateLocalStorage";
+import Badge from "../Badge";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+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, ...rest }) => {
-    // Are we able to store filters for this column?
+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;
@@ -14,7 +20,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             return;
         try {
             const parsed = JSON.parse(stored);
-            const existing = parsed.find((c) => c.searchColumn?.id === column.id);
+            const existing = parsed.find((c) => c.searchColumn?.id === column?.id);
             if (existing && setSearchItems) {
                 const raw = existing.submittedSearchText;
                 setSearchItems([raw]);
@@ -36,6 +42,7 @@ 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
@@ -47,15 +54,17 @@ 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);
+                const newCriteria = prev.filter((c) => c.searchColumn.id !== column?.id);
                 updateLocalStorage(newCriteria, localStorageKey);
                 return newCriteria;
             });
         }
         else {
+            // Store to local storage
             setSearchCriteria?.((prev) => {
-                const filtered = prev.filter((c) => c.searchColumn.id !== column.id);
+                const filtered = prev.filter((c) => c.searchColumn.id !== column?.id);
                 const newCriteria = [
                     ...filtered,
                     {
@@ -70,11 +79,12 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
         setEditingHeader?.(null);
         handleFilter?.();
     };
+    // Called when user clicks Clear
     const handleClear = () => {
         onChange([]);
         if (canStore) {
             setSearchCriteria?.((prev) => {
-                const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                const newCriteria = prev.filter((c) => c.searchColumn.id !== column?.id);
                 updateLocalStorage(newCriteria, localStorageKey);
                 return newCriteria;
             });
@@ -82,18 +92,20 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             setEditingHeader?.(null);
         }
     };
+    // We add a “footer” item to place a Filter button, etc., at the bottom
     const footerOption = [{ name: "", value: "__footer__" }];
     const extendedOptions = [...options, ...footerOption];
+    // Custom item renderer referencing the parent's filteredCount
     const itemRenderer = ({ option, checked, disabled, onClick }) => {
         if (option.value === "__footer__") {
-            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 bg-red-500`, 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 })] }));
         }
-        // If it's the "Select All" item
+        // If it's the "Select All" item => do something special here
         if (option.label === "Select All") {
-            return (_jsxs("label", { className: "select-all-item", style: {
+            return (_jsxs("label", { className: "select-all-item flex justify-between items-center px-4 cursor-pointer", style: {
                     display: "flex",
                     alignItems: "center",
                     padding: "0.5rem 1rem",
@@ -104,17 +116,24 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
                 }, onClick: (e) => {
                     e.stopPropagation();
                     onClick(e);
-                }, children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }));
+                }, 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))] }));
         }
+        // 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 })] }));
     };
     return (_jsx(MultiSelectInput, { options: extendedOptions, selectedValue: selectedValue, onChange: onChange, placeholder: {
             text: placeholder,
             icon: "magnifyingGlass",
             iconStyle: "regular",
-        }, disabled: disabled, hasSelectAll: isBoolean ? false : true, otherProps: {
+        }, disabled: disabled, hasSelectAll: isBoolean ? false : hasSelectAll, 
+        // Provide our custom item renderer
+        otherProps: {
             ItemRenderer: itemRenderer,
             ...rest.otherProps,
-        }, isBoolean: isBoolean, isSearchable: isSearchable, ...rest }));
+        }, isBoolean: isBoolean, isSearchable: isSearchable, 
+        // The child calls this to update how many items are matched by the current search
+        setInputSearchValue: setFilteredCount, ...rest }));
 };
 export default SearchDropdownInput;

package/dist/components/SearchInput/SearchInput.js

@@ -8,7 +8,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, isSearchable = false, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -21,9 +21,9 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
                         //will remove the filter options from the badge shown in the input
                         removePattern: removePattern, textHighlight: textHighlight }));
                 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, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor }));
+                    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, setSearchCriteria: setSearchCriteria, column: column, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor }));
                 case "multiSelect":
-                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean, isSearchable: isSearchable }));
+                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean, isSearchable: isSearchable, setSearchItems: setSearchItems, fontFamily: fontFamily, pillColor: pillColor }));
                 case "date":
                     return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp }));
                 default:

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

@@ -1,6 +1,9 @@
 import { Meta } from "@storybook/react";
 declare const _default: Meta;
 export default _default;
+/**
+ * 5) Create different stories from the template.
+ */
 export declare const Default: any;
 export declare const TextInput: any;
 export declare const NumberInput: any;

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

@@ -1,10 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SearchInput from "./SearchInput";
-import { useState } from "react";
+import { useState, useCallback, useMemo } from "react";
+// 1) Provide a stable "mock column"
 const mockColumn = {
     id: "mockColumn",
     Header: "Mock Column",
 };
+// 2) We define stable arrays for the controls to avoid re-creating them
+const textDropdownOptions = [
+    { label: "Starts with", value: "startsWith" },
+    { label: "Ends with", value: "endsWith" },
+    { label: "Exactly", value: "exactly" },
+    { label: "Includes", value: "includes" },
+    { label: "Excludes", value: "excludes" },
+];
+const multiSelectOptions = [
+    { uuid: "1", name: "Option 1", value: "option1" },
+    { uuid: "2", name: "Option 2", value: "option2" },
+    { uuid: "3", name: "Option 3", value: "option3" },
+];
+// 3) Standard default export
 export default {
     title: "Components/SearchInput",
     component: SearchInput,
@@ -39,7 +54,13 @@ export default {
     },
     parameters: { layout: "centered" },
 };
+/**
+ * 4) Our template story
+ *    - We store state for things like selectedValue, searchItems, etc.
+ *    - We memoize certain arrays & callbacks to avoid re-creating them every render.
+ */
 const Template = (args) => {
+    // 4A) State for various input behaviors
     const [selectedOption, setSelectedOption] = useState(args.selectedDropdownOption);
     const [searchItems, setSearchItems] = useState([]);
     const [toggleStatus, setToggleStatus] = useState(false);
@@ -55,39 +76,44 @@ const Template = (args) => {
     const [searchCriteria, setSearchCriteria] = useState([]);
     // For controlling "editingHeader"
     const [editingHeader, setEditingHeader] = useState(0);
-    // Log current state to verify updates.
+    // Just for debugging. Remove if it triggers too many logs:
     console.log("Template render: editingHeader =", editingHeader);
     console.log("Template render: searchCriteria =", searchCriteria);
-    // For multiSelect changes (or other input changes)
-    const handleOnChange = (newSelected) => {
+    /**
+     * 4B) Memoize your arrays & callbacks
+     *     If the user passes them in as story args, that might be stable enough,
+     *     but we can do it again here just in case.
+     */
+    const stableDropdownOptions = useMemo(() => args.dropdownOptions || [], [args.dropdownOptions]);
+    const handleOnChange = useCallback((newSelected) => {
         setSelectedValue(newSelected);
+        // If the story user provided an onChange, call it
         args.onChange?.(newSelected);
         console.log("Selected items:", newSelected);
-    };
-    return (_jsx(SearchInput, { ...args, column: mockColumn, 
-        // Our local states
-        selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => 
+    }, [args]);
+    const handleDropdownOptionSelect = useCallback((option) => {
         // Transform the received object into an OptionType.
         setSelectedOption({
             uuid: "dummy-id", // You can generate or pass a real uuid here.
             label: option.label,
             value: option.value,
             name: "dummy-name",
-        }), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate, setSearchCriteria: setSearchCriteria, setEditingHeader: setEditingHeader, 
-        // Keep handleFilter from the args or provide a custom
-        handleFilter: args.handleFilter }));
+        });
+    }, []);
+    return (_jsx(SearchInput, { ...args, column: mockColumn, 
+        // States from the story
+        selectedDropdownOption: selectedOption, onDropdownOptionSelect: handleDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate, setSearchCriteria: setSearchCriteria, setEditingHeader: setEditingHeader, removePattern: /^[^:]*:/, pillColor: "bg-sky-500", 
+        // Overwrite the dropdownOptions with our memoized version
+        dropdownOptions: stableDropdownOptions }));
 };
+/**
+ * 5) Create different stories from the template.
+ */
 export const Default = Template.bind({});
 Default.args = {
     inputType: "text",
     handleFilter: () => console.log("Filter applied"),
-    dropdownOptions: [
-        { label: "Starts with", value: "startsWith" },
-        { label: "Ends with", value: "endsWith" },
-        { label: "Exactly", value: "exactly" },
-        { label: "Includes", value: "includes" },
-        { label: "Excludes", value: "excludes" },
-    ],
+    dropdownOptions: textDropdownOptions,
     selectedDropdownOption: { label: "Starts with", value: "startsWith" },
 };
 export const TextInput = Template.bind({});
@@ -101,13 +127,8 @@ TextInput.args = {
         name: "chevronDown",
         weight: "solid",
     },
-    dropdownOptions: [
-        "Starts with",
-        "Ends with",
-        "Exactly",
-        "Includes",
-        "Excludes",
-    ],
+    // Use a stable array for the story
+    dropdownOptions: textDropdownOptions,
     selectedDropdownOption: { label: "Starts with", value: "startsWith" },
 };
 export const NumberInput = Template.bind({});
@@ -133,11 +154,8 @@ DropdownInput.args = {
     inputType: "multiSelect",
     handleFilter: () => console.log("Filter applied"),
     placeholder: "Search",
-    dropdownOptions: [
-        { uuid: "1", name: "Option 1", value: "option1" },
-        { uuid: "2", name: "Option 2", value: "option2" },
-        { uuid: "3", name: "Option 3", value: "option3" },
-    ],
+    // Provide stable array of multiSelect items
+    dropdownOptions: multiSelectOptions,
     selectedValue: [],
     isSearchable: true,
     hasSelectAll: true,
@@ -178,20 +196,9 @@ DatePickerInput.args = {
     ],
     selectedDropdownOption: { label: "Starts with", value: "startsWith" },
     onDropdownOptionSelect: (option) => console.log(`Option selected: ${option}`),
-    /**
-     * IMPORTANT:
-     * DO NOT override 'searchItems' or 'setSearchItems' with no-ops
-     * or you lose the local state from the Template.
-     *
-     * DO NOT pass toggleStatus, setToggleStatus as no-ops, or you won't see range toggling.
-     *
-     * Keep them out so we use the Template's state-based hooking.
-     */
-    // Theming for DayPicker
     themeBgColor: "bg-sky-500",
     lightThemeBg: "bg-sky-100",
     toggleTextColor: "text-green-500",
     toggleColor: "bg-green-500",
-    // If you want local-storage logic for date filtering:
-    column: { id: "dateColumn" }, // real or mock
+    column: { id: "dateColumn" },
 };

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

@@ -40,6 +40,8 @@ type SearchNumberInputProps<T extends object> = {
     themeBgColor?: string;
     toggleColor?: string;
     toggleTextColor?: string;
+    removePattern?: RegExp | string;
+    fontFamily?: string;
 };
 /**
  * A numeric filter component that:
@@ -47,5 +49,5 @@ type SearchNumberInputProps<T extends object> = {
  * 2. On Filter => either remove or store a string in localStorage
  * 3. On mount => read any existing filter for this column, parse, and set min/max
  */
-declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, pillColor, fontFamily, removePattern, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -1,10 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useCallback } from "react";
 import { Input } from "../Input";
 import Dropdown from "../Dropdown/Dropdown";
 import ToggleButton from "../ToggleButton/ToggleButton";
 import BaseButton from "../BaseButton";
 import Text from "../Text";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import { getCleanedText } from "../../utils/getCleanedText";
+import Badge from "../Badge";
+import updateLocalStorage from "../../utils/updateLocalStorage";
 const DEFAULT_STORAGE_KEY = "searchCriteria";
 /**
  * A numeric filter component that:
@@ -18,7 +22,7 @@ const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp =
     weight: "solid",
 }, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, toggleStatus = false, setToggleStatus, minValue = "", setMinValue, maxValue = "", setMaxValue, handleFilter, 
 // local-storage
-searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", }) => {
+searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", pillColor, fontFamily, removePattern, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     /** Decide if we can store for this column */
@@ -147,12 +151,25 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
         // Let the parent know a filter was applied
         handleFilter?.();
     };
-    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"}
-          h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2 ", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 border-2", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max" })] })) : (
+    const handleSearchBadgeClick = (item) => {
+        const newSearchItems = searchItems.filter((ele) => ele !== item);
+        setSearchItems && setSearchItems(newSearchItems);
+        setSearchCriteria((prev) => {
+            const newCriteria = prev.filter((crit) => crit.submittedSearchText !== item);
+            updateLocalStorage(newCriteria, localStorageKey);
+            console.log("Removed badge criterion, newCriteria:", newCriteria);
+            return newCriteria;
+        });
+    };
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col pt-4 p pb-1  border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] mx-4 ${toggleStatus ? "" : "border-2"}
+          h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs("div", { className: "flex items-center", children: [_jsx(Input, { focusRingColor: "focus:ring-2 ", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 border-2", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max" })] })) : (
                     // Single value mode
                     _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || {
                                     label: "",
                                     value: "",
-                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2", 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: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }) }));
+                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-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: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "border-t border-gray-300 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 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: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor}  cursor-pointer 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] }) }));
 };
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchTextInput.js

@@ -91,9 +91,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
     };
     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 || { label: "", value: "" }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto " }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: getCleanedText(localSearchText, removePattern), iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", firstIconClasses: firstIconClasses, 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) => {
                         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: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", 
-                                // Render only the cleaned text
-                                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));
+                        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: () => handleSearchBadgeClick(item), 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] }) }));
 };
 export default SearchTextInput;

package/package.json

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