@eml-payments/ui-kit 0.1.23 → 0.1.24

package/dist/src/components/Table/Table.js

@@ -9,7 +9,7 @@ import { FiMoreHorizontal } from 'react-icons/fi';
 import { Button } from '../Button';
 export function Table(props) {
     var _a;
-    const { table, setPageSize, ...pagination } = useTableController(props);
+    const { table, setPageSize, showHeader, ...pagination } = useTableController(props);
     let tableContent;
     if (props.isLoading && props.showSkeletonRows) {
         tableContent = Array.from({ length: 3 }).map((_c) => (_jsx("tr", { className: "border-t animate-pulse", children: table.getVisibleFlatColumns().map((__c) => (_jsx("td", { className: "px-4 py-2", children: _jsx("div", { className: "h-4 w-3/4 bg-[var(--uikit-tertiary)] rounded" }) }, `skeleton-cell-${__c.id}`))) }, `skeleton-row`)));
@@ -26,8 +26,10 @@ export function Table(props) {
                     }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_a = props.tableActionsDropdown.structure) !== null && _a !== void 0 ? _a : 'default', options: props.tableActionsDropdown.getOptions(row.original), triggerElement: (_e = (_d = (_b = props.tableActionsDropdown).renderCustomTrigger) === null || _d === void 0 ? void 0 : _d.call(_b, row.original)) !== null && _e !== void 0 ? _e : (_jsx(Button, { size: "icon", variant: "ghost", className: "p-1 focus-visible:outline-none focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_f = props.rowIdKey) !== null && _f !== void 0 ? _f : 'id')]));
         });
     }
-    return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsx("div", { className: "rounded-[var(--uikit-radius)] overflow-hidden border", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed', props.className), role: "table", id: props.id, children: [_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { children: [headerGroup.headers.map((header) => {
-                                        return (_jsx("th", { style: { width: header.getSize() }, className: classNames('select-none text-[16px]', header.id === 'select' ? 'p-0' : 'px-4 py-2 text-left cursor-pointer'), onClick: header.column.getCanSort()
+    return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsx("div", { className: "rounded-[var(--uikit-radius)] overflow-hidden border", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { children: [headerGroup.headers.map((header) => {
+                                        return (_jsx("th", { style: { width: header.getSize() }, className: classNames('select-none text-[16px]', header.id === 'select'
+                                                ? 'p-0'
+                                                : 'px-4 py-2 text-left cursor-pointer'), onClick: header.column.getCanSort()
                                                 ? header.column.getToggleSortingHandler()
                                                 : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'
                                                     ? 'flex justify-center items-center'
@@ -35,5 +37,5 @@ export function Table(props) {
                                                             asc: _jsx(FaChevronUp, {}),
                                                             desc: _jsx(FaChevronDown, {}),
                                                         }[header.column.getIsSorted()] || null }))] }) }, header.id));
-                                    }), props.tableActionsDropdown && _jsx("th", { className: "w-[40px] px-2 py-2 text-right" })] }, headerGroup.id))) }), _jsx("tbody", { children: tableContent })] }) }), _jsx(PaginationFooter, { tableId: props.id, table: table, paginationMode: props.paginationMode, totalServerRows: props.totalServerRows, onPageSizeChange: setPageSize, ...pagination })] }));
+                                    }), props.tableActionsDropdown && _jsx("th", { className: "w-[40px] px-2 py-2 text-right" })] }, headerGroup.id))) })), _jsx("tbody", { children: tableContent })] }) }), _jsx(PaginationFooter, { tableId: props.id, table: table, paginationMode: props.paginationMode, totalServerRows: props.totalServerRows, onPageSizeChange: setPageSize, ...pagination })] }));
 }

package/dist/src/components/Table/Table.stories.d.ts

@@ -16,3 +16,4 @@ export declare const FlexColumnWidths: Story;
 export declare const WithControlledSorting: Story;
 export declare const WithRowActionsDropdown: Story;
 export declare const WithRowClickHandler: Story;
+export declare const WithHiddenHeader: Story;

package/dist/src/components/Table/Table.stories.js

@@ -136,9 +136,12 @@ export const WithRowActionsDropdown = {
 };
 export const WithRowClickHandler = {
     render: () => {
-        return (_jsx(Table, { id: "clickable-rows-table", data: data, columns: columns, onRowClick: row => {
+        return (_jsx(Table, { id: "clickable-rows-table", data: data, columns: columns, onRowClick: (row) => {
                 console.log('Row clicked:', row);
                 alert(`Clicked on ${row.name}`);
             } }));
     },
 };
+export const WithHiddenHeader = {
+    render: () => _jsx(Table, { id: "header-hidden-table", data: data, columns: columns, showHeader: false }),
+};

package/dist/src/components/Table/Table.types.d.ts

@@ -33,4 +33,5 @@ export interface TableProps<T> {
         renderCustomTrigger?: (row: T) => React.ReactNode;
     };
     onRowClick?: (row: T) => void;
+    showHeader?: boolean;
 }

package/dist/src/components/Table/hooks/useTableController.d.ts

@@ -2,7 +2,7 @@ import { type SortingState } from '@tanstack/react-table';
 import type { TableProps } from '../Table.types';
 export declare function useTableController<T extends {
     id: string;
-}>({ data, columns, checkboxSelection, checkboxPosition, paginationMode, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, totalServerRows, onRefetch, }: TableProps<T>): {
+}>({ data, columns, checkboxSelection, checkboxPosition, paginationMode, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, totalServerRows, onRefetch, showHeader, }: TableProps<T>): {
     pageIndex: number;
     pageSize: number;
     canNextPage: boolean;
@@ -13,4 +13,5 @@ export declare function useTableController<T extends {
     setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
     setPageIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     sorting: SortingState;
+    showHeader: boolean;
 };

package/dist/src/components/Table/hooks/useTableController.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, } from '@tanstack/react-table';
 import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
 import { usePaginationController } from './usePaginationController';
-export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, }) {
+export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, showHeader = true, }) {
     const safeData = Array.isArray(data) ? data : [];
     const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : []));
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
@@ -82,6 +82,7 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         setPageSize,
         setPageIndex,
         sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+        showHeader,
         ...pagination,
     };
 }

package/dist/src/components/Tooltip/Tooltip.stories.js

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "0.1.23",
+	"version": "0.1.24",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",