@agilant/toga-blox 1.0.32 → 1.0.34

package/dist/components/MagnifyingIcon/MagnifyingIcon.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// src/components/MagnifyingIcon.tsx
+import { forwardRef, useEffect, useState } from "react";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const MagnifyingIcon = forwardRef(({ columnIndex, editingHeader, setEditingHeader, setHeaderValue, column, setSearchColumn, setActiveColumnFromSearch, setActiveColumn, iconColor = "text-blue-500", iconActiveColor = "text-green-500", iconActiveBackgroundColor = "bg-red-500", isActive, additionalIconClasses, setSearchText, searchText, isSearchOpen, }, ref) => {
+    const [showActiveStyles, setShowActiveStyles] = useState(false);
+    useEffect(() => {
+        if (isActive !== undefined) {
+            setShowActiveStyles(isActive);
+        }
+        else {
+            const checkSearchCriteria = () => {
+                const searchCriteriaRaw = localStorage.getItem("searchCriteria");
+                let searchCriteria = [];
+                try {
+                    if (searchCriteriaRaw) {
+                        searchCriteria = JSON.parse(searchCriteriaRaw);
+                    }
+                }
+                catch (e) {
+                    console.error("Failed to parse searchCriteria from localStorage:", e);
+                    searchCriteria = [];
+                }
+                const hasSearchValue = searchCriteria.some((item) => String(item.searchColumn.id) ===
+                    String(column.id) &&
+                    item.submittedSearchText &&
+                    item.submittedSearchText.trim() !== "");
+                setShowActiveStyles(hasSearchValue || editingHeader === columnIndex);
+            };
+            checkSearchCriteria();
+            const handleStorageEvent = () => {
+                checkSearchCriteria();
+            };
+            window.addEventListener("localStorageUpdate", handleStorageEvent);
+            return () => {
+                window.removeEventListener("localStorageUpdate", handleStorageEvent);
+            };
+        }
+    }, [isActive, editingHeader, column.id, columnIndex]);
+    useEffect(() => {
+        if (isSearchOpen) {
+            console.log("Search is open with text:", searchText);
+        }
+    }, [isSearchOpen, searchText]);
+    const handleClick = (event) => {
+        event.stopPropagation();
+        if (!isSearchOpen) {
+            setSearchText?.("");
+        }
+        setEditingHeader(columnIndex);
+        setHeaderValue(column.Header);
+        setSearchColumn(column);
+        setActiveColumnFromSearch(column.id);
+        setActiveColumn(columnIndex);
+    };
+    return (_jsx("div", { ref: ref, "data-testid": "magnifying-icon-test-id", className: `flex items-center cursor-pointer size-[18px] rounded relative ml-1  ${iconColor} ${showActiveStyles
+            ? `${iconActiveBackgroundColor} hover:bg-blue-500 still-active`
+            : "hover:bg-white"}`, onClick: handleClick, children: _jsx("div", { className: `text-xs w-full ${additionalIconClasses} ${showActiveStyles ? "text-white" : iconActiveColor}`, children: getFontAwesomeIcon("magnifyingGlass", "solid") }) }));
+});
+export default MagnifyingIcon;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import MagnifyingIcon from "./MagnifyingIcon";
+declare const meta: Meta<typeof MagnifyingIcon>;
+export default meta;
+type Story = StoryObj<typeof MagnifyingIcon>;
+export declare const Default: Story;
+export declare const WithActiveClass: Story;
+export declare const WithClickAlert: Story;
+export declare const WithMockLocalStorage: Story;

