@agilant/toga-blox 1.0.46 → 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/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { UseFormRegister } from "react-hook-form";
 interface InputFieldProps {
     label?: string;
     value?: string | number;
@@ -25,6 +26,7 @@ interface InputFieldProps {
     labelClasses?: string;
     disabled?: boolean;
     hasAutoFocus?: boolean;
+    register?: UseFormRegister<any>;
     focusRingColor?: string;
 }
 declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<unknown>>;

package/dist/components/Input/Input.js

@@ -2,9 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState, forwardRef } from "react";
-const InputField = forwardRef(({ label, placeholder, required = false, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, 
-// register,
-focusRingColor = "focus:ring-transparent", }) => {
+const InputField = forwardRef(({ label, placeholder, required = false, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, focusRingColor = "focus:ring-transparent", }) => {
     const [isFocused, setIsFocused] = useState(false);
     const hasValue = value != null && !!value.toString().trim(); // Check if input value has at least one non-space character
     const isNumberInput = type === "number";
@@ -47,17 +45,15 @@ focusRingColor = "focus:ring-transparent", }) => {
                 return null;
         }
     };
-    // const registerProps = register
-    // 	? register(name || "", { required })
-    // 	: {};
+    const registerProps = register
+        ? register(name || "", { required })
+        : {};
     return isReadOnly ? (_jsxs("div", { className: "input-wrapper relative", children: [renderIcons(), _jsxs("label", { htmlFor: id, className: `block font-light text-left mb-1 ${labelClasses} `, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] }), _jsx("div", { className: `
 					 text-left focus:outline-none focus:ring-2 block w-full py-2 px-2 rounded-lg shadow-input outline outline-0 outline-barelyPrimary focus:outline-4 md:w-full lg:w-full xl:w-full
 					${firstIcon ? "pl-10" : ""}
 					${secondIcon ? "pr-10" : ""}
 					${additionalClasses}
-				`, children: readOnlyInfo }), iconPosition === "after" && renderSecondIcon()] })) : (_jsxs(_Fragment, { children: [label && (_jsxs("label", { htmlFor: id, className: ` block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: " input-wrapper relative", children: [renderIcons(), _jsx("input", { autoComplete: "", 
-                        // {...registerProps}
-                        className: `rounded-md focused:ring-0 ${focusRingColor} focus:ring-1
+				`, children: readOnlyInfo }), iconPosition === "after" && renderSecondIcon()] })) : (_jsxs(_Fragment, { children: [label && (_jsxs("label", { htmlFor: id, className: ` block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: " input-wrapper relative", children: [renderIcons(), _jsx("input", { autoComplete: "", ...registerProps, className: `rounded-md focused:ring-0 ${focusRingColor} focus:ring-1
 						 focus:outline-none
 						${disabled
                             ? "border-gray-500 focus:ring-gray-500"

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 {};