@agilant/toga-blox 1.0.32 → 1.0.34

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

@@ -1,112 +1,99 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import SearchInput from "./SearchInput";
 import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import { useState } from "react";
 export default {
     title: "Components/SearchInput",
     component: SearchInput,
     tags: ["autodocs"],
     argTypes: {
-        onButtonClick: { control: "none", table: { disable: true } },
-        inputType: { control: "none", table: { disable: true } },
-        inputName: { control: "none", table: { disable: true } },
-        placeholder: { control: "none" },
-        hasPlaceholder: { control: "none" },
-        inputTextSize: { control: "none" },
-        inputShape: { control: "none" },
-        backgroundColor: { control: "none" },
-        inputWidth: { control: "none" },
-        inputBorderClasses: { control: "none" },
-        buttonText: { control: "none", table: { disable: true } },
-        buttonIcon: { control: "none", table: { disable: true } },
-        buttonIconClasses: { control: "none" },
-        buttonClasses: { control: "none" },
-        containerClasses: { control: "none" },
+        inputType: {
+            control: {
+                type: "select",
+                options: ["text", "number", "boolean", "date", "multiSelect"],
+            },
+        },
+        closeOutSearch: { control: "none", table: { disable: true } },
+        setResetSearch: { control: "none", table: { disable: true } },
+        column: { control: "none", table: { disable: true } },
+        setEditingHeader: { control: "none", table: { disable: true } },
+        dropdownIconProp: {
+            control: "object",
+            description: "Icon configuration for dropdown",
+        },
+        dropdownOptions: {
+            control: "array",
+            description: "Available options for dropdown",
+        },
+        selectedDropdownOption: {
+            control: "text",
+            description: "Currently selected dropdown option",
+        },
+        onDropdownOptionSelect: {
+            action: "selected",
+            description: "Callback when dropdown option is selected",
+        },
     },
     parameters: { layout: "centered" },
 };
-const Template = (args) => _jsx(SearchInput, { ...args });
+// Mock data for column
+const mockColumn = {
+    id: "mockColumn",
+    Header: "Mock Column",
+};
+const Template = (args) => {
+    const [selectedOption, setSelectedOption] = useState(args.selectedDropdownOption);
+    const [searchItems, setSearchItems] = useState([]);
+    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 }));
+};
 export const Default = Template.bind({});
 Default.args = {
     inputType: "text",
-    inputName: "default",
-    hasPlaceholder: true,
-    placeholder: "Type something...",
-    inputTextSize: "text-base",
-    inputShape: "rounded-md",
-    backgroundColor: "bg-white",
-    inputWidth: "w-80",
-    inputBorderClasses: "border border-gray-300",
-    buttonText: _jsx("span", { children: "Search" }),
-    buttonClasses: "bg-blue-500 text-white px-4 py-2 rounded-md",
-    buttonIcon: getFontAwesomeIcon("search"),
-    buttonIconClasses: "text-white",
-    containerClasses: "flex items-center space-x-2",
-    onButtonClick: (value) => alert(`Button clicked with input: ${value}`),
-};
-export const CommerceSearchInput = Template.bind({});
-CommerceSearchInput.args = {
-    inputType: "search",
-    inputName: "commerceSearch",
-    hasPlaceholder: true,
-    placeholder: "Search for product...",
-    inputTextSize: "text-sm",
-    inputShape: "",
-    backgroundColor: "bg-gray-50",
-    inputWidth: "w-full",
-    inputBorderClasses: "border border-gray-300 focus:outline-none rounded-l-md",
-    buttonIcon: getFontAwesomeIcon("search"),
-    buttonIconClasses: "text-white",
-    buttonClasses: "bg-teal-600 p-2 rounded-r-md hover:bg-teal-700",
-    containerClasses: "flex items-center shadow-sm overflow-hidden",
-    onButtonClick: (value) => console.log(`Searching for: ${value}`),
-};
-export const WithIconButton = Template.bind({});
-WithIconButton.args = {
-    inputType: "search",
-    inputName: "searchIcon",
-    hasPlaceholder: true,
-    placeholder: "Search...",
-    inputTextSize: "text-md",
-    inputShape: "rounded-full",
-    backgroundColor: "bg-gray-50",
-    inputWidth: "w-64",
-    inputBorderClasses: "border border-gray-400",
-    buttonIcon: getFontAwesomeIcon("magnifying-glass"),
-    buttonIconClasses: "text-blue-500",
-    buttonClasses: "p-2",
-    containerClasses: "flex items-center",
-    onButtonClick: (value) => console.log(`Searching for: ${value}`),
+    column: mockColumn,
+    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
+    setResetSearch: () => console.log("Reset search triggered"),
+    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
 };
