@agilant/toga-blox 1.0.32 → 1.0.34

package/dist/components/InputAndCheck/InputAndCheck.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/InputAndCheck/InputAndCheck.tsx
+import { useEffect, useRef, useState } from "react";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import Badge from "../Badge";
+import TableHeaderInput from "../TableHeaderInput";
+/**
+ * Renders an input field for column-based searching,
+ * maintaining local text and updating searchCriteria on submit.
+ */
+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("");
+    // On mount/update, see if we already have a search criterion for this column
+    useEffect(() => {
+        const existing = searchCriteria.find((criterion) => criterion.searchColumn.id === column.id);
+        if (existing) {
+            setLocalSearchText(existing.submittedSearchText);
+        }
+        else {
+            setLocalSearchText("");
+        }
+    }, [searchCriteria, column.id]);
+    // Update local text as user types
+    const handleInputChange = (e) => {
+        setLocalSearchText(e.target.value);
+    };
+    // Submit the final text to searchCriteria
+    const handleSubmit = () => {
+        const trimmed = localSearchText.trim();
+        if (!trimmed) {
+            // Clear from search criteria if empty
+            setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
+        }
+        else {
+            // Insert or update existing
+            setSearchCriteria((prev) => {
+                const existingIndex = prev.findIndex((c) => c.searchColumn.id === column.id);
+                if (existingIndex >= 0) {
+                    const updated = [...prev];
+                    updated[existingIndex] = {
+                        searchColumn: column,
+                        submittedSearchText: trimmed,
+                    };
+                    return updated;
+                }
+                else {
+                    return [
+                        ...prev,
+                        { searchColumn: column, submittedSearchText: trimmed },
+                    ];
+                }
+            });
+        }
+        // Close out
+        setEditingHeader(null);
+    };
+    // Clears search from parent's state
+    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();
+            handleSubmit();
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, className: "relative", "data-testid": "icon-search-regular", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon, initialIcon.weight) })) : undefined, iconPosition: "both", secondIcon: localSearchText !== "" && (_jsx("div", { className: secondIconClasses, onClick: handleClearSearch, children: getFontAwesomeIcon(cancelIcon.icon, cancelIcon.weight) })) }) }), localSearchText && (_jsx("div", { className: "bg-white flex flex-start px-2", children: _jsx(Badge, { text: localSearchText, type: "span", cursorPointer: true, onClick: handleClearSearch, hasRightIcon: true, backgroundColor: badgeColor, badgeContainerClasses: iconBadgeContainerClasses, icon: getFontAwesomeIcon(badgeIcon.icon, badgeIcon.weight) }) }))] }), localSearchText && (_jsx("div", { onClick: handleSubmit, className: searchIconClasses, children: getFontAwesomeIcon(searchIcon.icon, searchIcon.weight) }))] }));
+}
+export default InputAndCheck;

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

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+/**
+ * Default export for Storybook.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const WithInitialSearch: any;
+export declare const UpdateLocalStorage: any;

package/dist/components/InputAndCheck/InputAndCheck.stories.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// InputAndCheck.stories.tsx
+import { useState, useEffect } from "react";
+import InputAndCheck from "./InputAndCheck";
+/**
+ * Mock column from react-table.
+ */
+const mockColumn = {
+    id: "name",
+    // Add other ColumnInstance properties as needed
+};
+/**
+ * Default export for Storybook.
+ */
+export default {
+    title: "Components/InputAndCheck",
+    component: InputAndCheck,
+    tags: ["autodocs"],
+    argTypes: {
+        pillColor: {
+            control: "text",
+            description: "Tailwind class(es) to set the pill background color.",
+            defaultValue: "bg-blue-600",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "bg-blue-600" },
+            },
+        },
+        closeOutSearch: {
+            control: false,
+            description: "Callback triggered when search is closed/cleared.",
+            table: {
+                category: "Callbacks",
+            },
+        },
+        setResetSearch: {
+            control: false,
+            description: "Parent’s setter for toggling reset logic.",
+            table: {
+                category: "Callbacks",
+            },
+        },
+        setEditingHeader: {
+            control: false,
+            description: "Parent’s setter used to toggle input editing mode.",
+            table: {
+                category: "Callbacks",
+            },
+        },
+        column: {
+            control: false,
+            description: "A react-table ColumnInstance for identifying this input.",
+            table: {
+                category: "Data",
+            },
+        },
+        searchCriteria: {
+            control: false,
+            description: "Array of existing search criteria for this table.",
+            table: {
+                category: "Data",
+            },
+        },
+        setSearchCriteria: {
+            control: false,
+            description: "Setter to update the parent’s search criteria array.",
+            table: {
+                category: "Callbacks",
+            },
+        },
+    },
+};
+/**
+ * ----------------------------------------------------------------------------
+ * BASIC TEMPLATE WITH LOCAL STORAGE SYNC
+ * ----------------------------------------------------------------------------
+ */
+const Template = (args) => {
+    const storageKey = "storybook-inputandcheck-search-criteria";
+    // Initialize searchCriteria from localStorage
+    const [searchCriteria, setSearchCriteria] = useState(() => {
+        try {
+            const saved = window.localStorage.getItem(storageKey);
+            return saved ? JSON.parse(saved) : [];
+        }
+        catch (error) {
+            console.error("Failed to parse search criteria from localStorage:", error);
+            return [];
+        }
+    });
+    const [resetSearch, setResetSearch] = useState(false);
+    const [editingHeader, setEditingHeader] = useState(null);
+    // Sync searchCriteria to localStorage
+    useEffect(() => {
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify(searchCriteria));
+        }
+        catch (error) {
+            console.error("Failed to save search criteria to localStorage:", error);
+        }
+    }, [searchCriteria, storageKey]);
+    // Optionally, clear localStorage when the story unmounts to prevent side effects
+    useEffect(() => {
+        return () => {
+            window.localStorage.removeItem(storageKey);
+        };
+    }, [storageKey]);
+    const handleCloseOutSearch = (val) => {
+        console.log("closeOutSearch called with:", val);
+        // Implement any additional logic here
+    };
+    return (_jsxs("div", { style: { width: 300 }, children: [_jsx(InputAndCheck, { ...args, closeOutSearch: handleCloseOutSearch, setResetSearch: setResetSearch, setEditingHeader: setEditingHeader, column: mockColumn, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria }), _jsxs("div", { style: { marginTop: 10 }, children: [_jsx("strong", { children: "Current State:" }), _jsxs("pre", { children: ["searchCriteria: ", JSON.stringify(searchCriteria, null, 2)] }), _jsxs("p", { children: ["resetSearch: ", String(resetSearch)] }), _jsxs("p", { children: ["editingHeader: ", String(editingHeader)] })] })] }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    pillColor: "bg-blue-600",
+};
+/**
+ * ----------------------------------------------------------------------------
+ * WITH INITIAL SEARCH
+ * ----------------------------------------------------------------------------
+ * Demonstrates having an initial search text for the column.
+ * We'll define a separate template that sets the state up front.
+ */
+const TemplateWithInitialSearch = (args) => {
+    const storageKey = "storybook-inputandcheck-search-criteria-initial";
+    const [searchCriteria, setSearchCriteria] = useState([
+        {
+            searchColumn: mockColumn,
+            submittedSearchText: "Initial text",
+        },
+    ]);
+    const [resetSearch, setResetSearch] = useState(false);
+    const [editingHeader, setEditingHeader] = useState(null);
+    // Sync searchCriteria to localStorage
+    useEffect(() => {
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify(searchCriteria));
+        }
+        catch (error) {
+            console.error("Failed to save search criteria to localStorage:", error);
+        }
+    }, [searchCriteria, storageKey]);
+    // Optionally, clear localStorage when the story unmounts
+    useEffect(() => {
+        return () => {
+            window.localStorage.removeItem(storageKey);
+        };
+    }, [storageKey]);
+    const handleCloseOutSearch = (val) => {
+        console.log("closeOutSearch called with:", val);
+        // Implement any additional logic here
+    };
+    return (_jsxs("div", { style: { width: 300 }, children: [_jsx(InputAndCheck, { ...args, closeOutSearch: handleCloseOutSearch, setResetSearch: setResetSearch, setEditingHeader: setEditingHeader, column: mockColumn, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria }), _jsxs("div", { style: { marginTop: 10 }, children: [_jsx("strong", { children: "Current State:" }), _jsxs("pre", { children: ["searchCriteria: ", JSON.stringify(searchCriteria, null, 2)] }), _jsxs("p", { children: ["resetSearch: ", String(resetSearch)] }), _jsxs("p", { children: ["editingHeader: ", String(editingHeader)] })] })] }));
+};
+export const WithInitialSearch = TemplateWithInitialSearch.bind({});
+WithInitialSearch.args = {
+    pillColor: "bg-blue-600",
+};
+/**
+ * ----------------------------------------------------------------------------
+ * UPDATE LOCAL STORAGE EXAMPLE
+ * ----------------------------------------------------------------------------
+ * Demonstrates updating search criteria and syncing it with localStorage.
+ */
+const TemplateUpdateLocalStorage = (args) => {
+    const storageKey = "storybook-inputandcheck-update-localstorage";
+    // Initialize searchCriteria from localStorage
+    const [searchCriteria, setSearchCriteria] = useState(() => {
+        try {
+            const saved = window.localStorage.getItem(storageKey);
+            return saved ? JSON.parse(saved) : [];
+        }
+        catch (error) {
+            console.error("Failed to parse search criteria from localStorage:", error);
+            return [];
+        }
+    });
+    const [resetSearch, setResetSearch] = useState(false);
+    const [editingHeader, setEditingHeader] = useState(null);
+    // Sync searchCriteria to localStorage
+    useEffect(() => {
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify(searchCriteria));
+        }
+        catch (error) {
+            console.error("Failed to save search criteria to localStorage:", error);
+        }
+    }, [searchCriteria, storageKey]);
+    useEffect(() => {
+        return () => {
+            window.localStorage.removeItem(storageKey);
+        };
+    }, [storageKey]);
+    const handleCloseOutSearch = (val) => {
+        console.log("closeOutSearch called with:", val);
+    };
+    return (_jsxs("div", { style: { width: 300 }, children: [_jsx(InputAndCheck, { ...args, closeOutSearch: handleCloseOutSearch, setResetSearch: setResetSearch, setEditingHeader: setEditingHeader, column: mockColumn, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria }), _jsxs("div", { style: { marginTop: 10 }, children: [_jsx("strong", { children: "Current State:" }), _jsxs("pre", { children: ["searchCriteria: ", JSON.stringify(searchCriteria, null, 2)] }), _jsxs("p", { children: ["resetSearch: ", String(resetSearch)] }), _jsxs("p", { children: ["editingHeader: ", String(editingHeader)] })] })] }));
+};
+export const UpdateLocalStorage = TemplateUpdateLocalStorage.bind({});
+UpdateLocalStorage.storyName = "Update Local Storage (inspect localStorage)";

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

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

