@agilant/toga-blox 1.0.48 → 1.0.49

package/dist/components/Badge/Badge.js

@@ -4,6 +4,6 @@ const Badge = ({ borderColor, borderWidth, borderRadius, backgroundColor, hasMob
     const badgeBackgroundClasses = `${backgroundColor}`;
     const badgeBorderClasses = `${borderWidth} ${borderColor} ${borderRadius}`;
     const badgeClasses = `inline-flex items-center ${badgeBorderClasses} ${badgeBackgroundClasses} ${badgeContainerClasses}`;
-    return (_jsxs("span", { onClick: onClick, "data-testid": "badge-test-id", className: badgeClasses, style: styles, children: [image && _jsx("span", { className: "mr-2", children: image }), icon && hasLeftIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden mr-2`, children: icon })), mobileIcon && hasMobileStyle && (_jsx("span", { className: `${iconClasses} hidden max-md:flex max-md:p-0 mr-2`, "aria-hidden": "false", "aria-label": mobileIconLabel, children: mobileIcon })), _jsx("div", { className: `${hasMobileStyle ? "max-md:hidden" : ""}`, children: text }), icon && hasRightIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden ml-2`, children: icon }))] }));
+    return (_jsxs("span", { onClick: onClick, "data-testid": "badge-test-id", className: badgeClasses, style: styles, children: [image && _jsx("span", { className: "mr-2", children: image }), icon && hasLeftIcon && (_jsx("span", { className: `${iconClasses} max-md:hidden mr-2`, children: icon })), mobileIcon && hasMobileStyle && (_jsx("span", { className: `${iconClasses} hidden max-md:flex max-md:p-0 mr-2`, "aria-hidden": "false", "aria-label": mobileIconLabel, children: mobileIcon })), _jsx("div", { className: `${hasMobileStyle ? "max-md:hidden" : ""}`, children: text }), icon && hasRightIcon && (_jsx("span", { className: `${iconClasses} ${hasMobileStyle ? "max-md:hidden" : ""} ml-2`, children: icon }))] }));
 };
 export default Badge;

package/dist/components/HeaderFilterIcon/HeaderFilterIcon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { HeaderFilterIconProps } from "./types";
+declare const HeaderFilterIcon: React.ForwardRefExoticComponent<HeaderFilterIconProps<any> & React.RefAttributes<HTMLDivElement>>;
+export default HeaderFilterIcon;

package/dist/components/HeaderFilterIcon/HeaderFilterIcon.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const HeaderFilterIcon = forwardRef(({ columnIndex, editingHeader, setEditingHeader, setHeaderValue, column, setActiveColumn, iconColor = "text-blue-500", iconActiveColor = "text-green-500", iconActiveBackgroundColor = "bg-red-500", isActive, additionalIconClasses, setSearchText, searchText, isSearchOpen, icon = {
+    icon: "magnifyingGlass",
+    weight: "regular",
+}, }, ref) => {
+    const [showActiveStyles, setShowActiveStyles] = useState(false);
+    useEffect(() => {
+        if (isActive !== undefined) {
+            setShowActiveStyles(isActive);
+        }
+        else {
+            const checkSearchCriteria = () => {
+                const searchCriteriaRaw = localStorage.getItem("searchCriteria");
+                let searchCriteria = [];
+                try {
+                    if (searchCriteriaRaw) {
+                        searchCriteria = JSON.parse(searchCriteriaRaw);
+                    }
+                }
+                catch (e) {
+                    console.error("Failed to parse searchCriteria from localStorage:", e);
+                    searchCriteria = [];
+                }
+                const hasSearchValue = searchCriteria.some((item) => String(item.searchColumn.id) ===
+                    String(column.id) &&
+                    item.submittedSearchText &&
+                    item.submittedSearchText.trim() !== "");
+                setShowActiveStyles(hasSearchValue || editingHeader === columnIndex);
+            };
+            checkSearchCriteria();
+            const handleStorageEvent = () => {
+                checkSearchCriteria();
+            };
+            window.addEventListener("localStorageUpdate", handleStorageEvent);
+            return () => {
+                window.removeEventListener("localStorageUpdate", handleStorageEvent);
+            };
+        }
+    }, [isActive, editingHeader, column.id, columnIndex]);
+    useEffect(() => {
+        if (isSearchOpen) {
+            console.log("Search is open with text:", searchText);
+        }
+    }, [isSearchOpen, searchText]);
+    const handleClick = (event) => {
+        event.stopPropagation();
+        if (!isSearchOpen) {
+            setSearchText?.("");
+        }
+        setEditingHeader(columnIndex);
+        setHeaderValue(column.Header);
+        setActiveColumn(columnIndex);
+    };
+    return (_jsx("div", { ref: ref, "data-testid": "magnifying-icon-test-id", className: `flex items-center cursor-pointer size-[18px] rounded relative ml-1  ${iconColor} ${showActiveStyles
+            ? `${iconActiveBackgroundColor} hover:bg-blue-500 still-active`
+            : "hover:bg-white"}`, onClick: handleClick, children: _jsx("div", { className: `text-xs w-full ${additionalIconClasses} `, children: getFontAwesomeIcon(icon.icon, icon.weight) }) }));
+});
+export default HeaderFilterIcon;

