@agilant/toga-blox 1.0.72 → 1.0.74

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

@@ -1,21 +1,33 @@
 import React from "react";
-import { OptionType } from "../MultiSelect/MultiSelect.types";
-import "./SearchDropdown.scss";
+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;
     hasSelectAll?: boolean;
     bgColor?: string;
     textHighlight?: string;
-    [key: string]: any;
     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;
 }
-/**
- * A wrapper around MultiSelectInput that appends a special "__footer__" option
- * and uses a custom item renderer to display "Clear" and "Filter" buttons.
- */
 declare const SearchDropdownInput: React.FC<SearchDropdownInputProps>;
 export default SearchDropdownInput;

package/dist/components/SearchInput/SearchDropdownInput.js

@@ -1,25 +1,104 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import MultiSelectInput from "../MultiSelect/MultiSelect";
-import "./SearchDropdown.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, handleFilter, ...rest }) => {
+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 }) => {
+    // Are we able to store filters for this column?
+    const canStore = !!column?.id && !!setSearchCriteria;
+    /** Helper: write the entire searchCriteria array to localStorage */
+    const updateLocalStorage = (criteria) => {
+        localStorage.setItem(localStorageKey, JSON.stringify(criteria));
+    };
+    useEffect(() => {
+        if (!canStore)
+            return;
+        const stored = localStorage.getItem(localStorageKey);
+        if (!stored)
+            return;
+        try {
+            const parsed = JSON.parse(stored);
+            const existing = parsed.find((c) => c.searchColumn?.id === column.id);
+            if (existing && setSearchItems) {
+                const raw = existing.submittedSearchText;
+                setSearchItems([raw]);
+                const storedValues = raw
+                    .split(",")
+                    .map((s) => s.trim());
+                const matched = options.filter((o) => storedValues.includes(o.value));
+                onChange(matched);
+            }
+        }
+        catch (err) {
+            console.error("Error reading stored dropdown filter:", err);
+        }
+    }, [
+        canStore,
+        column?.id,
+        localStorageKey,
+        setSearchItems,
+        onChange,
+        options,
+    ]);
+    const handleFooterFilter = () => {
+        const actualSelections = selectedValue.filter((opt) => opt.value !== "__footer__" && opt.label !== "Select All");
+        const selectedLabels = actualSelections
+            .map((opt) => opt.value)
+            .join(",");
+        const isEmpty = !selectedLabels.trim();
+        if (!canStore) {
+            // If we have no place to store it, just do handleFilter
+            handleFilter?.();
+            return;
+        }
+        if (isEmpty) {
+            setSearchCriteria?.((prev) => {
+                const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                updateLocalStorage(newCriteria);
+                return newCriteria;
+            });
+        }
+        else {
+            if (!searchItems.includes(selectedLabels)) {
+                setSearchItems?.([...searchItems, selectedLabels]);
+            }
+            setSearchCriteria?.((prev) => {
+                const newCriteria = [
+                    ...prev,
+                    {
+                        searchColumn: column,
+                        submittedSearchText: selectedLabels,
+                    },
+                ];
+                updateLocalStorage(newCriteria);
+                return newCriteria;
+            });
+        }
+        setEditingHeader?.(null);
+        handleFilter?.();
+    };
+    const handleClear = () => {
+        onChange([]);
+        if (canStore) {
+            setSearchCriteria?.((prev) => {
+                const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
+                updateLocalStorage(newCriteria);
+                return newCriteria;
+            });
+            setSearchItems?.([]);
+            setEditingHeader?.(null);
+        }
+    };
     const footerOption = [{ name: "", value: "__footer__" }];
     const extendedOptions = [...options, ...footerOption];
     const itemRenderer = ({ option, checked, disabled, onClick }) => {
-        // If it's our footer option, display the custom footer row
         if (option.value === "__footer__") {
-            return (_jsxs("div", { className: "footer px-4 py-2 flex justify-between", children: [_jsx("button", { type: "button", className: `${textHighlight}`, onClick: (e) => {
+            return (_jsxs("div", { className: "footer px-4 py-2 flex justify-between", children: [_jsx("div", { role: "button", className: `${textHighlight}`, onClick: handleClear, children: "Clear" }), _jsx("button", { type: "button", className: `${bgColor} text-white px-3 py-1 rounded`, onClick: (e) => {
                             e.stopPropagation();
-                            onChange([]); // Clear all selections
-                        }, children: "Clear" }), _jsx("button", { type: "button", className: `${bgColor} text-white px-3 py-1 rounded`, onClick: (e) => {
-                            e.stopPropagation();
-                            handleFilter();
+                            handleFooterFilter();
                         }, children: "Filter" })] }));
         }
-        else if (option.label === "Select All") {
+        // If it's the "Select All" item
+        if (option.label === "Select All") {
             return (_jsxs("label", { className: "select-all-item", style: {
                     display: "flex",
                     alignItems: "center",
@@ -30,20 +109,16 @@ const SearchDropdownInput = ({ options = [], selectedValue = [], onChange, place
                     zIndex: 10,
                 }, onClick: (e) => {
                     e.stopPropagation();
-                    onClick(e); // Let the library handle toggling
+                    onClick(e);
                 }, children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: option.label })] }));
         }
-        else {
-            return (_jsxs("div", { className: "item px-4 py-1 cursor-pointer flex items-center", onClick: (e) => onClick(option, e), children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { className: "ml-2", children: option.label })] }));
-        }
+        return (_jsxs("div", { className: "item px-4 py-1 cursor-pointer flex items-center", onClick: (e) => onClick(option, e), children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, disabled: disabled }), _jsx("span", { className: "ml-2", children: option.label })] }));
     };
     return (_jsx(MultiSelectInput, { options: extendedOptions, selectedValue: selectedValue, onChange: onChange, placeholder: {
             text: placeholder,
             icon: "magnifyingGlass",
             iconStyle: "regular",
-        }, disabled: disabled, hasSelectAll: hasSelectAll, 
-        /** Provide the custom item renderer and any additional props via otherProps */
-        otherProps: {
+        }, disabled: disabled, hasSelectAll: hasSelectAll, otherProps: {
             ItemRenderer: itemRenderer,
             ...rest.otherProps,
         }, ...rest }));

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 }));
                 case "multiSelect":