-export const WithoutButton = Template.bind({});
-WithoutButton.args = {
+export const TextInput = Template.bind({});
+TextInput.args = {
     inputType: "text",
-    inputName: "withoutButton",
-    hasPlaceholder: true,
-    placeholder: "No button here...",
-    inputTextSize: "text-sm",
-    inputShape: "rounded",
-    backgroundColor: "bg-gray-100",
-    inputWidth: "w-full",
-    inputBorderClasses: "border border-gray-300",
-    containerClasses: "flex items-center",
-    onButtonClick: () => { },
+    column: mockColumn,
+    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
+    setResetSearch: () => console.log("Reset search triggered"),
+    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    pillColor: "bg-sky-500",
+    textHighlight: "text-sky-500",
+    dropdownIconProp: {
+        iconClasses: "text-sky-500",
+        name: "chevronDown",
+        weight: "solid",
+    },
+    dropdownOptions: [
+        "Starts with",
+        "Ends with",
+        "Exactly",
+        "Includes",
+        "Excludes",
+    ],
+    selectedDropdownOption: "Starts with",
 };
-export const CustomizedButton = Template.bind({});
-CustomizedButton.args = {
-    inputType: "text",
-    inputName: "customButton",
-    hasPlaceholder: true,
-    placeholder: "Enter your query...",
-    inputTextSize: "text-lg",
-    inputShape: "rounded-lg",
-    backgroundColor: "bg-white",
-    inputWidth: "w-96",
-    inputBorderClasses: "border border-blue-500",
-    buttonText: (_jsxs("span", { className: "flex items-center space-x-1", children: [getFontAwesomeIcon("arrow-right"), _jsx("span", { children: "Go" })] })),
-    buttonClasses: "bg-green-600 text-white hover:bg-green-700 transition-colors rounded-full px-5 py-2",
-    buttonIcon: null,
-    containerClasses: "flex items-center space-x-3",
-    onButtonClick: (value) => alert(`Navigating with: ${value}`),
+export const NumberInput = Template.bind({});
+NumberInput.args = {
+    inputType: "number",
+    column: mockColumn,
+    closeOutSearch: (value) => console.log(`Search cleared: ${value}`),
+    setResetSearch: () => console.log("Reset search triggered"),
+    setEditingHeader: (value) => console.log(`Editing header: ${value}`),
+    dropdownIconProp: {
+        iconClasses: "text-sky-500",
+        name: "chevronDown",
+        weight: "solid",
+    },
+    dropdownOptions: ["Exactly", "Less Than", "Greater Than"],
+    selectedDropdownOption: "Exactly",
 };
 export const DisabledInput = Template.bind({});
 DisabledInput.args = {

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

@@ -1,25 +1,38 @@
 import React from "react";
-export interface SearchInputProps {
-    onChange?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
-    value?: string;
-    label: React.ReactNode;
-    role?: string;
-    ariaLabel?: string;
-    inputType: string;
-    inputName: string;
-    hasPlaceholder: boolean;
-    placeholder: string;
-    containerClasses?: string;
-    inputTextSize?: string;
-    inputWidth?: string;
-    inputShape?: string;
-    borderColor?: string;
-    backgroundColor?: string;
-    inputBorderClasses?: string;
-    additionalClasses?: string;
-    buttonText?: JSX.Element;
-    buttonClasses?: string;
-    buttonIcon?: JSX.Element | null;
-    buttonIconClasses?: string;
-    onButtonClick: (inputValue: string) => void;
-}
+import { Control } from "react-hook-form";
+import { Accessor, ColumnInstance } from "react-table";
+type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
+    accessor?: string | number | symbol | Accessor<T>;
+};
+export type SearchInputProps<T extends object> = {
+    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;
+    textHighlight?: string;
+    inputType?: string;
+    dropdownOptions?: string[];
+    selectedDropdownOption?: string;
+    onDropdownOptionSelect?: (option: string) => void;
+    dropdownIconProp?: searchDropdownIconProps;
+    searchItems?: string[] | number[];
+    setSearchItems?: React.Dispatch<React.SetStateAction<string[] | number[]>>;
+    toggleStatus?: boolean;
+    setToggleStatus?: React.Dispatch<React.SetStateAction<boolean>>;
+    minValue?: string;
+    setMinValue?: React.Dispatch<React.SetStateAction<string>>;
+    maxValue?: string;
+    setMaxValue?: React.Dispatch<React.SetStateAction<string>>;
+    control?: Control<any>;
+    valueKey?: string;
+    dynamicDefaultValue?: any;
+};
+export type searchDropdownIconProps = {
+    name: string;
+    weight: string;
+    iconClasses: string;
+};
+export {};

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

@@ -0,0 +1,31 @@
+import { Accessor } from "react-table";
+import React from "react";
+import { ColumnInstance } from "react-table";
+import { searchDropdownIconProps } from "./SearchInput.types";
+type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
+    accessor?: string | number | symbol | Accessor<T>;
+};
+type SearchNumberInputProps<T extends object> = {
+    closeOutSearch: (value: number | null) => void;
+    setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
+    columHeader?: any;
+    parentIndex?: number;
+    pillColor?: string;
+    textHighlight?: string;
+    column: ColumnWithAccessor<T>;
+    setEditingHeader: (value: number | null) => void;
+    dropdownOptions?: string[];
+    selectedDropdownOption?: string;
+    onDropdownOptionSelect?: (option: string) => void;
+    dropdownIconProp?: searchDropdownIconProps;
+    searchItems?: string[];
+    setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
+    toggleStatus?: boolean;
+    setToggleStatus?: React.Dispatch<React.SetStateAction<boolean>>;
+    minValue?: string;
+    setMinValue?: React.Dispatch<React.SetStateAction<string>>;
+    maxValue?: string;
+    setMaxValue?: React.Dispatch<React.SetStateAction<string>>;
+};
+declare const SearchNumberInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, textHighlight, column, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, }: SearchNumberInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default SearchNumberInput;