package/dist/components/HeaderFilterIcon/HeaderFilterIcon.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import HeaderFilterIcon from "./HeaderFilterIcon";
+declare const meta: Meta<typeof HeaderFilterIcon>;
+export default meta;
+type Story = StoryObj<typeof HeaderFilterIcon>;
+export declare const Default: Story;
+export declare const WithActiveClass: Story;
+export declare const WithClickAlert: Story;
+export declare const WithMockLocalStorage: Story;

package/dist/components/HeaderFilterIcon/HeaderFilterIcon.stories.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import HeaderFilterIcon from "./HeaderFilterIcon";
+const meta = {
+    title: "Table/HeaderFilterIcon",
+    component: HeaderFilterIcon,
+    tags: ["autodocs"],
+    argTypes: {
+        columnIndex: { control: "number" },
+        editingHeader: { control: "number" },
+        isActive: { control: "boolean" },
+        additionalIconClasses: { control: "text" },
+        icon: { icon: "x", weight: "regular" },
+    },
+    // Add a decorator to wrap all stories in a div
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                padding: "20px",
+                borderRadius: "8px",
+                width: "fit-content",
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const mockColumnInstance = {
+    id: "exampleColumn",
+    Header: "Example Column",
+    isVisible: true,
+    render: () => _jsx("div", { children: "Mock Column" }),
+};
+// Default story (without active class)
+export const Default = {
+    args: {
+        columnIndex: 0,
+        editingHeader: null,
+        setEditingHeader: () => { },
+        setHeaderValue: () => { },
+        additionalIconClasses: "p-4",
+        column: mockColumnInstance,
+        setActiveColumn: () => { },
+        isActive: false,
+    },
+};
+// Story with active class
+export const WithActiveClass = {
+    args: {
+        ...Default.args,
+        isActive: true,
+        additionalIconClasses: "text-green-500",
+        icon: { icon: "x", weight: "regular" },
+    },
+};
+export const WithClickAlert = {
+    args: {
+        ...Default.args,
+        setEditingHeader: (columnIndex) => {
+            alert(`the column index and data have been updated! Column Index =` +
+                columnIndex);
+        },
+    },
+};
+export const WithMockLocalStorage = {
+    args: {
+        ...Default.args,
+    },
+    decorators: [
+        (Story) => {
+            localStorage.setItem("searchCriteria", JSON.stringify([
+                {
+                    searchColumn: { id: "exampleColumn" },
+                    submittedSearchText: "test",
+                },
+            ]));
+            return _jsx(Story, {});
+        },
+    ],
+};

package/dist/components/HeaderFilterIcon/HeaderFilterIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/HeaderFilterIcon/HeaderFilterIcon.test.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import HeaderFilterIcon from "./HeaderFilterIcon";
+describe("HeaderFilterIcon", () => {
+    const mockSetEditingHeader = vi.fn();
+    const mockSetHeaderValue = vi.fn();
+    const mockSetSearchColumn = vi.fn();
+    const mockSetActiveColumnFromSearch = vi.fn();
+    const mockSetActiveColumn = vi.fn();
+    const mockColumn = {
+        id: "exampleColumn",
+        Header: "Example Column",
+        isVisible: true,
+        render: vi.fn(),
+    };
+    const defaultProps = {
+        columnIndex: 2,
+        editingHeader: null,
+        setEditingHeader: mockSetEditingHeader,
+        setHeaderValue: mockSetHeaderValue,
+        column: mockColumn,
+        setSearchColumn: mockSetSearchColumn,
+        setActiveColumnFromSearch: mockSetActiveColumnFromSearch,
+        setActiveColumn: mockSetActiveColumn,
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        localStorage.clear();
+    });
+    it("renders without crashing", () => {
+        render(_jsx(HeaderFilterIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        expect(iconDiv).toBeInTheDocument();
+    });
+    it("calls the appropriate props on click", () => {
+        render(_jsx(HeaderFilterIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        fireEvent.click(iconDiv);
+        // Because setEditingHeader, setHeaderValue, and setActiveColumn
+        // are all called synchronously, we can just do normal expects:
+        expect(mockSetEditingHeader).toHaveBeenCalledWith(2);
+        expect(mockSetHeaderValue).toHaveBeenCalledWith("Example Column");
+        expect(mockSetActiveColumn).toHaveBeenCalledWith(2);
+    });
+    it("applies active styles if localStorage has matching search criteria", () => {
+        const fakeCriteria = [
+            {
+                searchColumn: { id: "exampleColumn" },
+                submittedSearchText: "Hello World",
+            },
+        ];
+        localStorage.setItem("searchCriteria", JSON.stringify(fakeCriteria));
+        render(_jsx(HeaderFilterIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        // Now "active" means we expect "bg-red-500" & "still-active"
+        expect(iconDiv.className).toContain("bg-red-500");
+        expect(iconDiv.className).toContain("still-active");
+        // Optionally also check the hover state:
+        expect(iconDiv.className).toContain("hover:bg-blue-500");
+    });
+    it("doesn't apply active styles if localStorage is empty", () => {
+        render(_jsx(HeaderFilterIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        // Not active => no "bg-red-500"
+        expect(iconDiv.className).not.toContain("bg-red-500");
+        // By default, we see "hover:bg-white"
+        expect(iconDiv.className).toContain("hover:bg-white");
+    });
+    it("applies active styles if the column is being edited (editingHeader === columnIndex)", () => {
+        render(_jsx(HeaderFilterIcon, { ...defaultProps, editingHeader: 2 }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        // Being edited => active => "bg-red-500"
+        expect(iconDiv.className).toContain("bg-red-500");
+        expect(iconDiv.className).toContain("still-active");
+        expect(iconDiv.className).toContain("hover:bg-blue-500");
+    });
+    it("handles invalid JSON in localStorage gracefully", () => {
+        localStorage.setItem("searchCriteria", "{ invalid json }");
+        const spy = vi.spyOn(console, "error").mockImplementation(() => { });
+        render(_jsx(HeaderFilterIcon, { ...defaultProps }));
+        // We expect the parse error to have been caught:
+        expect(spy).toHaveBeenCalled();
+        spy.mockRestore();
+    });
+    it("updates active state when receiving a 'localStorageUpdate' event", async () => {
+        render(_jsx(HeaderFilterIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        expect(iconDiv.className).not.toContain("bg-red-500");
+        // Set localStorage and dispatch the event
+        localStorage.setItem("searchCriteria", JSON.stringify([
+            {
+                searchColumn: { id: "exampleColumn" },
+                submittedSearchText: "some text",
+            },
+        ]));
+        window.dispatchEvent(new Event("localStorageUpdate"));
+        // now wait for the re-render
+        await waitFor(() => {
+            expect(iconDiv.className).toContain("bg-red-500");
+            expect(iconDiv.className).toContain("still-active");
+        });
+    });
+});

package/dist/components/HeaderFilterIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./HeaderFilterIcon";
+export * from "./types";

package/dist/components/HeaderFilterIcon/index.js

@@ -0,0 +1,2 @@
+export { default } from "./HeaderFilterIcon";
+export * from "./types";

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

@@ -0,0 +1,22 @@
+import { ColumnInstance } from "react-table";
+export interface HeaderFilterIconProps<T extends object> {
+    columnIndex: number;
+    editingHeader: number | null;
+    setEditingHeader: (index: number | null) => void;
+    setHeaderValue: (value: string) => void;
+    column: ColumnInstance<T>;
+    setActiveColumn: (index: number) => void;
+    iconColor?: string;
+    iconBackgroundColor?: string;
+    iconActiveColor?: string;
+    iconActiveBackgroundColor?: string;
+    isActive?: boolean;
+    additionalIconClasses?: string;
+    setSearchText?: (text: string) => void;
+    searchText?: string;
+    isSearchOpen?: boolean;
+    icon?: {
+        icon: string;
+        weight: "regular" | "solid" | "light";
+    };
+}

package/dist/components/HeaderFilterIcon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Input/Input.js

@@ -53,7 +53,7 @@ const InputField = forwardRef(({ label, placeholder, required = false, checked,
 					${firstIcon ? "pl-10" : ""}
 					${secondIcon ? "pr-10" : ""}
 					${additionalClasses}
-				`, children: readOnlyInfo }), iconPosition === "after" && renderSecondIcon()] })) : (_jsxs(_Fragment, { children: [label && (_jsxs("label", { htmlFor: id, className: ` block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: " input-wrapper relative", children: [renderIcons(), _jsx("input", { autoComplete: "", ...registerProps, className: `rounded-md focused:ring-0 ${focusRingColor} focus:ring-1
+				`, children: readOnlyInfo }), iconPosition === "after" && renderSecondIcon()] })) : (_jsxs(_Fragment, { children: [label && (_jsxs("label", { htmlFor: id, className: ` block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: " input-wrapper relative", children: [renderIcons(), _jsx("input", { autoComplete: "", ...registerProps, className: `focused:ring-0 ${focusRingColor} focus:ring-1
 						 focus:outline-none
 						${disabled
                             ? "border-gray-500 focus:ring-gray-500"
@@ -62,8 +62,8 @@ const InputField = forwardRef(({ label, placeholder, required = false, checked,
                                 : "border-redText focus:ring-red-500"} block w-full py-2 px-2
 						${firstIcon ? "pl-10" : ""}
 						${secondIcon ? "pr-10" : ""}
-						rounded-lg outline outline-0 outline-barelyPrimary focus:outline-4 md:w-full lg:w-full ${additionalClasses} ${isFocused ? "hover:border-transparent" : ""} ${isFocused && !disabled
+						 outline outline-0 outline-barelyPrimary focus:outline-4 md:w-full lg:w-full ${isFocused ? "hover:border-transparent" : ""} ${isFocused && !disabled
                             ? ` ${isValid ? "" : "shadow-redText"}`
-                            : disabled}`, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, onChange: onChange, checked: type === "checkbox" ? checked : undefined, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue, onKeyDown: onKeyDown }), iconPosition === "after" && renderSecondIcon()] })] }));
+                            : disabled} ${additionalClasses}`, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, onChange: onChange, checked: type === "checkbox" ? checked : undefined, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue, onKeyDown: onKeyDown }), iconPosition === "after" && renderSecondIcon()] })] }));
 });
 export default InputField;

package/dist/components/InputAndCheck/InputAndCheck.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// In your NPM library @agilant/toga-blox/dist/components/InputAndCheck/InputAndCheck
-// EXACTLY as you showed (with Badge, TableHeaderInput, etc.):
 import { useEffect, useRef, useState } from "react";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import Badge from "../Badge";
@@ -8,7 +6,6 @@ import TableHeaderInput from "../TableHeaderInput";
 function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, column, searchCriteria, setSearchCriteria, badgeColor = "bg-blue-400", badgeIcon = { icon: "x", weight: "regular" }, cancelIcon = { icon: "xmark", weight: "regular" }, iconBadgeContainerClasses = "mr-2 rounded-full p-2 text-white cursor-pointer my-2 text-sm", searchIcon = { icon: "search", weight: "regular" }, searchIconClasses = " text-md absolute right-3 top-2 text-gray-400 hover:cursor-pointer hover:text-blue-500 ", additionalInputClasses = "min-w-[300px] max-w-[250px] border-b border-t-0 border-r-0 rounded-tl-none rounded-tr-lg bg-gray-50 text-gray-800 flex", secondIconClasses = "flex absolute right-6 top-0.5 items-center text-gray-400 hover:cursor-pointer hover:text-blue-400", initialIcon = { icon: "search", weight: "regular" }, initialIconClasses = "text-gray-400", }) {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
-    // Load initial text from searchCriteria:
     useEffect(() => {
         const existing = searchCriteria.find((criterion) => criterion.searchColumn.id === column.id);
         if (existing) {
@@ -18,19 +15,15 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
             setLocalSearchText("");
         }
     }, [searchCriteria, column.id]);
-    // Handle changes
     const handleInputChange = (e) => {
         setLocalSearchText(e.target.value);
     };
-    // Submit
     const handleSubmit = () => {
         const trimmed = localSearchText.trim();
         if (!trimmed) {
-            // remove criterion
             setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
         }
         else {
-            // add or update
             setSearchCriteria((prev) => {
                 const existingIndex = prev.findIndex((c) => c.searchColumn.id === column.id);
                 if (existingIndex >= 0) {
@@ -51,14 +44,12 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
         }
         setEditingHeader(null);
     };
-    // Clear
     const handleClearSearch = () => {
         setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
         setLocalSearchText("");
         setResetSearch((prev) => !prev);
         closeOutSearch(null);
     };
-    // Let user press Enter
     const handleKeyDown = (e) => {
         if (e.key === "Enter") {
             e.preventDefault();

package/dist/components/PrimaryTableHeader/PrimaryTableHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useRef, useState, useMemo } from "react";
-import MagnifyingIcon from "../MagnifyingIcon";
+import HeaderFilterIcon from "../HeaderFilterIcon";
 import TableHeaderContent from "../TableHeaderContent/TableHeaderContent";
 import InputAndCheck from "../InputAndCheck/InputAndCheck";
 import SortArrows from "../SortArrows";
@@ -66,7 +66,7 @@ const PrimaryTableHeader = ({ headerGroups, editingHeader, searchText, setSearch
                                             })()] }) }), PortalComponent] })) : (_jsx(TableHeaderContent, { column: updatedColumn })), _jsx("div", { className: "ml-1", children: _jsx(SortArrows, { slug: mappingField || "", parentIndex: parentIndex, isNested: isNested, column: {
                                     ...updatedColumn,
                                     accessor: updatedColumn.id,
-                                }, setSortColumn: setSortColumn, onSortChange: handleSortChange }) }), shouldRenderMagnifyingIcon && (_jsx(MagnifyingIcon, { ref: magnifyingIconRef, column: updatedColumn, editingHeader: editingHeader, columnIndex: columnIndex, setEditingHeader: setEditingHeader, setHeaderValue: setHeaderValue, isActive: activeColumn === columnIndex, setActiveColumn: setActiveColumn, setSearchText: setSearchText, searchText: searchText, isSearchOpen: editingHeader !== null }))] })));
+                                }, setSortColumn: setSortColumn, onSortChange: handleSortChange }) }), shouldRenderMagnifyingIcon && (_jsx(HeaderFilterIcon, { ref: magnifyingIconRef, column: updatedColumn, editingHeader: editingHeader, columnIndex: columnIndex, setEditingHeader: setEditingHeader, setHeaderValue: setHeaderValue, isActive: activeColumn === columnIndex, setActiveColumn: setActiveColumn, setSearchText: setSearchText, searchText: searchText, isSearchOpen: editingHeader !== null }))] })));
         })))) }));
 };
 export default PrimaryTableHeader;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -30,11 +30,11 @@ const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp =
     // };
     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 ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", 
                                 // onKeyDown={handleKeyDown}
