@agilant/toga-blox 1.0.89 → 1.0.90

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.js

@@ -7,6 +7,7 @@ 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",
@@ -88,20 +89,7 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
         setEditingHeader(null);
         setLocalSearchText("");
     };
-    // Helper: remove pattern (string or regex) from the beginning of the item
-    const getCleanedText = (item) => {
-        if (!removePattern)
-            return item;
-        if (removePattern instanceof RegExp) {
-            return item.replace(removePattern, "");
-        }
-        else {
-            // If it's a string, remove that string if it appears at the start
-            const pattern = new RegExp(`^${removePattern}`);
-            return item.replace(pattern, "");
-        }
-    };
-    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) => {
+    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

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.89",
+	"version": "1.0.90",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",