@agilant/toga-blox 1.0.138 → 1.0.140

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

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, buttonPlaceHolderTextColor, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ textHighlight, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, fontFamily, removePattern, isSearchable, hasOperator, tooltipText, hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, buttonPlaceHolderTextColor, inactiveColorBackground, inactiveColorBorder, activeColorBorder, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -8,7 +8,7 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, buttonPlaceHolderTextColor = "text-red-500", }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, onChange, selectedValue, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, handleFilter, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean = false, toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern = /^[^:]*:/, isSearchable = false, hasOperator = false, tooltipText = "Clear filters to edit operator", hoverBgColor, clearTextHoverColor, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor = "peer-checked:after:bg-purple-500", placeHolderColor, buttonPlaceHolderTextColor = "text-red-500", inactiveColorBackground = "bg-purple-300", inactiveColorBorder = "border-purple-300", activeColorBorder = "border-orange-900", }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -19,11 +19,11 @@ const SearchInput = ({ textHighlight = "text-sky-500", inputType = "text", dropd
                 case "text":
                     return (_jsx(SearchTextInput, { dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, searchItems: searchItems, setSearchItems: setSearchItems, handleFilter: handleFilter, setSearchCriteria: setSearchCriteria, column: column, setEditingHeader: setEditingHeader, pillColor: pillColor, firstIconClasses: firstIconClasses, fontFamily: fontFamily, removePattern: removePattern, textHighlight: textHighlight, hasOperator: hasOperator, tooltipText: tooltipText }));
                 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, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText, numberTypeIcon: numberTypeIcon, firstIconTop: firstIconTop, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor }));
+                    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, themeBgColor: dataPickerThemeColor, toggleColor: toggleColor, toggleTextColor: toggleTextColor, searchItems: searchItems, setSearchItems: setSearchItems, removePattern: removePattern, pillColor: pillColor, hasOperator: hasOperator, tooltipText: tooltipText, numberTypeIcon: numberTypeIcon, firstIconTop: firstIconTop, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor, inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: activeColorBorder }));
                 case "multiSelect":
                     return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: dataPickerThemeColor, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight, isBoolean: isBoolean, isSearchable: isSearchable, setSearchItems: setSearchItems, fontFamily: fontFamily, pillColor: pillColor, hoverBgColor: hoverBgColor, clearTextHoverColor: clearTextHoverColor }));
                 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, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp, hasOperator: hasOperator, tooltipText: tooltipText, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor, firstIconTop: firstIconTop, buttonPlaceHolderTextColor: buttonPlaceHolderTextColor }));
+                    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, toggleColor: toggleColor, toggleTextColor: toggleTextColor, fontFamily: fontFamily, removePattern: removePattern, dropdownIconProp: dropdownIconProp, hasOperator: hasOperator, tooltipText: tooltipText, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor, placeHolderColor: placeHolderColor, firstIconTop: firstIconTop, buttonPlaceHolderTextColor: buttonPlaceHolderTextColor, inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: inactiveColorBorder, activeColorBorder: activeColorBorder }));
                 default:
                     return null;
             }

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

@@ -214,4 +214,7 @@ DatePickerInput.args = {
     toggleTextColor: "text-green-500",
     toggleColor: "bg-green-500",
     column: { id: "dateColumn" },
+    activeCircleColor: "peer-checked:after:bg-purple-500",
+    inactiveCircleColor: "after:bg-purple-300",
+    activeColorBorder: "border-purple-500",
 };

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

