@eml-payments/ui-kit 1.8.0 → 1.8.2

package/package.json

@@ -1,131 +1,132 @@
-{
-	"name": "@eml-payments/ui-kit",
-	"version": "1.8.0",
-	"private": false,
-	"description": "ARLO UIKit",
-	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
-	"bugs": {
-		"url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
-	},
-	"license": "MIT",
-	"author": "EML Payments",
-	"type": "commonjs",
-	"main": "dist/src/index.js",
-	"types": "dist/src/index.d.ts",
-	"exports": {
-		".": {
-			"import": "./dist/src/index.js",
-			"require": "./dist/src/index.js",
-			"types": "./dist/src/index.d.ts"
-		},
-		"./style.css": "./dist/index.css",
-		"./index.css": "./dist/index.css",
-		"./assets/*": "./dist/src/assets/*"
-	},
-	"directories": {
-		"doc": "docs",
-		"lib": "lib"
-	},
-	"files": [
-		"dist"
-	],
-	"scripts": {
-		"prepare": "husky install",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"build:assets": "copyfiles -u 2 \"src/assets/**/*\" dist/src/assets",
-		"build:css": "npx tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
-		"build:intl-tel-input:flags": "copyfiles -u 4 \"node_modules/intl-tel-input/build/img/flags*.webp\" \"node_modules/intl-tel-input/build/img/flags*.png\" dist/img",
-		"build": "npm run build:assets && npm run build:css && npm run build:intl-tel-input:flags && tsc",
-		"validate:dist": "node scripts/validate-dist.js",
-		"lint": "eslint . --ext .ts,.tsx --fix",
-		"format": "prettier --list-different \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
-		"format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
-		"task:prettier": "prettier \"./src/**/*.{ts,tsx}\" --check --log-level error",
-		"task:prettier:fix": "prettier --write \"./src/**/*.{ts,tsx}\" --check --log-level error",
-		"task:eslint": "eslint \"src/**/*.{ts,tsx}\" --cache",
-		"task:eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix --cache",
-		"task:typecheck": "tsc",
-		"formatx": "npm run task:prettier:fix && npm run task:eslint:fix && npm run task:typecheck"
-	},
-	"dependencies": {
-		"@base-ui/react": "^1.3.0",
-		"@radix-ui/react-accordion": "^1.2.12",
-		"@radix-ui/react-avatar": "^1.1.10",
-		"@radix-ui/react-checkbox": "^1.3.2",
-		"@radix-ui/react-dialog": "^1.1.14",
-		"@radix-ui/react-dropdown-menu": "^2.1.15",
-		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-radio-group": "^1.3.7",
-		"@radix-ui/react-select": "^2.2.5",
-		"@radix-ui/react-slot": "^1.2.4",
-		"@radix-ui/react-switch": "^1.2.5",
-		"@radix-ui/react-tabs": "^1.1.12",
-		"@radix-ui/react-tooltip": "^1.2.7",
-		"@tailwindcss/postcss": "^4.1.11",
-		"@tanstack/react-table": "^8.12.0",
-		"@tanstack/react-virtual": "^3.13.13",
-		"class-variance-authority": "^0.7.1",
-		"clsx": "^2.1.1",
-		"dayjs": "^1.11.19",
-		"intl-tel-input": "^26.9.1",
-		"lucide-react": "^1.8.0",
-		"prettier": "^3.6.2",
-		"react": ">=18.0.0",
-		"react-day-picker": "^9.13.0",
-		"react-dom": ">=18.0.0",
-		"react-icons": "^5.5.0",
-		"react-router-dom": "^7.9.5",
-		"tailwind-merge": "^3.4.0",
-		"tailwindcss": "^4.1.11",
-		"tailwindcss-animate": "^1.0.7",
-		"tw-animate-css": "^1.4.0"
-	},
-	"devDependencies": {
-		"@eslint/js": "^9.30.1",
-		"@storybook/addon-a11y": "^10.0.6",
-		"@storybook/addon-docs": "^10.0.2",
-		"@storybook/addon-themes": "^10.0.2",
-		"@storybook/react-vite": "^10.0.6",
-		"@tailwindcss/cli": "^4.1.12",
-		"@typescript-eslint/eslint-plugin": "^8.35.1",
-		"baseline-browser-mapping": "^2.10.0",
-		"copyfiles": "^2.4.1",
-		"eslint": "^9.31.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-import": "^2.32.0",
-		"eslint-plugin-jsx-a11y": "^6.10.2",
-		"eslint-plugin-prettier": "^5.5.1",
-		"eslint-plugin-react": "^7.37.5",
-		"eslint-plugin-react-hooks": "^7.0.0",
-		"eslint-plugin-react-refresh": "^0.5.0",
-		"eslint-plugin-storybook": "^10.0.6",
-		"husky": "^9.1.7",
-		"lint-staged": "^16.1.2",
-		"postcss": "^8.4.21",
-		"storybook": "^10.0.6",
-		"typescript": "^5.4.0",
-		"typescript-eslint": "^8.36.0"
-	},
-	"peerDependencies": {
-		"react": ">=18.0.0",
-		"react-dom": ">=18.0.0"
-	},
-	"eslintConfig": {
-		"extends": [
-			"plugin:storybook/recommended"
-		]
-	},
-	"lint-staged": {
-		"*.{js,ts,tsx}": [
-			"prettier --write",
-			"eslint --fix"
-		],
-		"*.{json,md,css}": "prettier --write"
-	}
-}
+{
+	"name": "@eml-payments/ui-kit",
+	"version": "1.8.2",
+	"private": false,
+	"description": "ARLO UIKit",
+	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
+	"bugs": {
+		"url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
+	},
+	"license": "MIT",
+	"author": "EML Payments",
+	"type": "commonjs",
+	"main": "dist/src/index.js",
+	"types": "dist/src/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/src/index.js",
+			"require": "./dist/src/index.js",
+			"types": "./dist/src/index.d.ts"
+		},
+		"./style.css": "./dist/index.css",
+		"./index.css": "./dist/index.css",
+		"./assets/*": "./dist/src/assets/*"
+	},
+	"directories": {
+		"doc": "docs",
+		"lib": "lib"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"prepare": "husky install",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"build:assets": "copyfiles -u 2 \"src/assets/**/*\" dist/src/assets",
+		"build:css": "npx tailwindcss -i ./src/index.css -o ./dist/index.css --minify",
+		"build:intl-tel-input:flags": "copyfiles -u 4 \"node_modules/intl-tel-input/build/img/flags*.webp\" \"node_modules/intl-tel-input/build/img/flags*.png\" dist/img",
+		"build": "npm run build:assets && npm run build:css && npm run build:intl-tel-input:flags && tsc",
+		"validate:dist": "node scripts/validate-dist.js",
+		"lint": "eslint . --ext .ts,.tsx --fix",
+		"format": "prettier --list-different \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
+		"format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
+		"task:prettier": "prettier \"./src/**/*.{ts,tsx}\" --check --log-level error",
+		"task:prettier:fix": "prettier --write \"./src/**/*.{ts,tsx}\" --check --log-level error",
+		"task:eslint": "eslint \"src/**/*.{ts,tsx}\" --cache",
+		"task:eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix --cache",
+		"task:typecheck": "tsc",
+		"formatx": "npm run task:prettier:fix && npm run task:eslint:fix && npm run task:typecheck"
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.3.0",
+		"@radix-ui/react-accordion": "^1.2.12",
+		"@radix-ui/react-avatar": "^1.1.10",
+		"@radix-ui/react-checkbox": "^1.3.2",
+		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-popover": "^1.1.15",
+		"@radix-ui/react-radio-group": "^1.3.7",
+		"@radix-ui/react-select": "^2.2.5",
+		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-switch": "^1.2.5",
+		"@radix-ui/react-tabs": "^1.1.12",
+		"@radix-ui/react-tooltip": "^1.2.7",
+		"@tailwindcss/postcss": "^4.1.11",
+		"@tanstack/react-table": "^8.12.0",
+		"@tanstack/react-virtual": "^3.13.13",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"dayjs": "^1.11.19",
+		"intl-tel-input": "^26.9.1",
+		"lucide-react": "^1.8.0",
+		"prettier": "^3.6.2",
+		"react": ">=18.0.0",
+		"react-day-picker": "^9.13.0",
+		"react-dom": ">=18.0.0",
+		"react-hook-form": "^7.75.0",
+		"react-icons": "^5.5.0",
+		"react-router-dom": "^7.9.5",
+		"tailwind-merge": "^3.4.0",
+		"tailwindcss": "^4.1.11",
+		"tailwindcss-animate": "^1.0.7",
+		"tw-animate-css": "^1.4.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.30.1",
+		"@storybook/addon-a11y": "^10.0.6",
+		"@storybook/addon-docs": "^10.0.2",
+		"@storybook/addon-themes": "^10.0.2",
+		"@storybook/react-vite": "^10.0.6",
+		"@tailwindcss/cli": "^4.1.12",
+		"@typescript-eslint/eslint-plugin": "^8.35.1",
+		"baseline-browser-mapping": "^2.10.0",
+		"copyfiles": "^2.4.1",
+		"eslint": "^9.31.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-jsx-a11y": "^6.10.2",
+		"eslint-plugin-prettier": "^5.5.1",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^7.0.0",
+		"eslint-plugin-react-refresh": "^0.5.0",
+		"eslint-plugin-storybook": "^10.0.6",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.1.2",
+		"postcss": "^8.4.21",
+		"storybook": "^10.0.6",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.36.0"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0"
+	},
+	"eslintConfig": {
+		"extends": [
+			"plugin:storybook/recommended"
+		]
+	},
+	"lint-staged": {
+		"*.{js,ts,tsx}": [
+			"prettier --write",
+			"eslint --fix"
+		],
+		"*.{json,md,css}": "prettier --write"
+	}
+}

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

@@ -1,3 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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: classNames('mui-loader', showHeader ? 'mt-4' : 'mt-0') })), _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

@@ -1,31 +0,0 @@
-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;