@agilant/toga-blox 1.0.72 → 1.0.73

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -8,11 +8,34 @@ import BaseButton from "../BaseButton";
 import Badge from "../Badge/Badge";
 import Text from "../Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, dropdownIconProp = {
+/**
+ * A helper to convert a Date object to 'YYYY-MM-DD'
+ * so we don't get slashes in the final string.
+ */
+function formatAsYMD(date) {
+    if (!date)
+        return "";
+    // date.toISOString() is 'YYYY-MM-DDTHH:mm:ss.sssZ'
+    // slice(0,10) => 'YYYY-MM-DD'
+    return date.toISOString().slice(0, 10);
+}
+function SearchDatePickerInput({ 
+// theming
+themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", 
+// style/config
+pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, dropdownIconProp = {
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", }) {
+}, 
+// toggle
+toggleStatus = false, setToggleStatus, 
+// single date
+selectedDate, onDateSelect, 
+// range
+selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, 
+// local-storage logic
+searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", }) {
     const containerRef = useRef(null);
     const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
     const [activeInput, setActiveInput] = useState(null);
@@ -27,6 +50,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                 const parsed = JSON.parse(stored);
                 const existing = parsed.find((criterion) => criterion.searchColumn.id === column.id);
                 if (existing && setSearchItems) {
+                    // e.g. "2025-02-27" or "2024-12-01 - 2024-12-28"
                     setSearchItems([existing.submittedSearchText]);
                 }
             }
@@ -35,7 +59,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
             }
         }
     }, [canStore, column?.id, localStorageKey, setSearchItems]);
-    // close datepickers on outside click
+    // Close date pickers on outside click
     useEffect(() => {
         function handleClickOutside(e) {
             if (containerRef.current &&
@@ -45,9 +69,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
             }
         }
         document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
     const updateLocalStorage = (criteria) => {
         localStorage.setItem(localStorageKey, JSON.stringify(criteria));
@@ -64,30 +86,40 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
             });
         }
     };
-    // build single or range
+    /**
+     * Build a string in 'YYYY-MM-DD' (or range) format,
+     * so it won't break in your URL as "mm%2Fdd%2Fyyyy"
+     */
     const buildDateString = () => {
         if (toggleStatus) {
+            // range mode
             if (selectedStartDate && selectedEndDate) {
-                return `${selectedStartDate.toLocaleDateString()} - ${selectedEndDate.toLocaleDateString()}`;
+                return `${formatAsYMD(selectedStartDate)} - ${formatAsYMD(selectedEndDate)}`;
             }
             else if (selectedStartDate) {
-                return `Start: ${selectedStartDate.toLocaleDateString()}`;
+                return `Start: ${formatAsYMD(selectedStartDate)}`;
             }
             else if (selectedEndDate) {
-                return `End: ${selectedEndDate.toLocaleDateString()}`;
+                return `End: ${formatAsYMD(selectedEndDate)}`;
             }
             return "";
         }
-        return selectedDate ? selectedDate.toLocaleDateString() : "";
+        else {
+            // single-date mode
+            return selectedDate ? formatAsYMD(selectedDate) : "";
+        }
     };
     /**
      * If empty => remove all queries for col
      * If non-empty => APPEND
      * (do NOT filter out old queries for that column)
+     *
+     * But now the stored string is "YYYY-MM-DD" or "YYYY-MM-DD - YYYY-MM-DD"
      */
     const handleFilterClick = () => {
         const dateString = buildDateString().trim();
         if (!dateString) {
+            // remove existing for col
             if (canStore) {
                 setSearchCriteria?.((prev) => {
                     const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
@@ -97,12 +129,12 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
             }
         }
         else {
+            // append
             if (!searchItems.includes(dateString)) {
                 setSearchItems?.([...searchItems, dateString]);
             }
             if (canStore) {
                 setSearchCriteria?.((prev) => {
-                    // KEY: no filtering out old queries => we let them accumulate
                     const newCriteria = [
                         ...prev,
                         {
@@ -120,7 +152,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
         setIsDatePickerOpen(false);
         setActiveInput(null);
     };
-    // styling for day picker
+    // DayPicker styling
     const modifiersClassNames = {
         selected: `${themeBgColor} text-white rounded-full`,
         today: `${lightThemeBg} ${textHighlight}`,
@@ -138,12 +170,16 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
         setActiveInput(null);
         setIsDatePickerOpen((prev) => !prev);
     };
-    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedStartDate
-                                ? selectedStartDate.toLocaleDateString()
+    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (
+                // Range mode
+                _jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedStartDate
+                                ? formatAsYMD(selectedStartDate)
                                 : "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedEndDate
-                                ? selectedEndDate.toLocaleDateString()
-                                : "End Date" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
-                                ? selectedDate.toLocaleDateString()
+                                ? formatAsYMD(selectedEndDate)
+                                : "End Date" })] })) : (
+                // Single-date mode
+                _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
+                                ? formatAsYMD(selectedDate)
                                 : "Select Date" })] })) }), toggleStatus
                 ? activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: selectedStartDate, onSelect: (day) => {
                             onStartDateSelect?.(day || undefined);
@@ -156,6 +192,17 @@ function 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);
-                        }, modifiersClassNames: modifiersClassNames }) })), 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", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", 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: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", 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: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
+                        }, modifiersClassNames: modifiersClassNames }) })), 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", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => {
+                        const newSearchItems = searchItems.filter((x) => x !== item);
+                        setSearchItems?.(newSearchItems);
+                        if (canStore) {
+                            setSearchCriteria?.((prev) => {
+                                const filtered = prev.filter((crit) => crit.submittedSearchText !==
+                                    item);
+                                updateLocalStorage(filtered);
+                                return filtered;
+                            });
+                        }
+                    }, text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", 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: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", 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: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
 }
 export default SearchDatePickerInput;

package/package.json

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