@agilant/toga-blox 1.0.32 → 1.0.33

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

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

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+const Dropdown = ({ options, selectedOption, onOptionSelect, optionClasses = "flex items-center cursor-pointer px-4 py-1 text-sm text-white transition duration-200", menuClasses = "absolute top-10 right-0 bg-white shadow-md rounded-lg w-40 z-10", dropdownClasses = "", icon = {
+    name: "chevronDown",
+    weight: "solid",
+    iconClasses: "text-navy-400",
+}, selectedOptionBgColor = "bg-gray-50", optionHoverBgColor = "hover:bg-gray-50", }) => {
+    const [showMenu, setShowMenu] = useState(false);
+    const toggleMenu = () => setShowMenu(!showMenu);
+    return (_jsxs("div", { className: `flex items-center justify-between relative min-w-32 border-2 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full `, children: [_jsx("div", { className: `font-bold ${optionClasses}`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, children: _jsx("span", { children: getFontAwesomeIcon(icon.name, icon.weight) }) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((action) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b ${action === selectedOption
+                                ? `{${selectedOptionBgColor} font-semibold}`
+                                : `${optionHoverBgColor} text-black`}`, onClick: () => {
+                                onOptionSelect(action);
+                                setShowMenu(false); // Close the menu
+                            }, children: [selectedOption === action &&
+                                    getFontAwesomeIcon("check", "solid"), _jsx("span", { className: "pl-2", children: action })] }, action))) }) })) }))] }));
+};
+export default Dropdown;

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

@@ -0,0 +1,8 @@
+import Dropdown from "./Dropdown";
+import { Meta } from "@storybook/react";
+declare const _default: Meta<typeof Dropdown>;
+export default _default;
+export declare const Default: any;
+export declare const GreenTheme: any;
+export declare const CustomIcon: any;
+export declare const LargeDropdown: any;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Dropdown from "./Dropdown";
+export default {
+    title: "Components/Dropdown",
+    component: Dropdown,
+    argTypes: {
+        options: {
+            control: "array",
+            description: "List of options available in the dropdown.",
+        },
+        selectedOption: {
+            control: "text",
+            description: "Currently selected option.",
+        },
+        onOptionSelect: {
+            action: "selected",
+            description: "Callback function triggered when an option is selected.",
+        },
+        optionClasses: {
+            control: "text",
+            description: "Tailwind classes for dropdown options.",
+        },
+        menuClasses: {
+            control: "text",
+            description: "Tailwind classes for the dropdown menu container.",
+        },
+        dropdownClasses: {
+            control: "text",
+            description: "Tailwind classes for the dropdown container.",
+        },
+        icon: {
+            control: "object",
+            description: "name - FontAwesome icon name. weight - FontAwesome icon style (solid, regular, etc.). iconClasses - Tailwind classes for the dropdown icon.",
+        },
+        selectedOptionBgColor: {
+            control: "text",
+            description: "Tailwind classes for the dropdown menu option background color.",
+        },
+        optionHoverBgColor: {
+            control: "text",
+            description: "Tailwind classes for the dropdown menu  option hover background color.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+const Template = (args) => {
+    const [selectedOption, setSelectedOption] = useState(args.selectedOption);
+    return (_jsx(Dropdown, { ...args, selectedOption: selectedOption, onOptionSelect: (option) => setSelectedOption(option) }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    options: ["Option 1", "Option 2", "Option 3"],
+    selectedOption: "Option 1",
+    optionClasses: "flex items-center cursor-pointer px-4 py-1 text-md text-black transition duration-200",
+    menuClasses: "absolute top-10 right-0 bg-white shadow-md rounded-lg w-40 z-10",
+    icon: {
+        name: "chevronDown",
+        weight: "solid",
+        iconClasses: "text-navy-400",
+    },
+};
+export const GreenTheme = Template.bind({});
+GreenTheme.args = {
+    options: ["Green Option 1", "Green Option 2", "Green Option 3"],
+    selectedOption: "Green Option 1",
+    optionClasses: "flex items-center cursor-pointer px-4 py-1 text-md text-white transition duration-200 bg-green-500 hover:bg-green-600",
+    menuClasses: "absolute top-10 right-0 bg-green-200 shadow-md rounded-lg w-44 z-10",
+    icon: {
+        name: "chevronDown",
+        weight: "solid",
+        iconClasses: "text-green-800 text-white",
+    },
+    dropdownClasses: "bg-green-700 border-none",
+};
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+    options: ["Custom Option 1", "Custom Option 2", "Custom Option 3"],
+    selectedOption: "Custom Option 1",
+    optionClasses: "flex items-center cursor-pointer px-4 py-1 text-md text-black transition duration-200  hover:bg-red-200",
+    menuClasses: "absolute top-10 right-0  shadow-md rounded-lg w-40 z-10",
+    dropdownClasses: "text-black border-2 border-red-500",
+    icon: {
+        name: "arrowDown",
+        weight: "regular",
+        iconClasses: "text-red-700 hover:bg-red-200",
+    },
+};
+export const LargeDropdown = Template.bind({});
+LargeDropdown.args = {
+    options: [
+        "Large Option 1",
+        "Large Option 2",
+        "Large Option 3",
+        "Large Option 4",
+        "Large Option 5",
+    ],
+    selectedOption: "Large Option 1",
+    optionClasses: "flex items-center cursor-pointer px-4 py-3 text-lg text-black transition duration-200 ",
+    menuClasses: "absolute top-10 right-0 shadow-md rounded-lg w-56 z-10",
+    icon: {
+        name: "chevronDown",
+        weight: "solid",
+        iconClasses: "text-black",
+    },
+    dropdownClasses: "",
+};

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

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

package/dist/components/Dropdown/Dropdown.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import Dropdown from "./Dropdown";
+const mockOnOptionSelect = vi.fn();
+const options = ["Option 1", "Option 2", "Option 3"];
+describe("Dropdown Component", () => {
+    test("renders the dropdown with the selected option", () => {
+        render(_jsx(Dropdown, { options: options, selectedOption: options[0], onOptionSelect: mockOnOptionSelect }));
+        expect(screen.getByText("Option 1")).toBeInTheDocument();
+    });
+    test("opens the dropdown menu when clicked", () => {
+        render(_jsx(Dropdown, { options: options, selectedOption: options[0], onOptionSelect: mockOnOptionSelect }));
+        const dropdownButton = screen.getByText("Option 1");
+        fireEvent.click(dropdownButton);
+        expect(screen.getByText("Option 2")).toBeInTheDocument();
+        expect(screen.getByText("Option 3")).toBeInTheDocument();
+    });
+    test("selects an option and calls onOptionSelect", () => {
+        render(_jsx(Dropdown, { options: options, selectedOption: options[0], onOptionSelect: mockOnOptionSelect }));
+        const dropdownButton = screen.getByText("Option 1");
+        fireEvent.click(dropdownButton);
+        const optionToSelect = screen.getByText("Option 2");
+        fireEvent.click(optionToSelect);
+        expect(mockOnOptionSelect).toHaveBeenCalledWith("Option 2");
+    });
+    test("closes the dropdown menu when an option is selected", () => {
+        render(_jsx(Dropdown, { options: options, selectedOption: options[0], onOptionSelect: mockOnOptionSelect }));
+        const dropdownButton = screen.getByText("Option 1");
+        fireEvent.click(dropdownButton);
+        const optionToSelect = screen.getByText("Option 2");
+        fireEvent.click(optionToSelect);
+        expect(screen.queryByText("Option 2")).not.toBeInTheDocument();
+    });
+    test("toggles the dropdown menu visibility when clicked", () => {
+        render(_jsx(Dropdown, { options: options, selectedOption: options[0], onOptionSelect: mockOnOptionSelect }));
+        const dropdownButton = screen.getByText("Option 1");
+        fireEvent.click(dropdownButton);
+        expect(screen.getByText("Option 2")).toBeInTheDocument();
+        fireEvent.click(dropdownButton);
+        expect(screen.queryByText("Option 2")).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,15 @@
+export type DropdownProps = {
+    options: string[];
+    selectedOption: string;
+    onOptionSelect: (action: string) => void;
+    optionClasses?: string;
+    menuClasses?: string;
+    dropdownClasses?: string;
+    icon?: {
+        name: string;
+        weight: "solid" | "regular" | "light" | "duotone" | "brands";
+        iconClasses?: string;
+    };
+    selectedOptionBgColor?: string;
+    optionHoverBgColor?: string;
+};

package/dist/components/Dropdown/Dropdown.types.js

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

package/dist/components/GenericList/GenericList.d.ts

@@ -1,16 +1,3 @@
-type GenericData = {
-    id: string;
-    [key: string]: any;
-};
-export type GenericListTypes<T> = {
-    data: T[];
-    renderItem: (item: T) => JSX.Element;
-    itemHeight?: number;
-    containerHeight?: number;
-    containerClasses?: string;
-    listDirection?: "horizontal" | "vertical";
-    hasVirtualization?: boolean;
-    listType: "ordered" | "unordered" | "none";
-};
-declare const GenericList: <T extends GenericData>({ data, renderItem, itemHeight, containerHeight, containerClasses, listDirection, hasVirtualization, listType, }: GenericListTypes<T>) => import("react/jsx-runtime").JSX.Element;
+import { GenericData, GenericListTypes } from "./types";
+declare const GenericList: <T extends GenericData>({ data, renderItem, itemHeight, containerHeight, containerClasses, listDirection, hasVirtualization, listType, parentRef, isVirtualizer, }: GenericListTypes<T>) => import("react/jsx-runtime").JSX.Element;
 export default GenericList;

package/dist/components/GenericList/GenericList.js

@@ -1,59 +1,72 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, forwardRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback } from "react";
-const GenericList = ({ data, renderItem, itemHeight, containerHeight, containerClasses = "", listDirection = "vertical", hasVirtualization = false, listType = "none", }) => {
-    const listClasses = listDirection === "horizontal" ? "flex flex-row" : "flex flex-col";
-    const parentRef = React.createRef();
-    const [virtualItems, setVirtualItems] = useState([]);
-    const [nonVirtualItems, setNonVirtualItems] = useState([]);
-    const estimateSize = useCallback(() => (itemHeight ? itemHeight : 0), [itemHeight]);
+// New wrapper component for proper list semantics
+const ListWrapper = forwardRef(({ listType, className, style, children }, ref) => {
+    const combinedClassName = `${className} ${listType !== "none" ? "list-none p-0 m-0" : ""}`.trim();
+    if (listType === "ordered") {
+        return (_jsx("ol", { ref: ref, className: combinedClassName, style: style, children: children }));
+    }
+    if (listType === "unordered") {
+        return (_jsx("ul", { ref: ref, className: combinedClassName, style: style, children: children }));
+    }
+    return (_jsx("div", { ref: ref, className: className, style: style, children: children }));
+});
+const getListDirectionClasses = (listDirection) => {
+    if (listDirection === "horizontal") {
+        return "flex overflow-x-auto";
+    }
+    if (listDirection === "vertical") {
+        return "flex flex-col";
+    }
+    return "";
+};
+// Improved virtualization positioning
+const getVirtualItemPosition = (listDirection, start) => {
+    if (listDirection === "horizontal") {
+        return { left: start, top: 0 };
+    }
+    return { top: start, left: 0 };
+};
+const GenericList = ({ data, renderItem, itemHeight = 35, containerHeight, containerClasses = "", listDirection, hasVirtualization = false, listType = "none", parentRef, isVirtualizer = false, }) => {
+    const listClasses = getListDirectionClasses(listDirection);
+    const internalRef = useRef(null);
+    const scrollContainerRef = parentRef || internalRef;
     const count = data.length;
+    const estimateSize = useCallback(() => itemHeight, [itemHeight]);
+    // Virtualization logic
     const virtualizer = useVirtualizer({
         count,
         estimateSize,
-        overscan: count,
-        getScrollElement: () => parentRef.current,
+        overscan: 5,
+        getScrollElement: () => scrollContainerRef.current,
+        horizontal: listDirection === "horizontal",
     });
-    useEffect(() => {
-        if (hasVirtualization) {
-            setVirtualItems(virtualizer.getVirtualItems());
-        }
-        else {
-            setNonVirtualItems(data);
-        }
-    }, [hasVirtualization, virtualizer, data]);
-    return (_jsx(_Fragment, { children: (() => {
-            switch (listType) {
-                case "ordered":
-                    return (_jsx("ol", { ref: parentRef, style: hasVirtualization
-                            ? {
-                                height: containerHeight,
-                                overflow: "scroll",
-                            }
-                            : {}, className: `${listClasses} ${containerClasses}`, children: hasVirtualization
-                            ? virtualItems.map((virtualItem) => (_jsx("li", { style: { height: itemHeight }, children: renderItem(data[virtualItem.index]) }, virtualItem.index)))
-                            : nonVirtualItems.map((item) => (_jsx("li", { children: renderItem(item) }, item.id))) }));
-                case "unordered":
-                    return (_jsx("ul", { ref: parentRef, style: hasVirtualization
-                            ? {
-                                height: containerHeight,
-                                overflow: "scroll",
-                            }
-                            : {}, className: `${listClasses} ${containerClasses}`, children: hasVirtualization
-                            ? virtualItems.map((virtualItem) => (_jsx("li", { style: { height: itemHeight }, children: renderItem(data[virtualItem.index]) }, virtualItem.index)))
-                            : nonVirtualItems.map((item) => (_jsx("li", { children: renderItem(item) }, item.id))) }));
-                case "none":
-                default:
-                    return (_jsx("div", { ref: parentRef, style: hasVirtualization
-                            ? {
-                                height: containerHeight,
-                                overflow: "scroll",
-                            }
-                            : {}, className: `${listClasses} ${containerClasses}`, children: hasVirtualization
-                            ? virtualItems.map((virtualItem) => (_jsx("div", { style: { height: itemHeight }, children: renderItem(data[virtualItem.index]) }, virtualItem.index)))
-                            : nonVirtualItems.map((item) => (_jsx("div", { children: renderItem(item) }, item.id))) }));
-            }
-        })() }));
+    const totalSize = virtualizer.getTotalSize();
+    const virtualItems = virtualizer.getVirtualItems();
+    // Shared container props
+    const containerProps = {
+        ref: scrollContainerRef,
+        style: {
+            height: containerHeight,
+            overflow: "auto",
+            position: "relative",
+        },
+        className: `${listClasses} ${containerClasses}`.trim(),
+    };
+    return (_jsx(ListWrapper, { listType: listType, ...containerProps, children: !hasVirtualization || isVirtualizer ? (
+        // Non-virtualized render
+        data.map((item, index) => (_jsx("div", { children: renderItem(item, index) }, `${item.id}-${index}`)))) : (
+        // Virtualized render
+        _jsx("div", { style: {
+                height: listDirection === "vertical" ? totalSize : "100%",
+                width: listDirection === "horizontal" ? totalSize : "100%",
+                position: "relative",
+            }, children: virtualItems.map((virtualItem) => (_jsx("div", { style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: itemHeight,
+                    ...getVirtualItemPosition(listDirection, virtualItem.start),
+                }, children: renderItem(data[virtualItem.index], virtualItem.index) }, virtualItem.key))) })) }));
 };
 export default GenericList;

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

@@ -1,35 +1,8 @@
-import { Meta } from "@storybook/react";
-import { TagName } from "../Text";
-export type IconButtonsListProps = {
-    id: string;
-    iconColor?: string;
-    iconLabel?: string;
-    backgroundColor?: string;
-    size?: "xs" | "sm" | "md" | "lg" | string;
-    icon: string;
-    hoverBorder?: "border" | "none" | string;
-    limitCharacters?: (text: string) => string;
-    indicatorSize?: "sm" | "md" | "lg" | string;
-    iconBorder?: "border" | "none" | string;
-    hoverBackground: string;
-    hoverColor: string;
-    limitIndicator: boolean;
-    indicatorNumber: string;
-    additionalContainerClasses: string;
-    onClick?: () => void;
-    text: {
-        size: string;
-        color: string;
-        text: string;
-        fontFamily: string;
-        tag: TagName;
-        additionalClasses: string;
-    };
-    to?: string;
-    href?: string;
-};
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const VerticalList: any;
-export declare const LargeDataSet: any;
+import { Meta, StoryObj } from "@storybook/react";
+import GenericList from "./GenericList";
+declare const meta: Meta<typeof GenericList>;
+export default meta;
+export declare const HoverList: StoryObj<typeof GenericList>;
+export declare const ClickableList: StoryObj<typeof GenericList>;
+export declare const ActionListExample: StoryObj<typeof GenericList>;
+export declare const HorizontalClickable: StoryObj<typeof GenericList>;

package/dist/components/GenericList/GenericList.stories.js

@@ -1,87 +1,55 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import GenericList from "./GenericList";
-import DUMMYICONDATA from "../Header/DUMMYICONDATA.json";
-import DUMMYLISTDATA from "./DUMMYLISTDATA.json";
-import TreeList from "./templates/DummyDataList";
-export default {
+const sampleData = Array.from({ length: 1000 }, (_, i) => ({
+    id: `item-${i}`,
+    name: `Item ${i}`,
+    value: i,
+}));
+const meta = {
     title: "Components/GenericList",
     component: GenericList,
-    argTypes: {
-        listDirection: {
-            control: "select",
-            options: ["horizontal", "vertical"],
-            description: "Whether the list is horizontal or vertical",
-        },
-        listType: {
-            table: {
-                disable: true,
-            },
-        },
-        hasVirtualization: {
-            table: {
-                disable: true,
-            },
-        },
-        containerClasses: {
-            table: {
-                disable: true,
-            },
-        },
-        itemHeight: {
-            table: {
-                disable: true,
-            },
-        },
-        containerHeight: {
-            table: {
-                disable: true,
-            },
-        },
-        renderItem: {
-            table: {
-                disable: true,
-            },
-        },
-        data: {
-            table: {
-                disable: true,
-            },
-        },
-    },
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
+};
+export default meta;
+// ... existing stories ...
+// Hover state story
+export const HoverList = {
+    args: {
+        data: sampleData.slice(0, 10),
+        renderItem: (item) => (_jsx("div", { className: "p-2 border-b hover:bg-gray-100 transition-colors duration-200", children: item.name })),
+        containerHeight: 300,
+        listType: "unordered",
     },
 };
-const Template = (args) => (_jsx(GenericList, { ...args }));
-export const Default = Template.bind({});
-Default.args = {
-    containerClasses: "flex justify-center w-96 bg-slate-100",
-    data: DUMMYICONDATA.DUMMYICONCOMPASSDATA,
-    itemHeight: 20,
-    containerHeight: 72,
-    hasVirtualization: true,
-    listDirection: "horizontal",
-    listType: "none",
+// Clickable rows story
+export const ClickableList = {
+    args: {
+        data: sampleData.slice(0, 10),
+        renderItem: (item) => (_jsx("div", { className: "p-2 border-b hover:bg-blue-50 cursor-pointer transition-colors", onClick: () => alert(`Clicked: ${item.name}`), children: item.name })),
+        containerHeight: 300,
+    },
 };
-export const VerticalList = Template.bind({});
-VerticalList.args = {
-    containerClasses: "w-96 bg-slate-100",
-    data: DUMMYICONDATA.DUMMYICONCOMPASSDATA,
-    itemHeight: 150,
-    containerHeight: 300,
-    hasVirtualization: true,
-    listDirection: "vertical",
-    listType: "none",
+// Interactive list with both hover and click (like ActionList example)
+export const ActionListExample = {
+    args: {
+        data: sampleData.slice(0, 5).map((item) => ({
+            ...item,
+            icon: "faUser",
+            color: "blue-500",
+            setActionModal: () => console.log(`Action for ${item.name}`),
+        })),
+        renderItem: (item) => (_jsxs("div", { className: "flex items-center p-2 hover:bg-gray-100 cursor-pointer group", onClick: () => alert(`Action triggered for: ${item.name}`), children: [_jsx("span", { className: `text-${item.color} w-6 text-center`, children: "\u26A1" }), _jsx("span", { className: "ml-2 group-hover:text-blue-600 transition-colors", children: item.name })] })),
+        containerClasses: "border rounded-lg w-64",
+        listType: "unordered",
+    },
 };
-export const LargeDataSet = Template.bind({});
-LargeDataSet.args = {
-    containerClasses: "bg-slate-100 w-120 h-120 p-8",
-    data: DUMMYLISTDATA.trees.flatMap((tree) => [tree, tree]),
-    itemHeight: 50,
-    containerHeight: 300,
-    hasVirtualization: true,
-    renderItem: (item) => _jsx(TreeList, { item: item }),
-    listDirection: "vertical",
-    listType: "unordered",
+// Horizontal clickable items
+export const HorizontalClickable = {
+    args: {
+        data: sampleData.slice(0, 10),
+        renderItem: (item) => (_jsx("div", { className: "p-4 border-r hover:bg-orange-50 cursor-pointer h-full flex items-center", onClick: () => alert(`Selected: ${item.name}`), children: _jsx("span", { className: "hover:scale-105 transition-transform", children: item.name }) })),
+        listDirection: "horizontal",
+        containerHeight: 80,
+        containerClasses: "w-full border-y",
+    },
 };

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

@@ -1 +1 @@
-export {};
+import "@testing-library/jest-dom";