@shipfox/react-ui 0.24.0 → 0.25.0

package/dist/components/modal/modal.d.ts

@@ -38,8 +38,9 @@ type ModalBodyHeaderProps = ComponentProps<'div'> & {
     alt?: string;
     title: string;
     description?: ReactNode;
+    children?: ReactNode;
 };
-declare function ModalBodyHeader({ className, src, alt, title, description, ...props }: ModalBodyHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalBodyHeader({ className, src, alt, title, description, children, ...props }: ModalBodyHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { Modal, ModalPortal, ModalOverlay, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalBodyHeader, ModalTitle, ModalDescription, modalContentVariants, modalOverlayVariants, modalDefaultTransition, };
 export type { ModalContentProps, ModalHeaderProps, ModalOverlayProps, ModalTitleProps, ModalDescriptionProps, ModalBodyHeaderProps, };
 //# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.js

@@ -259,7 +259,7 @@ function ModalDescription({ className, ...props }) {
         ...props
     });
 }
-function ModalBodyHeader({ className, src, alt = '', title, description, ...props }) {
+function ModalBodyHeader({ className, src, alt = '', title, description, children, ...props }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: cn('flex flex-col gap-32 items-start max-w-xl', className),
         ...props,
@@ -283,7 +283,8 @@ function ModalBodyHeader({ className, src, alt = '', title, description, ...prop
                         children: description
                     })
                 ]
-            })
+            }),
+            children
         ]
     });
 }

package/dist/components/table/data-table.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import { Card, CardContent } from '../../components/card/index.js';
 import { Checkbox } from '../../components/checkbox/index.js';
@@ -85,7 +85,18 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
             pagination: pagination ? paginationState : undefined
         }
     });