@@ -61,6 +61,9 @@ export type SearchInputProps<T extends object> = {
     inactiveCircleColor?: string;
     placeHolderColor?: string;
     buttonPlaceHolderTextColor?: string;
+    inactiveColorBackground?: string;
+    inactiveColorBorder?: string;
+    activeColorBorder?: string;
 };
 export interface OptionType {
     uuid: string;

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

@@ -39,6 +39,9 @@ export interface SearchDatePickerInputProps<T extends object> {
     placeHolderColor?: string;
     firstIconTop?: string;
     buttonPlaceHolderTextColor?: string;
+    inactiveColorBorder?: string;
+    inactiveColorBackground?: string;
+    activeColorBorder?: string;
 }
-declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor, activeCircleColor, placeHolderColor, firstIconTop, buttonPlaceHolderTextColor, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function SearchDatePickerInput<T extends object>({ themeBgColor, lightThemeBg, pillColor, textHighlight, dropdownOptions, dropdownIconProp, toggleStatus, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText, buttonColor, searchItems, setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey, toggleColor, toggleTextColor, fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor, activeCircleColor, placeHolderColor, firstIconTop, buttonPlaceHolderTextColor, inactiveColorBorder, inactiveColorBackground, activeColorBorder, }: SearchDatePickerInputProps<T>): import("react/jsx-runtime").JSX.Element;
 export default SearchDatePickerInput;

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -66,7 +66,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
     iconClasses: "text-sky-500",
     name: "chevronDown",
     weight: "solid",
-}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor = "after:bg-red-300", activeCircleColor = "peer-checked:after:bg-red-500 border-red-500", placeHolderColor, firstIconTop, buttonPlaceHolderTextColor, }) {
+}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, selectedDropdownOption, onDropdownOptionSelect, buttonText = "Filter", buttonColor, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", fontFamily, removePattern, hasOperator, tooltipText, inactiveCircleColor = "after:bg-red-300", activeCircleColor = "peer-checked:after:bg-red-500 border-red-500", placeHolderColor, firstIconTop, buttonPlaceHolderTextColor, inactiveColorBorder, inactiveColorBackground, activeColorBorder, }) {
     const containerRef = useRef(null);
     // Local operator state.
     const [localOperator, setLocalOperator] = useState(() => {
@@ -343,7 +343,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                                         setIsDatePickerOpen(false);
                                         setActiveInput(null);
                                     }
-                                }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-[2] h-10 text-left rounded-r", hasAutoFocus: true, firstIconTop: firstIconTop, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-[2] h-10 text-left rounded-r`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
+                                }, firstIcon: getFontAwesomeIcon("calendar", "regular"), required: false, additionalClasses: "border-2 px-3 py-2 flex-auto h-10 text-left rounded-r", hasAutoFocus: true, firstIconTop: firstIconTop, placeHolderColor: placeHolderColor }) })) : (_jsx(_Fragment, { children: _jsxs("button", { onClick: openSinglePicker, className: `${buttonPlaceHolderTextColor} border-2 px-3 py-2 flex-auto h-10 text-left rounded-r`, children: [_jsx("span", { className: "pr-2", children: getFontAwesomeIcon("calendar", "regular") }), localDate
                                         ? formatDateAsMonthDayYear(localDate)
                                         : "mm/dd/yyyy"] }) }))] })) }), dayPicker, searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => {
                     const cleanedText = getCleanedText(item, removePattern);
@@ -357,6 +357,6 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                                 return filtered;
                             });
                         }, text: _jsx(Text, { color: "text-white", size: "text-sm", tag: "span", text: cleanedText }), 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: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, 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: true, borderStyle: true, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
+                }) })) : 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: toggleColor, activeColorBorder: activeColorBorder, activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: inactiveColorBorder, inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, inactiveCircleColor: inactiveCircleColor, activeCircleColor: activeCircleColor }), _jsx(BaseButton, { text: buttonText, backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }));
 }
 export default SearchDatePickerInput;

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

@@ -52,6 +52,9 @@ type SearchNumberInputProps<T extends object> = {
     inactiveCircleColor: string;
     activeCircleColor: string;
     placeHolderColor?: string;
+    inactiveColorBorder?: string;
+    inactiveColorBackground?: string;
+    activeColorBorder?: string;
 };
 /**
  * A numeric filter component that:
@@ -59,5 +62,5 @@ type SearchNumberInputProps<T extends object> = {
  * 2. On Filter => either remove or store a string in localStorage
  * 3. On mount => read any existing filter for this column, parse, and set min/max
  */