package/dist/components/SearchInput/SearchNumberInput.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Input } from "../Input";
+import Dropdown from "../Dropdown/Dropdown";
+import ToggleButton from "../ToggleButton/ToggleButton";
+import BaseButton from "../BaseButton";
+import Text from "../Text";
+const SearchNumberInput = ({ closeOutSearch, setResetSearch, setEditingHeader, textHighlight = "text-sky-500", column, dropdownIconProp = {
+    iconClasses: textHighlight,
+    name: "chevronDown",
+    weight: "solid",
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, toggleStatus, setToggleStatus, minValue, setMinValue, maxValue, setMaxValue, }) => {
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    // Focus the input when editing starts (if needed)
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    const handleInputChange = (event) => {
+        setMinValue(event.target.value);
+    };
+    const handleMaximumInputChange = (event) => {
+        setMaxValue(event.target.value);
+    };
+    const handleSubmitClick = () => {
+        let safeHeader;
+        if (typeof column.Header === "string") {
+            safeHeader = column.Header;
+        }
+        else {
+            safeHeader = column.accessor || "Unnamed Column";
+        }
+        if (!minValue) {
+            // Remove criterion if text is empty
+        }
+        else {
+            // Update or add criterion
+        }
+        setEditingHeader(null);
+    };
+    const handleIconClick = (item) => {
+        // Remove criterion
+        const filteredItems = searchItems.filter((ele) => ele !== item);
+        setSearchItems(filteredItems);
+        setResetSearch((prevResetSearch) => !prevResetSearch);
+        closeOutSearch(null);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            // setSearchItems([...searchItems, localSearchText]);
+            // setLocalSearchText("");
+            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: () => {
+                                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" })] })] }) }));
+};
+export default SearchNumberInput;

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

@@ -0,0 +1,24 @@
+import { Accessor } from "react-table";
+import React from "react";
+import { ColumnInstance } from "react-table";
+import { searchDropdownIconProps } from "./SearchInput.types";
+type ColumnWithAccessor<T extends object> = ColumnInstance<T> & {
+    accessor?: string | number | symbol | Accessor<T>;
+};
+type SearchTextInputProps<T extends object> = {
+    closeOutSearch: (value: number | null) => void;
+    setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
+    columHeader?: any;
+    pillColor?: string;
+    textHighlight?: string;
+    column: ColumnWithAccessor<T>;
+    setEditingHeader: (value: number | null) => void;
+    dropdownIconProp?: searchDropdownIconProps;
+    selectedDropdownOption?: string;
+    onDropdownOptionSelect?: (option: string) => void;
+    dropdownOptions?: string[];
+    searchItems?: string[];
+    setSearchItems?: React.Dispatch<React.SetStateAction<string[]>>;
+};
+declare const SearchTextInput: <T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, pillColor, textHighlight, column, dropdownIconProp, dropdownOptions, selectedDropdownOption, onDropdownOptionSelect, searchItems, setSearchItems, }: SearchTextInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default SearchTextInput;

package/dist/components/SearchInput/SearchTextInput.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Input } from "../Input";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import Dropdown from "../Dropdown/Dropdown";
+import Badge from "../Badge/Badge";
+import Text from "../Text";
+const SearchTextInput = ({ closeOutSearch, setResetSearch, setEditingHeader, pillColor = "bg-sky-500", textHighlight = "text-sky-500", column, dropdownIconProp = {
+    iconClasses: textHighlight,
+    name: "chevronDown",
+    weight: "solid",
+}, dropdownOptions = [], selectedDropdownOption = "", onDropdownOptionSelect, searchItems = [], setSearchItems, }) => {
+    const containerRef = useRef(null);
+    const [localSearchText, setLocalSearchText] = useState("");
+    const inputRef = useRef(null);
+    // Focus the input when editing starts (if needed)
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    const handleInputChange = (event) => {
+        setLocalSearchText(event.target.value);
+    };
+    const handleSubmitClick = () => {
+        const trimmedSearchText = localSearchText.trim();
+        let safeHeader;
+        if (typeof column.Header === "string") {
+            safeHeader = column.Header;
+        }
+        else {
+            safeHeader = column.accessor || "Unnamed Column";
+        }
+        if (trimmedSearchText === "") {
+            // Remove criterion if text is empty
+        }
+        else {
+            // Update or add criterion
+        }
+        setEditingHeader(null);
+    };
+    const handleIconClick = (item) => {
+        // Remove criterion
+        const filteredItems = searchItems.filter((ele) => ele !== item);
+        setSearchItems(filteredItems);
+        setResetSearch((prevResetSearch) => !prevResetSearch);
+        closeOutSearch(null);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            setSearchItems([...searchItems, localSearchText]);
+            setLocalSearchText("");
+            handleSubmitClick();
+        }
+    };
+    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: () => {
+                                                    setLocalSearchText("");
+                                                }, children: getFontAwesomeIcon("xmark", "regular") }), _jsx("div", { className: `${textHighlight} text-sm hover:text-primary`, children: getFontAwesomeIcon("search", "solid") })] })) }) }), onIconClick: () => {
+                                setLocalSearchText("");
+                            } })] }), searchItems?.length ? (_jsx("div", { className: " flex bg-white py-2 px-2 rounded-md ", children: searchItems?.map((item, index) => {
+                        return (_jsx(Badge, { backgroundColor: pillColor, borderRadius: "rounded-full", hasMobileStyle: true, hasRightIcon: true, icon: _jsx("div", { className: "text-white text-xxs", children: getFontAwesomeIcon("xmark", "solid") }), iconSize: "text-sm", mobileIconLabel: item, onClick: () => handleIconClick(item), text: _jsx(Text, { color: "text-white", fontFamily: "font-serif", size: "text-sm", tag: "span", text: item }), badgeContainerClasses: pillClassnames, type: "span" }));
+                    }) })) : null] }) }));
+};
+export default SearchTextInput;

