@agilant/toga-blox 1.0.76 → 1.0.79

package/dist/components/MultiSelect/MultiSelect.js

@@ -27,7 +27,7 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
             return "All items selected";
         }
         // Default behavior: comma-separated labels
-        return selected.map((s) => s.label).join(", ");
+        return selected.map((s) => s.label).join("; ");
     };
     return (_jsx("div", { className: `${width}`, children: _jsx(MultiSelect, { id: id, name: name, className: className, options: multiSelectOptions, value: multiSelectValue, onChange: (selectedOptions) => {
                 // Convert back to OptionType when passing to onChange

package/dist/components/SearchInput/SearchInput.test.js

@@ -191,13 +191,13 @@ describe("SearchInput Component", () => {
                         uuid: "1",
                         name: "Option 1",
                         value: "option1",
-                        label: "Option 1",
+                        // label: "Option 1",
                     },
                     {
                         uuid: "2",
                         name: "Option 2",
                         value: "option2",
-                        label: "Option 2",
+                        // label: "Option 2",
                     },
                 ] }));
             // Open dropdown
@@ -222,13 +222,13 @@ describe("SearchInput Component", () => {
                         uuid: "1",
                         name: "Option 1",
                         value: "option1",
-                        label: "Option 1",
+                        // label: "Option 1",
                     },
                     {
                         uuid: "2",
                         name: "Option 2",
                         value: "option2",
-                        label: "Option 2",
+                        // label: "Option 2",
                     },
                 ] }));
             const dropdown = screen.getByText(/Search/i);
@@ -245,13 +245,13 @@ describe("SearchInput Component", () => {
                         uuid: "1",
                         name: "Option 1",
                         value: "option1",
-                        label: "Option 1",
+                        // label: "Option 1",
                     },
                     {
                         uuid: "2",
                         name: "Option 2",
                         value: "option2",
-                        label: "Option 2",
+                        // label: "Option 2",
                     },
                 ] }));
             const dropdown = screen.getByText(/Search/i);
@@ -269,13 +269,13 @@ describe("SearchInput Component", () => {
                         uuid: "1",
                         name: "True",
                         value: "true",
-                        label: "True",
+                        // label: "True",
                     },
                     {
                         uuid: "2",
                         name: "False",
                         value: "false",
-                        label: "False",
+                        // label: "False",
                     },
                 ] }));
             expect(screen.getByText(/Search/i)).toBeInTheDocument();
@@ -286,13 +286,13 @@ describe("SearchInput Component", () => {
                         uuid: "1",
                         name: "True",
                         value: "true",
-                        label: "True",
+                        // label: "True",
                     },
                     {
                         uuid: "2",
                         name: "False",
                         value: "false",
-                        label: "False",
+                        // label: "False",
                     },
                 ] }));
             // Open dropdown
@@ -308,13 +308,13 @@ describe("SearchInput Component", () => {
                         uuid: "1",
                         name: "True",
                         value: "true",
-                        label: "True",
+                        // label: "True",
                     },
                     {
                         uuid: "2",
                         name: "False",
                         value: "false",
-                        label: "False",
+                        // label: "False",
                     },
                 ] }));
             // Open dropdown
@@ -477,10 +477,13 @@ describe("SearchInput Component", () => {
         });
         test("renders selectedStartDate if provided, otherwise shows default text", () => {
             const mockStartDate = new Date(2023, 5, 15); // June 15, 2023
+            // Helper to format date as YYYY-MM-DD
+            const formatDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
             const { rerender } = render(_jsx(SearchInput, { column: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "date", toggleStatus: true, selectedStartDate: null }));
             expect(screen.getByText("Start Date")).toBeInTheDocument();
             rerender(_jsx(SearchInput, { column: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "date", toggleStatus: true, selectedStartDate: mockStartDate }));
-            expect(screen.getByText(mockStartDate.toLocaleDateString())).toBeInTheDocument();
+            // Use the formatted date string
+            expect(screen.getByText(formatDate(mockStartDate))).toBeInTheDocument();
         });
         test("calls onStartDateSelect when a start date is selected", () => {
             render(_jsx(SearchInput, { column: undefined, setSearchCriteria: undefined, ...defaultProps, inputType: "date", toggleStatus: true }));

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

@@ -1,5 +1,10 @@
 import React from "react";
 import { Control } from "react-hook-form";
+export type MixedOption = string | {
+    uuid: string;
+    name: string;
+    value: string;
+};
 export type SearchInputProps<T extends object> = {
     onChange(newSelected: OptionType[]): unknown;
     selectedValue: any[];
@@ -8,7 +13,7 @@ export type SearchInputProps<T extends object> = {
     bgColor?: string;
     textHighlight?: string;
     inputType?: "text" | "number" | "date" | "boolean" | "multiSelect";
-    dropdownOptions?: string[] | OptionType[] | number[];
+    dropdownOptions?: MixedOption[] | number[];
     selectedDropdownOption?: string | OptionType | number;
     onDropdownOptionSelect?: (option: string) => void;
     dropdownIconProp?: searchDropdownIconProps;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -51,7 +51,6 @@ searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEd
                 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]);
                 }
             }

package/dist/components/SearchInput/SearchNumberInput.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import { Input } from "../Input";
 import Dropdown from "../Dropdown/Dropdown";
 import ToggleButton from "../ToggleButton/ToggleButton";
 import BaseButton from "../BaseButton";
 import Text from "../Text";
