@agilant/toga-blox 1.0.37 → 1.0.39

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

@@ -5,11 +5,12 @@ export type DropdownProps = {
     optionClasses?: string;
     menuClasses?: string;
     dropdownClasses?: string;
-    icon?: {
-        name: string;
-        weight: "solid" | "regular" | "light" | "duotone" | "brands";
-        iconClasses?: string;
-    };
+    icon?: DropdownIconProps;
     selectedOptionBgColor?: string;
     optionHoverBgColor?: string;
 };
+export type DropdownIconProps = {
+    name: string;
+    weight: "solid" | "regular" | "light" | "duotone" | "brands";
+    iconClasses?: string;
+};

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { MultiSelect } from "react-multi-select-component";
-const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange, placeholder = "Select...", isSearchable = true, isOpen, hasSelectAll = false, disabled = false, isLoading = false, onMenuToggle, overrideStrings, className, width = "w-72", otherProps, }) => {
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange, placeholder = {
+    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.
     const multiSelectOptions = options.map((option) => ({
         label: option.name,
@@ -11,6 +16,19 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
         label: item.name,
         value: item.value,
     }));
+    const valueRenderer = (selected, _options) => {
+        if (!selected || selected.length === 0) {
+            return (_jsxs("span", { className: "flex items-center gap-2 text-gray-500", children: [placeholder?.icon
+                        ? 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) => ({
@@ -23,8 +41,8 @@ const MultiSelectInput = ({ id, name, options = [], selectedValue = [], onChange
             disableSearch: !isSearchable, 
             // Additional props from react-multi-select-component
             isOpen: isOpen, hasSelectAll: hasSelectAll, disabled: disabled, isLoading: isLoading, onMenuToggle: onMenuToggle, overrideStrings: {
-                selectSomeItems: placeholder,
+                // selectSomeItems: placeholder,
                 ...overrideStrings,
-            }, labelledBy: "Select", ...otherProps }) }));
+            }, labelledBy: "Select", valueRenderer: valueRenderer, ...otherProps }) }));
 };
 export default MultiSelectInput;

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -85,7 +85,7 @@ Default.args = {
         { name: "Option 3", value: "option3" },
     ],
     selectedValue: [],
-    placeholder: "Select options...",
+    placeholder: { text: "Select options..." },
     isSearchable: true,
     hasSelectAll: false,
     disabled: false,
@@ -102,7 +102,7 @@ WithSelectAll.args = {
         { name: "Grape", value: "grape" },
     ],
     selectedValue: [],
-    placeholder: "Select fruits...",
+    placeholder: { text: "Select fruits..." },
     hasSelectAll: true,
     isSearchable: true,
 };
@@ -116,7 +116,7 @@ OpenByDefault.args = {
         { name: "Angular", value: "angular" },
     ],
     selectedValue: [],
-    placeholder: "Pick your JS framework...",
+    placeholder: { text: "Pick your JS framework..." },
     isOpen: true,
     hasSelectAll: false,
 };
@@ -130,7 +130,7 @@ Disabled.args = {
         { name: "Blue", value: "blue" },
     ],
     selectedValue: [],
-    placeholder: "Disabled...",
+    placeholder: { text: "Disabled...", icon: "magnifyingGlass" },
     disabled: true,
 };
 export const LoadingState = Template.bind({});
@@ -143,7 +143,7 @@ LoadingState.args = {
         { name: "Option C", value: "c" },
     ],
     selectedValue: [],
-    placeholder: "Loading...",
+    placeholder: { text: "Loading..." },
     isLoading: true,
 };
 export const CustomStrings = Template.bind({});

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