package/dist/components/SortArrowIcon/SortArrowIcon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SortArrowIconProps } from "./types";
+declare const SortArrowIcon: React.FC<SortArrowIconProps>;
+export default SortArrowIcon;

package/dist/components/SortArrowIcon/SortArrowIcon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SortArrowIcon = ({ direction, setColumn, slug, onClick, fillColor = "fill-blue-500", }) => {
+    const handleClick = () => {
+        const directionValue = direction === "up" ? "+" : "-";
+        setColumn?.({ [slug]: directionValue });
+        onClick?.();
+    };
+    const arrowContainerClassNames = `flex justify-center items-center pt-[1px] ${direction}`;
+    return (_jsx("div", { className: arrowContainerClassNames, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "6", viewBox: "0 0 8 6", onClick: handleClick, className: "cursor-pointer", role: "img" // Add this line
+            , children: direction === "up" ? (_jsx("path", { className: fillColor, d: "M3.47265 0.960938C3.7539 0.65625 4.24609 0.65625 4.52734 0.960938L7.52734 3.96094C7.73828 4.17188 7.80859 4.5 7.6914 4.78125C7.57421 5.0625 7.3164 5.25 7.01171 5.25H1.01171C0.707027 5.25 0.425777 5.0625 0.308589 4.78125C0.191402 4.5 0.261714 4.17188 0.472652 3.96094L3.47265 0.960938Z" })) : (_jsx("path", { className: fillColor, d: "M3.47265 5.03906L0.472652 2.03906C0.261714 1.82812 0.191402 1.5 0.308589 1.21875C0.425777 0.9375 0.707027 0.75 1.01171 0.75H7.01171C7.29296 0.75 7.57421 0.9375 7.6914 1.21875C7.80859 1.5 7.73828 1.82812 7.52734 2.03906L4.52734 5.03906C4.24609 5.34375 3.7539 5.34375 3.47265 5.03906Z" })) }) }));
+};
+export default SortArrowIcon;

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

