@agilant/toga-blox 1.0.83 → 1.0.84

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

@@ -2,9 +2,7 @@ import React from "react";
 import { MultiSelectInputProps, OptionType } from "../MultiSelect/MultiSelect.types";
 interface SearchDropdownInputProps {
     options?: OptionType[];
-    /** The currently‐selected items (each has { name, value } ) **/
     selectedValue?: OptionType[];
-    /** Called whenever the selectedValue changes **/
     onChange: (selected: OptionType[]) => void;
     placeholder?: string;
     disabled?: boolean;
@@ -12,22 +10,22 @@ interface SearchDropdownInputProps {
     bgColor?: string;
     textHighlight?: string;
     handleFilter?: () => void;
-    /** The array of “badges” or stored strings for this particular column’s filter(s) **/
     searchItems?: string[];
     setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
-    /** The full array of all column filters for your table **/
     setSearchCriteria?: React.Dispatch<React.SetStateAction<any[]>>;
-    /** The column object must have an .id property */
     column?: {
         id: string;
         [key: string]: any;
     };
-    /** Tells the parent to close the UI, etc. */
     setEditingHeader?: React.Dispatch<React.SetStateAction<any>>;
     /** localStorage key used to store the entire “searchCriteria” array */
     localStorageKey?: string;
     otherProps?: MultiSelectInputProps["otherProps"];
     additionalClasses?: string;
+    clearText?: string;
+    clearTextColor?: string;
+    buttonText?: string;
+    buttonColor?: string;
 }
 declare const SearchDropdownInput: React.FC<SearchDropdownInputProps>;
 export default SearchDropdownInput;

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import MultiSelectInput from "../MultiSelect/MultiSelect";
 import updateLocalStorage from "../../utils/updateLocalStorage";
 const DEFAULT_STORAGE_KEY = "searchCriteria";
-const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select", disabled = false, hasSelectAll = true, bgColor = "bg-sky-500", textHighlight = "text-sky-700", handleFilter, searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, ...rest }) => {
+const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, placeholder = "Select", disabled = false, hasSelectAll = true, bgColor = "bg-sky-500", textHighlight = "text-sky-700", handleFilter, searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, clearText = "Clear", clearTextColor = "text-sky-500", buttonText = "Filter", buttonColor = "bg-sky-500", localStorageKey = DEFAULT_STORAGE_KEY, ...rest }) => {
     // Are we able to store filters for this column?
     const canStore = !!column?.id && !!setSearchCriteria;
     useEffect(() => {

package/dist/components/SearchInput/SearchInput.js

@@ -21,7 +21,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
                 case "number":
                     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, setSearchCriteria: setSearchCriteria, column: column }));
                 case "multiSelect":
-                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight, handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria }));
+                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: bgColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight }));
                 case "date":
                     return (_jsx(SearchDatePickerInput, { textHighlight: textHighlight, dropdownOptions: dropdownOptions, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, selectedDate: selectedDate, onDateSelect: onDateSelect, selectedStartDate: selectedStartDate, onStartDateSelect: onStartDateSelect, selectedEndDate: selectedEndDate, onEndDateSelect: onEndDateSelect, handleFilter: handleFilter, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, searchItems: searchItems, setSearchItems: setSearchItems, pillColor: pillColor }));
                 default:

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

@@ -17,6 +17,8 @@ type SearchDatePickerInputProps<T extends object> = {
     onStartDateSelect?: (date: Date | undefined) => void;
     selectedEndDate?: Date;
     onEndDateSelect?: (date: Date | undefined) => void;
+    buttonText?: string;
+    buttonColor?: string;
     searchItems?: string[];
     setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
     handleFilter?: () => void;
@@ -25,5 +27,5 @@ type SearchDatePickerInputProps<T extends object> = {
     setEditingHeader?: React.Dispatch<React.SetStateAction<any>>;
     localStorageKey?: string;
 };
-declare const SearchDatePickerInput: <T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, }: SearchDatePickerInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchDatePickerInput: <T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, buttonText, localStorageKey, }: SearchDatePickerInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -18,7 +18,7 @@ const SearchDatePickerInput = ({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", }) => {
+}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, buttonText = "Filter", localStorageKey = "searchCriteria", }) => {
     const containerRef = useRef(null);
     const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
     const [activeInput, setActiveInput] = useState(null);
@@ -139,6 +139,6 @@ const SearchDatePickerInput = ({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                                 return filtered;
                             });
                         }
-                    }, text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: `${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 mb-1`, type: "span" }, index))) })) : null, _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: handleFilterClick, shape: "rounded-full" })] })] }));
+                    }, text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: `${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 mb-1`, type: "span" }, index))) })) : null, _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: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
 };
 export default SearchDatePickerInput;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.83",
+	"version": "1.0.84",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",