@agilant/toga-blox 1.0.32 → 1.0.33

package/dist/components/SortArrows/SortArrows.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { motion } from "framer-motion";
+import { useSortArrowsViewModel } from "./useSortArrowsViewModel";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
+import SortArrowIcon from "../SortArrowIcon";
+const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon = {
+    icon: "circle",
+    weight: "solid",
+    numberClassNames: "absolute text-xs top-1.5 right-0 left-0",
+    iconClassNames: "text-lg text-blue-400 relative hover:text-red-400",
+    numberSize: "text-xl",
+}, }) => {
+    const containerRef = useRef(null);
+    const { showArrowContainer, handleParentClick, handleResetSort, handleClick, isActive, activeDirection, sortOrderNumber, setShowArrowContainer, } = useSortArrowsViewModel({
+        columnId: String(column.accessor),
+        slug,
+        isNested,
+        parentIndex,
+        onSortChange: onSortChange,
+        setSortColumn,
+        onRequestClose,
+    });
+    const arrowContainerClassNames = `${isActive ? "" : "hover:bg-white"} size-[18px] rounded-sm flex flex-col items-center justify-center cursor-pointer relative`;
+    const handleClose = () => {
+        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 &&
+                renderPortalOverlay &&
+                renderPortalOverlay(handleClose)] }));
+};
+export default SortArrows;

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SortArrows from "./SortArrows";
+declare const meta: Meta<typeof SortArrows>;
+export default meta;
+type Story = StoryObj<typeof SortArrows>;
+export declare const Default: Story;
+export declare const WithOverlayAndIndexCount: Story;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SortArrows from "./SortArrows";
+import { useState } from "react";
+const mockColumn = (accessor, Header) => ({
+    accessor,
+    Header,
+    id: accessor,
+    render: (value) => value,
+});
+const meta = {
+    title: "Components/SortArrows",
+    component: SortArrows,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+// Basic story with inactive state
+export const Default = {
+    render: () => {
+        const [_, setSortColumn] = useState({});
+        const column = mockColumn("price", "Price");
+        return (_jsx(SortArrows, { column: column, setSortColumn: setSortColumn, slug: "products", onSortChange: (columnId, direction) => {
+                console.log("Sort changed:", columnId, direction);
+            } }));
+    },
+};
+export const WithOverlayAndIndexCount = {
+    render: () => {
+        const [_, setSortColumn] = useState({});
+        const column = mockColumn("category", "Category");
+        return (_jsx("div", { className: "size-96", children: _jsx(SortArrows, { counterIcon: {
+                    icon: "arrowUp",
+                    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]",
+                }, 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/dist/components/SortArrows/SortArrows.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/SortArrows/SortArrows.test.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import SortArrows from "./SortArrows";
+// We will mock our custom hook to control the returned values
+vi.mock("./useSortArrowsViewModel", () => {
+    return {
+        useSortArrowsViewModel: vi.fn(() => ({
+            showArrowContainer: false,
+            handleParentClick: vi.fn(),
+            handleResetSort: vi.fn(),
+            handleClick: vi.fn(),
+            isActive: false,
+            activeDirection: "",
+            sortOrderNumber: 0,
+            setShowArrowContainer: vi.fn(),
+        })),
+    };
+});
+import { useSortArrowsViewModel } from "./useSortArrowsViewModel";
+/**
+ * If your `SortArrowsProps<T>` requires a `CustomColumnInstance<T>`
+ * with a certain accessor shape, define a helper like so:
+ */
+function createMockColumnInstance(partial) {
+    return {
+        id: "test-column",
+        accessor: "testColumn", // satisfies `string | number | symbol | ((row: T) => any);`
+        render: vi.fn(() => "Test Column"),
+        ...partial,
+    };
+}
+describe("SortArrows Component", () => {
+    let defaultProps;
+    beforeEach(() => {
+        vi.clearAllMocks();
+        defaultProps = {
+            column: createMockColumnInstance(),
+            setSortColumn: vi.fn(),
+            slug: "test-slug",
+            isNested: false,
+            parentIndex: 0,
+            onSortChange: undefined,
+            renderPortalOverlay: undefined,
+            onRequestClose: undefined,
+        };
+    });
+    it("shows active counter icon when isActive = true", () => {
+        // @ts-ignore
+        useSortArrowsViewModel.mockReturnValue({
+            showArrowContainer: false,
+            handleParentClick: vi.fn(),
+            handleResetSort: vi.fn(),
+            handleClick: vi.fn(),
+            isActive: true,
+            activeDirection: "asc",
+            sortOrderNumber: 2,
+            setShowArrowContainer: vi.fn(),
+        });
+        render(_jsx(SortArrows, { ...defaultProps }));
+        expect(screen.getByText("2")).toBeInTheDocument();
+        expect(screen.queryByRole("img", { name: /arrow up/i })).not.toBeInTheDocument();
+        expect(screen.queryByRole("img", { name: /arrow down/i })).not.toBeInTheDocument();
+    });
+    it("shows the menu when showArrowContainer=true", () => {
+        // @ts-ignore
+        useSortArrowsViewModel.mockReturnValue({
+            showArrowContainer: true,
+            handleParentClick: vi.fn(),
+            handleResetSort: vi.fn(),
+            handleClick: vi.fn(),
+            isActive: false,
+            activeDirection: "",
+            sortOrderNumber: 0,
+            setShowArrowContainer: vi.fn(),
+        });
+        render(_jsx(SortArrows, { ...defaultProps }));
+        expect(screen.getByText(/ascending/i)).toBeInTheDocument();
+        expect(screen.getByText(/descending/i)).toBeInTheDocument();
+    });
+    it("calls handleClick('up') when 'Ascending' is clicked", () => {
+        const handleClickMock = vi.fn();
+        // @ts-ignore
+        useSortArrowsViewModel.mockReturnValue({
+            showArrowContainer: true,
+            handleParentClick: vi.fn(),
+            handleResetSort: vi.fn(),
+            handleClick: handleClickMock,
+            isActive: false,
+            activeDirection: "",
+            sortOrderNumber: 0,
+            setShowArrowContainer: vi.fn(),
+        });
+        render(_jsx(SortArrows, { ...defaultProps }));
+        fireEvent.click(screen.getByText(/ascending/i));
+        expect(handleClickMock).toHaveBeenCalledWith("up");
+    });
+    it("calls handleClick('down') when 'Descending' is clicked", () => {
+        const handleClickMock = vi.fn();
+        // @ts-ignore
+        useSortArrowsViewModel.mockReturnValue({
+            showArrowContainer: true,
+            handleParentClick: vi.fn(),
+            handleResetSort: vi.fn(),
+            handleClick: handleClickMock,
+            isActive: false,
+            activeDirection: "",
+            sortOrderNumber: 0,
+            setShowArrowContainer: vi.fn(),
+        });
+        render(_jsx(SortArrows, { ...defaultProps }));
+        fireEvent.click(screen.getByText(/descending/i));
+        expect(handleClickMock).toHaveBeenCalledWith("down");
+    });
+    it("calls handleResetSort when 'Reset' is clicked (if isActive=true)", () => {
+        const handleResetSortMock = vi.fn();
+        // @ts-ignore
+        useSortArrowsViewModel.mockReturnValue({
+            showArrowContainer: true,
+            handleParentClick: vi.fn(),
+            handleResetSort: handleResetSortMock,
+            handleClick: vi.fn(),
+            isActive: true,
+            activeDirection: "asc",
+            sortOrderNumber: 2,
+            setShowArrowContainer: vi.fn(),
+        });
+        render(_jsx(SortArrows, { ...defaultProps }));
+        fireEvent.click(screen.getByText(/reset/i));
+        expect(handleResetSortMock).toHaveBeenCalled();
+    });
+    it("renders overlay when renderPortalOverlay is provided", () => {
+        const renderPortalOverlayMock = vi.fn((onClose) => (_jsx("div", { "data-testid": "portal-overlay", children: "Portal Content" })));
+        // @ts-ignore
+        useSortArrowsViewModel.mockReturnValue({
+            showArrowContainer: true,
+            handleParentClick: vi.fn(),
+            handleResetSort: vi.fn(),
+            handleClick: vi.fn(),
+            isActive: false,
+            activeDirection: "",
+            sortOrderNumber: 0,
+            setShowArrowContainer: vi.fn(),
+        });
+        render(_jsx(SortArrows, { ...defaultProps, renderPortalOverlay: renderPortalOverlayMock }));
+        expect(screen.getByTestId("portal-overlay")).toBeInTheDocument();
+        expect(renderPortalOverlayMock).toHaveBeenCalled();
+    });
+});

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

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

package/dist/components/SortArrows/index.js

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

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

@@ -0,0 +1,21 @@
+import { ColumnInstance } from "react-table";
+export interface SortArrowsProps<T extends object> {
+    column: CustomColumnInstance<T>;
+    setSortColumn: any;
+    slug: string;
+    isNested?: boolean;
+    parentIndex?: number;
+    onSortChange?: (columnId: string, direction: "asc" | "desc") => void;
+    renderPortalOverlay?: (onClose: () => void) => React.ReactNode;
+    onRequestClose?: () => void;
+    counterIcon?: {
+        icon: string;
+        weight: string;
+        numberClassNames?: string;
+        iconClassNames?: string;
+        numberSize?: string;
+    };
+}
+export interface CustomColumnInstance<T extends object> extends ColumnInstance<T> {
+    accessor: string | number | symbol | ((row: T) => any);
+}

package/dist/components/SortArrows/types.js

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

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

@@ -0,0 +1,30 @@
+export interface UseSortArrowsViewModelProps {
+    columnId: string;
+    slug: string;
+    isNested?: boolean;
+    parentIndex?: number;
+    onSortChange?: (column: string, direction: "asc" | "desc" | "") => void;
+    setSortColumn: React.Dispatch<React.SetStateAction<{
+        [key: string]: string | string[];
+    }>>;
+    onUpdateUrlParams?: (params: Record<string, string>) => void;
+    onUpdateParentIndex?: (index: number) => void;
+    onRequestClose?: () => void;
+}
+type SortDirection = "asc" | "desc";
+interface ActiveSortColumn {
+    columnId: string;
+    direction: SortDirection;
+}
+export declare const useSortArrowsViewModel: ({ columnId, slug, parentIndex, onSortChange, setSortColumn, onUpdateUrlParams, onUpdateParentIndex, }: UseSortArrowsViewModelProps) => {
+    activeSortColumns: ActiveSortColumn[];
+    activeDirection: SortDirection;
+    showArrowContainer: boolean;
+    handleParentClick: () => void;
+    handleResetSort: () => void;
+    handleClick: (direction: "up" | "down") => void;
+    isActive: boolean;
+    sortOrderNumber: number;
+    setShowArrowContainer: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};

package/dist/components/SortArrows/useSortArrowsViewModel.js

@@ -0,0 +1,114 @@
+import { useState, useEffect } from "react";
+export const useSortArrowsViewModel = ({ columnId, slug, parentIndex, onSortChange, setSortColumn, onUpdateUrlParams, onUpdateParentIndex, }) => {
+    const IS_TEST = process.env.NODE_ENV === "test";
+    // State holds objects with strict direction type
+    const [activeSortColumns, setActiveSortColumns] = useState([]);
+    const [showArrowContainer, setShowArrowContainer] = useState(false);
+    // Pull from localStorage or URL on mount
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const storedSortInfo = localStorage.getItem("activeSortColumns");
+        if (storedSortInfo) {
+            setActiveSortColumns(JSON.parse(storedSortInfo));
+        }
+        else {
+            const query = new URLSearchParams(window.location.search);
+            const sortParams = query.getAll(slug);
+            if (sortParams.length) {
+                const parsedSortColumns = sortParams.map((sortValue) => {
+                    let direction = "asc";
+                    let columnId = sortValue;
+                    if (sortValue.startsWith("-")) {
+                        direction = "desc";
+                        columnId = sortValue.substring(1);
+                    }
+                    else if (sortValue.startsWith("+")) {
+                        columnId = sortValue.substring(1);
+                    }
+                    return { columnId, direction };
+                });
+                setActiveSortColumns(parsedSortColumns.slice(0, 3));
+            }
+        }
+    }, [slug]);
+    // Update sort state and local storage
+    const updateSortState = (direction) => {
+        // Ensure newDirection is strictly typed
+        const newDirection = direction === "up" ? "asc" : "desc";
+        let updatedColumns = activeSortColumns.map((col) => col.columnId === columnId
+            ? { ...col, direction: newDirection }
+            : col);
+        // If not in the list, add to front
+        if (!updatedColumns.some((col) => col.columnId === columnId)) {
+            updatedColumns.unshift({ columnId, direction: newDirection });
+        }
+        // Only keep up to 3 columns
+        updatedColumns = updatedColumns.slice(0, 3);
+        // SSR-safe localStorage
+        if (typeof window !== "undefined") {
+            localStorage.setItem("activeSortColumns", JSON.stringify(updatedColumns));
+        }
+        setActiveSortColumns(updatedColumns);
+        // Derive new param array
+        const sortParams = updatedColumns.map((col) => `${col.direction === "desc" ? "-" : ""}${col.columnId}`);
+        // Update parent's column state
+        setSortColumn((prev) => ({
+            ...prev,
+            [slug]: sortParams,
+        }));
+        // Fire callback
+        onSortChange?.(columnId, newDirection);
+    };
+    // Reset sort for this column only
+    const handleResetSort = () => {
+        const updatedColumns = activeSortColumns.filter((col) => col.columnId !== columnId);
+        if (typeof window !== "undefined") {
+            localStorage.setItem("activeSortColumns", JSON.stringify(updatedColumns));
+        }
+        setActiveSortColumns(updatedColumns);
+        const sortParams = updatedColumns.map((col) => `${col.direction === "desc" ? "-" : ""}${col.columnId}`);
+        setSortColumn((prev) => {
+            const newState = { ...prev };
+            if (sortParams.length > 0) {
+                newState[slug] = sortParams;
+            }
+            else {
+                delete newState[slug];
+            }
+            return newState;
+        });
+        // Use callback for URL updates
+        if (onUpdateUrlParams) {
+            const params = updatedColumns.reduce((acc, col, idx) => {
+                acc[`${slug}_sort[${idx}]`] = `${col.direction === "desc" ? "-" : ""}${col.columnId}`;
+                return acc;
+            }, {});
+            onUpdateUrlParams(params);
+        }
+        // Update parent index through callback
+        onUpdateParentIndex?.(0);
+        onSortChange?.(columnId, "");
+    };
+    // Handle arrow clicks
+    const handleClick = (direction) => {
+        updateSortState(direction);
+        onUpdateParentIndex?.(parentIndex || 0);
+    };
+    // Check if current column is active
+    const columnIndex = activeSortColumns.findIndex((col) => col.columnId === columnId);
+    const isActive = columnIndex !== -1;
+    return {
+        activeSortColumns,
+        activeDirection: isActive
+            ? activeSortColumns[columnIndex].direction
+            : null,
+        showArrowContainer,
+        handleParentClick: () => setShowArrowContainer(!showArrowContainer),
+        handleResetSort,
+        handleClick,
+        isActive,
+        sortOrderNumber: isActive ? columnIndex + 1 : null,
+        setShowArrowContainer,
+    };
+};

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

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

package/dist/components/SortArrows/useSortArrowsViewModel.test.js

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+// IMPORTANT: also import `waitFor` so we can wait for effect-based updates
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useSortArrowsViewModel, } from "./useSortArrowsViewModel";
+// 1) Mock localStorage in a node test environment
+const localStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: vi.fn((key) => store[key]),
+        setItem: vi.fn((key, value) => {
+            store[key] = value;
+        }),
+        removeItem: vi.fn((key) => {
+            delete store[key];
+        }),
+        clear: vi.fn(() => {
+            store = {};
+        }),
+    };
+})();
+describe("useSortArrowsViewModel Hook (renderHook approach)", () => {
+    let defaultProps;
+    let setSortColumnMock;
+    let onSortChangeMock;
+    const originalLocation = window.location;
+    beforeEach(() => {
+        // Fresh mocks before each test
+        setSortColumnMock = vi.fn();
+        onSortChangeMock = vi.fn();
+        defaultProps = {
+            columnId: "myColumn",
+            slug: "mySlug",
+            parentIndex: 2,
+            onSortChange: onSortChangeMock,
+            setSortColumn: setSortColumnMock,
+            onUpdateUrlParams: vi.fn(),
+            onUpdateParentIndex: vi.fn(),
+        };
+        // Mock localStorage
+        global.localStorage = localStorageMock;
+        localStorageMock.clear();
+        // Mock window.location so we can manipulate window.location.search
+        delete global.window.location;
+        global.window.location = { ...originalLocation, search: "" };
+    });
+    afterEach(() => {
+        global.window.location = originalLocation;
+        vi.resetAllMocks();
+    });
+    it("initializes with empty activeSortColumns if localStorage & URL are empty", () => {
+        const { result } = renderHook(() => useSortArrowsViewModel({ ...defaultProps }));
+        // Since there's nothing to load, we can assert immediately:
+        expect(result.current.activeSortColumns).toEqual([]);
+        expect(result.current.isActive).toBe(false);
+        expect(result.current.activeDirection).toBeNull();
+    });
+    it("initializes from URL search params if localStorage is empty", async () => {
+        global.window.location.search =
+            "?mySlug=-myColumn&mySlug=anotherCol";
+        const { result } = renderHook(() => useSortArrowsViewModel({ ...defaultProps }));
+        // Wait for effect to parse URL params
+        await waitFor(() => {
+            expect(result.current.activeSortColumns.length).toBeGreaterThan(0);
+        });
+        // -myColumn => desc;  anotherCol => asc
+        expect(result.current.activeSortColumns).toEqual([
+            { columnId: "myColumn", direction: "desc" },
+            { columnId: "anotherCol", direction: "asc" },
+        ]);
+        expect(result.current.isActive).toBe(true);
+        expect(result.current.activeDirection).toBe("desc");
+    });
+    it("handleClick('up') sets ascending, updates localStorage, calls onSortChange", () => {
+        const { result } = renderHook(() => useSortArrowsViewModel({ ...defaultProps }));
+        act(() => {
+            result.current.handleClick("up");
+        });
+        expect(result.current.activeDirection).toBe("asc");
+        expect(result.current.isActive).toBe(true);
+        expect(localStorageMock.setItem).toHaveBeenCalledWith("activeSortColumns", JSON.stringify([{ columnId: "myColumn", direction: "asc" }]));
+        expect(setSortColumnMock).toHaveBeenCalledWith(expect.any(Function));
+        expect(onSortChangeMock).toHaveBeenCalledWith("myColumn", "asc");
+    });
+    it("handleClick('down') sets descending", () => {
+        const { result } = renderHook(() => useSortArrowsViewModel({ ...defaultProps }));
+        act(() => {
+            result.current.handleClick("down");
+        });
+        expect(result.current.activeDirection).toBe("desc");
+        expect(localStorageMock.setItem).toHaveBeenCalledWith("activeSortColumns", JSON.stringify([{ columnId: "myColumn", direction: "desc" }]));
+    });
+    it("handleParentClick toggles showArrowContainer", () => {
+        const { result } = renderHook(() => useSortArrowsViewModel({ ...defaultProps }));
+        expect(result.current.showArrowContainer).toBe(false);
+        act(() => {
+            result.current.handleParentClick();
+        });
+        expect(result.current.showArrowContainer).toBe(true);
+    });
+});

package/dist/components/TableCell/TableCell.d.ts

@@ -0,0 +1,3 @@
+import { DataWithUUID, TableCellProps } from "./types";
+declare const TableCell: <T extends DataWithUUID>({ globalTrimActive, rowUuid, columnInputs, cell, isLastCell, }: TableCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TableCell;

package/dist/components/TableCell/TableCell.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableCell = ({ globalTrimActive, rowUuid, columnInputs, cell, isLastCell, }) => {
+    const trimText = (text) => text.length > 30 ? `${text.substring(0, 30)}...` : text;
+    const shouldTrim = globalTrimActive && typeof cell.value === "string";
+    const cellContent = shouldTrim ? trimText(cell.value) : cell.render("Cell");
+    const cellProps = cell.getCellProps();
+    const compassTableDataClassNames = "relative overflow-hidden font-light text-sm text-left z-0 px-5";
+    const tableDataClassNames = compassTableDataClassNames;
+    ("relative overflow-hidden font-light text-sm lg:text-sm py-2 text-left z-0 pl-2 pr-2 hidden");
+    const cellContainerClassNames = "min-h-[40px] flex items-center";
+    return (_jsx("td", { "data-testid": "table-cell", ...cell.getCellProps(), className: isLastCell ? "" : tableDataClassNames, children: _jsx("div", { className: cellContainerClassNames, children: cellContent }) }, cell.value));
+};
+export default TableCell;

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

@@ -0,0 +1,16 @@
+import { Meta } from "@storybook/react";
+import TableCell from ".";
+declare const _default: Meta<typeof TableCell>;
+export default _default;
+/**
+ * Default TableCell
+ */
+export declare const Default: any;
+/**
+ * TableCell with No Trimming
+ */
+export declare const NoTrimming: any;
+/**
+ * TableCell as Last Cell
+ */
+export declare const LastCell: any;

package/dist/components/TableCell/TableCell.stories.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TableCell from ".";
+// Sample data for the table cell
+const sampleData = {
+    uuid: "12345",
+    name: "John Doe",
+    age: 30,
+    address: "123 Main St, Springfield, IL, 62701, United States of America",
+};
+// Define the default export to configure the story
+export default {
+    title: "Table/TableCell",
+    component: TableCell,
+    argTypes: {
+        globalTrimActive: {
+            control: "boolean",
+            description: "Toggle to enable or disable text trimming for long strings.",
+        },
+        rowUuid: {
+            control: "text",
+            description: "Unique identifier for the row.",
+        },
+        columnInputs: {
+            control: "object",
+            description: "Array of column inputs (if any).",
+        },
+        cell: {
+            control: "object",
+            description: "Object containing the cell value and rendering logic.",
+        },
+        isLastCell: {
+            control: "boolean",
+            description: "Indicates if this is the last cell in the row.",
+        },
+    },
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A table cell component that supports text trimming and custom rendering. It is designed to work within a table row and can handle dynamic data with unique identifiers.",
+            },
+        },
+    },
+};
+// Template for the story
+const Template = (args) => (_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...args }) }) }) }));
+/**
+ * Default TableCell
+ */
+export const Default = Template.bind({});
+Default.args = {
+    globalTrimActive: true,
+    rowUuid: sampleData.uuid,
+    columnInputs: [],
+    cell: {
+        value: sampleData.address,
+        render: (type) => (type === "Cell" ? sampleData.address : null),
+        getCellProps: () => ({}),
+    },
+    isLastCell: false,
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: "Default table cell with text trimming enabled. Long text will be truncated to 30 characters.",
+        },
+    },
+};
+/**
+ * TableCell with No Trimming
+ */
+export const NoTrimming = Template.bind({});
+NoTrimming.args = {
+    ...Default.args,
+    globalTrimActive: false,
+};
+NoTrimming.parameters = {
+    docs: {
+        description: {
+            story: "Table cell with text trimming disabled. The full text is displayed.",
+        },
+    },
+};
+/**
+ * TableCell as Last Cell
+ */
+export const LastCell = Template.bind({});
+LastCell.args = {
+    ...Default.args,
+    isLastCell: true,
+};
+LastCell.parameters = {
+    docs: {
+        description: {
+            story: "Table cell marked as the last cell in the row. May have unique styling.",
+        },
+    },
+};

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

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