@@ -9,7 +9,11 @@ export interface MultiSelectInputProps {
     options?: OptionType[];
     selectedValue?: OptionType[];
     onChange: (selected: OptionType[]) => void;
-    placeholder?: string;
+    placeholder?: {
+        text?: string;
+        icon?: string;
+        iconStyle?: string;
+    };
     isSearchable?: boolean;
     isOpen?: boolean;
     hasSelectAll?: boolean;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { OptionType } from "../MultiSelect/MultiSelect.types";
+import "./SearchDrowpdown.scss";
+interface SearchDropdownInputProps {
+    options?: OptionType[];
+    selectedValue?: OptionType[];
+    onChange: (selected: OptionType[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    hasSelectAll?: boolean;
+    bgColor?: string;
+    textHighlight?: string;
+    [key: string]: any;
+}
+/**
+ * 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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MultiSelectInput from "../MultiSelect/MultiSelect";
+import "./SearchDrowpdown.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, ...rest }) => {
+    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) => {
+                            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();
+                            console.log("Filter clicked!", selectedValue);
+                            // ...your custom filter logic
+                        }, children: "Filter" })] }));
+        }
+        else if (option.label === "Select All") {
+            return (_jsxs("label", { className: "select-all-item", style: {
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "0.5rem 1rem",
+                    position: "sticky",
+                    top: 0,
+                    borderBottom: "1px solid #ccc",
+                    zIndex: 10,
+                }, onClick: (e) => {
+                    e.stopPropagation();
+                    onClick(e); // Let the library handle toggling
+                }, 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 (_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: {
+            ItemRenderer: itemRenderer,
+            ...rest.otherProps,
+        }, ...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>({ closeOutSearch, setResetSearch, setEditingHeader, pillColor, textHighlight, column, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, bgColor, textHighlight, column, inputType, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, onChange, selectedValue, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/dist/components/SearchInput/SearchInput.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import SearchTextInput from "./SearchTextInput";
 import SearchNumberInput from "./SearchNumberInput";
 import { Controller } from "react-hook-form";
+import SearchDropdownInput from "./SearchDropdownInput";
 // A simple helper function for default values
 function getDefaultValue(dynamicDefaultValue, valueKey) {
     if (typeof dynamicDefaultValue !== "undefined") {
@@ -10,11 +11,11 @@ function getDefaultValue(dynamicDefaultValue, valueKey) {
     }
     return "";
 }
-const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pillColor = "bg-sky-500", textHighlight = "text-sky-500", column, inputType = "text", dropdownIconProp = {
+const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, bgColor = "bg-sky-500", textHighlight = "text-sky-500", column, inputType = "text", dropdownIconProp = {
     name: "chevronDown",
     weight: "bold",
     iconClasses: "text-black",
-}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, }) => {
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus = false, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, control, valueKey, dynamicDefaultValue, onChange, selectedValue, }) => {
     const containerRef = useRef(null);
     const [localSearchText, setLocalSearchText] = useState("");
     const inputRef = useRef(null);
@@ -48,6 +49,10 @@ const SearchInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pillCol
                 case "number":
                     return (_jsx(SearchNumberInput, { closeOutSearch: () => { }, setResetSearch: () => { }, setEditingHeader: () => { }, column: undefined, dropdownIconProp: dropdownIconProp, dropdownOptions: dropdownOptions, selectedDropdownOption: selectedDropdownOption, onDropdownOptionSelect: onDropdownOptionSelect, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue }));
                 case "multiSelect":
+                    {
+                        console.log(dropdownOptions, "dropdownOptions");
+                    }
+                    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 }));
                 case "boolean":
                 case "date":
                     // Make sure control & valueKey exist before using them

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

@@ -4,4 +4,6 @@ export default _default;
 export declare const Default: any;
 export declare const TextInput: any;
 export declare const NumberInput: any;
+export declare const DropdownInput: any;
+export declare const BooleanInput: any;
 export declare const DisabledInput: any;

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

@@ -33,6 +33,14 @@ export default {
             action: "selected",
             description: "Callback when dropdown option is selected",
         },
+        searchItems: {
+            control: "array",
+            description: "Array of search items",
+        },
+        selectedValue: {
+            control: "array",
+            description: "Array of selected values",
+        },
     },
     parameters: { layout: "centered" },
 };
@@ -47,7 +55,15 @@ const Template = (args) => {
     const [toggleStatus, setToggleStatus] = useState(false);
     const [minValue, setMinValue] = useState();
     const [maxValue, setMaxValue] = useState();
-    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue }));
+    const [selectedValue, setSelectedValue] = useState(args.selectedValue || []);
+    // Handle onChange from the multi-select
+    const handleOnChange = (newSelected) => {
+        setSelectedValue(newSelected);
+        // Call the original onChange if provided in the story args
+        args.onChange?.(newSelected);
+        console.log("Selected items:", newSelected);
+    };
+    return (_jsx(SearchInput, { ...args, selectedDropdownOption: selectedOption, onDropdownOptionSelect: (option) => setSelectedOption(option), searchItems: searchItems, setSearchItems: setSearchItems, toggleStatus: toggleStatus, setToggleStatus: setToggleStatus, minValue: minValue, maxValue: maxValue, setMinValue: setMinValue, setMaxValue: setMaxValue, onChange: handleOnChange, selectedValue: selectedValue }));
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -95,6 +111,55 @@ NumberInput.args = {
     dropdownOptions: ["Exactly", "Less Than", "Greater Than"],
     selectedDropdownOption: "Exactly",
 };
+export const DropdownInput = Template.bind({});
+DropdownInput.args = {
+    inputType: "multiSelect",
+    column: mockColumn,
+    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
+    setResetSearch: () => console.log("Reset search triggered"),
+    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    placeholder: "Search",
+    dropdownOptions: [
+        { uuid: "1", name: "Option 1", value: "option1" },
+        { uuid: "2", name: "Option 2", value: "option2" },
+        { uuid: "3", name: "Option 3", value: "option3" },
+    ],
+    /** For multi-select, `value` is typically an array */
+    selectedValue: [],
+    // onChange: (selected: OptionType[]) => {
+    // 	console.log("Selected items:", selected);
+    // },
+    /** Additional props you might want to set */
+    isSearchable: true,
+    hasSelectAll: true,
+    disabled: false,
+    isLoading: false,
+    type: "multiSelect",
+    // etc...
+};
+export const BooleanInput = Template.bind({});
+BooleanInput.args = {
+    inputType: "multiSelect",
+    column: mockColumn,
+    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
+    setResetSearch: () => console.log("Reset search triggered"),
+    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    placeholder: "Search",
+    dropdownOptions: [
+        { uuid: "1", name: "True", value: "true" },
+        { uuid: "2", name: "False", value: "false" },
+    ],
+    selectedValue: [],
+    // onChange: (selected: OptionType[]) => {
+    // 	console.log("Selected items:", selected);
+    // },
+    isSearchable: true,
+    hasSelectAll: true,
+    disabled: false,
+    isLoading: false,
+    type: "multiSelect",
+    // etc...
+};
 export const DisabledInput = Template.bind({});
 DisabledInput.args = {
     inputType: "text",

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

@@ -5,17 +5,20 @@ type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
     accessor?: string | number | symbol | Accessor<T>;
 };
 export type SearchInputProps<T extends object> = {
+    onChange(newSelected: OptionType[]): unknown;
+    selectedValue: any[];
+    value: any[];
     closeOutSearch: (value: number | null) => void;
     setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
     columHeader?: any;
     column: ColumnWithAccessor<T>;
     parentIndex?: number;
     setEditingHeader: (value: number | null) => void;
-    pillColor?: string;
+    bgColor?: string;
     textHighlight?: string;
     inputType?: string;
-    dropdownOptions?: string[];
-    selectedDropdownOption?: string;
+    dropdownOptions?: string[] | OptionType[] | number[];
+    selectedDropdownOption?: string | OptionType | number;
     onDropdownOptionSelect?: (option: string) => void;
     dropdownIconProp?: searchDropdownIconProps;
     searchItems?: string[] | number[];
@@ -30,6 +33,12 @@ export type SearchInputProps<T extends object> = {
     valueKey?: string;
     dynamicDefaultValue?: any;
 };
+export interface OptionType {
+    uuid: string;
+    name: string;
+    value: string;
+    label: string;
+}
 export type searchDropdownIconProps = {
     name: string;
     weight: string;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -53,7 +53,7 @@ const SearchNumberInput = ({ closeOutSearch, setResetSearch, setEditingHeader, t
             handleSubmitClick();
         }
     };
-    return (_jsx("div", { ref: containerRef, className: "", children: _jsxs("div", { className: `flex flex-col p-4 w-[425px] h-[130px] border-2 border-navy-200 rounded-md`, children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white min-w-32 top-[-8px] left-[-2px]", dropdownClasses: "border-0 border-r-2", icon: dropdownIconProp }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[250px] max-w-[250px] h-10 text-gray flex ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2 rounded-md ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: `flex flex-col p-4 h-[130px] border-2 border-navy-200 rounded-md`, children: [_jsx("div", { className: `flex flex-[1] ${toggleStatus ? "" : "border-2"} h-full max-h-11 items-center justify-around`, children: toggleStatus ? (_jsxs(_Fragment, { children: [_jsx(Input, { focusRingColor: "focus:ring-2", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Min" }), _jsx(Text, { size: "text-md", tag: "span", text: "to", additionalClasses: "px-2" }), _jsx(Input, { focusRingColor: "focus:ring-2", value: maxValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleMaximumInputChange, additionalClasses: "min-w-[180px] max-w-[180px] h-10 text-gray flex border-2 focus:border-transparent ", placeholder: "Max", hasIcons: true, iconPosition: "both" })] })) : (_jsxs(_Fragment, { children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4  h-full flex items-center", menuClasses: "bg-white w-min-[150px] top-[-8px] left-[-2px]", dropdownClasses: "border-0 border-r-2 w-auto", icon: dropdownIconProp }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: minValue, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "number", onChange: handleInputChange, additionalClasses: "min-w-[200px] h-10 text-gray flex ", placeholder: "Amount", hasIcons: true, iconPosition: "both" })] })) }), _jsxs("div", { className: "flex flex-[1] justify-between items-end bg-white px-2 rounded-md ", children: [_jsx(ToggleButton, { initialStatus: toggleStatus, onClick: () => {
                                 setToggleStatus(!toggleStatus);
                             }, activeColorBackground: "bg-sky-500", activeColorBorder: "border-sky-500", activeLabel: "Range", activeTextColor: "text-sky-500", additionalClasses: "flex items-center", inactiveColorBackground: "bg-gray-300", inactiveColorBorder: "border-gray-300", inactiveLabel: "Range", inactiveTextColor: "text-gray-500", pillHeight: "h-8", textPosition: "right", textSize: "text-sm", smallToggle: false, borderStyle: false }), _jsx(BaseButton, { text: "Filter", backgroundColor: "bg-sky-500", additionalClasses: "py-1.5 px-6 text-white", borderColor: "border-none", onClick: handleSubmitClick, shape: "rounded-full" })] })] }) }));
 };

