@agilant/toga-blox 1.0.47 → 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/Dropdown/Dropdown.js

@@ -9,7 +9,7 @@ const Dropdown = ({ options, selectedOption, onOptionSelect, optionClasses = "fl
 }, selectedOptionBgColor = "bg-gray-50", optionHoverBgColor = "hover:bg-gray-50", }) => {
     const [showMenu, setShowMenu] = useState(false);
     const toggleMenu = () => setShowMenu(!showMenu);
-    return (_jsxs("div", { className: `flex items-center justify-between relative min-w-32 border-2 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full `, children: [_jsx("div", { className: `font-bold ${optionClasses}`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, children: _jsx("span", { children: getFontAwesomeIcon(icon.name) }) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((action) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b ${action === selectedOption
+    return (_jsxs("div", { className: `flex items-center justify-between relative min-w-32 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full `, children: [_jsx("div", { className: `font-bold ${optionClasses}`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, "data-testid": "dropdown-icon", children: getFontAwesomeIcon(icon.name) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((action) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b ${action === selectedOption
                                 ? `{${selectedOptionBgColor} font-semibold}`
                                 : `${optionHoverBgColor} text-black`}`, onClick: () => {
                                 onOptionSelect(action);

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/MagnifyingIcon/MagnifyingIcon.js

@@ -53,6 +53,6 @@ const MagnifyingIcon = forwardRef(({ columnIndex, editingHeader, setEditingHeade
     };
     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} ${showActiveStyles ? "text-white" : iconActiveColor}`, children: getFontAwesomeIcon("magnifyingGlass", "solid") }) }));
+            : "hover:bg-white"}`, onClick: handleClick, children: _jsx("div", { className: `text-xs w-full ${additionalIconClasses} `, children: getFontAwesomeIcon("magnifyingGlass", "solid") }) }));
 });
 export default MagnifyingIcon;

package/dist/components/MagnifyingIcon/MagnifyingIcon.stories.js

@@ -44,6 +44,7 @@ export const WithActiveClass = {
     args: {
         ...Default.args,
         isActive: true,
+        additionalIconClasses: "text-green-500",
     },
 };
 export const WithClickAlert = {

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/SearchDropdownInput.d.ts

@@ -11,6 +11,7 @@ interface SearchDropdownInputProps {
     bgColor?: string;
     textHighlight?: string;
     [key: string]: any;
+    handleFilter?: () => void;
 }
 /**
  * A wrapper around MultiSelectInput that appends a special "__footer__" option

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -5,7 +5,7 @@ import "./SearchDrowpdown.scss";
  * A wrapper around MultiSelectInput that appends a special "__footer__" option
  * and uses a custom item renderer to display "Clear" and "Filter" buttons.
  */
-const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select...", disabled = false, hasSelectAll = true, bgColor, textHighlight, ...rest }) => {
+const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select", disabled = false, hasSelectAll = true, bgColor, textHighlight, handleFilter, ...rest }) => {
     const footerOption = [{ name: "", value: "__footer__" }];
     const extendedOptions = [...options, ...footerOption];
     const itemRenderer = ({ option, checked, disabled, onClick }) => {
@@ -16,8 +16,7 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
                             onChange([]); // Clear all selections
                         }, children: "Clear" }), _jsx("button", { type: "button", className: `${bgColor} text-white px-3 py-1 rounded`, onClick: (e) => {
                             e.stopPropagation();
-                            console.log("Filter clicked!", selectedValue);
-                            // ...your custom filter logic
+                            handleFilter();
                         }, children: "Filter" })] }));
         }
         else if (option.label === "Select All") {

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

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, bgColor, textHighlight, column, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, onChange, selectedValue, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ bgColor, textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -1,71 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import SearchTextInput from "./SearchTextInput";
 import SearchNumberInput from "./SearchNumberInput";
-import { Controller } from "react-hook-form";
 import SearchDropdownInput from "./SearchDropdownInput";
-// A simple helper function for default values
-function getDefaultValue(dynamicDefaultValue, valueKey) {
-    if (typeof dynamicDefaultValue !== "undefined") {
-        return dynamicDefaultValue;
-    }
-    return "";
-}
-const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, bgColor = "bg-sky-500", textHighlight = "text-sky-500", column, inputType = "text", dropdownIconProp = {
+import SearchDatePickerInput from "./SearchInputDatePicker";
+const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", inputType = "text", dropdownIconProp = {
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, onChange, selectedValue, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, }) => {
     const containerRef = useRef(null);
-    const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
     useEffect(() => {
         inputRef.current?.focus();
     }, []);
-    const handleInputChange = (event) => {
-        setLocalSearchText(event.target.value);
-    };
-    const handleSubmitClick = () => {
-        const trimmedSearchText = localSearchText.trim();
-        let safeHeader;
-        if (typeof column.Header === "string") {
-            safeHeader = column.Header;
-        }
-        else {
-            safeHeader = column.accessor || "Unnamed Column";
-        }
-        if (trimmedSearchText === "") {
-            // Remove criterion if text is empty
-        }
-        else {
-            // Update or add criterion
-        }
-        setEditingHeader(null);
-    };
     return (_jsx("div", { ref: containerRef, className: "", children: (() => {
             switch (inputType) {
                 case "text":
-                    return (_jsx(SearchTextInput, { closeOutSearch: () => { }, setResetSearch: () => { }, setEditingHeader: () => { }, column: undefined, dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems }));
+                    return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter }));
                 case "number":
-                    return (_jsx(SearchNumberInput, { closeOutSearch: () => { }, setResetSearch: () => { }, setEditingHeader: () => { }, column: undefined, dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue }));
+                    return (_jsx(SearchNumberInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, handleFilter: handleFilter }));
                 case "multiSelect":
-                    {
-                        console.log(dropdownOptions, "dropdownOptions");
-                    }
-                    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 }));
-                case "boolean":
+                    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":
-                    // Make sure control & valueKey exist before using them
-                    if (!control || !valueKey) {
-                        return (_jsxs("div", { className: "text-red-500", children: ["Missing ", _jsx("code", { children: "control" }), " or", " ", _jsx("code", { children: "valueKey" }), " prop for React Hook Form"] }));
-                    }
-                    return (_jsx(Controller, { name: valueKey, control: control, defaultValue: getDefaultValue(dynamicDefaultValue, valueKey), render: ({ field }) => (_jsx("div", { className: "inline-flex items-center", children: _jsxs("label", { className: "flex items-center cursor-pointer relative", children: [_jsx("input", { type: "checkbox", className: "peer h-5 w-5 cursor-pointer transition-all appearance-none rounded border border-stroke", id: valueKey, checked: !!field.value, onChange: (e) => {
-                                            // You can log the value here:
-                                            console.log("Checkbox changed to:", e.target.checked);
-                                            field.onChange(e.target.checked);
-                                        } }), _jsx("span", { className: "absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.5 w-3.5", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] }) })) }));
-                default:
-                    return null;
+                    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 }));
             }
         })() }));
 };

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

@@ -6,4 +6,4 @@ export declare const TextInput: any;
 export declare const NumberInput: any;
 export declare const DropdownInput: any;
 export declare const BooleanInput: any;
-export declare const DisabledInput: any;
+export declare const DatePickerInput: any;