package/dist/components/InputAndCheck/InputAndCheck.test.js

@@ -0,0 +1,307 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import InputAndCheck from "./InputAndCheck";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+// Mock the getFontAwesomeIcon utility
+vi.mock("../../utils/getFontAwesomeIcon", () => ({
+    getFontAwesomeIcon: (iconName, style) => (_jsx("span", { "data-testid": `icon-${iconName}-${style}`, children: iconName })),
+}));
+// Mock Badge component
+vi.mock("../Badge", () => ({
+    default: ({ text, onClick }) => (_jsxs("span", { "data-testid": "badge", onClick: onClick, children: [text, _jsx("span", { "data-testid": "badge-clear", children: "x" })] })),
+}));
+// Mock TableHeaderInput component
+vi.mock("../TableHeaderInput", () => ({
+    default: ({ value, onChange, onKeyDown, onClick, placeholder, }) => (_jsx("input", { "data-testid": "table-header-input", value: value, onChange: onChange, onKeyDown: onKeyDown, placeholder: placeholder, onClick: onClick })),
+}));
+describe("InputAndCheck Component", () => {
+    // @ts-ignore
+    let mockCloseOutSearch;
+    // @ts-ignore
+    let mockSetResetSearch;
+    // @ts-ignore
+    let mockSetEditingHeader;
+    // @ts-ignore
+    let mockSetSearchCriteria;
+    let mockColumn;
+    beforeEach(() => {
+        // Reset mocks before each test
+        mockCloseOutSearch = vi.fn();
+        mockSetResetSearch = vi.fn();
+        mockSetEditingHeader = vi.fn();
+        mockSetSearchCriteria = vi.fn();
+        mockColumn = {
+            id: "name",
+            // Add other necessary properties if required
+        };
+    });
+    afterEach(() => {
+        vi.resetAllMocks();
+        window.localStorage.clear(); // Clear localStorage after each test
+    });
+    it("renders correctly with no initial search criteria", () => {
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: [], setSearchCriteria: mockSetSearchCriteria }));
+        // Check if input is rendered and empty
+        const input = screen.getByTestId("table-header-input");
+        expect(input).toBeInTheDocument();
+        expect(input.value).toBe("");
+        // Check that badge is not rendered
+        const badge = screen.queryByTestId("badge");
+        expect(badge).not.toBeInTheDocument();
+        // Check that the first icon (search icon) is rendered
+        const searchIcon = screen.getByTestId("icon-search-regular");
+        expect(searchIcon).toBeInTheDocument();
+    });
+    it("renders correctly with initial search criteria", () => {
+        const initialCriteria = [
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Initial search",
+            },
+        ];
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: initialCriteria, setSearchCriteria: mockSetSearchCriteria }));
+        // Check if input has the initial search text
+        const input = screen.getByTestId("table-header-input");
+        expect(input.value).toBe("Initial search");
+        // Check that badge is rendered with the initial search text
+        const badge = screen.getByTestId("badge");
+        expect(badge).toBeInTheDocument();
+        expect(badge).toHaveTextContent("Initial search");
+        // Check that the badge's clear button is rendered
+        const badgeClear = screen.getByTestId("badge-clear");
+        expect(badgeClear).toBeInTheDocument();
+    });
+    it("updates localSearchText when searchCriteria prop changes", () => {
+        const { rerender } = render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: [], setSearchCriteria: mockSetSearchCriteria }));
+        const input = screen.getByTestId("table-header-input");
+        expect(input.value).toBe("");
+        // Update searchCriteria prop
+        const updatedCriteria = [
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Updated search",
+            },
+        ];
+        rerender(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: updatedCriteria, setSearchCriteria: mockSetSearchCriteria }));
+        // Check if input value updated
+        expect(input.value).toBe("Updated search");
+        // Check that badge is rendered
+        const badge = screen.getByTestId("badge");
+        expect(badge).toBeInTheDocument();
+        expect(badge).toHaveTextContent("Updated search");
+    });
+    it("handles input change correctly", () => {
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: [], setSearchCriteria: mockSetSearchCriteria }));
+        const input = screen.getByTestId("table-header-input");
+        // Simulate typing
+        fireEvent.change(input, { target: { value: "Test search" } });
+        expect(input.value).toBe("Test search");
+        // Verify that badge appears
+        const badge = screen.getByTestId("badge");
+        expect(badge).toBeInTheDocument();
+        expect(badge).toHaveTextContent("Test search");
+    });
+    it("submits search via Enter key", () => {
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: [], setSearchCriteria: mockSetSearchCriteria }));
+        const input = screen.getByTestId("table-header-input");
+        // Simulate typing
+        fireEvent.change(input, { target: { value: "Enter search" } });
+        expect(input.value).toBe("Enter search");
+        // Simulate pressing Enter
+        fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+        // Verify that setSearchCriteria was called to add the new criterion
+        expect(mockSetSearchCriteria).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior
+        const updaterFn = mockSetSearchCriteria.mock.calls[0][0];
+        const newSearchCriteria = updaterFn([]);
+        expect(newSearchCriteria).toEqual([
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Enter search",
+            },
+        ]);
+        // Verify that setEditingHeader was called with null
+        expect(mockSetEditingHeader).toHaveBeenCalledWith(null);
+    });
+    // it("submits search via search icon click", () => {
+    // 	render(
+    // 		<InputAndCheck<MyDataType>
+    // 			closeOutSearch={mockCloseOutSearch}
+    // 			setResetSearch={mockSetResetSearch}
+    // 			setEditingHeader={mockSetEditingHeader}
+    // 			column={mockColumn}
+    // 			searchCriteria={[]}
+    // 			setSearchCriteria={mockSetSearchCriteria}
+    // 		/>
+    // 	);
+    // 	const input = screen.getByTestId(
+    // 		"table-header-input"
+    // 	) as HTMLInputElement;
+    // 	// Simulate typing
+    // 	fireEvent.change(input, { target: { value: "Icon search" } });
+    // 	expect(input.value).toBe("Icon search");
+    // 	// Find the search icon (assuming it's rendered as a span with a data-testid)
+    // 	const searchIcon = screen.getByTestId("icon-search-solid");
+    // 	// Simulate clicking the search icon
+    // 	fireEvent.click(searchIcon);
+    // 	// Verify that setSearchCriteria was called to add the new criterion
+    // 	expect(mockSetSearchCriteria).toHaveBeenCalledWith(
+    // 		expect.any(Function)
+    // 	);
+    // 	// Simulate the updater function behavior
+    // 	const updaterFn = mockSetSearchCriteria.mock.calls[0][0];
+    // 	const newSearchCriteria = updaterFn([]);
+    // 	expect(newSearchCriteria).toEqual([
+    // 		{
+    // 			searchColumn: mockColumn,
+    // 			submittedSearchText: "Icon search",
+    // 		},
+    // 	]);
+    // 	// Verify that setEditingHeader was called with null
+    // 	expect(mockSetEditingHeader).toHaveBeenCalledWith(null);
+    // });
+    it('clears search via "X" icon click', () => {
+        const initialCriteria = [
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Initial search",
+            },
+        ];
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: initialCriteria, setSearchCriteria: mockSetSearchCriteria }));
+        // Check that the badge is rendered
+        const badge = screen.getByTestId("badge");
+        expect(badge).toBeInTheDocument();
+        // Find the badge's clear button
+        const badgeClear = screen.getByTestId("badge-clear");
+        // Simulate clicking the clear button
+        fireEvent.click(badgeClear);
+        // Verify that setSearchCriteria was called to remove the criterion
+        expect(mockSetSearchCriteria).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior
+        const updaterFn = mockSetSearchCriteria.mock.calls[0][0];
+        const newSearchCriteria = updaterFn(initialCriteria);
+        expect(newSearchCriteria).toEqual([]);
+        // Verify that setResetSearch was called
+        expect(mockSetResetSearch).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior for setResetSearch
+        const resetFn = mockSetResetSearch.mock.calls[0][0];
+        const newResetSearch = resetFn(false);
+        expect(newResetSearch).toBe(true);
+        // Verify that closeOutSearch was called with null
+        expect(mockCloseOutSearch).toHaveBeenCalledWith(null);
+    });
+    it("clears search via badge click", () => {
+        const initialCriteria = [
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Badge search",
+            },
+        ];
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: initialCriteria, setSearchCriteria: mockSetSearchCriteria }));
+        // Check that the badge is rendered
+        const badge = screen.getByTestId("badge");
+        expect(badge).toBeInTheDocument();
+        // Simulate clicking the badge to clear the search
+        fireEvent.click(badge);
+        // Verify that setSearchCriteria was called to remove the criterion
+        expect(mockSetSearchCriteria).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior
+        const updaterFn = mockSetSearchCriteria.mock.calls[0][0];
+        const newSearchCriteria = updaterFn(initialCriteria);
+        expect(newSearchCriteria).toEqual([]);
+        // Verify that setResetSearch was called
+        expect(mockSetResetSearch).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior for setResetSearch
+        const resetFn = mockSetResetSearch.mock.calls[0][0];
+        const newResetSearch = resetFn(false);
+        expect(newResetSearch).toBe(true);
+        // Verify that closeOutSearch was called with null
+        expect(mockCloseOutSearch).toHaveBeenCalledWith(null);
+    });
+    it("removes search criterion when submitting empty text", () => {
+        const initialCriteria = [
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Initial search",
+            },
+        ];
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: initialCriteria, setSearchCriteria: mockSetSearchCriteria }));
+        const input = screen.getByTestId("table-header-input");
+        // Simulate clearing the input
+        fireEvent.change(input, { target: { value: "   " } }); // Spaces to trim to empty
+        // Simulate pressing Enter to submit
+        fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+        // Verify that setSearchCriteria was called to remove the criterion
+        expect(mockSetSearchCriteria).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior
+        const updaterFn = mockSetSearchCriteria.mock.calls[0][0];
+        const newSearchCriteria = updaterFn(initialCriteria);
+        expect(newSearchCriteria).toEqual([]);
+        // Verify that setEditingHeader was called with null
+        expect(mockSetEditingHeader).toHaveBeenCalledWith(null);
+    });
+    it("does not add duplicate search criteria", () => {
+        const initialCriteria = [
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Initial search",
+            },
+        ];
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: initialCriteria, setSearchCriteria: mockSetSearchCriteria }));
+        const input = screen.getByTestId("table-header-input");
+        // Simulate changing the input to a new search term
+        fireEvent.change(input, { target: { value: "Updated search" } });
+        expect(input.value).toBe("Updated search");
+        // Simulate pressing Enter to submit
+        fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+        // Verify that setSearchCriteria was called to update the existing criterion
+        expect(mockSetSearchCriteria).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior
+        const updaterFn = mockSetSearchCriteria.mock.calls[0][0];
+        const newSearchCriteria = updaterFn(initialCriteria);
+        expect(newSearchCriteria).toEqual([
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Updated search",
+            },
+        ]);
+    });
+    it("handles multiple search criteria correctly", () => {
+        const anotherColumn = {
+            id: "id",
+            // Add other properties as needed
+        };
+        const initialCriteria = [
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Name search",
+            },
+            {
+                searchColumn: anotherColumn,
+                submittedSearchText: "ID search",
+            },
+        ];
+        render(_jsx(InputAndCheck, { closeOutSearch: mockCloseOutSearch, setResetSearch: mockSetResetSearch, setEditingHeader: mockSetEditingHeader, column: mockColumn, searchCriteria: initialCriteria, setSearchCriteria: mockSetSearchCriteria }));
+        const input = screen.getByTestId("table-header-input");
+        // Simulate changing the input to update the existing criterion
+        fireEvent.change(input, { target: { value: "Updated name search" } });
+        expect(input.value).toBe("Updated name search");
+        // Simulate pressing Enter to submit
+        fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+        // Verify that setSearchCriteria was called to update the existing name search
+        expect(mockSetSearchCriteria).toHaveBeenCalledWith(expect.any(Function));
+        // Simulate the updater function behavior
+        const updaterFn = mockSetSearchCriteria.mock.calls[0][0];
+        const newSearchCriteria = updaterFn(initialCriteria);
+        expect(newSearchCriteria).toEqual([
+            {
+                searchColumn: mockColumn,
+                submittedSearchText: "Updated name search",
+            },
+            {
+                searchColumn: anotherColumn,
+                submittedSearchText: "ID search",
+            },
+        ]);
+    });
+});

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

@@ -0,0 +1,35 @@
+import { ColumnInstance } from "react-table";
+export type SearchCriterion<T extends object> = {
+    searchColumn: ColumnInstance<T>;
+    submittedSearchText: string;
+};
+export type InputAndCheckProps<T extends object> = {
+    closeOutSearch: (value: number | null) => void;
+    setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
+    setEditingHeader: (value: number | null) => void;
+    column: ColumnInstance<T>;
+    searchCriteria: SearchCriterion<T>[];
+    setSearchCriteria: React.Dispatch<React.SetStateAction<SearchCriterion<T>[]>>;
+    badgeColor?: string;
+    badgeIcon?: {
+        icon: string;
+        weight: string;
+    };
+    iconBadgeContainerClasses?: string;
+    searchIcon?: {
+        icon: string;
+        weight: string;
+    };
+    cancelIcon?: {
+        icon: string;
+        weight: string;
+    };
+    initialIcon?: {
+        icon: string;
+        weight: string;
+    };
+    initialIconClasses?: string;
+    searchIconClasses?: string;
+    additionalInputClasses?: string;
+    secondIconClasses?: string;
+};

package/dist/components/InputAndCheck/types.js

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

package/dist/components/MagnifyingIcon/MagnifyingIcon.d.ts

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