@agilant/toga-blox 1.0.47 → 1.0.49

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

@@ -0,0 +1,519 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import SearchInput from "./SearchInput";
+const mockOnDropdownOptionSelect = vi.fn();
+const mockSetSearchItems = vi.fn();
+const mockSetToggleStatus = vi.fn();
+const mockSetMinValue = vi.fn();
+const mockSetMaxValue = vi.fn();
+const mockOnDateSelect = vi.fn();
+const mockOnStartDateSelect = vi.fn();
+const mockOnEndDateSelect = vi.fn();
+const mockOnChange = vi.fn();
+const mockHandleIconClick = vi.fn();
+const mockHandleFilter = vi.fn();
+const defaultProps = {
+    handleFilter: mockHandleFilter,
+    inputType: "text",
+    dropdownOptions: ["Option 1", "Option 2"],
+    selectedDropdownOption: "Option 1",
+    onDropdownOptionSelect: mockOnDropdownOptionSelect,
+    searchItems: [],
+    setSearchItems: mockSetSearchItems,
+    toggleStatus: false,
+    setToggleStatus: mockSetToggleStatus,
+    minValue: "",
+    maxValue: "",
+    setMinValue: mockSetMinValue,
+    setMaxValue: mockSetMaxValue,
+    selectedDate: null,
+    onDateSelect: mockOnDateSelect,
+    selectedStartDate: null,
+    onStartDateSelect: mockOnStartDateSelect,
+    selectedEndDate: null,
+    onEndDateSelect: mockOnEndDateSelect,
+    onChange: mockOnChange,
+    selectedValue: [],
+    value: [],
+    handleIconClick: mockHandleIconClick,
+};
+describe("SearchInput Component", () => {
+    describe("Text Input", () => {
+        test("renders search input field", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            expect(screen.getByPlaceholderText("Search")).toBeInTheDocument();
+        });
+        test("updates input value on change", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            const input = screen.getByPlaceholderText("Search");
+            fireEvent.change(input, { target: { value: "Test Input" } });
+            expect(input).toHaveValue("Test Input");
+        });
+        test("does not add empty search input to search items on enter press", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            const input = screen.getByPlaceholderText("Search");
+            fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+            expect(mockSetSearchItems).toHaveBeenCalled();
+        });
+        test("adds valid input to search items on enter press", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            const input = screen.getByPlaceholderText("Search");
+            fireEvent.change(input, { target: { value: "New Search" } });
+            fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+            expect(mockSetSearchItems).toHaveBeenCalledWith(["New Search"]);
+        });
+        test("clears input when clear icon is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            const input = screen.getByPlaceholderText("Search");
+            fireEvent.change(input, { target: { value: "Clear me" } });
+            const clearIcon = screen.getByTestId("clear-icon");
+            fireEvent.click(clearIcon);
+            expect(input).toHaveValue("");
+        });
+        test("removes search criterion when delete icon is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, searchItems: ["Test Item"] }));
+            fireEvent.click(screen.getByText("Test Item")); // Assuming clicking the item removes it
+            expect(mockSetSearchItems).toHaveBeenCalledWith([]);
+        });
+        test("renders dropdown with options", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            const dropdownTrigger = screen.getByText("Option 1"); // Default selected option
+            fireEvent.click(dropdownTrigger);
+            expect(screen.getByText("Option 2")).toBeInTheDocument();
+        });
+        test("calls dropdown selection handler when an option is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            const dropdownTrigger = screen.getByText("Option 1");
+            fireEvent.click(dropdownTrigger);
+            const option = screen.getByText("Option 2");
+            expect(option).toBeInTheDocument();
+            fireEvent.click(option);
+            expect(mockOnDropdownOptionSelect).toHaveBeenCalledWith("Option 2");
+        });
+        test("handles multiple items in search field", () => {
+            render(_jsx(SearchInput, { ...defaultProps, searchItems: ["Item 1", "Item 2"] }));
+            expect(screen.getByText("Item 1")).toBeInTheDocument();
+            expect(screen.getByText("Item 2")).toBeInTheDocument();
+        });
+        test("removes individual search item when close icon is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, searchItems: ["Item 1", "Item 2"] }));
+            const item1 = screen.getByText("Item 1");
+            fireEvent.click(item1);
+            expect(mockSetSearchItems).toHaveBeenCalledWith(["Item 2"]);
+        });
+        test("clears all search items when clicking on clear button", () => {
+            render(_jsx(SearchInput, { ...defaultProps, searchItems: ["Item 1", "Item 2"] }));
+            const clearIcons = screen.getAllByTestId("item-clear-icon");
+            expect(clearIcons).toHaveLength(2);
+            clearIcons.forEach((icon) => fireEvent.click(icon));
+            expect(mockSetSearchItems).toHaveBeenCalled();
+        });
+        test("renders a different dropdown icon when dropdownIconProp is provided", () => {
+            render(_jsx(SearchInput, { ...defaultProps, dropdownIconProp: {
+                    iconClasses: "text-red-500",
+                    name: "arrowDown",
+                    weight: "bold",
+                } }));
+            const dropdownIconContainer = screen.getByTestId("dropdown-icon");
+            expect(dropdownIconContainer).toHaveClass("text-red-500");
+            console.log(dropdownIconContainer.classList);
+        });
+        test("does not add input text to search items when non-Enter key is pressed", () => {
+            render(_jsx(SearchInput, { ...defaultProps }));
+            const input = screen.getByPlaceholderText("Search");
+            fireEvent.change(input, { target: { value: "Test Input" } });
+            const initialCallCount = mockSetSearchItems.mock.calls.length;
+            fireEvent.keyDown(input, { key: "Escape", code: "Escape" });
+            expect(mockSetSearchItems.mock.calls.length).toBe(initialCallCount);
+            expect(input).toHaveValue("Test Input");
+        });
+    });
+    describe("Number Input", () => {
+        test("renders number input fields", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number" }));
+            expect(screen.getByPlaceholderText("Amount")).toBeInTheDocument();
+        });
+        test("shows min and max fields only when toggle is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number", toggleStatus: false }));
+            const toggleCheckbox = screen.getByRole("checkbox");
+            expect(toggleCheckbox).toBeInTheDocument();
+            fireEvent.click(toggleCheckbox);
+            expect(mockSetToggleStatus).toHaveBeenCalledWith(true);
+            // Re-render the component with the updated state
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number", toggleStatus: true }));
+            expect(screen.getByPlaceholderText("Min")).toBeInTheDocument();
+            expect(screen.getByPlaceholderText("Max")).toBeInTheDocument();
+        });
+        test("updates min value on change after toggle is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number", toggleStatus: true }));
+            const minInput = screen.getByPlaceholderText("Min");
+            fireEvent.change(minInput, { target: { value: "10" } });
+            expect(mockSetMinValue).toHaveBeenCalledWith("10");
+        });
+        test("updates max value on change after toggle is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number", toggleStatus: true }));
+            const maxInput = screen.getByPlaceholderText("Max");
+            fireEvent.change(maxInput, { target: { value: "100" } });
+            expect(mockSetMaxValue).toHaveBeenCalledWith("100");
+        });
+        test("Filter button should be present", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number" }));
+            const filterButton = screen.getByText("Filter");
+            expect(filterButton).toBeInTheDocument();
+        });
+        test("updates min value on input change", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number", toggleStatus: true }));
+            const minInput = screen.getByPlaceholderText("Min");
+            fireEvent.change(minInput, { target: { value: "25" } });
+            expect(mockSetMinValue).toHaveBeenCalledWith("25");
+        });
+        test("renders a different dropdown icon when dropdownIconProp is provided", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "number", dropdownIconProp: {
+                    iconClasses: "text-red-500",
+                    name: "arrowDown",
+                    weight: "bold",
+                } }));
+            const dropdownIconContainer = screen.getByTestId("dropdown-icon");
+            expect(dropdownIconContainer).toHaveClass("text-red-500");
+        });
+    });
+    describe("Dropdown Input", () => {
+        test("renders dropdown input with placeholder", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect" }));
+            // Ensure the dropdown renders with the placeholder "Search"
+            expect(screen.getByText("Search")).toBeInTheDocument();
+        });
+        test("opens dropdown and selects an option", async () => {
+            const mockOnChange = vi.fn();
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect", onChange: mockOnChange, dropdownOptions: [
+                    {
+                        uuid: "1",
+                        name: "Option 1",
+                        value: "option1",
+                        label: "Option 1",
+                    },
+                    {
+                        uuid: "2",
+                        name: "Option 2",
+                        value: "option2",
+                        label: "Option 2",
+                    },
+                ] }));
+            // Open dropdown
+            const dropdown = screen.getByText(/Search/i);
+            fireEvent.click(dropdown);
+            // Wait for "Select All" option to appear
+            const option = await screen.findByText("Select All");
+            fireEvent.click(option);
+            // Assert that onChange received the correct selection
+            expect(mockOnChange).toHaveBeenCalled();
+        });
+        test("clears all selections when Clear button is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect", selectedValue: [{ name: "Option 1", value: "option1" }] }));
+            const clearButton = screen.getByRole("button", { name: /clear/i });
+            fireEvent.click(clearButton);
+            expect(mockOnChange).toHaveBeenCalledWith([]);
+        });
+        test("Clears when Clear button is clicked", async () => {
+            const mockOnChange = vi.fn();
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect", onChange: mockOnChange, dropdownOptions: [
+                    {
+                        uuid: "1",
+                        name: "Option 1",
+                        value: "option1",
+                        label: "Option 1",
+                    },
+                    {
+                        uuid: "2",
+                        name: "Option 2",
+                        value: "option2",
+                        label: "Option 2",
+                    },
+                ] }));
+            const dropdown = screen.getByText(/Search/i);
+            fireEvent.click(dropdown);
+            const ClearButton = await screen.findByText("Clear");
+            fireEvent.click(ClearButton);
+            expect(mockOnChange).toHaveBeenCalled();
+        });
+        test("calls handleFilter on Filter button click and stops propagation", async () => {
+            const mockHandleFilter = vi.fn();
+            const mockStopPropagation = vi.fn();
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect", handleFilter: mockHandleFilter, dropdownOptions: [
+                    {
+                        uuid: "1",
+                        name: "Option 1",
+                        value: "option1",
+                        label: "Option 1",
+                    },
+                    {
+                        uuid: "2",
+                        name: "Option 2",
+                        value: "option2",
+                        label: "Option 2",
+                    },
+                ] }));
+            const dropdown = screen.getByText(/Search/i);
+            fireEvent.click(dropdown);
+            const ClearButton = await screen.findByText("Filter");
+            fireEvent.click(ClearButton);
+            expect(mockHandleFilter).toHaveBeenCalled();
+        });
+    });
+    describe("Boolean Input", () => {
+        const mockOnChange = vi.fn();
+        test("renders boolean input with placeholder", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect", dropdownOptions: [
+                    {
+                        uuid: "1",
+                        name: "True",
+                        value: "true",
+                        label: "True",
+                    },
+                    {
+                        uuid: "2",
+                        name: "False",
+                        value: "false",
+                        label: "False",
+                    },
+                ] }));
+            expect(screen.getByText(/Search/i)).toBeInTheDocument();
+        });
+        test("opens boolean dropdown and selects an option", async () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect", onChange: mockOnChange, dropdownOptions: [
+                    {
+                        uuid: "1",
+                        name: "True",
+                        value: "true",
+                        label: "True",
+                    },
+                    {
+                        uuid: "2",
+                        name: "False",
+                        value: "false",
+                        label: "False",
+                    },
+                ] }));
+            // Open dropdown
+            const dropdown = screen.getByText(/Search/i);
+            fireEvent.click(dropdown);
+            const option = await screen.findByText("True");
+            fireEvent.click(option);
+            expect(mockOnChange).toHaveBeenCalledWith(expect.arrayContaining([{ name: "True", value: "true" }]));
+        });
+        test("clears all selections when Clear button is clicked", async () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "multiSelect", selectedValue: [{ uuid: "1", name: "True", value: "true" }], onChange: mockOnChange, dropdownOptions: [
+                    {
+                        uuid: "1",
+                        name: "True",
+                        value: "true",
+                        label: "True",
+                    },
+                    {
+                        uuid: "2",
+                        name: "False",
+                        value: "false",
+                        label: "False",
+                    },
+                ] }));
+            // Open dropdown
+            const dropdown = screen.getByText("True");
+            fireEvent.click(dropdown);
+            // Find and click "Clear" button
+            const clearButton = await screen.findByText("Clear");
+            fireEvent.click(clearButton);
+            // Verify clearing of selections
+            expect(mockOnChange).toHaveBeenCalledWith([]);
+        });
+    });
+    describe("DateTimePicker Input", () => {
+        const mockOnDateSelect = vi.fn();
+        const mockOnStartDateSelect = vi.fn();
+        const mockOnEndDateSelect = vi.fn();
+        const mockSetToggleStatus = vi.fn();
+        const mockSetEditingHeader = vi.fn();
+        const mockCloseOutSearch = vi.fn();
+        const mockSetResetSearch = vi.fn();
+        const mockHandleFilter = vi.fn();
+        // Mock scrollIntoView to prevent errors in test execution
+        Element.prototype.scrollIntoView = vi.fn();
+        const defaultProps = {
+            handleFilter: mockHandleFilter,
+            closeOutSearch: mockCloseOutSearch,
+            setResetSearch: mockSetResetSearch,
+            setEditingHeader: mockSetEditingHeader,
+            toggleStatus: false,
+            setToggleStatus: mockSetToggleStatus,
+            selectedDate: null,
+            onDateSelect: mockOnDateSelect,
+            selectedStartDate: null,
+            onStartDateSelect: mockOnStartDateSelect,
+            selectedEndDate: null,
+            onEndDateSelect: mockOnEndDateSelect,
+            dropdownOptions: ["Option 1", "Option 2"],
+            selectedDropdownOption: "Option 1",
+            onDropdownOptionSelect: vi.fn(),
+            onChange: mockOnChange,
+            selectedValue: [],
+            value: [],
+        };
+        test("renders single date picker input inside SearchInput", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            expect(screen.getByText("Select Date")).toBeInTheDocument();
+        });
+        test("opens date picker when input is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            const dateInput = screen.getByText("Select Date");
+            fireEvent.click(dateInput);
+            expect(screen.getByRole("grid")).toBeInTheDocument(); // DayPicker should appear
+        });
+        test("selects a single date from the picker", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            fireEvent.click(screen.getByText("Select Date"));
+            const today = new Date().getDate();
+            fireEvent.click(screen.getByText(today.toString()));
+            expect(mockOnDateSelect).toHaveBeenCalled();
+        });
+        test("renders range date picker inputs when toggle is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            expect(screen.getByText("Start Date")).toBeInTheDocument();
+            expect(screen.getByText("End Date")).toBeInTheDocument();
+        });
+        test("opens start date picker when Start Date is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            const startDateInput = screen.getByText("Start Date");
+            fireEvent.click(startDateInput);
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+        });
+        test("opens end date picker when End Date is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            const endDateInput = screen.getByText("End Date");
+            fireEvent.click(endDateInput);
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+        });
+        test("selects a start date from the picker", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            fireEvent.click(screen.getByText("Start Date"));
+            const today = new Date().getDate();
+            fireEvent.click(screen.getByText(today.toString()));
+            expect(mockOnStartDateSelect).toHaveBeenCalled();
+        });
+        test("selects an end date from the picker", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            fireEvent.click(screen.getByText("End Date"));
+            const tomorrow = new Date();
+            tomorrow.setDate(tomorrow.getDate() + 1);
+            fireEvent.click(screen.getByText(tomorrow.getDate().toString()));
+            expect(mockOnEndDateSelect).toHaveBeenCalled();
+        });
+        test("closes date picker when clicking outside", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            const dateInput = screen.getByText("Select Date");
+            fireEvent.click(dateInput);
+            expect(screen.getByRole("grid")).toBeInTheDocument(); // Calendar is open
+            // Simulate clicking outside
+            fireEvent.mouseDown(document.body);
+            expect(screen.queryByRole("grid")).not.toBeInTheDocument(); // Calendar should be closed
+        });
+        test("calls handleSubmitClick and closes date picker when Filter button is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            fireEvent.click(screen.getByText("Select Date")); // Open the calendar
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+            fireEvent.click(screen.getByText("Filter")); // Click the filter button
+            expect(mockHandleFilter).toHaveBeenCalled();
+            expect(screen.queryByRole("grid")).not.toBeInTheDocument(); // Ensure picker is closed
+        });
+        test("does not close date picker if clicking inside", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            fireEvent.click(screen.getByText("Select Date")); // Open the calendar
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+            // Simulate clicking inside
+            fireEvent.mouseDown(screen.getByRole("grid"));
+            expect(screen.getByRole("grid")).toBeInTheDocument(); // Calendar should remain open
+        });
+        test("ensures handleSubmitClick closes the date picker and resets active input", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            fireEvent.click(screen.getByText("Select Date"));
+            expect(screen.getByRole("grid")).toBeInTheDocument();
+            fireEvent.click(screen.getByText("Filter"));
+            expect(mockHandleFilter).toHaveBeenCalled();
+            expect(screen.queryByRole("grid")).not.toBeInTheDocument();
+        });
+        test("ensures clicking on dropdown opens dropdown options", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            const dropdownTrigger = screen.getByText("Option 1");
+            fireEvent.click(dropdownTrigger);
+            expect(screen.getByText("Option 2")).toBeInTheDocument();
+        });
+        test("ensures clicking on an option in dropdown selects it", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            const dropdownTrigger = screen.getByText("Option 1");
+            fireEvent.click(dropdownTrigger);
+            const option = screen.getByText("Option 2");
+            fireEvent.click(option);
+            expect(defaultProps.onDropdownOptionSelect).toHaveBeenCalledWith("Option 2");
+        });
+        test("ensures toggle button switches mode correctly", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            const toggleCheckbox = screen.getByRole("checkbox");
+            fireEvent.click(toggleCheckbox);
+            expect(mockSetToggleStatus).toHaveBeenCalledWith(true);
+        });
+        test("ensures selecting a start and end date updates state", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            fireEvent.click(screen.getByText("Start Date"));
+            fireEvent.click(screen.getByText(new Date().getDate().toString()));
+            expect(mockOnStartDateSelect).toHaveBeenCalled();
+            fireEvent.click(screen.getByText("End Date"));
+            fireEvent.click(screen.getByText(new Date().getDate().toString()));
+            expect(mockOnEndDateSelect).toHaveBeenCalled();
+        });
+        test("toggles range mode when toggle button is clicked", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            const toggleCheckbox = screen.getByRole("checkbox");
+            fireEvent.click(toggleCheckbox);
+            expect(mockSetToggleStatus).toHaveBeenCalledWith(true);
+        });
+        test("renders selectedStartDate if provided, otherwise shows default text", () => {
+            const mockStartDate = new Date(2023, 5, 15); // June 15, 2023
+            const { rerender } = render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true, selectedStartDate: null }));
+            expect(screen.getByText("Start Date")).toBeInTheDocument();
+            rerender(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true, selectedStartDate: mockStartDate }));
+            expect(screen.getByText(mockStartDate.toLocaleDateString())).toBeInTheDocument();
+        });
+        test("calls onStartDateSelect when a start date is selected", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            // Open the Start Date Picker
+            fireEvent.click(screen.getByText("Start Date"));
+            // Pick a date (e.g., today's date)
+            const today = new Date().getDate();
+            fireEvent.click(screen.getByText(today.toString()));
+            // Expect the handler to be called
+            expect(mockOnStartDateSelect).toHaveBeenCalled();
+        });
+        test("calls onEndDateSelect when an end date is selected", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", toggleStatus: true }));
+            // Open the End Date Picker
+            fireEvent.click(screen.getByText("End Date"));
+            const tomorrow = new Date();
+            tomorrow.setDate(tomorrow.getDate() + 1);
+            fireEvent.click(screen.getByText(tomorrow.getDate().toString()));
+            // Expect the handler to be called
+            expect(mockOnEndDateSelect).toHaveBeenCalled();
+        });
+        test("calls onDateSelect when a single date is selected", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date" }));
+            // Open the Date Picker
+            fireEvent.click(screen.getByText("Select Date"));
+            const today = new Date().getDate();
+            fireEvent.click(screen.getByText(today.toString()));
+            // Expect the handler to be called
+            expect(mockOnDateSelect).toHaveBeenCalled();
+        });
+        test("shows placeholder text when no date is selected", () => {
+            render(_jsx(SearchInput, { ...defaultProps, inputType: "date", selectedDate: null }));
+            expect(screen.getByText("Select Date")).toBeInTheDocument();
+        });
+    });
+});

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

