@agilant/toga-blox 1.0.46 → 1.0.48

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.46",
+	"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",