-    const skeletonRowCount = pageSize > 5 ? 5 : pageSize;
+    const rowModel = table.getRowModel();
+    const rowCount = rowModel.rows.length;
+    const hasRows = rowCount > 0;
+    const currentPageSize = pagination ? paginationState.pageSize : pageSize;
+    const skeletonRowCount = currentPageSize > 5 ? 5 : currentPageSize;
+    const headerHeight = 40;
+    const rowHeight = 46;
+    const paginationHeight = 52.5;
+    const rowsForHeight = hasRows ? currentPageSize : 5;
+    const shouldShowPagination = pagination && hasRows;
+    const minTableHeight = pagination ? headerHeight + rowsForHeight * rowHeight + (shouldShowPagination ? paginationHeight : 0) : undefined;
+    const emptyRowCount = pagination && hasRows ? Math.max(0, currentPageSize - rowCount) : 0;
     if (isLoading) {
         return /*#__PURE__*/ _jsx(Card, {
             className: cn('p-0 gap-0', className),
@@ -93,6 +104,9 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
             children: /*#__PURE__*/ _jsx(CardContent, {
                 className: "overflow-hidden p-0",
                 children: /*#__PURE__*/ _jsxs(Table, {
+                    style: minTableHeight ? {
+                        minHeight: `${minTableHeight}px`
+                    } : undefined,
                     children: [
                         /*#__PURE__*/ _jsx(TableHeader, {
                             children: /*#__PURE__*/ _jsx(TableRow, {
@@ -127,8 +141,11 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
         children: /*#__PURE__*/ _jsx(CardContent, {
             className: "overflow-hidden p-0",
             children: /*#__PURE__*/ _jsxs(Table, {
+                style: minTableHeight ? {
+                    minHeight: `${minTableHeight}px`
+                } : undefined,
                 children: [
-                    table.getRowModel().rows.length > 0 ? /*#__PURE__*/ _jsx(TableHeader, {
+                    hasRows ? /*#__PURE__*/ _jsx(TableHeader, {
                         children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx(TableRow, {
                                 className: "hover:bg-transparent border-b",
                                 children: headerGroup.headers.map((header)=>/*#__PURE__*/ _jsx(TableHead, {
@@ -137,32 +154,50 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
                             }, headerGroup.id))
                     }) : null,
                     /*#__PURE__*/ _jsx(TableBody, {
-                        children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
-                                onClick: ()=>onRowClick?.(row.original),
-                                "data-selected": row.getIsSelected(),
-                                className: onRowClick ? 'cursor-pointer' : '',
-                                tabIndex: onRowClick ? 0 : undefined,
-                                role: onRowClick ? 'button' : undefined,
-                                onKeyDown: (event)=>{
-                                    if (!onRowClick) return;
-                                    if (event.key === 'Enter' || event.key === ' ') {
-                                        event.preventDefault();
-                                        onRowClick(row.original);
-                                    }
-                                },
-                                children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ _jsx(TableCell, {
-                                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                                    }, cell.id))
-                            }, row.id)) : /*#__PURE__*/ _jsx(TableRow, {
+                        children: hasRows ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                rowModel.rows.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
+                                        onClick: ()=>onRowClick?.(row.original),
+                                        "data-selected": row.getIsSelected(),
+                                        className: onRowClick ? 'cursor-pointer' : '',
+                                        tabIndex: onRowClick ? 0 : undefined,
+                                        role: onRowClick ? 'button' : undefined,
+                                        onKeyDown: (event)=>{
+                                            if (!onRowClick) return;
+                                            if (event.key === 'Enter' || event.key === ' ') {
+                                                event.preventDefault();
+                                                onRowClick(row.original);
+                                            }
+                                        },
+                                        children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ _jsx(TableCell, {
+                                                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                            }, cell.id))
+                                    }, row.id)),
+                                emptyRowCount > 0 && Array.from({
+                                    length: emptyRowCount
+                                }, (_, idx)=>{
+                                    const emptyRowKey = `empty-row-${rowCount}-pos-${idx + rowCount}`;
+                                    return /*#__PURE__*/ _jsx(TableRow, {
+                                        className: "hover:bg-transparent pointer-events-none",
+                                        children: table.getAllColumns().map((column)=>/*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsx("span", {
+                                                    className: "invisible",
+                                                    children: "."
+                                                })
+                                            }, column.id))
+                                    }, emptyRowKey);
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(TableRow, {
                             className: "hover:bg-transparent",
                             children: /*#__PURE__*/ _jsx(TableCell, {
                                 colSpan: table.getAllColumns().length,
-                                className: "h-240 text-center rounded-t-8",
+                                className: "h-240 text-center rounded-t-8 hover:bg-transparent",
                                 children: emptyState || /*#__PURE__*/ _jsx(EmptyState, {})
                             })
                         })
                     }),
-                    pagination && table.getRowModel().rows?.length > 0 && /*#__PURE__*/ _jsx(TablePagination, {
+                    shouldShowPagination && /*#__PURE__*/ _jsx(TablePagination, {
                         table: table,
                         pageSizeOptions: pageSizeOptions,
                         showSelectedCount: showSelectedCount,

package/dist/components/table/table.js

@@ -3,6 +3,7 @@ import { cn } from '../../utils/cn.js';
 function Table({ className, ...props }) {
     return /*#__PURE__*/ _jsx("div", {
         className: "relative w-full overflow-auto scrollbar rounded-x-8 rounded-b-8",
+        style: props.style,
         children: /*#__PURE__*/ _jsx("table", {
             "data-slot": "table",
             className: cn('w-full caption-bottom text-sm', className),
@@ -48,7 +49,7 @@ function TableHead({ className, ...props }) {
 function TableCell({ className, ...props }) {
     return /*#__PURE__*/ _jsx("td", {
         "data-slot": "table-cell",
-        className: cn('px-12 py-10 align-middle text-sm leading-20 text-foreground-neutral-base', 'bg-background-neutral-base', 'group-hover/row:bg-background-neutral-hover', 'group-data-[selected=true]/row:bg-background-neutral-pressed!', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:pt-14', className),
+        className: cn('px-12 py-10 align-middle text-sm leading-20 text-foreground-neutral-base truncate', 'bg-background-neutral-base', 'group-hover/row:bg-background-neutral-hover', 'group-data-[selected=true]/row:bg-background-neutral-pressed!', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:pt-14', className),
         ...props
     });
 }

package/dist/components/table/table.stories.data.js

@@ -75,7 +75,7 @@
 };
 /**
  * Sample job data
- */ export const jobsData = generateJobData(100);
+ */ export const jobsData = generateJobData(51);
 /**
  * Sample search job data
  */ export const searchJobsData = generateSearchJobData(50);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/react-ui",
   "license": "MIT",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -86,10 +86,10 @@
     "vitest": "^4.0.8",
     "zod": "^4.1.12",
     "@shipfox/biome": "1.6.0",
-    "@shipfox/swc": "1.2.2",
     "@shipfox/ts-config": "1.3.5",
-    "@shipfox/typescript": "1.1.2",
     "@shipfox/vite": "1.2.2",
+    "@shipfox/swc": "1.2.2",
+    "@shipfox/typescript": "1.1.2",
     "@shipfox/vitest": "1.2.0"
   },
   "scripts": {