@agilant/toga-blox 1.0.32 → 1.0.34

package/dist/components/TableCell/TableCell.test.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import TableCell from "./TableCell";
+import { describe, expect, it } from "vitest";
+// Sample data for testing
+const sampleData = {
+    uuid: "12345",
+    name: "John Doe",
+    age: 30,
+    address: "123 Main St, Springfield, IL, 62701, United States of America",
+};
+const defaultProps = {
+    globalTrimActive: true,
+    rowUuid: sampleData.uuid,
+    columnInputs: [],
+    cell: {
+        value: sampleData.address,
+        render: (type) => (type === "Cell" ? sampleData.address : null),
+        getCellProps: () => ({ key: "cell-1" }),
+        column: {
+            id: "address",
+            Header: "Address",
+            width: 200,
+            minWidth: 100,
+            maxWidth: 300,
+            isVisible: true,
+            parent: undefined,
+            columns: [],
+            getHeaderProps: () => ({ key: "header-1" }),
+            toggleHidden: () => { },
+            render: () => null,
+            totalLeft: 0,
+            totalWidth: 0,
+            getFooterProps: function (propGetter) {
+                throw new Error("Function not implemented.");
+            },
+            getToggleHiddenProps: function (userProps) {
+                throw new Error("Function not implemented.");
+            },
+            depth: 0,
+        },
+        row: {
+            original: sampleData,
+            index: 0,
+            values: { ...sampleData },
+            cells: [],
+            allCells: [],
+            getRowProps: () => ({ key: "row-1" }),
+            id: "row-1",
+            subRows: [],
+        },
+    },
+    isLastCell: false,
+};
+describe("TableCell Component", () => {
+    it("trims the text when globalTrimActive is true", () => {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...defaultProps }) }) }) }));
+        const trimmedText = `${sampleData.address.substring(0, 30)}...`;
+        expect(screen.getByText(trimmedText)).toBeInTheDocument();
+    });
+    it("does not trim the text when globalTrimActive is false", () => {
+        const props = { ...defaultProps, globalTrimActive: false };
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...props }) }) }) }));
+        expect(screen.getByText(sampleData.address)).toBeInTheDocument();
+    });
+    it("applies different styles when isLastCell is true", () => {
+        const props = { ...defaultProps, isLastCell: true };
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...props }) }) }) }));
+        const cell = screen.getByRole("cell");
+        expect(cell).not.toHaveClass("relative overflow-hidden font-light text-sm text-left z-0 px-5");
+    });
+    it("renders without errors when cell value is not a string", () => {
+        const numericValueProps = {
+            ...defaultProps,
+            cell: {
+                ...defaultProps.cell,
+                value: 42,
+                render: (type) => (type === "Cell" ? "42" : null),
+            },
+        };
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...numericValueProps }) }) }) }));
+        expect(screen.getByText("42")).toBeInTheDocument();
+    });
+});

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

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

package/dist/components/TableCell/index.js

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

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

@@ -0,0 +1,12 @@
+import { Cell } from "react-table";
+export interface DataWithUUID {
+    uuid?: string;
+}
+export interface TableCellProps<T extends object> {
+    globalTrimActive: boolean;
+    rowUuid?: string;
+    columnInputs?: string[];
+    rowHoverClasses?: string;
+    cell: Cell<T>;
+    isLastCell: boolean;
+}

package/dist/components/TableCell/types.js

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

package/dist/components/TableHeaderContent/TableHeaderContent.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderContentProps } from "./types";
+declare const TableHeaderContent: <T extends object>({ column, contentClassNames, }: TableHeaderContentProps<T>) => JSX.Element;
+export default TableHeaderContent;

package/dist/components/TableHeaderContent/TableHeaderContent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableHeaderContent = ({ column, contentClassNames = `flex items-center justify-center text-sm`, }) => {
+    return _jsx("div", { className: contentClassNames, children: column.render("Header") });
+};
+export default TableHeaderContent;

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

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const ComponentHeader: any;
+export declare const MultipleHeaders: any;