-                    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 }));
+                    return (_jsx(SearchDropdownInput, { options: dropdownOptions, placeholder: "Search", additionalClasses: "", onChange: onChange, selectedValue: selectedValue, bgColor: bgColor, textHighlight: textHighlight, handleFilter: handleFilter, column: column, setSearchCriteria: setSearchCriteria }));
                 case "date":
                     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, themeBgColor: dataPickerThemeColor, lightThemeBg: dataPickerThemeColorAccent, 
                         // pass the same local-storage props:

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

@@ -135,6 +135,8 @@ DropdownInput.args = {
     disabled: false,
     isLoading: false,
     type: "multiSelect",
+    column: { id: "multiSelectColumn" },
+    localStorageKey: "searchCriteria",
 };
 export const BooleanInput = Template.bind({});
 BooleanInput.args = {

package/dist/components/SearchInput/SearchInputDatePicker.js

@@ -8,11 +8,34 @@ import BaseButton from "../BaseButton";
 import Badge from "../Badge/Badge";
 import Text from "../Text";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
-function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, dropdownIconProp = {
+/**
+ * A helper to convert a Date object to 'YYYY-MM-DD'
+ * so we don't get slashes in the final string.
+ */
+function formatAsYMD(date) {
+    if (!date)
+        return "";
+    // date.toISOString() is 'YYYY-MM-DDTHH:mm:ss.sssZ'
+    // slice(0,10) => 'YYYY-MM-DD'
+    return date.toISOString().slice(0, 10);
+}
+function SearchDatePickerInput({ 
+// theming
+themeBgColor = "bg-sky-500", lightThemeBg = "bg-sky-100", 
+// style/config
+pillColor = "bg-sky-500", textHighlight = "text-sky-700", dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, dropdownIconProp = {
     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", }) {
+}, 
+// toggle
+toggleStatus = false, setToggleStatus, 
+// single date
+selectedDate, onDateSelect, 
+// range
+selectedStartDate, onStartDateSelect, selectedEndDate, onEndDateSelect, 
+// local-storage logic
+searchItems = [], setSearchItems, handleFilter, setSearchCriteria, column, setEditingHeader, localStorageKey = "searchCriteria", }) {
     const containerRef = useRef(null);
     const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
     const [activeInput, setActiveInput] = useState(null);
@@ -27,6 +50,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                 const parsed = JSON.parse(stored);
                 const existing = parsed.find((criterion) => criterion.searchColumn.id === column.id);
                 if (existing && setSearchItems) {
+                    // e.g. "2025-02-27" or "2024-12-01 - 2024-12-28"
                     setSearchItems([existing.submittedSearchText]);
                 }
             }
@@ -35,7 +59,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
             }
         }
     }, [canStore, column?.id, localStorageKey, setSearchItems]);
