@agilant/toga-blox 1.0.47 → 1.0.48

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/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/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;

package/dist/components/SearchInput/SearchInput.stories.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SearchInput from "./SearchInput";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import { useState } from "react";
 export default {
     title: "Components/SearchInput",
@@ -13,10 +12,6 @@ export default {
                 options: ["text", "number", "boolean", "date", "multiSelect"],
             },
         },
-        closeOutSearch: { control: "none", table: { disable: true } },
-        setResetSearch: { control: "none", table: { disable: true } },
-        column: { control: "none", table: { disable: true } },
-        setEditingHeader: { control: "none", table: { disable: true } },
         dropdownIconProp: {
             control: "object",
             description: "Icon configuration for dropdown",
@@ -56,6 +51,10 @@ const Template = (args) => {
     const [minValue, setMinValue] = useState();
     const [maxValue, setMaxValue] = useState();
     const [selectedValue, setSelectedValue] = useState(args.selectedValue || []);
+    // NEW: State for date control
+    const [selectedDate, setSelectedDate] = useState(args.selectedDate);
+    const [selectedStartDate, setSelectedStartDate] = useState(args.selectedStartDate);
+    const [selectedEndDate, setSelectedEndDate] = useState(args.selectedEndDate);
     // Handle onChange from the multi-select
     const handleOnChange = (newSelected) => {
         setSelectedValue(newSelected);
@@ -63,23 +62,25 @@ const Template = (args) => {
         args.onChange?.(newSelected);
         console.log("Selected items:", newSelected);
     };
-    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue }));
+    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue, selectedDate: selectedDate, onDateSelect: setSelectedDate, selectedStartDate: selectedStartDate, onStartDateSelect: setSelectedStartDate, selectedEndDate: selectedEndDate, onEndDateSelect: setSelectedEndDate }));
 };
 export const Default = Template.bind({});
 Default.args = {
     inputType: "text",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
+    dropdownOptions: [
+        "Starts with",
+        "Ends with",
+        "Exactly",
+        "Includes",
+        "Excludes",
+    ],
+    selectedDropdownOption: "Starts with",
 };
 export const TextInput = Template.bind({});
 TextInput.args = {
     inputType: "text",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     pillColor: "bg-sky-500",
     textHighlight: "text-sky-500",
     dropdownIconProp: {
@@ -99,10 +100,7 @@ TextInput.args = {
 export const NumberInput = Template.bind({});
 NumberInput.args = {
     inputType: "number",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     dropdownIconProp: {
         iconClasses: "text-sky-500",
         name: "chevronDown",
@@ -114,67 +112,48 @@ NumberInput.args = {
 export const DropdownInput = Template.bind({});
 DropdownInput.args = {
     inputType: "multiSelect",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     placeholder: "Search",
     dropdownOptions: [
         { uuid: "1", name: "Option 1", value: "option1" },
         { uuid: "2", name: "Option 2", value: "option2" },
         { uuid: "3", name: "Option 3", value: "option3" },
     ],
-    /** For multi-select, `value` is typically an array */
     selectedValue: [],
-    // onChange: (selected: OptionType[]) => {
-    // 	console.log("Selected items:", selected);
-    // },
-    /** Additional props you might want to set */
     isSearchable: true,
     hasSelectAll: true,
     disabled: false,
     isLoading: false,
     type: "multiSelect",
-    // etc...
 };
 export const BooleanInput = Template.bind({});
 BooleanInput.args = {
     inputType: "multiSelect",
-    column: mockColumn,
-    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
-    setResetSearch: () => console.log("Reset search triggered"),
-    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    handleFilter: () => console.log(`Filter applied`),
     placeholder: "Search",
     dropdownOptions: [
         { uuid: "1", name: "True", value: "true" },
         { uuid: "2", name: "False", value: "false" },
     ],
     selectedValue: [],
-    // onChange: (selected: OptionType[]) => {
-    // 	console.log("Selected items:", selected);
-    // },
     isSearchable: true,
     hasSelectAll: true,
     disabled: false,
     isLoading: false,
     type: "multiSelect",
-    // etc...
 };
-export const DisabledInput = Template.bind({});
-DisabledInput.args = {
-    inputType: "text",
-    inputName: "disabledInput",
-    hasPlaceholder: true,
-    placeholder: "Disabled...",
-    inputTextSize: "text-sm",
-    inputShape: "rounded",
-    backgroundColor: "bg-gray-200",
-    inputWidth: "w-72",
-    inputBorderClasses: "border border-gray-400 cursor-not-allowed",
-    buttonText: _jsx("span", { children: "Disabled" }),
-    buttonClasses: "bg-gray-500 text-gray-300 px-4 py-2 rounded",
-    buttonIcon: getFontAwesomeIcon("ban"),
-    buttonIconClasses: "text-gray-400",
-    containerClasses: "flex items-center",
-    onButtonClick: () => alert("Button is disabled."),
+export const DatePickerInput = Template.bind({});
+DatePickerInput.args = {
+    inputType: "date",
+    handleFilter: () => console.log(`Filter applied`),
+    textHighlight: "text-sky-500",
+    dropdownOptions: ["Exactly", "Before", "After"],
+    selectedDropdownOption: "Exactly",
+    onDropdownOptionSelect: (option) => console.log(`Option selected: ${option}`),
+    searchItems: [],
+    setSearchItems: () => { },
+    toggleStatus: false,
+    setToggleStatus: () => { },
+    themeBgColor: "bg-sky-500",
+    lightThemeBg: "bg-sky-100",
 };

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

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

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;

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

@@ -1,31 +1,19 @@
-import { Accessor } from "react-table";
 import React from "react";
-import { ColumnInstance } from "react-table";
 import { searchDropdownIconProps } from "./SearchInput.types";
-type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
-    accessor?: string | number | symbol | Accessor<T>;
-};
 type SearchNumberInputProps<T extends object> = {
-    closeOutSearch: (value: number | null) => void;
-    setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
-    columHeader?: any;
-    parentIndex?: number;
     pillColor?: string;
     textHighlight?: string;
-    column: ColumnWithAccessor<T>;
-    setEditingHeader: (value: number | null) => void;
     dropdownOptions?: string[];
     selectedDropdownOption?: string;
     onDropdownOptionSelect?: (option: string) => void;
     dropdownIconProp?: searchDropdownIconProps;
-    searchItems?: string[];
-    setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
     toggleStatus?: boolean;
     setToggleStatus?: React.Dispatch<React.SetStateAction<boolean>>;
     minValue?: string;
     setMinValue?: React.Dispatch<React.SetStateAction<string>>;
     maxValue?: string;
     setMaxValue?: React.Dispatch<React.SetStateAction<string>>;
+    handleFilter?: () => void;
 };
-declare const SearchNumberInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, textHighlight, column, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -5,11 +5,11 @@ import Dropdown from "../Dropdown/Dropdown";
 import ToggleButton from "../ToggleButton/ToggleButton";
 import BaseButton from "../BaseButton";
 import Text from "../Text";
-const SearchNumberInput = ({ closeOutSearch, setResetSearch, setEditingHeader, textHighlight = "text-sky-500", column, dropdownIconProp = {
+const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp = {
     iconClasses: textHighlight,
     name: "chevronDown",
     weight: "solid",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     // Focus the input when editing starts (if needed)
@@ -22,39 +22,20 @@ const SearchNumberInput = ({ closeOutSearch, setResetSearch, setEditingHeader, t
     const handleMaximumInputChange = (event) => {
         setMaxValue(event.target.value);
     };
-    const handleSubmitClick = () => {
-        let safeHeader;
-        if (typeof column.Header === "string") {
-            safeHeader = column.Header;
-        }
-        else {
-            safeHeader = column.accessor || "Unnamed Column";
-        }
-        if (!minValue) {
-            // Remove criterion if text is empty
-        }
-        else {
-            // Update or add criterion
-        }
-        setEditingHeader(null);
-    };
-    const handleIconClick = (item) => {
-        // Remove criterion
-        const filteredItems = searchItems.filter((ele) => ele !== item);
-        setSearchItems(filteredItems);
-        setResetSearch((prevResetSearch) => !prevResetSearch);
-        closeOutSearch(null);
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter") {
-            e.preventDefault();
-            // setSearchItems([...searchItems, localSearchText]);
-            // setLocalSearchText("");
-            handleSubmitClick();
-        }
-    };
-    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: `flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md`, children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 border-r-2 w-auto", icon: dropdownIconProp }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[200px] h-10 text-gray flex ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2 rounded-md ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
+    // const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // 	console.log("Key Pressed:", e.key);
+    // 	if (e.key === "Enter") {
+    // 		e.preventDefault();
+    // 	}
+    // };
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: `flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md`, children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", 
+                                // onKeyDown={handleKeyDown}
+                                required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", 
+                                // onKeyDown={handleKeyDown}
+                                required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", 
+                                // onKeyDown={handleKeyDown}
+                                required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2 rounded-md ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
                                 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" })] })] }) }));
+                            }, activeColorBackground: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: "Filter", backgroundColor: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilter, shape: "rounded-full" })] })] }) }));
 };
 export default SearchNumberInput;

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