package/dist/components/TableHeaderContent/TableHeaderContent.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTable } from "react-table";
+import TableHeaderContent from "./TableHeaderContent";
+export default {
+    title: "Table/TableHeaderContent",
+    component: TableHeaderContent,
+    parameters: {
+        layout: "centered",
+        controls: { hideNoControlsWarning: true },
+    },
+};
+// Basic template with configurable columns
+const Template = (args) => {
+    const { columns } = args;
+    const data = useMemo(() => [], []);
+    const { headers } = useTable({
+        columns,
+        data,
+    });
+    return (_jsx("div", { className: "p-4 bg-gray-50 rounded-lg", children: headers.map((header, index) => (_jsx(TableHeaderContent, { column: header }, index))) }));
+};
+// Story demonstrating default behavior
+export const Default = Template.bind({});
+Default.args = {
+    columns: [
+        {
+            Header: "Basic Header",
+            accessor: "basic",
+        },
+    ],
+};
+// Story with component-based header
+export const ComponentHeader = Template.bind({});
+ComponentHeader.args = {
+    columns: [
+        {
+            Header: () => (_jsx("span", { className: "text-red-500", children: "\uD83D\uDD25 Custom Component" })),
+            accessor: "component",
+        },
+    ],
+};
+// Story demonstrating multiple headers
+export const MultipleHeaders = Template.bind({});
+MultipleHeaders.args = {
+    columns: [
+        {
+            Header: "First Column",
+            accessor: "first",
+            headerClassName: "bg-green-100",
+        },
+        {
+            Header: "Second Column",
+            accessor: "second",
+            headerClassName: "bg-purple-100",
+        },
+        {
+            Header: () => _jsx("div", { className: "text-yellow-600", children: "Custom Header" }),
+            accessor: "third",
+        },
+    ],
+};

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

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

package/dist/components/TableHeaderContent/TableHeaderContent.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import TableHeaderContent from "./TableHeaderContent";
+import { describe, expect, test, vi } from "vitest";
+describe("TableHeaderContent", () => {
+    test("renders header string correctly", () => {
+        const headerText = "Test Header";
+        const mockColumn = {
+            render: vi.fn((key) => key === "Header" ? headerText : null),
+        };
+        render(_jsx(TableHeaderContent, { column: mockColumn }));
+        expect(mockColumn.render).toHaveBeenCalledWith("Header");
+        expect(screen.getByText(headerText)).toBeInTheDocument();
+    });
+    test("renders header component correctly", () => {
+        const headerText = "Component Header";
+        const mockColumn = {
+            render: vi.fn((key) => key === "Header" ? _jsx("span", { children: headerText }) : null),
+        };
+        render(_jsx(TableHeaderContent, { column: mockColumn }));
+        expect(screen.getByText(headerText)).toBeInTheDocument();
+        expect(screen.getByText(headerText).tagName).toBe("SPAN");
+    });
+    test("applies default contentClassNames when none provided", () => {
+        const mockColumn = {
+            render: vi.fn(() => "Header"),
+        };
+        const { container } = render(_jsx(TableHeaderContent, { column: mockColumn }));
+        const div = container.firstChild;
+        expect(div).toHaveClass("flex", "items-center", "justify-center", "text-sm");
+    });
+    test("applies custom contentClassNames when provided", () => {
+        const customClass = "custom-class";
+        const mockColumn = {
+            render: vi.fn(() => "Header"),
+        };
+        const { container } = render(_jsx(TableHeaderContent, { column: mockColumn, contentClassNames: customClass }));
+        const div = container.firstChild;
+        expect(div).toHaveClass(customClass);
+    });
+});

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

@@ -0,0 +1,5 @@
+import { ColumnInstance } from "react-table";
+export interface TableHeaderContentProps<T extends object> {
+    column: ColumnInstance<T>;
+    contentClassNames?: string;
+}

package/dist/components/TableHeaderContent/types.js

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

package/dist/components/TableHeaderInput/TableHeaderInput.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderInputProps } from "./types";
+declare const TableHeaderInput: import("react").ForwardRefExoticComponent<TableHeaderInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TableHeaderInput;