-    // close datepickers on outside click
+    // Close date pickers on outside click
     useEffect(() => {
         function handleClickOutside(e) {
             if (containerRef.current &&
@@ -45,49 +69,45 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
             }
         }
         document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
     const updateLocalStorage = (criteria) => {
         localStorage.setItem(localStorageKey, JSON.stringify(criteria));
     };
-    // removing a date "badge"
-    const handleSearchBadgeClick = (item) => {
-        const newSearchItems = searchItems.filter((x) => x !== item);
-        setSearchItems?.(newSearchItems);
-        if (canStore) {
-            setSearchCriteria?.((prev) => {
-                const newCriteria = prev.filter((crit) => crit.submittedSearchText !== item);
-                updateLocalStorage(newCriteria);
-                return newCriteria;
-            });
-        }
-    };
-    // build single or range
+    /**
+     * Build a string in 'YYYY-MM-DD' (or range) format,
+     * so it won't break in your URL as "mm%2Fdd%2Fyyyy"
+     */
     const buildDateString = () => {
         if (toggleStatus) {
+            // range mode
             if (selectedStartDate && selectedEndDate) {
-                return `${selectedStartDate.toLocaleDateString()} - ${selectedEndDate.toLocaleDateString()}`;
+                return `${formatAsYMD(selectedStartDate)} - ${formatAsYMD(selectedEndDate)}`;
             }
             else if (selectedStartDate) {
-                return `Start: ${selectedStartDate.toLocaleDateString()}`;
+                return `Start: ${formatAsYMD(selectedStartDate)}`;
             }
             else if (selectedEndDate) {
-                return `End: ${selectedEndDate.toLocaleDateString()}`;
+                return `End: ${formatAsYMD(selectedEndDate)}`;
             }
             return "";
         }
-        return selectedDate ? selectedDate.toLocaleDateString() : "";
+        else {
+            // single-date mode
+            return selectedDate ? formatAsYMD(selectedDate) : "";
+        }
     };
     /**
      * If empty => remove all queries for col
      * If non-empty => APPEND
      * (do NOT filter out old queries for that column)
+     *
+     * But now the stored string is "YYYY-MM-DD" or "YYYY-MM-DD - YYYY-MM-DD"
      */
     const handleFilterClick = () => {
         const dateString = buildDateString().trim();
         if (!dateString) {
+            // remove existing for col
             if (canStore) {
                 setSearchCriteria?.((prev) => {
                     const newCriteria = prev.filter((c) => c.searchColumn.id !== column.id);
@@ -97,12 +117,12 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
             }
         }
         else {
+            // append
             if (!searchItems.includes(dateString)) {
                 setSearchItems?.([...searchItems, dateString]);
             }
             if (canStore) {
                 setSearchCriteria?.((prev) => {
-                    // KEY: no filtering out old queries => we let them accumulate
                     const newCriteria = [
                         ...prev,
                         {
@@ -120,7 +140,7 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
         setIsDatePickerOpen(false);
         setActiveInput(null);
     };
-    // styling for day picker
+    // DayPicker styling
     const modifiersClassNames = {
         selected: `${themeBgColor} text-white rounded-full`,
         today: `${lightThemeBg} ${textHighlight}`,
@@ -138,12 +158,16 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
         setActiveInput(null);
         setIsDatePickerOpen((prev) => !prev);
     };
-    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (_jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedStartDate
-                                ? selectedStartDate.toLocaleDateString()
+    return (_jsxs("div", { ref: containerRef, className: "relative w-[425px] border-2 p-4", children: [_jsx("div", { className: "flex items-center justify-between h-12 mb-2", children: toggleStatus ? (
+                // Range mode
+                _jsxs("div", { className: "flex items-center w-full", children: [_jsx("button", { onClick: openStartPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedStartDate
+                                ? formatAsYMD(selectedStartDate)
                                 : "Start Date" }), _jsx("span", { className: "mx-2", children: "to" }), _jsx("button", { onClick: openEndPicker, className: "border-2 px-3 py-2 flex-1 h-10 text-left", children: selectedEndDate
-                                ? selectedEndDate.toLocaleDateString()
-                                : "End Date" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
-                                ? selectedDate.toLocaleDateString()
+                                ? formatAsYMD(selectedEndDate)
+                                : "End Date" })] })) : (
+                // Single-date mode
+                _jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 h-full flex items-center", menuClasses: "bg-white min-w-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-2 border-r-0 flex-[1] h-10 w-auto", icon: dropdownIconProp }), _jsx("button", { onClick: openSinglePicker, className: "border-2 px-3 py-2 flex-[2] h-10 text-left min-w-40", children: selectedDate
+                                ? formatAsYMD(selectedDate)
                                 : "Select Date" })] })) }), toggleStatus
                 ? activeInput && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: activeInput === "start" ? (_jsx(DayPicker, { mode: "single", selected: selectedStartDate, onSelect: (day) => {
                             onStartDateSelect?.(day || undefined);
@@ -156,6 +180,18 @@ function SearchDatePickerInput({ themeBgColor = "bg-sky-500", lightThemeBg = "bg
                         }, modifiersClassNames: modifiersClassNames })) }))
                 : isDatePickerOpen && (_jsx("div", { className: "absolute p-4 top-16 w-auto z-50 shadow-lg bg-white", children: _jsx(DayPicker, { mode: "single", selected: selectedDate, onSelect: (day) => {
                             onDateSelect?.(day || undefined);
-                        }, modifiersClassNames: modifiersClassNames }) })), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleSearchBadgeClick(item), 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" })] })] }));
+                            setIsDatePickerOpen(false);
+                        }, modifiersClassNames: modifiersClassNames }) })), searchItems?.length ? (_jsx("div", { className: "flex flex-wrap bg-white py-2 px-2 mt-2 rounded-md", children: searchItems.map((item, index) => (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => {
+                        const newSearchItems = searchItems.filter((x) => x !== item);
+                        setSearchItems?.(newSearchItems);
+                        if (canStore) {
+                            setSearchCriteria?.((prev) => {
+                                const filtered = prev.filter((crit) => crit.submittedSearchText !==
+                                    item);
+                                updateLocalStorage(filtered);
+                                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" })] })] }));
 }
 export default SearchDatePickerInput;

package/package.json

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