@eml-payments/ui-kit 1.8.12 → 1.8.14

package/dist/src/components/Counter/Counter.d.ts

@@ -1,2 +1,2 @@
 import type { CounterProps } from './Counter.types';
-export declare function Counter({ to, from, duration, autoStart, prefix, suffix, decimals, separator, className, style, onComplete, triggerOnVisible, }: CounterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Counter({ to, from, duration, autoStart, prefix, suffix, decimals, separator, className, style, onComplete, triggerOnVisible, }: Readonly<CounterProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Counter/Counter.js

@@ -17,7 +17,15 @@ export function Counter({ to, from = 0, duration = 1.2, autoStart = true, prefix
         const fixed = num.toFixed(decimals);
         const parts = fixed.split('.');
         // Add thousand separators
-        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+        const digits = parts[0];
+        const withSeparators = [];
+        for (let i = 0; i < digits.length; i += 1) {
+            if (i > 0 && (digits.length - i) % 3 === 0) {
+                withSeparators.push(separator);
+            }
+            withSeparators.push(digits[i]);
+        }
+        parts[0] = withSeparators.join('');
         return parts.join('.');
     }, [decimals, separator]);
     // Handle intersection observer for triggerOnVisible

package/dist/src/components/CreditCard/CreditCard.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import creditCardFrost from '../../assets/credit-card-frost.png';
 import { BrokenGlassEffect } from './BrokenGlassEffect';
 const sizeClasses = {
-    sm: 'w-full max-w-[118px]',
+    sm: 'w-full max-w-[118px] h-[75px]',
     md: 'w-full max-w-[236px]',
     lg: 'w-full max-w-[380px]',
 };

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

@@ -5,10 +5,10 @@ declare function DropdownMenuPortal({ ...props }: Readonly<React.ComponentProps<
 declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+declare function DropdownMenuItem({ className, inset, variant, ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: 'default' | 'destructive';
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
 declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Filters/Filters.js

@@ -66,6 +66,6 @@ export const Filters = forwardRef(({ filters, defaultValues, onChange, onReset,
         const currentValue = values[key];
         return JSON.stringify(defaultValue) !== JSON.stringify(currentValue);
     });
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3 h-full w-full", children: [filters.map((filterConfig) => (_jsx("div", { className: "flex items-center mb-3 h-10", children: _jsx(Controller, { name: filterConfig.name, control: control, render: ({ field }) => renderFilterComponent(filterConfig, field) }) }, filterConfig.name))), showResetButton && (_jsx("div", { className: "flex items-center mb-3 h-10 ml-3", children: _jsx(Button, { ...resetButtonProps, variant: "secondaryOutlined", className: cn('min-w-[80px]', resetButtonProps === null || resetButtonProps === void 0 ? void 0 : resetButtonProps.className), onClick: handleResetFilters, disabled: isResetDisabled, children: resetButtonText }) }))] }));
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-3 h-full w-full", children: [filters.map((filterConfig) => (_jsx("div", { className: "flex items-center h-10", children: _jsx(Controller, { name: filterConfig.name, control: control, render: ({ field }) => renderFilterComponent(filterConfig, field) }) }, filterConfig.name))), showResetButton && (_jsx("div", { className: "flex items-center h-10 ml-3", children: _jsx(Button, { ...resetButtonProps, variant: "secondaryOutlined", className: cn('min-w-[80px]', resetButtonProps === null || resetButtonProps === void 0 ? void 0 : resetButtonProps.className), onClick: handleResetFilters, disabled: isResetDisabled, children: resetButtonText }) }))] }));
 });
 Filters.displayName = 'Filters';

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

@@ -9,6 +9,6 @@ export declare const Outlined: Story;
 export declare const Disabled: Story;
 export declare const Secondary: Story;
 export declare const Warning: Story;
-export declare const Error: Story;
+export declare const ErrorPill: Story;
 export declare const Info: Story;
 export declare const Success: Story;

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

@@ -53,7 +53,7 @@ export const Warning = {
     },
     render: (args) => _jsx(Pills, { ...args }),
 };
-export const Error = {
+export const ErrorPill = {
     args: {
         color: 'error',
         label: 'Error Pill',

package/dist/src/components/Skeleton/Skeleton.d.ts

@@ -1,2 +1,2 @@
 import type { SkeletonProps } from './Skeleton.types';
-export declare function Skeleton({ variant, width, height, animation, className, style }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ variant, width, height, animation, className, style, }: Readonly<SkeletonProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
-export function Skeleton({ variant = 'text', width, height, animation = 'pulse', className, style }) {
+export function Skeleton({ variant = 'text', width, height, animation = 'pulse', className, style, }) {
     const baseClasses = 'bg-gray-200 dark:bg-gray-700';
     const animationClasses = {
         pulse: 'animate-pulse',

package/dist/src/components/Spinner/Spinner.d.ts

@@ -1,2 +1,2 @@
 import type { SpinnerProps } from './Spinner.types';
-export declare function Spinner({ size, color, className, 'aria-label': ariaLabel, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ size, color, className, 'aria-label': ariaLabel, }: Readonly<SpinnerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Stepper/useStepper.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 export function useStepper(steps, initialStep) {
     const [currentStep, setCurrentStep] = useState(initialStep !== null && initialStep !== void 0 ? initialStep : steps[0]);
-    const currentIndex = steps.findIndex((s) => s === currentStep);
+    const currentIndex = steps.indexOf(currentStep);
     const isFirst = currentIndex === 0;
     const isLast = currentIndex === steps.length - 1;
     const goNext = () => {

package/dist/src/components/Switch/Switch.js

@@ -16,7 +16,7 @@ const Switch = React.forwardRef(({ className, label, labelPosition = 'left', id,
     const ariaLabel = label || id || props['aria-label'];
     return (_jsxs("div", { className: wrapperClass, children: [label && (_jsx(Label, { htmlFor: id, className: cn('text-sm font-medium cursor-pointer', {
                     'cursor-not-allowed opacity-70': props.disabled,
-                }), children: label })), _jsx(SwitchPrimitives.Root, { ref: ref, id: id, "aria-label": !label ? ariaLabel : undefined, title: !label ? ariaLabel : undefined, className: cn('peer inline-flex h-[22px] w-[40px] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-black transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-transparent', className), ...props, children: _jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-[12px] w-[12px] rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[21px] data-[state=checked]:bg-(--uikit-primary) data-[state=unchecked]:translate-x-[2px] data-[state=unchecked]:bg-black') }) })] }));
+                }), children: label })), _jsx(SwitchPrimitives.Root, { ref: ref, id: id, "aria-label": label ? undefined : ariaLabel, title: label ? undefined : ariaLabel, className: cn('peer inline-flex h-[22px] w-[40px] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-black transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 bg-transparent', className), ...props, children: _jsx(SwitchPrimitives.Thumb, { className: cn('pointer-events-none block h-[12px] w-[12px] rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[21px] data-[state=checked]:bg-(--uikit-primary) data-[state=unchecked]:translate-x-[2px] data-[state=unchecked]:bg-black') }) })] }));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export { Switch };

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

@@ -28,14 +28,15 @@ export const Disabled = {
         id: 'disabled-switch',
     },
 };
+function ControlledSwitchStory(args) {
+    const [checked, setChecked] = useState(args.checked);
+    return _jsx(Switch, { ...args, checked: checked, onCheckedChange: setChecked });
+}
 export const ControlledSwitch = {
     args: {
         id: 'controlled-switch',
     },
-    render: (args) => {
-        const [checked, setChecked] = useState(args.checked);
-        return _jsx(Switch, { ...args, checked: checked, onCheckedChange: setChecked });
-    },
+    render: (args) => _jsx(ControlledSwitchStory, { ...args }),
 };
 export const WithLabel = {
     args: {
@@ -55,8 +56,5 @@ export const ControlledAndLabel = {
         label: 'Controlled Switch',
         id: 'controlled-switch-label',
     },
-    render: (args) => {
-        const [checked, setChecked] = useState(args.checked);
-        return _jsx(Switch, { ...args, checked: checked, onCheckedChange: setChecked });
-    },
+    render: (args) => _jsx(ControlledSwitchStory, { ...args }),
 };

package/dist/src/components/Table/BaseTable/index.d.ts

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

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

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

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

@@ -17,6 +17,6 @@ export type PageSizeSelectorProps = {
     onChange: (val: string) => void;
     options?: string[];
     label?: string;
-    className?: SelectWrapperProps['className'];
-    size?: SelectWrapperProps['size'];
+    className?: NonNullable<SelectWrapperProps['className']>;
+    size?: NonNullable<SelectWrapperProps['size']>;
 };

package/dist/src/components/Table/Pagination/PaginationControls.d.ts

@@ -0,0 +1,3 @@
+import type { PageSizeSelectorProps, PaginationControlsProps } from './PaginationControls.types';
+export declare const PageSizeSelector: ({ id, value, onChange, options, label, className, size, }: PageSizeSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationFooter: <T>({ table, tableId, paginationMode, onPageSizeChange, totalServerRows, onNextPage, onPrevPage, }: PaginationControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectWrapper } from '../../SelectWrapper';
+import { cn } from '../../../lib/utils';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { Button } from '../../Button';
+export const PageSizeSelector = ({ id, value, onChange, options = ['5', '10', '20', '50', '100'], label = 'Rows per page:', className, size = 'default', }) => {
+    return (_jsxs("div", { className: cn('flex items-center gap-2 text-xs', className), id: `page-size-select-${id}`, children: [_jsx("label", { htmlFor: `page-size-select-${id}`, children: label }), _jsx("div", { className: "w-fit", children: _jsx(SelectWrapper, { size: size, value: value, onChange: onChange, options: options.map((option) => ({
+                        label: option,
+                        value: option,
+                    })), className: "bg-transparent shadow-none border-none gap-1" }) })] }));
+};
+export const PaginationFooter = ({ table, tableId, paginationMode = 'client', onPageSizeChange, totalServerRows, onNextPage, onPrevPage, }) => {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const totalRows = paginationMode === 'server' ? (totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) : table.getFilteredRowModel().rows.length;
+    const startRow = pageIndex * pageSize + 1;
+    const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+    return (_jsxs("div", { className: "flex justify-end items-center gap-6 px-4 py-2 text-xs text-(--uikit-textSecondary) w-full", children: [_jsx(PageSizeSelector, { id: tableId, value: String(pageSize), onChange: (val) => {
+                    const newSize = Number(val);
+                    table.setPageSize(newSize);
+                    onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(newSize);
+                }, size: "small", label: "Rows per page" }), totalRows > 0 && _jsx("div", { id: `page-indicator-${tableId}`, children: `${startRow} - ${endRow} of ${totalRows}` }), totalRows > 0 && (_jsxs("div", { className: "flex gap-2", id: `pagination-controls-${tableId}`, children: [_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous page", className: cn({ '!bg-transparent': !table.getCanPreviousPage() }), onClick: onPrevPage, disabled: !table.getCanPreviousPage(), children: _jsx(FaChevronLeft, { className: "!w-3 !h-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next page", onClick: onNextPage, className: cn({ '!bg-transparent': !table.getCanNextPage() }), disabled: !table.getCanNextPage(), children: _jsx(FaChevronRight, { className: "w-3! h-3!" }) })] }))] }));
+};

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

@@ -0,0 +1,24 @@
+import type { Table } from '@tanstack/react-table';
+import type { SelectWrapperProps } from '../../SelectWrapper';
+import { PaginationMode } from '../Table.types';
+export interface PaginationControlsProps<T> {
+    tableId: string;
+    table: Table<T>;
+    paginationMode?: PaginationMode;
+    totalServerRows?: number;
+    pageSizeOptions?: string[];
+    onPageSizeChange?: (size: number) => void;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    canNextPage: boolean;
+    canPrevPage: boolean;
+}
+export type PageSizeSelectorProps = {
+    id: string;
+    value: string;
+    onChange: (val: string) => void;
+    options?: string[];
+    label?: string;
+    className?: SelectWrapperProps['className'];
+    size?: SelectWrapperProps['size'];
+};

package/dist/src/components/Table/Pagination/PaginationControls.types.js

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

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

@@ -0,0 +1,4 @@
+import type { TableProps } from './Table.types';
+export declare function Table<T extends {
+    id: string;
+}>(props: Readonly<TableProps<T>>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { classNames } from '../../utils/classNames';
+import { PaginationFooter } from './Pagination/PaginationControls';
+import { useTableController } from './hooks/useTableController';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { DropdownWrapper } from '../DropdownWrapper';
+import { FiMoreHorizontal } from 'react-icons/fi';
+import { Button } from '../Button';
+export function Table(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { table, setPageSize, showHeader, height, virtualizationEnabled, rowVirtualizer, hasNextPage, parentScrollRef, loaderRef, infiniteScroll, ...pagination } = useTableController(props);
+    let tableContent;
+    const noResultsMessage = props.isSearchActive
+        ? ((_a = props.noSearchResultsMessage) !== null && _a !== void 0 ? _a : 'No results meet your search criteria')
+        : ((_b = props.noRowsMessage) !== null && _b !== void 0 ? _b : 'No rows to display');
+    if (props.isLoading && props.showSkeletonRows) {
+        tableContent = Array.from({ length: 3 }).map(() => (_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-(--uikit-tertiary) rounded" }) }, `skeleton-cell-${__c.id}`))) }, "skeleton-row")));
+    }
+    else if (!virtualizationEnabled &&
+        table.getRowModel().rows.length === 0 &&
+        !props.isLoading &&
+        (!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) || !hasNextPage)) {
+        tableContent = (_jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleFlatColumns().length + (props.tableActionsDropdown ? 1 : 0), className: "px-4 py-8 text-center text-muted-foreground", children: noResultsMessage }) }));
+    }
+    else if (!virtualizationEnabled) {
+        const renderRow = (row) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const rows = [];
+            const isRowClickable = (_a = props.isRowClickable) === null || _a === void 0 ? void 0 : _a.call(props, row.original);
+            if (row.getIsGrouped() && row.groupingColumnId) {
+                const column = table.getColumn(row.groupingColumnId);
+                const bgColor = (_c = (_b = column === null || column === void 0 ? void 0 : column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.bgColor) !== null && _c !== void 0 ? _c : 'transparent';
+                rows.push(_jsx("tr", { className: "border-none", children: _jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "p-0", children: _jsx("div", { className: "px-4 py-4 text-sm text-muted-foreground", style: { backgroundColor: bgColor }, children: row.getGroupingValue(row.groupingColumnId) }) }) }, `group-${row.id}`));
+                row.subRows.forEach((subRow) => {
+                    rows.push(...renderRow(subRow));
+                });
+            }
+            else {
+                rows.push(_jsxs("tr", { className: classNames('border-t', isRowClickable && 'cursor-pointer', row.getIsSelected() && 'bg-(--uikit-primary-10)'), onClick: () => { var _a; return isRowClickable && ((_a = props.onRowClick) === null || _a === void 0 ? void 0 : _a.call(props, row.original)); }, children: [row.getVisibleCells().map((cell) => {
+                            const width = cell.column.getSize();
+                            return (_jsx("td", { style: { width }, className: cell.column.id === 'select' ? 'p-1' : 'p-4', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                        }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_d = props.tableActionsDropdown.structure) !== null && _d !== void 0 ? _d : 'default', options: props.tableActionsDropdown.getOptions(row.original), menuAlignment: props.tableActionsDropdown.menuAlignment, isTriggerElementDisabled: typeof props.tableActionsDropdown.isDisabled === 'function'
+                                    ? props.tableActionsDropdown.isDisabled(row.original)
+                                    : props.tableActionsDropdown.isDisabled, triggerElement: (_g = (_f = (_e = props.tableActionsDropdown).renderCustomTrigger) === null || _f === void 0 ? void 0 : _f.call(_e, row.original)) !== null && _g !== void 0 ? _g : (_jsx(Button, { "aria-label": "Open actions menu", title: "Open actions menu", size: "icon", variant: "ghost", disabled: typeof props.tableActionsDropdown.isDisabled === 'function'
+                                        ? props.tableActionsDropdown.isDisabled(row.original)
+                                        : ((_h = props.tableActionsDropdown.isDisabled) !== null && _h !== void 0 ? _h : false), className: "p-1 focus-visible:outline-hidden focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_j = props.rowIdKey) !== null && _j !== void 0 ? _j : 'id')]));
+            }
+            return rows;
+        };
+        tableContent = table.getRowModel().rows.flatMap(renderRow);
+    }
+    const virtualItems = virtualizationEnabled && rowVirtualizer ? rowVirtualizer.getVirtualItems() : [];
+    const colSpanFull = table.getVisibleFlatColumns().length + (props.tableActionsDropdown ? 1 : 0);
+    const paddingTop = virtualItems.length ? virtualItems[0].start : 0;
+    const lastVirtual = virtualItems[virtualItems.length - 1];
+    const totalSize = (_d = (_c = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getTotalSize) === null || _c === void 0 ? void 0 : _c.call(rowVirtualizer)) !== null && _d !== void 0 ? _d : 0;
+    const end = lastVirtual ? lastVirtual.end : 0;
+    const paddingBottom = Math.max(totalSize - end, 0);
+    const tableRows = table.getRowModel().rows;
+    const isTrulyEmpty = tableRows.length === 0 && !props.isLoading && !hasNextPage;
+    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader mt-4" }), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
+                                        return (_jsx("th", { scope: "col", style: { width: header.getSize() }, className: classNames('select-none text-[14px] font-bold ', header.id === 'select' ? 'p-0' : ' p-4 text-left cursor-pointer'), onClick: !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && header.column.getCanSort()
+                                                ? header.column.getToggleSortingHandler()
+                                                : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'
+                                                    ? 'flex justify-center items-center'
+                                                    : 'flex items-center gap-2'), children: [flexRender(header.column.columnDef.header, header.getContext()), !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && header.column.getCanSort() && (_jsx("span", { className: "text-xs", children: {
+                                                            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: virtualizationEnabled && rowVirtualizer ? (_jsxs(_Fragment, { children: [_jsx("tr", { style: { height: `${paddingTop}px` }, children: _jsx("td", { colSpan: colSpanFull }) }), isTrulyEmpty && (_jsx("tr", { children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-8 text-center text-muted-foreground", children: noResultsMessage }) })), virtualItems.map((vi) => {
+                                        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                                        const isLoaderRow = vi.index >= tableRows.length;
+                                        if (isLoaderRow) {
+                                            return (_jsx("tr", { className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: hasNextPage
+                                                        ? ((_a = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.loadingMoreMessage) !== null && _a !== void 0 ? _a : 'Loading more...')
+                                                        : ((_b = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.noMoreDataMessage) !== null && _b !== void 0 ? _b : 'Nothing more to load') }) }, `loader-${vi.key}`));
+                                        }
+                                        const row = tableRows[vi.index];
+                                        const isRowClickable = (_c = props.isRowClickable) === null || _c === void 0 ? void 0 : _c.call(props, row.original);
+                                        return (_jsxs("tr", { className: classNames('border-t', isRowClickable && 'cursor-pointer', (row === null || row === void 0 ? void 0 : row.getIsSelected()) && 'bg-(--uikit-primary-10)'), onClick: () => { var _a; return isRowClickable && ((_a = props.onRowClick) === null || _a === void 0 ? void 0 : _a.call(props, row.original)); }, children: [row === null || row === void 0 ? void 0 : row.getVisibleCells().map((cell) => {
+                                                    const width = cell.column.getSize();
+                                                    return (_jsx("td", { style: { width }, className: cell.column.id === 'select' ? 'p-1' : 'p-4', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_d = props.tableActionsDropdown.structure) !== null && _d !== void 0 ? _d : 'default', options: props.tableActionsDropdown.getOptions(row.original), menuAlignment: props.tableActionsDropdown.menuAlignment, isTriggerElementDisabled: typeof props.tableActionsDropdown.isDisabled === 'function'
+                                                            ? props.tableActionsDropdown.isDisabled(row.original)
+                                                            : props.tableActionsDropdown.isDisabled, triggerElement: (_g = (_f = (_e = props.tableActionsDropdown).renderCustomTrigger) === null || _f === void 0 ? void 0 : _f.call(_e, row.original)) !== null && _g !== void 0 ? _g : (_jsx(Button, { "aria-label": "Open actions menu", title: "Open actions menu", size: "icon", variant: "ghost", disabled: typeof props.tableActionsDropdown.isDisabled ===
+                                                                'function'
+                                                                ? props.tableActionsDropdown.isDisabled(row.original)
+                                                                : ((_h = props.tableActionsDropdown.isDisabled) !== null && _h !== void 0 ? _h : false), className: "p-1 focus-visible:outline-hidden focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_j = props.rowIdKey) !== null && _j !== void 0 ? _j : 'id')]));
+                                    }), _jsx("tr", { style: { height: `${paddingBottom}px` }, children: _jsx("td", { colSpan: colSpanFull }) })] })) : (_jsxs(_Fragment, { children: [tableContent, (infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && !isTrulyEmpty && (_jsx("tr", { ref: loaderRef, className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: props.isLoading || hasNextPage
+                                                ? ((_e = infiniteScroll.loadingMoreMessage) !== null && _e !== void 0 ? _e : 'Loading more...')
+                                                : ((_f = infiniteScroll.noMoreDataMessage) !== null && _f !== void 0 ? _f : 'Nothing more to load') }) }))] })) })] }) }), !((_g = props.infiniteScroll) === null || _g === void 0 ? void 0 : _g.enabled) && (_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

@@ -0,0 +1,31 @@
+import { Table } from './Table';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const Basic: Story;
+export declare const NoRows: Story;
+export declare const LoadingWithSkeleton: Story;
+export declare const ClientPagination: Story;
+export declare const ServerSidePagination: Story;
+export declare const WithCheckboxSelection: Story;
+export declare const WithDisabledSelection: Story;
+export declare const WithSingleRowSelection: Story;
+export declare const WithDefaultRowsSelected: Story;
+export declare const FlexColumnWidths: Story;
+export declare const WithControlledSorting: Story;
+export declare const WithRowActionsDropdown: Story;
+export declare const WithPartiallyDisabledRowActionsDropdown: Story;
+export declare const WithDisabledRowActionsDropdownItem: Story;
+export declare const WithRowClickHandler: Story;
+export declare const WithHiddenHeader: Story;
+export declare const GroupedByDate: Story;
+export declare const WithSearch: Story;
+export declare const ServerSideSearch: Story;
+export declare const ClientPaginationWithQueryParams: StoryObj;
+export declare const ServerPaginationWithQueryParams: StoryObj;
+export declare const TwoTablesWithQueryParams: StoryObj;
+export declare const InfiniteScrollVirtualized: StoryObj;
+export declare const InfiniteScrollNonVirtual: StoryObj;
+export declare const NoRowsInfiniteScrollNonVirtual: StoryObj;
+export declare const NoRowsInfiniteScrollVirtualized: StoryObj;