@eml-payments/ui-kit 1.8.13 → 1.8.15

package/dist/src/components/DatePicker/DatePicker.js

@@ -5,6 +5,74 @@ import { dayjs } from '../../utils';
 import { Calendar } from '../Calendar';
 import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from '../Popover';
 import { Input } from '../Input';
+/**
+ * Derive the fixed-slot mask from the date format. The empty template is the
+ * format string itself, so an empty slot displays its own format character
+ * (e.g. clearing the month of `28/01/1996` shows `28/MM/1996`).
+ * `slotPositions` holds the string index of every digit slot; separators live
+ * at all other indices and are immutable. Format characters are letters and
+ * typed content is always digits, so filled and empty slots never collide.
+ */
+const buildMaskMeta = (format) => {
+    const slotPositions = [];
+    for (let i = 0; i < format.length; i++) {
+        if (/[DMY]/i.test(format[i])) {
+            slotPositions.push(i);
+        }
+    }
+    return { template: format, slotPositions };
+};
+const findSlotIndexAtOrAfter = (slotPositions, position) => slotPositions.findIndex((pos) => pos >= position);
+const findSlotIndexBefore = (slotPositions, position) => {
+    for (let i = slotPositions.length - 1; i >= 0; i--) {
+        if (slotPositions[i] < position) {
+            return i;
+        }
+    }
+    return -1;
+};
+/** Reset every slot inside [from, to) back to its format character. */
+const clearSlotsInRange = (displayChars, slotPositions, template, from, to) => {
+    for (const pos of slotPositions) {
+        if (pos >= from && pos < to) {
+            displayChars[pos] = template[pos];
+        }
+    }
+};
+/** Fill the slot at/after the caret with a digit. Returns the new caret, or null for a no-op. */
+const applyDigitKey = (displayChars, slotPositions, template, digit, start, end) => {
+    var _a;
+    const hadSelection = end > start;
+    if (hadSelection) {
+        clearSlotsInRange(displayChars, slotPositions, template, start, end);
+    }
+    const slotIndex = findSlotIndexAtOrAfter(slotPositions, start);
+    // Caret past the last slot: only flush if a selection was cleared.
+    if (slotIndex === -1) {
+        return hadSelection ? start : null;
+    }
+    displayChars[slotPositions[slotIndex]] = digit;
+    // Advance past the filled slot, skipping any separator.
+    return (_a = slotPositions[slotIndex + 1]) !== null && _a !== void 0 ? _a : slotPositions[slotIndex] + 1;
+};
+/** Clear slots for Backspace/Delete. Returns the new caret, or null for a no-op. */
+const applyDeletionKey = (displayChars, slotPositions, template, isBackspace, start, end) => {
+    // A selection clears exactly the covered slots.
+    if (end > start) {
+        clearSlotsInRange(displayChars, slotPositions, template, start, end);
+        return start;
+    }
+    const slotIndex = isBackspace
+        ? findSlotIndexBefore(slotPositions, start)
+        : findSlotIndexAtOrAfter(slotPositions, start);
+    if (slotIndex === -1) {
+        return null;
+    }
+    const pos = slotPositions[slotIndex];
+    displayChars[pos] = template[pos];
+    // Backspace lands on the cleared slot; forward Delete keeps the caret put.
+    return isBackspace ? pos : start;
+};
 const formatDate = (date, format) => {
     return date ? dayjs(date).format(format) : '';
 };
@@ -33,9 +101,10 @@ const normalizeRangeSelection = (currentRange, nextRange) => {
     }
     return nextRange;
 };