-declare const SearchNumberInput: <T extends object>({ textHighlight, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, handleFilter, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, }: 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, searchItems, setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey, themeBgColor, toggleColor, toggleTextColor, pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon, firstIconTop, inactiveCircleColor, activeCircleColor, placeHolderColor, inactiveColorBorder, inactiveColorBackground, activeColorBorder, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchNumberInput;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -22,7 +22,7 @@ const SearchNumberInput = ({ textHighlight = "text-sky-500", dropdownIconProp =
     weight: "solid",
 }, dropdownOptions = [], selectedDropdownOption = { label: "", value: "" }, onDropdownOptionSelect, toggleStatus = false, setToggleStatus, minValue = "", setMinValue, maxValue = "", setMaxValue, handleFilter, 
 // local-storage
-searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon = { icon: "x", weight: "regular" }, firstIconTop, inactiveCircleColor = "after:bg-gray-300", activeCircleColor = "peer-checked:after:bg-sky-500", placeHolderColor = "placeholder:text-gray-500", }) => {
+searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, localStorageKey = DEFAULT_STORAGE_KEY, themeBgColor = "bg-sky-500", toggleColor = "bg-sky-500", toggleTextColor = "text-black", pillColor, fontFamily, removePattern, hasOperator, tooltipText, numberTypeIcon = { icon: "x", weight: "regular" }, firstIconTop, inactiveCircleColor = "after:bg-gray-300", activeCircleColor = "peer-checked:after:bg-sky-500", placeHolderColor = "placeholder:text-gray-500", inactiveColorBorder, inactiveColorBackground, activeColorBorder, }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     /** Decide if we can store for this column */
@@ -161,15 +161,15 @@ searchItems = [], setSearchItems, setSearchCriteria, column, setEditingHeader, l
             return newCriteria;
         });
     };
-    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col pt-4 p pb-1  border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] mx-4 ${toggleStatus ? "" : "border-2"}
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col pt-4 p pb-1  border-2 border-navy-200 rounded-md", children: [_jsx("div", { className: `flex flex-[1] mx-4  rounded ${toggleStatus ? "" : "border-2"}
           h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs("div", { className: "flex items-center", children: [_jsx(Input, { focusRingColor: "focus:ring-2 ", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex focus:border-l-2 border-2 rounded", placeholder: "Min", placeHolderColor: placeHolderColor }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMaxValue?.(e.target.value), additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-l-2 rounded", placeholder: "Max", placeHolderColor: placeHolderColor })] })) : (
                     // Single value mode
                     _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption || {
                                     label: "",
                                     value: "",
-                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 flex items-center", placeholder: "Amount", placeHolderColor: placeHolderColor, hasIcons: true, iconPosition: "both", firstIcon: numberTypeIcon?.icon ? (_jsx("div", { children: getFontAwesomeIcon(numberTypeIcon.icon, numberTypeIcon.weight) })) : null, firstIconTop: firstIconTop })] })) }), _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-4", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: toggleTextColor, 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: true, borderStyle: true, activeCircleColor: activeCircleColor, inactiveCircleColor: inactiveCircleColor }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] }), searchItems?.length ? (_jsx("div", { className: "border-t border-gray-300 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 rounded-md ", children: searchItems.map((item, index) => {
+                                }, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-32xw rounded-md shadow-md top-12", dropdownClasses: "border-0 w-auto", icon: dropdownIconProp, isEnabled: !hasOperator, tooltipText: tooltipText }), _jsx(Input, { ref: inputRef, focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", required: false, id: "", name: "", type: "number", onChange: (e) => setMinValue?.(e.target.value), additionalClasses: "min-w-[200px] h-10 text-gray flex border-l-2 flex items-center ", placeholder: "Amount", placeHolderColor: placeHolderColor, hasIcons: true, iconPosition: "both", firstIcon: numberTypeIcon?.icon ? (_jsx("div", { children: getFontAwesomeIcon(numberTypeIcon.icon, numberTypeIcon.weight) })) : null, firstIconTop: firstIconTop })] })) }), searchItems?.length ? (_jsx("div", { className: "py-2 ", children: _jsx("div", { className: "flex flex-wrap bg-white pt-2 px-4 rounded-md ", children: searchItems.map((item, index) => {
                             const cleanedText = getCleanedText(item, removePattern);
                             return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", 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: () => handleSearchBadgeClick(item), text: _jsx(Text, { color: "text-white", fontFamily: fontFamily, size: "text-sm", tag: "span", text: cleanedText }), badgeContainerClasses: `${pillColor}  cursor-pointer 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] }) }));
+                        }) }) })) : null, _jsxs("div", { className: " flex flex-[1] justify-between items-end py-1 px-4 ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => setToggleStatus?.(!toggleStatus), activeColorBackground: toggleColor, activeColorBorder: activeColorBorder, activeLabel: "Range", activeTextColor: toggleTextColor, additionalClasses: "flex items-center", inactiveColorBackground: inactiveColorBackground, inactiveColorBorder: inactiveColorBorder, inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: true, borderStyle: true, activeCircleColor: activeCircleColor, inactiveCircleColor: inactiveCircleColor }), _jsx(BaseButton, { text: "Filter", backgroundColor: themeBgColor, additionalClasses: "py-0.5 px-6 text-white", borderColor: "border-none", onClick: handleFilterClick, shape: "rounded-full" })] })] }) }));
 };
 export default SearchNumberInput;

package/dist/components/TableRow/TableRow.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { Row } from "react-table";
 import { DataWithUUID } from "../TableCell";
 /**
@@ -33,6 +33,26 @@ export interface TableRowProps<T extends DataWithUUID> {
     onRowClick?: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
     /** Determines if this row should have an expandable drop down */
     hasDropDown?: boolean;
+    /**
+     * Optional function you can call on row click for making an API request (or any action).
+     * This might come directly from a custom hook or just be a function receiving rowUuid as a parameter.
+     */
+    onFetchRowData?: (uuid: string) => Promise<void> | void;
+    /**
+     * Optional component or element to show when the row is loading data.
+     * Defaults to a simple `<span>Loading...</span>` if not provided.
+     */
+    loadingIndicator?: ReactNode;
+    /**
+     * Optional function that renders a custom error state. Receives the error object.
+     * If not provided, a default `<span>Error: {error.message}</span>` is shown.
+     */
+    errorIndicator?: (error: Error) => ReactNode;
+    /**
+     * Optional content to show when expanded (and there is no loading/error).
+     * Defaults to a simple `<span>drop down - {rowUuid}</span>` if not provided.
+     */
+    expandedContent?: ReactNode;
 }
-declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor, rowHoverClasses, onRowClick, hasDropDown, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor, rowHoverClasses, onRowClick, hasDropDown, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import TableCell from "../TableCell";
-const TableRow = ({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-red-100 hover:cursor-pointer", onRowClick, hasDropDown = false, }) => {
+const TableRow = ({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-red-100 hover:cursor-pointer", onRowClick, hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, }) => {
     prepareRow(row);
     const isActive = activeIndex === row.index;
     let rowClasses = `border-primary`;
@@ -11,17 +11,40 @@ const TableRow = ({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, col
     }
     // Local state for expansion, only used if hasDropDown is true.
     const [isExpanded, setIsExpanded] = useState(false);
-    const handleRowClick = (event) => {
+    // Optional local states to track loading/error from the API call
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const handleRowClick = async (event) => {
         onRowClick?.(row.index, rowUuid || "", event);
+        // If there's a dropdown, toggle it, and optionally call the API method
         if (hasDropDown) {
             setIsExpanded((prev) => !prev);
-            // TODO: Trigger API call with rowUuid, handle loading/error states.
+            // If a fetch function is provided, call it with the rowUuid
+            if (onFetchRowData && rowUuid) {
+                try {
+                    setIsLoading(true);
+                    setError(null);
+                    await onFetchRowData(rowUuid);
+                }
+                catch (err) {
+                    if (err instanceof Error) {
+                        setError(err);
+                    }
+                }
+                finally {
+                    setIsLoading(false);
+                }
+            }
         }
     };
     return (_jsxs(Fragment, { children: [_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: handleRowClick, children: row.cells.map((cell, index) => {
                     const isLastCell = index === row.cells.length - 1;
                     const cellProps = cell.getCellProps();
                     return (_jsx(Fragment, { children: _jsx(TableCell, { cell: cell, rowUuid: rowUuid, globalTrimActive: globalTrimActive, columnInputs: columnInputs, isLastCell: isLastCell }) }, cellProps.key));
-                }) }, rowUuid), hasDropDown && (_jsx(AnimatePresence, { children: isExpanded && (_jsx("tr", { "data-testid": "expanded-row", children: _jsx("td", { colSpan: row.cells.length, className: "p-0", children: _jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, className: "overflow-hidden w-full", children: _jsx("div", { className: "h-96 w-full border flex items-center justify-center", children: _jsxs("span", { children: ["drop down - ", rowUuid] }) }) }) }) })) }))] }));
+                }) }, rowUuid), hasDropDown && (_jsx(AnimatePresence, { children: isExpanded && (_jsx("tr", { "data-testid": "expanded-row", children: _jsx("td", { colSpan: row.cells.length, className: "p-0", children: _jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, style: { display: "block" }, className: "overflow-hidden w-full", children: isLoading ? (loadingIndicator ?? (_jsx("span", { children: "Loading..." }))) : error ? (
+                            // If there's an error, show the provided error indicator or default
+                            errorIndicator ? (errorIndicator(error)) : (_jsxs("span", { className: "text-red-700", children: ["Error: ", error.message] }))) : (
+                            // Otherwise, render the expanded content prop or fallback
+                            expandedContent ?? (_jsxs("span", { children: ["drop down - ", rowUuid] }))) }, "expanded-dropdown-content") }) })) }))] }));
 };
 export default TableRow;