@@ -1,24 +1,15 @@
-import { Accessor } from "react-table";
 import React from "react";
-import { ColumnInstance } from "react-table";
 import { searchDropdownIconProps } from "./SearchInput.types";
-type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
-    accessor?: string | number | symbol | Accessor<T>;
-};
 type SearchTextInputProps<T extends object> = {
-    closeOutSearch: (value: number | null) => void;
-    setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
-    columHeader?: any;
     pillColor?: string;
     textHighlight?: string;
-    column: ColumnWithAccessor<T>;
-    setEditingHeader: (value: number | null) => void;
     dropdownIconProp?: searchDropdownIconProps;
     selectedDropdownOption?: string;
     onDropdownOptionSelect?: (option: string) => void;
     dropdownOptions?: string[];
     searchItems?: string[];
     setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
+    handleFilter?: () => void;
 };
-declare const SearchTextInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, pillColor, textHighlight, column, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchTextInput: <T extends object>({ pillColor, textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, handleFilter, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchTextInput;

package/dist/components/SearchInput/SearchTextInput.js

@@ -6,11 +6,11 @@ import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import Dropdown from "../Dropdown/Dropdown";
 import Badge from "../Badge/Badge";
 import Text from "../Text";
-const SearchTextInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pillColor = "bg-sky-500", textHighlight = "text-sky-500", column, dropdownIconProp = {
+const SearchTextInput = ({ pillColor = "bg-sky-500", textHighlight = "text-sky-500", dropdownIconProp = {
     iconClasses: textHighlight,
     name: "chevronDown",
     weight: "solid",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, handleFilter, }) => {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
@@ -21,45 +21,26 @@ const SearchTextInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pil
     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);
-    };
     const handleIconClick = (item) => {
         // Remove criterion
         const filteredItems = searchItems.filter((ele) => ele !== item);
         setSearchItems(filteredItems);
-        setResetSearch((prevResetSearch) => !prevResetSearch);
-        closeOutSearch(null);
     };
     const handleKeyDown = (e) => {
         if (e.key === "Enter") {
             e.preventDefault();
             setSearchItems([...searchItems, localSearchText]);
             setLocalSearchText("");
-            handleSubmitClick();
+            handleFilter();
         }
     };
     const pillClassnames = `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4`;
     return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: " min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => {
                                                     setLocalSearchText("");
-                                                }, children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => {
+                                                }, "data-testid": "clear-icon", children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => {
                                 setLocalSearchText("");
                             } })] }), searchItems?.length ? (_jsx("div", { className: " flex bg-white py-2 px-2 rounded-md ", children: searchItems?.map((item, index) => {
-                        return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasMobileStyle: true, hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleIconClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: pillClassnames, type: "span" }));
+                        return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasMobileStyle: true, hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", "data-testid": "item-clear-icon", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleIconClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: pillClassnames, type: "span" }));
                     }) })) : null] }) }));
 };
 export default SearchTextInput;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.47",
+	"version": "1.0.48",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -34,6 +34,7 @@
 		"framer-motion": "^11.0.8",
 		"nouislider": "^15.8.1",
 		"react": "^18.2.0",
+		"react-day-picker": "^9.5.1",
 		"react-dom": "^18.2.0",
 		"react-multi-select-component": "^4.3.4",
 		"react-router-dom": "^6.16.0",