-import updateLocalStorage from "../../utils/updateLocalStorage";
 const DEFAULT_STORAGE_KEY = "searchCriteria";
 /**
  * A numeric filter component that:
@@ -22,35 +21,41 @@ const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp =
 searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
+    /** Decide if we can store for this column */
     const canStore = !!column?.id && !!setSearchCriteria;
+    /** On mount, read localStorage once => if there's a saved filter => parse & set */
     useEffect(() => {
         if (!canStore)
             return;
+        // Make sure this runs only once
         const stored = localStorage.getItem(localStorageKey);
         if (!stored)
             return;
         try {
             const parsed = JSON.parse(stored);
-            const existing = parsed.find((c) => c.searchColumn?.id === column.id);
+            const existing = parsed.find((c) => c.searchColumn?.id === column?.id);
             if (existing) {
                 const savedString = existing.submittedSearchText;
                 if (savedString && typeof savedString === "string") {
                     if (savedString.includes(" - ")) {
+                        // It's a range: "100 - 200"
                         setToggleStatus?.(true);
                         const [minPart, maxPart] = savedString.split(" - ");
                         setMinValue?.(minPart.trim());
                         setMaxValue?.(maxPart.trim());
                     }
                     else {
+                        // Single e.g. "Exactly 123" or "default 2" or just "2"
                         setToggleStatus?.(false);
                         const segments = savedString.split(" ");
+                        // If the first word is in your dropdown => use it, else treat as pure number
                         if (segments.length > 1 &&
                             dropdownOptions.includes(segments[0])) {
                             onDropdownOptionSelect?.(segments[0]);
                             setMinValue?.(segments[1]);
                         }
                         else {
-                            // no special prefix => assume it's just the number
+                            // no prefix => assume it's just the number
                             setMinValue?.(savedString);
                         }
                     }
@@ -62,13 +67,19 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
         catch (err) {
             console.error("Error reading stored number filter:", err);
         }
+        // empty dependency array => only once on mount
     }, []);
-    // Focus on mount if needed
+    /** Focus on mount if needed */
     useEffect(() => {
         inputRef.current?.focus();
     }, []);
-    /** Build the final string to store. Feel free to tweak logic here. */
-    const buildNumberString = () => {
+    /**
+     * Build the final string to store.
+     *
+     * 1) If toggleStatus => "minValue - maxValue"
+     * 2) If single => skip "default" prefix
+     */
+    const buildNumberString = useCallback(() => {
         if (toggleStatus) {
             // Range mode => "min - max"
             if (minValue && maxValue) {
@@ -85,10 +96,12 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
             }
         }
         else {
-            // Single value mode => e.g. "Exactly 123" or just "123"
-            // If you want "Less Than 123", you might do:
-            if (selectedDropdownOption && minValue) {
-                return `${selectedDropdownOption} ${minValue}`;
+            // Single value mode => e.g. "Exactly 123" or "2"
+            const prefix = selectedDropdownOption?.toLowerCase() === "default"
+                ? "" // if your dropdown used "default" for something
+                : selectedDropdownOption;
+            if (prefix && minValue) {
+                return `${prefix} ${minValue}`;
             }
             else if (minValue) {
                 return minValue; // fallback
@@ -97,16 +110,19 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
                 return "";
             }
         }
-    };
-    /** Called when user clicks "Filter" button at the bottom. */
+    }, [toggleStatus, minValue, maxValue, selectedDropdownOption]);
+    /**
+     * Called when user clicks "Filter" button at the bottom.
+     * We remove or store the built string, then call handleFilter.
+     */
     const handleFilterClick = () => {
         const finalString = buildNumberString().trim();
         if (!finalString) {
-            // If it's empty => remove existing filter for this column
+            // remove existing filter for this column
             if (canStore) {
                 setSearchCriteria?.((prev) => {
-                    const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
-                    updateLocalStorage(newCriteria, localStorageKey);
+                    const newCriteria = prev.filter((c) => c.searchColumn.id !== column?.id);
+                    localStorage.setItem(localStorageKey, JSON.stringify(newCriteria));
                     return newCriteria;
                 });
             }
@@ -118,8 +134,8 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
             }
             if (canStore) {
                 setSearchCriteria?.((prev) => {
-                    // remove old for this column if you want to keep it unique
-                    const filtered = prev.filter((c) => c.searchColumn.id !== column.id);
+                    // remove old for this column if you want only one number filter per column
+                    const filtered = prev.filter((c) => c.searchColumn.id !== column?.id);
                     const newCriteria = [
                         ...filtered,
                         {
@@ -127,7 +143,7 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
                             submittedSearchText: finalString,
                         },
                     ];
-                    updateLocalStorage(newCriteria, localStorageKey);
+                    localStorage.setItem(localStorageKey, JSON.stringify(newCriteria));
                     return newCriteria;
                 });
             }
@@ -137,10 +153,11 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
         // Let the parent know a filter was applied
         handleFilter?.();
     };
-    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"}
+          h-full max-h-11 items-center justify-around`, children: toggleStatus ? (
                     // Range mode
                     _jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 ", placeholder: "Max" })] })) : (
                     // Single value mode
-                    _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2", 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" })] })] }) }));
+                    _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2", 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 SearchNumberInput;

package/package.json

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