@agilant/toga-blox 1.0.88 → 1.0.90

package/dist/components/HeaderFilterIcon/HeaderFilterIcon.stories.js

@@ -45,7 +45,7 @@ export const WithActiveClass = {
     args: {
         ...Default.args,
         isActive: true,
-        additionalIconClasses: "text-green-500",
+        additionalIconClasses: "text-white",
         icon: { icon: "x", weight: "regular" },
     },
 };

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

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: <T extends object>({ bgColor, textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ bgColor, textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import SearchTextInput from "./SearchTextInput"; // your working text
+import SearchTextInput from "./SearchTextInput";
 import SearchNumberInput from "./SearchNumberInput";
 import SearchDropdownInput from "./SearchDropdownInput";
 import SearchDatePickerInput from "./SearchInputDatePicker";
@@ -8,7 +8,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
     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, }) => {
+}, 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, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -17,7 +17,9 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
     return (_jsx("div", { ref: containerRef, className: "w-max", children: (() => {
             switch (inputType) {
                 case "text":
-                    return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily }));
+                    return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily, 
+                        //will remove the filter options from the badge shown in the input
+                        removePattern: removePattern }));
                 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 }));
                 case "multiSelect":

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

@@ -46,6 +46,7 @@ export type SearchInputProps<T extends object> = {
     toggleColor?: string;
     toggleTextColor?: string;
     fontFamily?: string;
+    removePattern?: RegExp | string;
 };
 export interface OptionType {
     uuid: string;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -9,6 +9,7 @@ import Badge from "../Badge/Badge";
 import Text from "../Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import updateLocalStorage from "../../utils/updateLocalStorage";
+import { getCleanedText } from "../../utils/getCleanedText";
 function formatAsYMD(date) {
     if (!date)
         return "";
@@ -128,17 +129,20 @@ const SearchDatePickerInput = ({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                     }, 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) => (_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);
-                        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: item }), 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" })] })] }));
+                    }, 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) => {
+                    const cleanedText = getCleanedText(item);
+                    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);
+                            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" })] })] }));
 };
 export default SearchDatePickerInput;

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

@@ -17,6 +17,11 @@ type SearchTextInputProps<T extends object> = {
     localStorageKey?: string;
     firstIconClasses?: string;
     fontFamily?: string;
+    /**
+     * An optional pattern to remove from the front of the displayed text
+     * (e.g., "eq:" or a regular expression like /^[^:]*:/ ).
+     */
+    removePattern?: RegExp | string;
 };
-declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, firstIconClasses, fontFamily, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, firstIconClasses, fontFamily, removePattern, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchTextInput;

package/dist/components/SearchInput/SearchTextInput.js

@@ -7,16 +7,16 @@ import Dropdown from "../Dropdown/Dropdown";
 import Badge from "../Badge/Badge";
 import Text from "../Text";
 import updateLocalStorage from "../../utils/updateLocalStorage";
+import { getCleanedText } from "../../utils/getCleanedText";
 const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-500", dropdownIconProp = {
     iconClasses: textHighlight,
     name: "chevronDown",
     weight: "solid",
-}, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", firstIconClasses, fontFamily, }) => {
+}, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", firstIconClasses, fontFamily, removePattern, }) => {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
-    console.log(dropdownOptions, "OPTIONS");
-    // On mount: focus input and load persisted search for this column if it exists.
+    // On mount: focus input & load persisted search for this column
     useEffect(() => {
         inputRef.current?.focus();
         const stored = localStorage.getItem(localStorageKey);
@@ -36,7 +36,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
     const handleInputChange = (event) => {
         setLocalSearchText(event.target.value);
     };
-    // When a badge is clicked, remove it.
+    // When a badge is clicked, remove it from search items & local storage
     const handleSearchBadgeClick = (item) => {
         const newSearchItems = searchItems.filter((ele) => ele !== item);
         setSearchItems && setSearchItems(newSearchItems);
@@ -47,7 +47,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
             return newCriteria;
         });
     };
-    // On Enter: append new search.
+    // On Enter: append new search
     const handleKeyDown = (e) => {
         console.log("handleKeyDown triggered, localSearchText:", localSearchText);
         if (e.key === "Enter" && localSearchText.length > 0) {
@@ -57,17 +57,16 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
             handleSubmit();
         }
     };
-    // Append a new criterion for this column.
-    // Here we combine the drop-down value (if provided) with the input text.
+    // Append a new criterion for this column
     const handleSubmit = () => {
         const trimmed = localSearchText.trim();
-        // Combine the drop-down option value (if available) with the text.
+        // Combine the drop-down option value (if any) with the text
         const combinedText = selectedDropdownOption && selectedDropdownOption.value
             ? `${selectedDropdownOption.value}${trimmed}`
             : trimmed;
         console.log("handleSubmit triggered, combinedText:", combinedText);
         if (!combinedText) {
-            // Remove any criteria for this column.
+            // Remove any criteria for this column
             setSearchCriteria((prev) => {
                 const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
                 updateLocalStorage(newCriteria, localStorageKey);
@@ -76,7 +75,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
             });
         }
         else {
-            // Append a new criterion.
+            // Append a new criterion
             setSearchCriteria((prev) => {
                 const newCriteria = [
                     ...prev,
@@ -90,6 +89,11 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
         setEditingHeader(null);
         setLocalSearchText("");
     };
-    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: localSearchText, 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) => (_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: item }), 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] }) }));
+    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);
+                        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));
+                    }) })) : null] }) }));
 };
 export default SearchTextInput;

package/dist/utils/getCleanedText.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Removes a specified pattern from the beginning of the string.
+ *
+ * @param item - The string to be cleaned.
+ * @param removePattern - The pattern to remove. This can be a string or a RegExp.
+ *                        If not provided, the original string is returned.
+ * @returns The cleaned string.
+ */
+export declare const getCleanedText: (item: string, removePattern?: RegExp | string) => string;

package/dist/utils/getCleanedText.js

@@ -0,0 +1,20 @@
+// utils/getCleanedText.ts
+/**
+ * Removes a specified pattern from the beginning of the string.
+ *
+ * @param item - The string to be cleaned.
+ * @param removePattern - The pattern to remove. This can be a string or a RegExp.
+ *                        If not provided, the original string is returned.
+ * @returns The cleaned string.
+ */
+export const getCleanedText = (item, removePattern) => {
+    if (!removePattern)
+        return item;
+    if (removePattern instanceof RegExp) {
+        return item.replace(removePattern, "");
+    }
+    else {
+        const pattern = new RegExp(`^${removePattern}`);
+        return item.replace(pattern, "");
+    }
+};

package/package.json

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