package/dist/components/SearchInput/SearchTextInput.js

@@ -54,7 +54,7 @@ const SearchTextInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pil
         }
     };
     const pillClassnames = `${pillColor} p-1 max-w-fit min-w-20 rounded-full flex justify-between items-center text-white text-xs px-4 border-none mr-4`;
-    return (_jsx("div", { ref: containerRef, className: "", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: "min-w-[250px] max-w-[250px] min-h-full text-gray flex ", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => {
+    return (_jsx("div", { ref: containerRef, className: "w-[425px]", children: _jsxs("div", { className: "flex flex-col border-2 border-navy-200 rounded-md", children: [_jsxs("div", { className: `flex ${searchItems.length ? "border-b-2" : ""} h-full`, children: [_jsx(Dropdown, { options: dropdownOptions, selectedOption: selectedDropdownOption, onOptionSelect: onDropdownOptionSelect, optionClasses: "px-4 py-1 h-full flex items-center", menuClasses: "bg-white min-w-32", icon: dropdownIconProp, dropdownClasses: "border-0 border-r-2 w-auto" }), _jsx(Input, { focusRingColor: "focus:ring-transparent", hasAutoFocus: true, value: localSearchText, iconColor: "text-navy-400", onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: " min-w-[250px] min-h-full text-gray flex", placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx(AnimatePresence, { children: _jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", className: "text-navy-400", children: getFontAwesomeIcon("search", "regular") }) })) : undefined, iconPosition: "both", secondIcon: _jsx("div", { className: "border-transparent text-white min-w-9", children: _jsx(AnimatePresence, { children: localSearchText !== "" && (_jsxs(motion.div, { className: "flex justify-between items-center min-w-4 text-navy-400 hover:cursor-pointer hover:text-primary", initial: "initial", animate: "animate", exit: "exit", children: [_jsx("div", { className: "bg-navy-50 pr-2 pl-1 text-gray-500", onClick: () => {
                                                     setLocalSearchText("");
                                                 }, children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => {
                                 setLocalSearchText("");

package/dist/components/SortArrows/SortArrows.js

@@ -26,7 +26,7 @@ const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSort
         setShowArrowContainer(false);
         onRequestClose?.();
     };
-    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: [_jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }), _jsx("div", { className: `${activeDirection === "desc" ? "rotate-180" : ""} ${counterIcon.numberClassNames} `, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `z-[9989] bg-white rounded flex flex-col border-1 absolute top-6 w-32 ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
+    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${counterIcon.numberClassNames} ${activeDirection === "desc" && " pb-0.5"}`, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `z-[9989] bg-white rounded flex flex-col border-1 absolute top-6 w-32 ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
                 renderPortalOverlay &&
                 renderPortalOverlay(handleClose)] }));
 };

package/dist/components/SortArrows/SortArrows.stories.js

@@ -33,9 +33,9 @@ export const WithOverlayAndIndexCount = {
         return (_jsx("div", { className: "size-96", children: _jsx(SortArrows, { counterIcon: {
                     icon: "triangle",
                     weight: "solid",
-                    numberClassNames: "text-white text-[20px] text-red-400 rounded-full top-1.5 right-0 left-0",
-                    iconClassNames: "text-blue-400 hover:text-red-400 p-4",
-                    numberSize: "text-[50px]",
+                    numberClassNames: " absolute bottom-1.5 left-[10px] text-xs",
+                    iconClassNames: "text-green-500 hover:text-red-400 text-2xl",
+                    numberSize: "  text-red-500 top-0",
                 }, column: column, setSortColumn: setSortColumn, slug: "products", renderPortalOverlay: (onClose) => (_jsx("div", { className: "absolute top-0 left-0 w-[300px] h-[300px] bg-black bg-opacity-50 flex items-center justify-center", onClick: onClose })) }) }));
     },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.37",
+	"version": "1.0.39",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -40,6 +40,7 @@
 		"react-select": "^5.10.0",
 		"react-table": "^7.8.0",
 		"react-table-sticky": "^1.1.3",
+		"sass": "^1.83.4",
 		"storybook-addon-react-router-v6": "^2.0.15",
 		"tslib": "^2.3.0"
 	},