-                                required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", 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: handleInputChange, 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", 
                                 // onKeyDown={handleKeyDown}
-                                required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_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, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", 
+                                required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 focus:border- ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_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, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", 
                                 // onKeyDown={handleKeyDown}
-                                required: false, id: "", name: "", type: "number", onChange: handleInputChange, 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 rounded-md ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
+                                required: false, id: "", name: "", type: "number", onChange: handleInputChange, 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: handleFilter, shape: "rounded-full" })] })] }) }));
 };

package/dist/components/SearchInput/SearchTextInput.js

@@ -27,20 +27,20 @@ const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-5
         setSearchItems(filteredItems);
     };
     const handleKeyDown = (e) => {
-        if (e.key === "Enter") {
+        if (e.key === "Enter" && localSearchText.length > 0) {
             e.preventDefault();
             setSearchItems([...searchItems, localSearchText]);
             setLocalSearchText("");
             handleFilter();
         }
     };
-    const pillClassnames = `${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`;
+    const pillClassnames = `${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`;
     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, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", 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", 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 bg-white py-2 px-2 rounded-md ", children: searchItems?.map((item, index) => {
-                        return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasMobileStyle: true, 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: () => handleIconClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: pillClassnames, type: "span" }));
+                            } })] }), searchItems?.length ? (_jsx("div", { className: " flex flex-wrap bg-white py-2 px-2 rounded-md ", children: searchItems?.map((item, index) => {
+                        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: () => handleIconClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: pillClassnames, type: "span" }));
                     }) })) : null] }) }));
 };
 export default SearchTextInput;

package/package.json

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