@@ -0,0 +1,17 @@
+import { Meta } from "@storybook/react";
+import SortArrowIcon from "./SortArrowIcon";
+declare const _default: Meta<typeof SortArrowIcon>;
+export default _default;
+export declare const Default: any;
+export declare const DownDirection: any;
+export declare const UpDirection: any;
+export declare const BothDirections: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};

package/dist/components/SortArrowIcon/SortArrowIcon.stories.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SortArrowIcon from "./SortArrowIcon";
+export default {
+    title: "Components/SortArrowIcon",
+    component: SortArrowIcon,
+    argTypes: {
+        direction: {
+            control: { type: "select", options: ["up", "down"] },
+            description: "Direction of the arrow (up or down).",
+        },
+        columnName: {
+            control: "text",
+            description: "Name of the column being sorted.",
+        },
+        setColumn: {
+            action: "setColumn",
+            description: "Callback function to set the sort column.",
+        },
+        isActive: {
+            control: "boolean",
+            description: "Whether the arrow is active (highlighted).",
+        },
+        parentIndex: {
+            control: "number",
+            description: "Index of the parent row (if applicable).",
+        },
+        slug: {
+            control: "text",
+            description: "Unique identifier for the column.",
+        },
+        onClick: {
+            action: "clicked",
+            description: "Callback function triggered when the arrow is clicked.",
+        },
+        darkMode: {
+            control: "boolean",
+            description: "Whether dark mode is enabled.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A sort arrow icon component that indicates the sorting direction (up or down) and can be used in tables or other UI elements.",
+            },
+        },
+    },
+};
+const Template = (args) => (_jsx(SortArrowIcon, { ...args }));
+// Default story
+export const Default = Template.bind({});
+Default.args = {
+    direction: "up",
+    columnName: "Name",
+};
+// Story for down direction
+export const DownDirection = Template.bind({});
+DownDirection.args = {
+    ...Default.args,
+    direction: "down",
+};
+// Story for inactive state
+export const UpDirection = Template.bind({});
+UpDirection.args = {
+    ...Default.args,
+    isActive: false,
+};
+// Story to show both up and down arrows
+export const BothDirections = () => (_jsxs("div", { style: { display: "flex flex-column", gap: "16px" }, children: [_jsx("div", { className: "pb-2", children: _jsx(SortArrowIcon, { direction: "up", columnName: "Name", isActive: false, slug: "name" }) }), _jsx("div", { children: _jsx(SortArrowIcon, { direction: "down", columnName: "Name", isActive: false, slug: "name", fillColor: "fill-red-500" }) })] }));
+BothDirections.parameters = {
+    docs: {
+        description: {
+            story: "Displays both up and down arrows side by side. This mimics how the arrows might appear in a table header for sorting.  Also shows how the arrow colors are dynamic",
+        },
+    },
+};