package/dist/components/TableRow/TableRow.stories.js

@@ -8,6 +8,7 @@ const sampleData = {
     email: "john.doe@example.com",
     phone: "+1 555-123-4567",
     status: "Active",
+    expandedContent: (_jsx("div", { className: "size-96 bg-blue-300", children: "Custom element passed in - 12345" })),
 };
 const sampleData2 = {
     uuid: "67890",
@@ -188,7 +189,7 @@ Default.parameters = {
         },
     },
 };
-export const MultipleRows = () => (_jsx("table", { children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, globalTrimActive: true, rowUuid: sampleData.uuid, columnInputs: [], rowHoverClasses: "hover:bg-red-100 hover:cursor-pointer", hasDropDown: true }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, globalTrimActive: true, rowUuid: sampleData2.uuid, columnInputs: [], rowHoverClasses: "hover:bg-red-100 hover:cursor-pointer", hasDropDown: false })] }) }));
+export const MultipleRows = () => (_jsx("table", { children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, globalTrimActive: true, rowUuid: sampleData.uuid, columnInputs: [], rowHoverClasses: "hover:bg-red-100 hover:cursor-pointer", hasDropDown: true, expandedContent: _jsx("div", { className: "size-96 bg-blue-300", children: "Custom element passed in - 12345" }) }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, globalTrimActive: true, rowUuid: sampleData2.uuid, columnInputs: [], rowHoverClasses: "hover:bg-red-100 hover:cursor-pointer", hasDropDown: false })] }) }));
 MultipleRows.parameters = {
     docs: {
         description: {

package/dist/components/ToggleButton/ToggleButton.js

@@ -37,7 +37,7 @@ const ToggleButton = ({ initialStatus, onClick, id, textPosition, textSize,
 // Background colors
 activeColorBackground = "bg-red-600", inactiveColorBackground = "bg-red-200", 
 // Border colors (active is red and inactive is blue by default)
-activeColorBorder = "border-red-600", inactiveColorBorder = "border-red-600", activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor = "text-red-700", inactiveTextColor = "text-red-400", smallToggle, pillHeight, borderStyle, inactiveCircleColor = "after:bg-red-300", activeCircleColor = "peer-checked:after:bg-red-500", }) => {
+activeColorBorder = "border-orange-600", inactiveColorBorder = "border-red-600", activeLabel, inactiveLabel, additionalClasses, hasDisabledStatus, hasDivider, fontFamily, activeTextColor = "text-red-700", inactiveTextColor = "text-red-400", smallToggle, pillHeight, borderStyle, inactiveCircleColor = "after:bg-purple-300", activeCircleColor = "peer-checked:after:bg-purple-500", }) => {
     const handleToggle = () => {
         const newValue = !initialStatus;
         onClick(newValue);

package/package.json

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