@agilant/toga-blox 1.0.144 → 1.0.146

package/dist/components/Input/Input.js

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  * 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, firstIconTop = "top-[8px]", placeHolderColor = "placeholder:text-red-500", }, 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, firstIconTop = "top-[8px]", placeHolderColor, }, ref) {
     const [isFocused, setIsFocused] = useState(false);
     const hasValue = value != null && !!value.toString().trim();
     const isNumberInput = type === "number";

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, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor = "peer-checked:after:bg-purple-500", placeHolderColor, buttonPlaceHolderTextColor = "text-red-500", inactiveColorBackground = "bg-purple-300", inactiveColorBorder = "border-purple-300", activeColorBorder = "border-orange-900", }) => {
+}, 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, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor = "peer-checked:after:bg-purple-500", placeHolderColor = "placeholder:text-green-500", buttonPlaceHolderTextColor = "text-purple-500", inactiveColorBackground = "bg-purple-300", inactiveColorBorder = "border-purple-300", activeColorBorder = "border-orange-900", }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -6,6 +6,7 @@ import Dropdown from "../Dropdown/Dropdown";
 import ToggleButton from "../ToggleButton/ToggleButton";
 import BaseButton from "../BaseButton";
 import Badge from "../Badge/Badge";
+import Text from "../Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import updateLocalStorage from "../../utils/updateLocalStorage";
 import { getCleanedText } from "../../utils/getCleanedText";
@@ -28,6 +29,24 @@ function formatDateAsMonthDayYear(date) {
     const year = date.getFullYear();
     return `${month}/${day}/${year}`;
 }
+function formatCleanedDateString(dateStr) {
+    if (!dateStr)
+        return "";
+    // Check if it's a range.
+    if (dateStr.includes(" - ")) {
+        const parts = dateStr.split(" - ").map((s) => s.trim());
+        const formattedParts = parts.map((part) => {
+            // Try to parse the date.
+            const parsed = parseUserDateInput(part);
+            return parsed ? formatDateAsMonthDayYear(parsed) : part;
+        });
+        return formattedParts.join(" - ");
+    }
+    else {
+        const parsed = parseUserDateInput(dateStr);
+        return parsed ? formatDateAsMonthDayYear(parsed) : dateStr;
+    }
+}
 function formatDateAsYearMonthDay(date) {
     if (!date)
         return "";
@@ -327,7 +346,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                                     setIsDatePickerOpen(false);
                                     setActiveInput(null);
                                 }
-                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded text-red-500`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localStartDate
+                            }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, firstIconTop: firstIconTop, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-44 max-w-44 rounded", hasAutoFocus: true })) : (_jsxs("button", { onClick: openStartPicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-1 h-10 text-left min-w-44 max-w-44 rounded `, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localStartDate
                                     ? formatDateAsMonthDayYear(localStartDate)
                                     : "mm/dd/yyyy"] })), _jsx("span", { className: "mx-2", children: "to" }), activeInput === "end" ? (_jsx(Input, { type: "text", value: endDateInputValue, onChange: handleEndDateInputChange, placeholder: "mm/dd/yyy", placeHolderColor: placeHolderColor, onKeyDown: (e) => {
                                 if (e.key === "Enter") {
@@ -343,27 +362,21 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                                     }
                                 }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-auto h-10 text-left rounded-r min-w-52 max-w-52", hasAutoFocus: true, firstIconTop: firstIconTop, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-auto h-10 text-left rounded-r min-w-52 max-w-52 rounded-r`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
                                         ? formatDateAsMonthDayYear(localDate)
-                                        : "mm/dd/yyyy"] }) }))] })) }), dayPicker, 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", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", onClick: () => {
-                        const newSearchItems = searchItems.filter((it) => it !== item);
-                        setSearchItems?.(newSearchItems);
-                        setSearchCriteria?.((prev) => {
-                            const filtered = prev.filter((crit) => crit.submittedSearchText !== item);
-                            updateLocalStorage(filtered, localStorageKey);
-                            return filtered;
-                        });
-                    }, text: (() => {
-                        // Check if the text is in YYYY-MM-DD format:
-                        const dateRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
-                        const match = cleanedText.match(dateRegex);
-                        if (match) {
-                            const [_, year, month, day] = match;
-                            const formatted = `${month}/${day}/${year}`;
-                            return formatted;
-                        }
-                        return 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));
-            }), _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: activeColorBorder, activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: inactiveColorBorder, inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
+                                        : "mm/dd/yyyy"] }) }))] })) }), 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);
+                    const formattedDate = formatCleanedDateString(cleanedText);
+                    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: () => {
+                            const newSearchItems = searchItems.filter((it) => it !== item);
+                            setSearchItems?.(newSearchItems);
+                            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: formattedDate
+                                ? formattedDate
+                                : "mm/dd/yyyy" }), 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: activeColorBorder, activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: inactiveColorBorder, inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.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.144",
+	"version": "1.0.146",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",