@agilant/toga-blox 1.0.84 → 1.0.85

package/dist/components/MultiSelect/MultiSelect.js

@@ -5,13 +5,11 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
     text: "Select...",
     icon: "",
     iconStyle: "regular",
-}, isSearchable = true, isOpen, hasSelectAll = false, disabled = false, isLoading = false, onMenuToggle, overrideStrings, className, width = "w-72", otherProps, }) => {
-    // Convert your OptionType to the shape expected by react-multi-select-component.
+}, isSearchable = true, isOpen, hasSelectAll = false, disabled = false, isLoading = false, onMenuToggle, overrideStrings, className, width = "w-72", isBoolean = false, otherProps, }) => {
     const multiSelectOptions = options.map((option) => ({
         label: option.name,
         value: option.value,
     }));
-    // Convert the currently selected value(s) to the shape expected by the component.
     const multiSelectValue = selectedValue.map((item) => ({
         label: item.name,
         value: item.value,
@@ -22,27 +20,23 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
                         ? getFontAwesomeIcon(placeholder.icon)
                         : null, placeholder?.text] }));
         }
-        // If user selected ALL possible options, show "All items selected"
         if (selected.length === multiSelectOptions.length) {
-            ``;
             return "All items selected";
         }
-        // Default behavior: comma-separated labels
         return selected.map((s) => s.label).join(", ");
     };
-    return (_jsx("div", { className: `${width}`, children: _jsx(MultiSelect, { id: id, name: name, className: className, options: multiSelectOptions, value: multiSelectValue, onChange: (selectedOptions) => {
-                // Convert back to OptionType when passing to onChange
-                const mapped = selectedOptions.map((opt) => ({
-                    name: opt.label,
-                    value: opt.value,
-                }));
-                onChange(mapped);
-            }, 
-            // Toggle search based on isSearchable
-            disableSearch: !isSearchable, 
-            // Additional props from react-multi-select-component
-            isOpen: isOpen, hasSelectAll: hasSelectAll, disabled: disabled, isLoading: isLoading, onMenuToggle: onMenuToggle, overrideStrings: {
-                // selectSomeItems: placeholder,
+    const handleSelectionChange = (selectedOptions) => {
+        let finalSelection = selectedOptions;
+        if (isBoolean && selectedOptions.length > 0) {
+            finalSelection = [selectedOptions[selectedOptions.length - 1]];
+        }
+        const mapped = finalSelection.map((opt) => ({
+            name: opt.label,
+            value: opt.value,
+        }));
+        onChange(mapped);
+    };
+    return (_jsx("div", { className: width, children: _jsx(MultiSelect, { id: id, name: name, className: className, options: multiSelectOptions, value: multiSelectValue, onChange: handleSelectionChange, disableSearch: !isSearchable || isBoolean, isOpen: isOpen, hasSelectAll: hasSelectAll, disabled: disabled, isLoading: isLoading, onMenuToggle: onMenuToggle, overrideStrings: {
                 ...overrideStrings,
             }, labelledBy: "Select", valueRenderer: valueRenderer, ...otherProps }) }));
 };

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

@@ -28,5 +28,6 @@ export interface MultiSelectInputProps {
     }>;
     className?: string;
     width?: string;
+    isBoolean?: boolean;
     otherProps?: any;
 }

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

@@ -26,6 +26,7 @@ interface SearchDropdownInputProps {
     clearTextColor?: string;
     buttonText?: string;
     buttonColor?: string;
+    isBoolean?: boolean;
 }
 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, clearText = "Clear", clearTextColor = "text-sky-500", buttonText = "Filter", buttonColor = "bg-sky-500", 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, isBoolean = false, ...rest }) => {
     // Are we able to store filters for this column?
     const canStore = !!column?.id && !!setSearchCriteria;
     useEffect(() => {
@@ -112,9 +112,9 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
             text: placeholder,
             icon: "magnifyingGlass",
             iconStyle: "regular",
-        }, disabled: disabled, hasSelectAll: hasSelectAll, otherProps: {
+        }, disabled: disabled, hasSelectAll: isBoolean ? false : true, otherProps: {
             ItemRenderer: itemRenderer,
             ...rest.otherProps,
-        }, ...rest }));
+        }, isBoolean: isBoolean, ...rest }));
 };
 export default SearchDropdownInput;

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

@@ -1,3 +1,3 @@
 import { SearchInputProps } from "./SearchInput.types";
-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, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, }: 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, column, setSearchCriteria, setEditingHeader, pillColor, firstIconClasses, dataPickerThemeColor, dataPickerThemeColorAccent, isBoolean, toggleColor, toggleTextColor, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -8,7 +8,7 @@ const SearchInput = ({ bgColor = "bg-sky-500", textHighlight = "text-sky-500", i
     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, }) => {
+}, 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", }) => {
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -21,9 +21,9 @@ 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, clearText: "Clear", clearTextColor: "text-sky-500", buttonText: "Filter", handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria, textHighlight: textHighlight }));
+                    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, isBoolean: isBoolean }));
                 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 }));
+                    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 }));
                 default:
                     return null;
             }

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

@@ -164,6 +164,7 @@ BooleanInput.args = {
     disabled: false,
     isLoading: false,
     type: "multiSelect",
+    isBoolean: true,
 };
 export const DatePickerInput = Template.bind({});
 DatePickerInput.args = {
@@ -191,6 +192,8 @@ DatePickerInput.args = {
     // Theming for DayPicker
     themeBgColor: "bg-sky-500",
     lightThemeBg: "bg-sky-100",
+    toggleTextColor: "text-green-500",
+    toggleColor: "bg-green-500",
     // If you want local-storage logic for date filtering:
     column: { id: "dateColumn" }, // real or mock
 };

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

@@ -42,6 +42,9 @@ export type SearchInputProps<T extends object> = {
     firstIconClasses?: string;
     dataPickerThemeColor?: string;
     dataPickerThemeColorAccent?: string;
+    isBoolean?: boolean;
+    toggleColor?: string;
+    toggleTextColor?: string;
 };
 export interface OptionType {
     uuid: string;

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

@@ -26,6 +26,8 @@ type SearchDatePickerInputProps<T extends object> = {
     column?: any;
     setEditingHeader?: React.Dispatch<React.SetStateAction<any>>;
     localStorageKey?: string;
+    toggleColor?: string;
+    toggleTextColor?: 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, buttonText, 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, toggleColor, toggleTextColor, }: 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, buttonText = "Filter", localStorageKey = "searchCriteria", }) => {
+}, toggleStatus = false, setToggleStatus, selectedDate, onDateSelect, selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, buttonText = "Filter", localStorageKey = "searchCriteria", toggleColor = "bg-sky-500", toggleTextColor = "text-black", }) => {
     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: buttonText, backgroundColor: themeBgColor, 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: 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: 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/dist/components/SearchInput/SearchNumberInput.d.ts

@@ -5,6 +5,7 @@ export type DropdownOption = {
     label: string;
     value: string;
     uuid?: string;
+    name?: string;
 };
 /** The parent can pass these props to replicate local-storage filter usage. */
 type SearchNumberInputProps<T extends object> = {

package/package.json

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