package/dist/components/MagnifyingIcon/MagnifyingIcon.stories.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MagnifyingIcon from "./MagnifyingIcon";
+const meta = {
+    title: "Components/MagnifyingIcon",
+    component: MagnifyingIcon,
+    tags: ["autodocs"],
+    argTypes: {
+        columnIndex: { control: "number" },
+        editingHeader: { control: "number" },
+        isActive: { control: "boolean" },
+        additionalIconClasses: { control: "text" },
+    },
+    // Add a decorator to wrap all stories in a div
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                padding: "20px",
+                borderRadius: "8px",
+                width: "fit-content",
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+// Default story (without active class)
+export const Default = {
+    args: {
+        columnIndex: 0,
+        editingHeader: null,
+        setEditingHeader: () => { },
+        setHeaderValue: () => { },
+        additionalIconClasses: "p-4",
+        column: {
+            id: "exampleColumn",
+            Header: "Example Column",
+        },
+        setSearchColumn: () => { },
+        setActiveColumnFromSearch: () => { },
+        setActiveColumn: () => { },
+        isActive: false,
+    },
+};
+// Story with active class
+export const WithActiveClass = {
+    args: {
+        ...Default.args,
+        isActive: true,
+    },
+};
+export const WithClickAlert = {
+    args: {
+        ...Default.args,
+        setEditingHeader: (columnIndex) => {
+            alert(`the column index and data have been updated! Column Index =` +
+                columnIndex);
+        },
+    },
+};
+export const WithMockLocalStorage = {
+    args: {
+        ...Default.args,
+    },
+    decorators: [
+        (Story) => {
+            localStorage.setItem("searchCriteria", JSON.stringify([
+                {
+                    searchColumn: { id: "exampleColumn" },
+                    submittedSearchText: "test",
+                },
+            ]));
+            return _jsx(Story, {});
+        },
+    ],
+};

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

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

package/dist/components/MagnifyingIcon/MagnifyingIcon.test.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import MagnifyingIcon from "./MagnifyingIcon";
+describe("MagnifyingIcon", () => {
+    const mockSetEditingHeader = vi.fn();
+    const mockSetHeaderValue = vi.fn();
+    const mockSetSearchColumn = vi.fn();
+    const mockSetActiveColumnFromSearch = vi.fn();
+    const mockSetActiveColumn = vi.fn();
+    const defaultProps = {
+        columnIndex: 2,
+        editingHeader: null,
+        setEditingHeader: mockSetEditingHeader,
+        setHeaderValue: mockSetHeaderValue,
+        column: {
+            id: "exampleColumn",
+            Header: "Example Column",
+        },
+        setSearchColumn: mockSetSearchColumn,
+        setActiveColumnFromSearch: mockSetActiveColumnFromSearch,
+        setActiveColumn: mockSetActiveColumn,
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        localStorage.clear();
+    });
+    it("renders without crashing", () => {
+        render(_jsx(MagnifyingIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        expect(iconDiv).toBeInTheDocument();
+    });
+    it("calls the appropriate props on click", () => {
+        render(_jsx(MagnifyingIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        fireEvent.click(iconDiv);
+        expect(mockSetEditingHeader).toHaveBeenCalledWith(2);
+        expect(mockSetHeaderValue).toHaveBeenCalledWith("Example Column");
+        expect(mockSetSearchColumn).toHaveBeenCalledWith(defaultProps.column);
+        expect(mockSetActiveColumnFromSearch).toHaveBeenCalledWith("exampleColumn");
+        expect(mockSetActiveColumn).toHaveBeenCalledWith(2);
+    });
+    it("applies active styles if localStorage has matching search criteria", () => {
+        const fakeCriteria = [
+            {
+                searchColumn: { id: "exampleColumn" },
+                submittedSearchText: "Hello World",
+            },
+        ];
+        localStorage.setItem("searchCriteria", JSON.stringify(fakeCriteria));
+        render(_jsx(MagnifyingIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        // Now "active" means we expect "bg-red-500" & "still-active"
+        expect(iconDiv.className).toContain("bg-red-500");
+        expect(iconDiv.className).toContain("still-active");
+        // Optionally also check the hover state:
+        expect(iconDiv.className).toContain("hover:bg-blue-500");
+    });
+    it("doesn't apply active styles if localStorage is empty", () => {
+        render(_jsx(MagnifyingIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        // Not active => no "bg-red-500"
+        expect(iconDiv.className).not.toContain("bg-red-500");
+        // By default, we see "hover:bg-white"
+        expect(iconDiv.className).toContain("hover:bg-white");
+    });
+    it("applies active styles if the column is being edited (editingHeader === columnIndex)", () => {
+        render(_jsx(MagnifyingIcon, { ...defaultProps, editingHeader: 2 }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        // Being edited => active => "bg-red-500"
+        expect(iconDiv.className).toContain("bg-red-500");
+        expect(iconDiv.className).toContain("still-active");
+        expect(iconDiv.className).toContain("hover:bg-blue-500");
+    });
+    it("handles invalid JSON in localStorage gracefully", () => {
+        localStorage.setItem("searchCriteria", "{ invalid json }");
+        const spy = vi.spyOn(console, "error").mockImplementation(() => { });
+        render(_jsx(MagnifyingIcon, { ...defaultProps }));
+        // We expect the parse error to have been caught:
+        expect(spy).toHaveBeenCalled();
+        spy.mockRestore();
+    });
+    it("updates active state when receiving a 'localStorageUpdate' event", async () => {
+        render(_jsx(MagnifyingIcon, { ...defaultProps }));
+        const iconDiv = screen.getByTestId("magnifying-icon-test-id");
+        expect(iconDiv.className).not.toContain("bg-red-500");
+        // Set localStorage and dispatch the event
+        localStorage.setItem("searchCriteria", JSON.stringify([
+            {
+                searchColumn: { id: "exampleColumn" },
+                submittedSearchText: "some text",
+            },
+        ]));
+        window.dispatchEvent(new Event("localStorageUpdate"));
+        // now wait for the re-render
+        await waitFor(() => {
+            expect(iconDiv.className).toContain("bg-red-500");
+            expect(iconDiv.className).toContain("still-active");
+        });
+    });
+});

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

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

package/dist/components/MagnifyingIcon/index.js

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

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

@@ -0,0 +1,20 @@
+import { Column } from "react-table";
+export interface MagnifyingIconProps<T extends object> {
+    columnIndex: number;
+    editingHeader: number | null;
+    setEditingHeader: (index: number | null) => void;
+    setHeaderValue: (value: string) => void;
+    column: Column<T>;
+    setSearchColumn: (col: Column<T>) => void;
+    setActiveColumnFromSearch: (id: string) => void;
+    setActiveColumn: (index: number) => void;
+    iconColor?: string;
+    iconBackgroundColor?: string;
+    iconActiveColor?: string;
+    iconActiveBackgroundColor?: string;
+    isActive?: boolean;
+    additionalIconClasses?: string;
+    setSearchText?: (text: string) => void;
+    searchText?: string;
+    isSearchOpen?: boolean;
+}

package/dist/components/MagnifyingIcon/types.js

@@ -0,0 +1,2 @@
+// src/components/MagnifyingIcon/types.ts
+export {};

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

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

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,30 @@
+import { 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, }) => {
+    // Convert your OptionType to the shape expected by react-multi-select-component.
+    const multiSelectOptions = options.map((option) => ({
+        label: option.name,
+        value: option.value,
+    }));
+    // Convert the currently selected value(s) to the shape expected by the component.
+    const multiSelectValue = selectedValue.map((item) => ({
+        label: item.name,
+        value: item.value,
+    }));
+    return (_jsx("div", { className: `${width}`, children: _jsx(MultiSelect, { id: id, name: name, className: className, options: multiSelectOptions, value: multiSelectValue, onChange: (selectedOptions) => {
+                // Convert back to OptionType when passing to onChange
+                const mapped = selectedOptions.map((opt) => ({
+                    name: opt.label,
+                    value: opt.value,
+                }));
+                onChange(mapped);
+            }, 
+            // Toggle search based on isSearchable
+            disableSearch: !isSearchable, 
+            // Additional props from react-multi-select-component
+            isOpen: isOpen, hasSelectAll: hasSelectAll, disabled: disabled, isLoading: isLoading, onMenuToggle: onMenuToggle, overrideStrings: {
+                selectSomeItems: placeholder,
+                ...overrideStrings,
+            }, labelledBy: "Select", ...otherProps }) }));
+};
+export default MultiSelectInput;

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

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import MultiSelect from "./MultiSelect";
+declare const _default: Meta<typeof MultiSelect>;
+export default _default;
+export declare const Default: any;
+export declare const WithSelectAll: any;
+export declare const OpenByDefault: any;
+export declare const Disabled: any;
+export declare const LoadingState: any;
+export declare const CustomStrings: any;

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

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import MultiSelect from "./MultiSelect";
+export default {
+    title: "Components/MultiSelect",
+    component: MultiSelect,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: {
+        id: {
+            control: "text",
+            description: "HTML id attribute for the multi-select.",
+        },
+        name: {
+            control: "text",
+            description: "HTML name attribute for the multi-select.",
+        },
+        options: {
+            control: "object",
+            description: "Array of option objects to display.",
+        },
+        value: {
+            control: "object",
+            description: "Currently selected options (array of objects).",
+        },
+        onChange: {
+            action: "changed",
+            description: "Callback function triggered when selection changes.",
+        },
+        placeholder: {
+            control: "text",
+            description: "Placeholder text when no items are selected.",
+        },
+        isSearchable: {
+            control: "boolean",
+            description: "Whether the dropdown has search enabled.",
+        },
+        isOpen: {
+            control: "boolean",
+            description: "Control whether the menu is open by default.",
+        },
+        hasSelectAll: {
+            control: "boolean",
+            description: "Show/hide the 'Select All' option.",
+        },
+        disabled: {
+            control: "boolean",
+            description: "Disable all user interaction.",
+        },
+        isLoading: {
+            control: "boolean",
+            description: "Show loading spinner and disable interaction.",
+        },
+        onMenuToggle: {
+            action: "menuToggled",
+            description: "Called when menu is opened or closed.",
+        },
+        overrideStrings: {
+            control: "object",
+            description: "Override default text strings (e.g., select all, search placeholder).",
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes for the container.",
+        },
+    },
+};
+const Template = (args) => {
+    // Local state to control selected options in Storybook
+    const [selected, setSelected] = useState(args?.selectedValue || []);
+    return (_jsx(MultiSelect, { ...args, selectedValue: selected, onChange: (newValues) => {
+            setSelected(newValues);
+            args.onChange?.(newValues);
+        } }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    id: "default-multiselect",
+    name: "defaultMultiSelect",
+    options: [
+        { name: "Option 1", value: "option1" },
+        { name: "Option 2", value: "option2" },
+        { name: "Option 3", value: "option3" },
+    ],
+    selectedValue: [],
+    placeholder: "Select options...",
+    isSearchable: true,
+    hasSelectAll: false,
+    disabled: false,
+    isLoading: false,
+};
+export const WithSelectAll = Template.bind({});
+WithSelectAll.args = {
+    id: "selectall-multiselect",
+    name: "selectAllMultiSelect",
+    options: [
+        { name: "Apple", value: "apple" },
+        { name: "Orange", value: "orange" },
+        { name: "Banana", value: "banana" },
+        { name: "Grape", value: "grape" },
+    ],
+    selectedValue: [],
+    placeholder: "Select fruits...",
+    hasSelectAll: true,
+    isSearchable: true,
+};
+export const OpenByDefault = Template.bind({});
+OpenByDefault.args = {
+    id: "open-multiselect",
+    name: "openByDefaultMultiSelect",
+    options: [
+        { name: "React", value: "react" },
+        { name: "Vue", value: "vue" },
+        { name: "Angular", value: "angular" },
+    ],
+    selectedValue: [],
+    placeholder: "Pick your JS framework...",
+    isOpen: true,
+    hasSelectAll: false,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    id: "disabled-multiselect",
+    name: "disabledMultiSelect",
+    options: [
+        { name: "Red", value: "red" },
+        { name: "Green", value: "green" },
+        { name: "Blue", value: "blue" },
+    ],
+    selectedValue: [],
+    placeholder: "Disabled...",
+    disabled: true,
+};
+export const LoadingState = Template.bind({});
+LoadingState.args = {
+    id: "loading-multiselect",
+    name: "loadingMultiSelect",
+    options: [
+        { name: "Option A", value: "a" },
+        { name: "Option B", value: "b" },
+        { name: "Option C", value: "c" },
+    ],
+    selectedValue: [],
+    placeholder: "Loading...",
+    isLoading: true,
+};
+export const CustomStrings = Template.bind({});
+CustomStrings.args = {
+    options: [
+        { name: "Item One", value: "1" },
+        { name: "Item Two", value: "2" },
+        { name: "Item Three", value: "3" },
+    ],
+    selectedValue: [],
+    overrideStrings: {
+        selectSomeItems: "Choose Some Items...",
+        selectAll: "Select Everything",
+        allItemsAreSelected: "All items selected!",
+    },
+};

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

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

package/dist/components/MultiSelect/MultiSelect.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, test, expect, beforeEach, vi } from "vitest";
+import MultiSelect from "./MultiSelect";
+// Mock props
+const mockOnChange = vi.fn();
+const options = [
+    { name: "Option 1", value: "option1" },
+    { name: "Option 2", value: "option2" },
+    { name: "Option 3", value: "option3" },
+];
+describe("MultiSelect Component", () => {
+    beforeEach(() => {
+        mockOnChange.mockClear();
+    });
+    test("renders the multi-select with the placeholder if no value is selected", () => {
+        render(_jsx(MultiSelect, { options: options, onChange: mockOnChange, selectedValue: [] }));
+        // The default placeholder is "Select..."
+        expect(screen.getByText("Select...")).toBeInTheDocument();
+    });
+    test("opens the dropdown menu when the placeholder is clicked", () => {
+        render(_jsx(MultiSelect, { options: options, onChange: mockOnChange, selectedValue: [] }));
+        // Click on the placeholder text
+        fireEvent.click(screen.getByText("Select..."));
+        // All options should now appear in the document
+        expect(screen.getByText("Option 1")).toBeInTheDocument();
+        expect(screen.getByText("Option 2")).toBeInTheDocument();
+        expect(screen.getByText("Option 3")).toBeInTheDocument();
+    });
+    test("selects an option and calls onChange with the new selection", () => {
+        render(_jsx(MultiSelect, { options: options, onChange: mockOnChange, selectedValue: [] }));
+        // Open the menu
+        fireEvent.click(screen.getByText("Select..."));
+        // Click on "Option 2"
+        fireEvent.click(screen.getByText("Option 2"));
+        // onChange should be called with the array of selected options
+        // For a single click, we expect [{ name: "Option 2", value: "option2" }]
+        expect(mockOnChange).toHaveBeenCalledWith([
+            { name: "Option 2", value: "option2" },
+        ]);
+    });
+    test("allows multiple selections and calls onChange with all selected items", () => {
+        const mockOnChange = vi.fn();
+        // A wrapper that holds the selectedValue in local state
+        function Wrapper() {
+            const [selectedValue, setSelectedValue] = React.useState([]);
+            return (_jsx(MultiSelect, { options: [
+                    { name: "Option 1", value: "option1" },
+                    { name: "Option 2", value: "option2" },
+                    { name: "Option 3", value: "option3" },
+                ], selectedValue: selectedValue, onChange: (updated) => {
+                    setSelectedValue(updated);
+                    mockOnChange(updated);
+                } }));
+        }
+        render(_jsx(Wrapper, {}));
+        // 1) Open the dropdown
+        fireEvent.click(screen.getByText("Select..."));
+        // 2) Click the first item
+        fireEvent.click(screen.getByText("Option 1"));
+        // After first selection
+        expect(mockOnChange).toHaveBeenLastCalledWith([
+            { name: "Option 1", value: "option1" },
+        ]);
+        // 4) Click the third item
+        fireEvent.click(screen.getByText("Option 3"));
+        // Now it should have both Option 1 and Option 3
+        expect(mockOnChange).toHaveBeenLastCalledWith([
+            { name: "Option 1", value: "option1" },
+            { name: "Option 3", value: "option3" },
+        ]);
+    });
+    test("disables the component when disabled prop is true", () => {
+        render(_jsx(MultiSelect, { options: options, onChange: mockOnChange, selectedValue: [], disabled: true }));
+        // Attempt to click on the placeholder
+        fireEvent.click(screen.getByText("Select..."));
+        // Because it's disabled, the menu should not open
+        // So "Option 1" (etc.) should NOT be in the document
+        expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
+    });
+    test("displays a loading spinner when isLoading is true", () => {
+        const { container } = render(_jsx(MultiSelect, { options: [
+                { name: "Option 1", value: "option1" },
+                { name: "Option 2", value: "option2" },
+            ], selectedValue: [], onChange: vi.fn(), isLoading: true }));
+        // Look for the <svg> with className="spinner"
+        const spinner = container.querySelector(".spinner");
+        expect(spinner).not.toBeNull();
+    });
+    test("shows 'Select All' option if hasSelectAll is true", () => {
+        render(_jsx(MultiSelect, { options: options, onChange: mockOnChange, selectedValue: [], hasSelectAll: true }));
+        // Open the menu
+        fireEvent.click(screen.getByText("Select..."));
+        // "Select All" should appear
+        expect(screen.getByText("Select All")).toBeInTheDocument();
+    });
+    test("renders correctly with default props (options and selectedValue omitted)", () => {
+        // We do NOT provide options or selectedValue, so the defaults (`[]`) are used
+        const { container } = render(_jsx(MultiSelect, { onChange: vi.fn() }));
+        // Assertions to confirm the component renders without crashing
+        // and displays the default placeholder "Select..."
+        expect(screen.getByText("Select...")).toBeInTheDocument();
+        // Because options is [], there should be no option
+        expect(container.querySelector(".dropdown-content")).toBeNull();
+    });
+});

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

@@ -0,0 +1,28 @@
+export interface OptionType {
+    name: string;
+    value: string;
+    [key: string]: any;
+}
+export interface MultiSelectInputProps {
+    id?: string;
+    name?: string;
+    options?: OptionType[];
+    selectedValue?: OptionType[];
+    onChange: (selected: OptionType[]) => void;
+    placeholder?: string;
+    isSearchable?: boolean;
+    isOpen?: boolean;
+    hasSelectAll?: boolean;
+    disabled?: boolean;
+    isLoading?: boolean;
+    onMenuToggle?: (expanded: boolean) => void;
+    overrideStrings?: Partial<{
+        selectSomeItems: string;
+        allItemsAreSelected: string;
+        selectAll: string;
+        search: string;
+    }>;
+    className?: string;
+    width?: string;
+    otherProps?: any;
+}

package/dist/components/MultiSelect/MultiSelect.types.js

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