package/dist/components/TableHeaderInput/TableHeaderInput.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+const TableHeaderInput = forwardRef(({ label, placeholder, required = false, checked, id, name, type = "text", firstIcon, secondIcon, iconPosition = "before", iconColor = "primary", isValid = true, isReadOnly = false, onChange, value, readOnlyInfo = "", toolTipText = "", hasToolTip = false, additionalClasses = "", labelClasses = "", hasAutoFocus, onIconClick, onKeyDown, disabled, register, }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    // Check if input value has at least one non-space character
+    const hasValue = value != null && !!value.toString().trim();
+    const isNumberInput = type === "number";
+    let formattedValue = isNumberInput &&
+        value != null &&
+        value.toString().trim() &&
+        isNaN(Number(value))
+        ? ""
+        : value;
+    if (formattedValue === "$NaN") {
+        formattedValue = "";
+    }
+    const renderFirstIcon = () => {
+        if (!firstIcon)
+            return null;
+        return (_jsx("span", { onClick: onIconClick, className: `input-icon input-icon--first-icon absolute top-[10px] left-4 ${disabled
+                ? "text-gray-500"
+                : isValid
+                    ? `text-${iconColor}`
+                    : "text-redText"}`, children: firstIcon }));
+    };
+    const renderSecondIcon = () => {
+        if (!secondIcon)
+            return null;
+        return (_jsx("span", { onClick: onIconClick, className: `input-icon input-icon--second-icon absolute top-2 right-4 ${disabled
+                ? "text-gray-500"
+                : isValid
+                    ? `text-${iconColor}`
+                    : "text-redText"}`, children: secondIcon }));
+    };
+    const renderIcons = () => {
+        switch (iconPosition) {
+            case "before":
+                return renderFirstIcon();
+            case "after":
+                return renderSecondIcon();
+            case "both":
+                return (_jsxs(_Fragment, { children: [renderFirstIcon(), renderSecondIcon()] }));
+            default:
+                return null;
+        }
+    };
+    // This brings in the name and 'required' from react-hook-form if provided
+    const registerProps = register
+        ? register(name || "", { required })
+        : {};
+    // If readOnly, render a div (or label, etc.)
+    if (isReadOnly) {
+        return (_jsxs("div", { className: "input-wrapper relative", children: [renderIcons(), _jsxs("label", { htmlFor: id, className: `block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] }), _jsx("div", { className: `
+              border text-left focus:outline-none focus:ring-2 block w-full py-2 px-2 rounded-lg shadow-input
+              ${firstIcon ? "pl-10" : ""}
+              ${secondIcon ? "pr-10" : ""}
+              ${additionalClasses}
+            `, children: readOnlyInfo }), iconPosition === "after" && renderSecondIcon()] }));
+    }
+    // Normal editable input
+    return (_jsxs("div", { children: [label && (_jsxs("label", { htmlFor: id, className: `block font-light text-left mb-1 ${labelClasses}`, children: [label, hasToolTip && (_jsxs("span", { className: "pl-4 group", children: [_jsx(FontAwesomeIcon, { icon: faCircleInfo, className: "text-primary group-hover:text-blue-600" }), _jsx("span", { className: "opacity-0 group-hover:opacity-100 bg-gray-800 text-white text-sm rounded-md px-2 py-1 absolute top-[-14px]", children: toolTipText })] }))] })), _jsxs("div", { className: "input-wrapper relative", children: [renderIcons(), _jsx("input", { autoComplete: "off", ...registerProps, ref: ref, className: `
+              rounded-md focused:ring-0 focus:ring-navy-500 text-navy-500 border focus:outline-none focus:ring-2
+              ${disabled
+                            ? "border-gray-500 focus:ring-gray-500"
+                            : isValid
+                                ? "focus:ring-navy-200"
+                                : "border-redText focus:ring-red-500"}
+              block w-full py-2 px-2
+              ${firstIcon ? "pl-10" : ""}
+              ${secondIcon ? "pr-10" : ""}
+              rounded-lg outline outline-0 outline-barelyPrimary focus:outline-4
+              ${additionalClasses}
+              ${isFocused && !disabled ? (isValid ? "" : "shadow-redText") : ""}
+              focus:ring-navy-200 focus:ring-2
+            `, autoFocus: hasAutoFocus, placeholder: placeholder, type: type, id: id, value: formattedValue, name: name, onChange: onChange, checked: type === "checkbox" ? checked : undefined, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), disabled: disabled, required: required && !hasValue, onKeyDown: onKeyDown }), iconPosition === "after" && renderSecondIcon()] })] }));
+});
+TableHeaderInput.displayName = "InputField";
+export default TableHeaderInput;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import TableHeaderInput from "./TableHeaderInput";
+declare const meta: Meta<typeof TableHeaderInput>;
+export default meta;
+type Story = StoryObj<typeof TableHeaderInput>;
+export declare const BasicWithLabel: Story;
+export declare const NoLabelWithIcon: Story;
+export declare const IconOnRight: Story;
+export declare const IconOnBothSides: Story;
+export declare const ReadOnlyExample: Story;

package/dist/components/TableHeaderInput/TableHeaderInput.stories.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useForm } from "react-hook-form";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import TableHeaderInput from "./TableHeaderInput";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+const meta = {
+    title: "Table/TableHeaderInput",
+    component: TableHeaderInput,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+**TableHeaderInput** is a lightweight input component for use in table headers or other compact UI areas,
+optionally with an icon and label. This component supports \`react-hook-form\` via the \`register\` prop.
+      `,
+            },
+        },
+    },
+    argTypes: {
+        label: {
+            description: "Optional text label displayed above the input.",
+        },
+        placeholder: {
+            description: "Text displayed when the input is empty.",
+        },
+        required: {
+            description: "Marks the input as required.",
+        },
+        type: {
+            description: "Specifies the input type (text, checkbox, email, etc.).",
+        },
+        name: {
+            description: "Name of the field, which also wires into `react-hook-form` when `register` is passed.",
+        },
+        firstIcon: {
+            description: "An icon to display on the left side of the input.",
+        },
+        secondIcon: {
+            description: "An icon to display on the right side of the input.",
+        },
+        register: {
+            description: "Pass in the `register` function from `react-hook-form`.",
+        },
+        onChange: {
+            description: "Change event handler for the input.",
+        },
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+export const BasicWithLabel = {
+    name: "Basic with Label",
+    render: () => {
+        const { register } = useForm();
+        return (_jsx("div", { style: { width: 300 }, children: _jsx(TableHeaderInput, { label: "First Name", placeholder: "Enter your name", type: "text", required: true, register: register, name: "firstName" }) }));
+    },
+};
+export const NoLabelWithIcon = {
+    name: "No Label, Left Icon",
+    render: () => {
+        const { register } = useForm();
+        return (_jsx("div", { style: { width: 300 }, children: _jsx(TableHeaderInput, { placeholder: "Search", name: "search", register: register, type: "text", firstIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), required: false }) }));
+    },
+};
+export const IconOnRight = {
+    name: "Icon on Right",
+    render: () => {
+        const { register } = useForm();
+        return (_jsx("div", { style: { width: 300 }, children: _jsx(TableHeaderInput, { placeholder: "Search anything...", name: "searchRight", register: register, type: "text", secondIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), iconPosition: "both", required: false }) }));
+    },
+};
+export const IconOnBothSides = {
+    name: "Icon on Both Sides",
+    render: () => {
+        const { register } = useForm();
+        return (_jsx("div", { style: { width: 300 }, children: _jsx(TableHeaderInput, { placeholder: "Search anything...", name: "searchRight", register: register, type: "text", firstIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), secondIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), iconPosition: "both", required: false }) }));
+    },
+};
+export const ReadOnlyExample = {
+    name: "Read-Only Example",
+    render: () => (_jsx("div", { style: { width: 300 }, children: _jsx(TableHeaderInput, { label: "Read Only Field", type: "text", isReadOnly: true, readOnlyInfo: "This is read-only text.", required: false }) })),
+};

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

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

package/dist/components/TableHeaderInput/TableHeaderInput.test.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import TableHeaderInput from "./TableHeaderInput";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+describe("TableHeaderInput", () => {
+    it("renders label and placeholder in normal mode", () => {
+        render(_jsx(TableHeaderInput, { label: "First Name", placeholder: "Enter your name", name: "firstName", required: false, type: "number" }));
+        expect(screen.getByText("First Name")).toBeInTheDocument();
+        expect(screen.getByPlaceholderText("Enter your name")).toBeInTheDocument();
+    });
+    it("renders secondIcon when iconPosition is 'after'", () => {
+        const { container } = render(_jsx(TableHeaderInput, { placeholder: "Search", iconPosition: "after", secondIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), required: false, type: "number" }));
+        const secondIconSpan = container.querySelector(".input-icon--second-icon");
+        expect(secondIconSpan).toBeInTheDocument();
+    });
+    it("does not render an input when isReadOnly is true", () => {
+        render(_jsx(TableHeaderInput, { label: "Read Only", isReadOnly: true, readOnlyInfo: "This is read-only text", required: false, type: "number" }));
+        expect(screen.getByText("Read Only")).toBeInTheDocument();
+        expect(screen.getByText("This is read-only text")).toBeInTheDocument();
+        const input = screen.queryByRole("textbox");
+        expect(input).toBeNull();
+    });
+    it("renders firstIcon when iconPosition is 'before'", () => {
+        render(_jsx(TableHeaderInput, { placeholder: "Search", iconPosition: "before", firstIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), required: false, type: "number" }));
+        const icons = screen.getAllByRole("img", { hidden: true });
+        expect(icons).toHaveLength(1);
+    });
+    it("renders both icons when iconPosition is 'both'", () => {
+        render(_jsx(TableHeaderInput, { placeholder: "Search", iconPosition: "both", firstIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), secondIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), required: false, type: "number" }));
+        const icons = screen.getAllByRole("img", { hidden: true });
+        expect(icons).toHaveLength(2);
+    });
+    it("calls onIconClick when the icon is clicked", () => {
+        const handleIconClick = vi.fn();
+        render(_jsx(TableHeaderInput, { iconPosition: "before", firstIcon: _jsx(FontAwesomeIcon, { icon: faSearch }), onIconClick: handleIconClick, required: false, type: "number" }));
+        const iconEl = screen.getAllByRole("img", { hidden: true })[0];
+        fireEvent.click(iconEl);
+        expect(handleIconClick).toHaveBeenCalledTimes(1);
+    });
+    it("calls onChange when typing in the input", () => {
+        const handleChange = vi.fn();
+        render(_jsx(TableHeaderInput, { placeholder: "Type here", onChange: handleChange, name: "testName", type: "text", required: false }));
+        const inputEl = screen.getByPlaceholderText("Type here");
+        fireEvent.change(inputEl, { target: { value: "Hello" } });
+        expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+    it("calls onKeyDown when a key is pressed", () => {
+        const handleKeyDown = vi.fn();
+        render(_jsx(TableHeaderInput, { placeholder: "Key test", onKeyDown: handleKeyDown, required: false, type: "number" }));
+        const inputEl = screen.getByPlaceholderText("Key test");
+        fireEvent.keyDown(inputEl, { key: "Enter", code: "Enter" });
+        expect(handleKeyDown).toHaveBeenCalledTimes(1);
+    });
+    it("marks input as required if `required` and no value provided", () => {
+        render(_jsx(TableHeaderInput, { placeholder: "Required test", required: true, type: "number" }));
+        const inputEl = screen.getByPlaceholderText("Required test");
+        expect(inputEl).toHaveAttribute("required");
+    });
+    it("does not mark input as required if value is present", () => {
+        render(_jsx(TableHeaderInput, { placeholder: "Required test", required: true, value: "Has Value", type: "number" }));
+        const inputEl = screen.getByPlaceholderText("Required test");
+        expect(inputEl).not.toHaveAttribute("required");
+    });
+    it("handles $NaN case for number input gracefully", () => {
+        render(_jsx(TableHeaderInput, { placeholder: "Number test", type: "number", value: "$NaN", required: false }));
+        const inputEl = screen.getByPlaceholderText("Number test");
+        expect(inputEl.value).toBe("");
+    });
+    it("applies invalid border classes when isValid is false", () => {
+        render(_jsx(TableHeaderInput, { placeholder: "Invalid test", isValid: false, required: false, type: "number" }));
+        const inputEl = screen.getByPlaceholderText("Invalid test");
+        expect(inputEl.className).toContain("border-redText");
+        expect(inputEl.className).toContain("focus:ring-red-500");
+    });
+    it("applies disabled classes when disabled is true", () => {
+        render(_jsx(TableHeaderInput, { placeholder: "Disabled test", disabled: true, required: false, type: "number" }));
+        const inputEl = screen.getByPlaceholderText("Disabled test");
+        expect(inputEl).toBeDisabled();
+        expect(inputEl.className).toContain("border-gray-500");
+        expect(inputEl.className).toContain("focus:ring-gray-500");
+    });
+});

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

@@ -0,0 +1 @@
+export { default } from "./TableHeaderInput";

package/dist/components/TableHeaderInput/index.js

@@ -0,0 +1 @@
+export { default } from "./TableHeaderInput";

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

@@ -0,0 +1,30 @@
+import { KeyboardEvent, ChangeEvent, ReactNode } from "react";
+import { UseFormRegister } from "react-hook-form";
+export interface TableHeaderInputProps {
+    label?: string;
+    value?: string | number;
+    readOnlyInfo?: string | JSX.Element;
+    iconColor?: string;
+    placeholder?: string;
+    iconPosition?: "before" | "after" | "both";
+    required: boolean;
+    firstIcon?: ReactNode | null;
+    secondIcon?: ReactNode | null;
+    hasToolTip?: boolean;
+    toolTipText?: string;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean extends TableHeaderInputProps["type"] ? boolean : undefined;
+    id?: string;
+    name?: string;
+    additionalClasses?: string;
+    onIconClick?: () => void;
+    type: "text" | "checkbox" | "radio" | "number" | "email" | "password" | "file" | "color" | "tel" | "url" | "range";
+    isValid?: boolean;
+    isReadOnly?: boolean;
+    hasIcons?: boolean;
+    labelClasses?: string;
+    disabled?: boolean;
+    hasAutoFocus?: boolean;
+    register?: UseFormRegister<any>;
+}

package/dist/components/TableHeaderInput/types.js

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

package/dist/components/TableRow/TableRow.d.ts

@@ -0,0 +1,15 @@
+import { DataWithUUID } from "../TableCell";
+import TableRowProps from ".";
+interface TableRowProps {
+    row: any;
+    prepareRow: (row: any) => void;
+    activeIndex?: number;
+    activeRowColor?: string;
+    globalTrimActive?: boolean;
+    rowUuid?: string;
+    columnInputs?: string[];
+    rowHoverClasses?: string;
+    onRowClick?: (index: number, rowUuid: string, event: React.MouseEvent) => void;
+}
+declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor, rowHoverClasses, onRowClick, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import TableCell from "../TableCell";
+const TableRow = ({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-red-100 hover:cursor-pointer", onRowClick, }) => {
+    prepareRow(row);
+    const isActive = activeIndex === row.index;
+    let rowClasses = `border-primary`;
+    if (isActive) {
+        rowClasses += ` activeRow ${activeRowColor}`;
+    }
+    return (_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: (event) => {
+            if (onRowClick) {
+                onRowClick(row.index, rowUuid || "", event);
+            }
+        }, children: row.cells.map((cell, index) => {
+            const isLastCell = index === row.cells.length - 1;
+            const cellProps = cell.getCellProps();
+            return (_jsx(Fragment, { children: _jsx(TableCell, { cell: cell, rowUuid: rowUuid, globalTrimActive: globalTrimActive, columnInputs: columnInputs, isLastCell: isLastCell }) }, cellProps.key));
+        }) }, rowUuid));
+};
+export default TableRow;

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

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import TableRow from "./TableRow";
+declare const meta: Meta<typeof TableRow>;
+export default meta;
+export declare const Default: any;
+export declare const ActiveRow: any;
+export declare const WithRowClickHandler: any;
+export declare const NoTrimming: any;
+export declare const CustomCellRendering: any;