-export const DatePicker = ({ mode = 'single', placeholder = 'DD/MM/YYYY', dateFormat = 'DD/MM/YYYY', rangeDateFormat, currentDate, minDate, maxDate, error, onChangeDate, ...inputProps }) => {
+export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/YYYY', rangeDateFormat, currentDate, minDate, maxDate, error, onChangeDate, ...inputProps }) => {
     const isRangeMode = mode === 'range';
     const effectiveRangeDateFormat = rangeDateFormat || dateFormat;
+    const { template, slotPositions } = buildMaskMeta(dateFormat);
     const computeDisplayValue = (date) => {
         if (isRangeMode) {
             return formatRangeDisplay(date, effectiveRangeDateFormat);
@@ -80,20 +149,25 @@ export const DatePicker = ({ mode = 'single', placeholder = 'DD/MM/YYYY', dateFo
         setValue(formatDate(selected, dateFormat));
         setOpen(false);
     };
-    const handleChangeInputValue = (e) => {
-        // In range mode, input is read-only and changes should be made via calendar
-        if (isRangeMode) {
-            return;
-        }
-        setValue(e.target.value);
-        if (e.target.value === '') {
-            onUpdateDate(undefined);
+    /**
+     * Validate the current display. Only a fully filled mask is parsed; a
+     * partially filled one (still showing format characters) clears the date
+     * silently so the user can keep editing.
+     */
+    const commitDisplay = (display, showErrorWhenComplete) => {
+        const isComplete = display.length === template.length && slotPositions.every((pos) => /\d/.test(display[pos]));
+        if (!isComplete) {
+            setDate(undefined);
+            setDefaultError('');
             return;
         }
-        const parsedDate = dayjs(e.target.value, dateFormat, true);
-        onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(parsedDate.toDate());
+        const parsedDate = dayjs(display, dateFormat, true);
         if (!parsedDate.isValid()) {
-            setDefaultError('Invalid date format');
+            setDate(undefined);
+            setDefaultError(showErrorWhenComplete ? 'Invalid date format' : '');
+            if (showErrorWhenComplete) {
+                onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined);
+            }
             return;
         }
         const isWithinRange = (!minDate || parsedDate.isSameOrAfter(dayjs(minDate), 'day')) &&
@@ -102,8 +176,89 @@ export const DatePicker = ({ mode = 'single', placeholder = 'DD/MM/YYYY', dateFo
             onUpdateDate(parsedDate.toDate());
         }
         else {
+            setDate(undefined);
+            onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined);
             setDefaultError('Date is out of range');
         }
     };
-    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder, error: error !== null && error !== void 0 ? error : defaultError, readOnly: isRangeMode, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: isRangeMode ? (_jsx(Calendar, { mode: "range", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeRangeDate, numberOfMonths: 2 })) : (_jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeSingleDate, numberOfMonths: 1 })) })] }) }));
+    /**
+     * Write the new display and caret to the DOM synchronously, then sync
+     * React state. Because the DOM already matches the upcoming state when
+     * React commits, React never rewrites the input and the caret is never
+     * reset — regardless of typing speed or render bailouts.
+     */
+    const flushDisplay = (input, displayChars, caret, showErrorWhenComplete) => {
+        // All slots back to their format characters: collapse to an empty
+        // field so the regular input placeholder shows instead.
+        const isEmpty = slotPositions.every((pos) => displayChars[pos] === template[pos]);
+        if (isEmpty) {
+            input.value = '';
+            input.setSelectionRange(0, 0);
+            setValue('');
+            onUpdateDate(undefined);
+            return;
+        }
+        const nextDisplay = displayChars.join('');
+        input.value = nextDisplay;
+        input.setSelectionRange(caret, caret);
+        setValue(nextDisplay);
+        commitDisplay(nextDisplay, showErrorWhenComplete);
+    };
+    /**
+     * Fixed-slot (overtype) editing: every digit lives in its own slot and
+     * separators are immutable. Typing fills the slot at/after the caret,
+     * Backspace/Delete restore a slot to its format character, so removing
+     * the month from `28/01/1996` yields `28/MM/1996` and typing `0` into an
+     * empty field yields `0D/MM/YYYY`.
+     */
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        // Range mode is read-only; let shortcuts (Ctrl/Cmd+A/C/V/X…) through untouched.
+        if (isRangeMode || e.ctrlKey || e.metaKey) {
+            return;
+        }
+        const isDigit = /^\d$/.test(e.key);
+        const isDeletionKey = e.key === 'Backspace' || e.key === 'Delete';
+        if (!isDigit && !isDeletionKey) {
+            // Block other printable characters; navigation keys pass through.
+            if (e.key.length === 1) {
+                e.preventDefault();
+            }
+            return;
+        }
+        e.preventDefault();
+        const input = e.currentTarget;
+        const displayChars = (value || template).split('');
+        const start = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const end = (_b = input.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        const caret = isDigit
+            ? applyDigitKey(displayChars, slotPositions, template, e.key, start, end)
+            : applyDeletionKey(displayChars, slotPositions, template, e.key === 'Backspace', start, end);
+        if (caret === null) {
+            return;
+        }
+        flushDisplay(input, displayChars, caret, isDigit);
+    };
+    /**
+     * Fallback for edits that bypass keydown (paste, drag-and-drop, autofill,
+     * some mobile keyboards): extract the digits and refill the slots from the
+     * start.
+     */
+    const handleChangeInputValue = (e) => {
+        // In range mode, input is read-only and changes should be made via calendar
+        if (isRangeMode) {
+            return;
+        }
+        const input = e.target;
+        const digits = input.value.replace(/\D/g, '').slice(0, slotPositions.length);
+        const displayChars = template.split('');
+        slotPositions.forEach((pos, i) => {
+            if (digits[i] !== undefined) {
+                displayChars[pos] = digits[i];
+            }
+        });
+        const caret = digits.length < slotPositions.length ? slotPositions[digits.length] : template.length;
+        flushDisplay(input, displayChars, caret, true);
+    };
+    return (_jsx("div", { className: "relative", children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverAnchor, { children: _jsx(Input, { type: "text", value: value, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : dateFormat, error: error !== null && error !== void 0 ? error : defaultError, readOnly: isRangeMode, onKeyDown: handleKeyDown, onChange: handleChangeInputValue, endAdornment: _jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors cursor-pointer flex items-center justify-center", "aria-label": "Open calendar", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) }) }), ...inputProps }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "center", sideOffset: 0, children: isRangeMode ? (_jsx(Calendar, { mode: "range", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeRangeDate, numberOfMonths: 2 })) : (_jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: date, startMonth: minDate, endMonth: maxDate, onSelect: handleChangeSingleDate, numberOfMonths: 1 })) })] }) }));
 };

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;