package/dist/components/SortArrowIcon/SortArrowIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SortArrowIcon/SortArrowIcon.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import SortArrowIcon from "./SortArrowIcon";
+import { describe, expect, it, vi } from "vitest";
+describe("SortArrowIcon Component", () => {
+    it("renders the up arrow correctly", () => {
+        render(_jsx(SortArrowIcon, { direction: "up", columnName: "test", isActive: true, slug: "test" }));
+        const svg = screen.getByRole("img");
+        expect(svg).toBeInTheDocument();
+        expect(svg).toHaveAttribute("viewBox", "0 0 8 6");
+    });
+    it("renders the down arrow correctly", () => {
+        render(_jsx(SortArrowIcon, { direction: "down", columnName: "test", isActive: true, slug: "test" }));
+        const svg = screen.getByRole("img");
+        expect(svg).toBeInTheDocument();
+        expect(svg).toHaveAttribute("viewBox", "0 0 8 6");
+    });
+    it("calls onClick and setColumn when the arrow is clicked", () => {
+        const onClick = vi.fn();
+        const setColumn = vi.fn();
+        render(_jsx(SortArrowIcon, { direction: "up", columnName: "test", isActive: true, slug: "test", onClick: onClick, setColumn: setColumn }));
+        const svg = screen.getByRole("img");
+        fireEvent.click(svg);
+        expect(onClick).toHaveBeenCalled();
+        expect(setColumn).toHaveBeenCalledWith({ test: "+" });
+    });
+    it("applies the correct fillColor class", () => {
+        render(_jsx(SortArrowIcon, { direction: "up", columnName: "test", isActive: true, slug: "test", fillColor: "fill-red-500" }));
+        const path = screen.getByRole("img").querySelector("path");
+        expect(path).toHaveClass("fill-red-500");
+    });
+    it("does not call setColumn if it is not provided", () => {
+        const onClick = vi.fn();
+        render(_jsx(SortArrowIcon, { direction: "up", columnName: "test", isActive: true, slug: "test", onClick: onClick }));
+        const svg = screen.getByRole("img");
+        fireEvent.click(svg);
+        expect(onClick).toHaveBeenCalled();
+    });
+    it("renders with default fillColor if not provided", () => {
+        render(_jsx(SortArrowIcon, { direction: "up", columnName: "test", isActive: true, slug: "test" }));
+        const path = screen.getByRole("img").querySelector("path");
+        expect(path).toHaveClass("fill-blue-500");
+    });
+});

package/dist/components/SortArrowIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SortArrowIcon";
+export * from "./types";

package/dist/components/SortArrowIcon/index.js

@@ -0,0 +1,2 @@
+export { default } from "./SortArrowIcon";
+export * from "./types";

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

@@ -0,0 +1,15 @@
+type SortDirection = "up" | "down";
+export interface SortArrowIconProps {
+    direction: SortDirection;
+    columnName: string;
+    setColumn?: (column: {
+        [key: string]: string;
+    }) => void;
+    isActive: boolean;
+    parentIndex?: number;
+    slug: string;
+    onClick?: () => void;
+    darkMode?: boolean;
+    fillColor?: string;
+}
+export {};

package/dist/components/SortArrowIcon/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/SortArrows/SortArrows.d.ts

@@ -0,0 +1,3 @@
+import { SortArrowsProps } from "./types";
+declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, }: SortArrowsProps<T>) => JSX.Element | null;
+export default SortArrows;