@@ -1,22 +1,13 @@
 import React from "react";
 import { Control } from "react-hook-form";
-import { Accessor, ColumnInstance } from "react-table";
-type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
-    accessor?: string | number | symbol | Accessor<T>;
-};
 export type SearchInputProps<T extends object> = {
     onChange(newSelected: OptionType[]): unknown;
     selectedValue: any[];
     value: any[];
-    closeOutSearch: (value: number | null) => void;
-    setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
-    columHeader?: any;
-    column: ColumnWithAccessor<T>;
-    parentIndex?: number;
-    setEditingHeader: (value: number | null) => void;
+    handleFilter: () => void;
     bgColor?: string;
     textHighlight?: string;
-    inputType?: string;
+    inputType?: 'text' | 'number' | 'date' | 'boolean' | 'multiSelect';
     dropdownOptions?: string[] | OptionType[] | number[];
     selectedDropdownOption?: string | OptionType | number;
     onDropdownOptionSelect?: (option: string) => void;
@@ -32,6 +23,12 @@ export type SearchInputProps<T extends object> = {
     control?: Control<any>;
     valueKey?: string;
     dynamicDefaultValue?: any;
+    selectedDate?: Date;
+    onDateSelect?: (date: Date) => void;
+    selectedStartDate?: Date;
+    onStartDateSelect?: (date: Date) => void;
+    selectedEndDate?: Date;
+    onEndDateSelect?: (date: Date) => void;
 };
 export interface OptionType {
     uuid: string;
@@ -44,4 +41,3 @@ export type searchDropdownIconProps = {
     weight: string;
     iconClasses: string;
 };
-export {};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import "react-day-picker/dist/style.css";
+import { searchDropdownIconProps } from "./SearchInput.types";
+type SearchDatePickerInputProps<T extends object> = {
+    textHighlight?: string;
+    dropdownOptions?: string[];
+    selectedDropdownOption?: string;
+    onDropdownOptionSelect?: (option: string) => void;
+    dropdownIconProp?: searchDropdownIconProps;
+    toggleStatus?: boolean;
+    setToggleStatus?: React.Dispatch<React.SetStateAction<boolean>>;
+    themeBgColor?: string;
+    lightThemeBg?: string;
+    selectedDate?: Date;
+    onDateSelect?: (date: Date) => void;
+    selectedStartDate?: Date;
+    onStartDateSelect?: (date: Date) => void;
+    selectedEndDate?: Date;
+    onEndDateSelect?: (date: Date) => void;
+    handleFilter?: () => void;
+};
+declare function SearchDatePickerInput<T extends object>({ textHighlight, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, dropdownIconProp, toggleStatus, setToggleStatus, themeBgColor, lightThemeBg, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import "react-day-picker/dist/style.css";
+import Dropdown from "../Dropdown/Dropdown";
+import ToggleButton from "../ToggleButton/ToggleButton";
+import BaseButton from "../BaseButton";
+function SearchDatePickerInput({ textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, dropdownIconProp = {
+    iconClasses: "text-sky-500",
+    name: "chevronDown",
+    weight: "solid",
+}, toggleStatus = false, setToggleStatus, themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, }) {
+    const containerRef = useRef(null);
+    // Remove internal state for the date values (they come from props)
+    // Internal UI state for showing the calendar and active input remains:
+    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+    const [activeInput, setActiveInput] = useState(null);
+    useEffect(() => {
+        containerRef.current?.scrollIntoView();
+    }, []);
+    // Close calendar(s) when clicking outside the container
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsDatePickerOpen(false);
+                setActiveInput(null);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    // Handler for the Filter button remains similar,
+    // but it now uses the values from props.
+    const handleSubmitClick = () => {
+        // Close the calendar(s) after filtering
+        setIsDatePickerOpen(false);
+        setActiveInput(null);
+        handleFilter();
+    };
+    const modifiersClassNames = {
+        selected: `${themeBgColor} text-white rounded-full`,
+        today: `${lightThemeBg} ${textHighlight}`,
+    };
+    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12", children: toggleStatus ? (
+                // Toggle mode: two separate inputs with a "to" between them
+                _jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: () => setActiveInput("start"), className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedStartDate
+                                ? selectedStartDate.toLocaleDateString()
+                                : "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: () => setActiveInput("end"), className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedEndDate
+                                ? selectedEndDate.toLocaleDateString()
+                                : "End Date" })] })) : (
+                // Non-toggle mode: Dropdown and a single date input
+                _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp }), _jsx("button", { onClick: () => setIsDatePickerOpen((prev) => !prev), className: "border-2 px-3 py-2 flex-[2] h-10 text-left", children: selectedDate
+                                ? selectedDate.toLocaleDateString()
+                                : "Select Date" })] })) }), toggleStatus
+                ? activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: selectedStartDate, onSelect: (date) => {
+                            if (onStartDateSelect)
+                                onStartDateSelect(date);
+                            setActiveInput(null); // close calendar after selection
+                        }, modifiersClassNames: modifiersClassNames })) : (_jsx(DayPicker, { mode: "single", selected: selectedEndDate, onSelect: (date) => {
+                            if (onEndDateSelect)
+                                onEndDateSelect(date);
+                            setActiveInput(null); // close calendar after selection
+                        }, modifiersClassNames: modifiersClassNames })) }))
+                : isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: (date) => {
+                            if (onDateSelect)
+                                onDateSelect(date);
+                        }, modifiersClassNames: modifiersClassNames }) })), _jsxs("div", { className: "flex justify-between items-end bg-white px-2 rounded-md mt-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: "Filter", backgroundColor: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleSubmitClick, shape: "rounded-full" })] })] }));
+}
+export default SearchDatePickerInput;