@agilant/toga-blox 1.0.70 → 1.0.72

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";
+import SearchTextInput from "./SearchTextInput"; // your working text
 import SearchNumberInput from "./SearchNumberInput";
 import SearchDropdownInput from "./SearchDropdownInput";
 import SearchDatePickerInput from "./SearchInputDatePicker";
@@ -14,7 +14,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
     useEffect(() => {
         inputRef.current?.focus();
     }, []);
-    return (_jsx("div", { ref: containerRef, className: "", children: (() => {
+    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 }));
@@ -23,7 +23,11 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
                 case "multiSelect":
                     return (_jsx(SearchDropdownInput, { options: dropdownOptions, isSearchable: true, placeholder: "Search", isMulti: true, hideSelectedOptions: true, closeMenuOnSelect: false, inputWidth: "w-full", inputTextSize: "text-sm", additionalClasses: "", customClassNames: {}, onChange: onChange, value: [], selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight, handleFilter: handleFilter }));
                 case "date":
-                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent }));
+                    return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, 
+                        // pass the same local-storage props:
+                        setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor }));
+                default:
+                    return null;
             }
         })() }));
 };

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

@@ -39,28 +39,40 @@ export default {
     },
     parameters: { layout: "centered" },
 };
+/**
+ * Our 'Template' sets up local state for everything,
+ * so the SearchInput can function (adding/removing badges, toggling date range, etc.)
+ */
 const Template = (args) => {
     const [selectedOption, setSelectedOption] = useState(args.selectedDropdownOption);
     const [searchItems, setSearchItems] = useState([]);
     const [toggleStatus, setToggleStatus] = useState(false);
     const [minValue, setMinValue] = useState(undefined);
     const [maxValue, setMaxValue] = useState(undefined);
+    // For multiSelect
     const [selectedValue, setSelectedValue] = useState(args.selectedValue || []);
+    // For date pickers
     const [selectedDate, setSelectedDate] = useState(args.selectedDate);
     const [selectedStartDate, setSelectedStartDate] = useState(args.selectedStartDate);
     const [selectedEndDate, setSelectedEndDate] = useState(args.selectedEndDate);
-    // Set editingHeader to 0 so that the search input renders.
+    // For local-storage logic
     const [searchCriteria, setSearchCriteria] = useState([]);
+    // For controlling "editingHeader"
     const [editingHeader, setEditingHeader] = useState(0);
     // Log current state to verify updates.
     console.log("Template render: editingHeader =", editingHeader);
     console.log("Template render: searchCriteria =", searchCriteria);
+    // For multiSelect changes (or other input changes)
     const handleOnChange = (newSelected) => {
         setSelectedValue(newSelected);
         args.onChange?.(newSelected);
         console.log("Selected items:", newSelected);
     };
-    return (_jsx(SearchInput, { ...args, column: mockColumn, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), 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, handleFilter: args.handleFilter }));
+    return (_jsx(SearchInput, { ...args, column: mockColumn, 
+        // Our local states
+        selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), 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 }));
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -148,10 +160,18 @@ DatePickerInput.args = {
     dropdownOptions: ["Exactly", "Before", "After"],
     selectedDropdownOption: "Exactly",
     onDropdownOptionSelect: (option) => console.log(`Option selected: ${option}`),
-    searchItems: [],
-    setSearchItems: () => { },
-    toggleStatus: false,
-    setToggleStatus: () => { },
+    /**
+     * 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",
+    // If you want local-storage logic for date filtering:
+    column: { id: "dateColumn" }, // real or mock
 };

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

@@ -2,6 +2,9 @@ import React from "react";
 import "react-day-picker/dist/style.css";
 import { searchDropdownIconProps } from "./SearchInput.types";
 type SearchDatePickerInputProps<T extends object> = {
+    themeBgColor?: string;
+    lightThemeBg?: string;
+    pillColor?: string;
     textHighlight?: string;
     dropdownOptions?: string[];
     selectedDropdownOption?: string;
@@ -9,15 +12,19 @@ type SearchDatePickerInputProps<T extends object> = {
     dropdownIconProp?: searchDropdownIconProps;
     toggleStatus?: boolean;
     setToggleStatus?: React.Dispatch<React.SetStateAction<boolean>>;
-    themeBgColor?: string;
-    lightThemeBg?: string;
     selectedDate?: Date;
-    onDateSelect?: (date: Date) => void;
+    onDateSelect?: (date: Date | undefined) => void;
     selectedStartDate?: Date;
-    onStartDateSelect?: (date: Date) => void;
+    onStartDateSelect?: (date: Date | undefined) => void;
     selectedEndDate?: Date;
-    onEndDateSelect?: (date: Date) => void;
+    onEndDateSelect?: (date: Date | undefined) => void;
+    searchItems?: string[];
+    setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
     handleFilter?: () => void;
+    setSearchCriteria?: React.Dispatch<React.SetStateAction<any[]>>;
+    column?: any;
+    setEditingHeader?: React.Dispatch<React.SetStateAction<any>>;
+    localStorageKey?: string;
 };
-declare function SearchDatePickerInput<T extends object>({ textHighlight, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, dropdownIconProp, toggleStatus, setToggleStatus, themeBgColor, lightThemeBg, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -5,24 +5,41 @@ import "react-day-picker/dist/style.css";
 import Dropdown from "../Dropdown/Dropdown";
 import ToggleButton from "../ToggleButton/ToggleButton";
 import BaseButton from "../BaseButton";
-function SearchDatePickerInput({ textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, dropdownIconProp = {
+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 = {
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, }) {
+}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", }) {
     const containerRef = useRef(null);
-    // Remove internal state for the date values (they come from props)
-    // Internal UI state for showing the calendar and active input remains:
     const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
     const [activeInput, setActiveInput] = useState(null);
+    const canStore = !!column?.id && !!setSearchCriteria;
+    // On mount: load existing filter for this column (the FIRST one we find)
     useEffect(() => {
-        containerRef.current?.scrollIntoView();
-    }, []);
-    // Close calendar(s) when clicking outside the container
+        if (!canStore)
+            return;
+        const stored = localStorage.getItem(localStorageKey);
+        if (stored) {
+            try {
+                const parsed = JSON.parse(stored);
+                const existing = parsed.find((criterion) => criterion.searchColumn.id === column.id);
+                if (existing && setSearchItems) {
+                    setSearchItems([existing.submittedSearchText]);
+                }
+            }
+            catch (err) {
+                console.error("Error reading stored date filter:", err);
+            }
+        }
+    }, [canStore, column?.id, localStorageKey, setSearchItems]);
+    // close datepickers on outside click
     useEffect(() => {
-        function handleClickOutside(event) {
+        function handleClickOutside(e) {
             if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
+                !containerRef.current.contains(e.target)) {
                 setIsDatePickerOpen(false);
                 setActiveInput(null);
             }
@@ -32,41 +49,113 @@ function SearchDatePickerInput({ textHighlight = "text-sky-700", dropdownOptions
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, []);
-    // Handler for the Filter button remains similar,
-    // but it now uses the values from props.
-    const handleSubmitClick = () => {
-        // Close the calendar(s) after filtering
+    const updateLocalStorage = (criteria) => {
+        localStorage.setItem(localStorageKey, JSON.stringify(criteria));
+    };
+    // removing a date "badge"
+    const handleSearchBadgeClick = (item) => {
+        const newSearchItems = searchItems.filter((x) => x !== item);
+        setSearchItems?.(newSearchItems);
+        if (canStore) {
+            setSearchCriteria?.((prev) => {
+                const newCriteria = prev.filter((crit) => crit.submittedSearchText !== item);
+                updateLocalStorage(newCriteria);
+                return newCriteria;
+            });
+        }
+    };
+    // build single or range
+    const buildDateString = () => {
+        if (toggleStatus) {
+            if (selectedStartDate && selectedEndDate) {
+                return `${selectedStartDate.toLocaleDateString()} - ${selectedEndDate.toLocaleDateString()}`;
+            }
+            else if (selectedStartDate) {
+                return `Start: ${selectedStartDate.toLocaleDateString()}`;
+            }
+            else if (selectedEndDate) {
+                return `End: ${selectedEndDate.toLocaleDateString()}`;
+            }
+            return "";
+        }
+        return selectedDate ? selectedDate.toLocaleDateString() : "";
+    };
+    /**
+     * If empty => remove all queries for col
+     * If non-empty => APPEND
+     * (do NOT filter out old queries for that column)
+     */
+    const handleFilterClick = () => {
+        const dateString = buildDateString().trim();
+        if (!dateString) {
+            if (canStore) {
+                setSearchCriteria?.((prev) => {
+                    const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                    updateLocalStorage(newCriteria);
+                    return newCriteria;
+                });
+            }
+        }
+        else {
+            if (!searchItems.includes(dateString)) {
+                setSearchItems?.([...searchItems, dateString]);
+            }
+            if (canStore) {
+                setSearchCriteria?.((prev) => {
+                    // KEY: no filtering out old queries => we let them accumulate
+                    const newCriteria = [
+                        ...prev,
+                        {
+                            searchColumn: column,
+                            submittedSearchText: dateString,
+                        },
+                    ];
+                    updateLocalStorage(newCriteria);
+                    return newCriteria;
+                });
+            }
+        }
+        setEditingHeader?.(null);
+        handleFilter?.();
         setIsDatePickerOpen(false);
         setActiveInput(null);
-        handleFilter();
     };
+    // styling for day picker
     const modifiersClassNames = {
         selected: `${themeBgColor} text-white rounded-full`,
         today: `${lightThemeBg} ${textHighlight}`,
     };
-    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12", children: toggleStatus ? (
-                // Toggle mode: two separate inputs with a "to" between them
-                _jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: () => setActiveInput("start"), className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedStartDate
+    // open date pickers
+    const openStartPicker = () => {
+        setIsDatePickerOpen(true);
+        setActiveInput("start");
+    };
+    const openEndPicker = () => {
+        setIsDatePickerOpen(true);
+        setActiveInput("end");
+    };
+    const openSinglePicker = () => {
+        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()
-                                : "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: () => setActiveInput("end"), className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedEndDate
+                                : "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" })] })) : (
-                // Non-toggle mode: Dropdown and a single date input
-                _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: () => setIsDatePickerOpen((prev) => !prev), className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
+                                : "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()
                                 : "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: (date) => {
-                            if (onStartDateSelect)
-                                onStartDateSelect(date);
-                            setActiveInput(null); // close calendar after selection
-                        }, modifiersClassNames: modifiersClassNames })) : (_jsx(DayPicker, { mode: "single", selected: selectedEndDate, onSelect: (date) => {
-                            if (onEndDateSelect)
-                                onEndDateSelect(date);
-                            setActiveInput(null); // close calendar after selection
+                ? 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);
+                            setIsDatePickerOpen(false);
+                            setActiveInput(null);
+                        }, modifiersClassNames: modifiersClassNames })) : (_jsx(DayPicker, { mode: "single", selected: selectedEndDate, onSelect: (day) => {
+                            onEndDateSelect?.(day || undefined);
+                            setIsDatePickerOpen(false);
+                            setActiveInput(null);
                         }, 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: (date) => {
-                            if (onDateSelect)
-                                onDateSelect(date);
-                        }, modifiersClassNames: modifiersClassNames }) })), _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: handleSubmitClick, shape: "rounded-full" })] })] }));
+                : 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" })] })] }));
 }
 export default SearchDatePickerInput;

package/package.json

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