Merge pull request #158 from auth0/feat/mm-invitations-ui-primitives

feat(react): add UI primitives and data table updates

Author: rax7389

packages/react/src/components/auth0/shared/data-pagination.tsx

@@ -10,10 +10,8 @@ import {
   Pagination,
   PaginationContent,
   PaginationItem,
-  PaginationLink,
   PaginationPrevious,
   PaginationNext,
-  PaginationEllipsis,
 } from '@/components/auth0/shared/pagination';
 import {
   Select,
@@ -44,12 +42,12 @@ export const defaultLabels: DataPaginationLabels = {
   showing: 'Showing',
   to: 'to',
   of: 'of',
-  results: 'results',
+  results: '',
   totalResults: 'total results',
-  show: 'Show',
+  show: '',
   perPage: 'per page',
-  previous: 'Previous',
-  next: 'Next',
+  previous: '',
+  next: '',
   goToPage: 'Go to page {page}',
   goToPrevious: 'Go to previous page',
   goToNext: 'Go to next page',
@@ -66,6 +64,7 @@ export interface RegularPaginationState {
 
 export interface CheckpointPaginationState {
   pageSize: number;
+  currentPage?: number;
   totalItems?: number;
   hasNextPage: boolean;
   hasPreviousPage: boolean;
@@ -86,6 +85,14 @@ export interface DataPaginationProps {
   onPreviousPage?: () => void;
 }
 
+interface PageRangeInfoProps {
+  totalItems: number;
+  currentPage: number;
+  pageSize: number;
+  locale?: string;
+  labels: DataPaginationLabels;
+}
+
 const formatNumber = (num: number | undefined | null, locale?: string): string => {
   if (num === null || num === undefined || isNaN(num)) {
     return '0';
@@ -96,32 +103,46 @@ const formatNumber = (num: number | undefined | null, locale?: string): string =
   return num.toLocaleString(resolvedLocale);
 };
 
-const interpolate = (str: string, values: Record<string, string | number>): string =>
-  str.replace(/\{(\w+)\}/g, (_, key) => String(values[key] ?? ''));
-
-const generatePageNumbers = (
+const getPageRange = (
+  totalItems: number,
   currentPage: number,
-  totalPages: number,
-  maxVisible: number = 5,
-): (number | 'ellipsis')[] => {
-  if (totalPages <= maxVisible) return Array.from({ length: totalPages }, (_, i) => i + 1);
-
-  const pages: (number | 'ellipsis')[] = [1];
-  const range = Math.floor((maxVisible - 3) / 2);
-  let start = Math.max(2, currentPage - range);
-  let end = Math.min(totalPages - 1, currentPage + range);
-
-  if (currentPage <= range + 2) end = maxVisible - 2;
-  if (currentPage >= totalPages - range - 1) start = totalPages - (maxVisible - 2);
-
-  if (start > 2) pages.push('ellipsis');
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (end < totalPages - 1) pages.push('ellipsis');
-  pages.push(totalPages);
-
-  return pages;
+  pageSize: number,
+  locale?: string,
+): { start: string; end: string } => {
+  const start = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const end = Math.min(currentPage * pageSize, totalItems);
+  return {
+    start: formatNumber(start, locale),
+    end: formatNumber(end, locale),
+  };
 };
 
+/**
+ * Renders the page range info.
+ *
+ * @param props - Component props.
+ * @param props.totalItems - Total number of items.
+ * @param props.currentPage - Current page number.
+ * @param props.pageSize - Number of items per page.
+ * @param props.locale - Locale identifier for number formatting.
+ * @param props.labels - Label text configuration.
+ * @returns JSX element displaying the page range info.
+ */
+function PageRangeInfo({ totalItems, currentPage, pageSize, locale, labels }: PageRangeInfoProps) {
+  const range = getPageRange(totalItems, currentPage, pageSize, locale);
+  return (
+    <>
+      {labels.showing}{' '}
+      <span className="font-medium text-foreground">
+        {range.start}-{range.end}
+      </span>{' '}
+      {labels.of}{' '}
+      <span className="font-medium text-foreground">{formatNumber(totalItems, locale)}</span>
+      {labels.results && <> {labels.results}</>}
+    </>
+  );
+}
+
 /**
  *
  * @param props - Component props.
@@ -170,18 +191,6 @@ export function DataPagination({
     return Array.from(uniqueOptions).sort((a, b) => a - b);
   }, [shouldShowPageSizeSelector, pageSizeOptions, currentPageSize]);
 
-  const pageNumbers = useMemo(
-    () =>
-      isRegular && regularState
-        ? generatePageNumbers(
-            regularState.currentPage,
-            regularState.totalPages,
-            regularState.maxVisiblePages,
-          )
-        : [],
-    [isRegular, regularState],
-  );
-
   useEffect(() => {
     if (ariaLiveRegionRef.current) {
       if (isRegular && regularState) {
@@ -196,7 +205,6 @@ export function DataPagination({
     return null;
   }
 
-  const shouldShowPageNumbers = isRegular;
   const safeCurrentPageSize = currentPageSize as number;
 
   return (
@@ -214,32 +222,22 @@ export function DataPagination({
       {showPageInfo && (
         <div className="text-sm text-foreground whitespace-nowrap sm:mr-auto">
           {isRegular && regularState ? (
-            <>
-              {labels.showing}{' '}
-              <span className="font-medium text-foreground">
-                {formatNumber(
-                  regularState.totalItems === 0
-                    ? 0
-                    : (regularState.currentPage - 1) * regularState.pageSize + 1,
-                  locale,
-                )}
-              </span>{' '}
-              {labels.to}{' '}
-              <span className="font-medium text-foreground">
-                {formatNumber(
-                  Math.min(
-                    regularState.currentPage * regularState.pageSize,
-                    regularState.totalItems,
-                  ),
-                  locale,
-                )}
-              </span>{' '}
-              {labels.of}{' '}
-              <span className="font-medium text-foreground">
-                {formatNumber(regularState.totalItems, locale)}
-              </span>{' '}
-              {labels.results}
-            </>
+            <PageRangeInfo
+              totalItems={regularState.totalItems}
+              currentPage={regularState.currentPage}
+              pageSize={regularState.pageSize}
+              locale={locale}
+              labels={labels}
+            />
+          ) : checkpointState?.totalItems !== undefined &&
+            checkpointState?.currentPage !== undefined ? (
+            <PageRangeInfo
+              totalItems={checkpointState.totalItems}
+              currentPage={checkpointState.currentPage}
+              pageSize={checkpointState.pageSize}
+              locale={locale}
+              labels={labels}
+            />
           ) : checkpointState?.totalItems !== undefined ? (
             <>
               <span className="font-medium text-foreground">
@@ -254,7 +252,7 @@ export function DataPagination({
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
         {shouldShowPageSizeSelector && allPageSizeOptions.length > 0 && (
           <div className="flex items-center justify-center gap-2 whitespace-nowrap sm:justify-start">
-            <span className="text-sm text-foreground">{labels.show}</span>
+            {labels.show && <span className="text-sm text-foreground">{labels.show}</span>}
             <Select
               value={safeCurrentPageSize.toString()}
               onValueChange={(value) => onPageSizeChange?.(Number(value))}
@@ -291,28 +289,6 @@ export function DataPagination({
                   />
                 </PaginationItem>
 
-                {shouldShowPageNumbers &&
-                  pageNumbers.map((page, idx) => (
-                    <PaginationItem key={`page-${idx}`}>
-                      {page === 'ellipsis' ? (
-                        <PaginationEllipsis>
-                          <span className="sr-only">{labels.morePages}</span>
-                        </PaginationEllipsis>
-                      ) : (
-                        <PaginationLink
-                          onClick={() => onPageChange?.(page)}
-                          isActive={regularState.currentPage === page}
-                          aria-label={interpolate(labels.goToPage, {
-                            page: formatNumber(page, locale),
-                          })}
-                          aria-current={regularState.currentPage === page ? 'page' : undefined}
-                        >
-                          {formatNumber(page, locale)}
-                        </PaginationLink>
-                      )}
-                    </PaginationItem>
-                  ))}
-
                 <PaginationItem>
                   <PaginationNext
                     label={labels.next}

packages/react/src/components/auth0/shared/data-table.tsx

@@ -110,6 +110,11 @@ export interface EmptyStateProps {
   action?: ActionButton;
 }
 
+export interface DataTableSortConfig {
+  key: string | null;
+  direction: 'asc' | 'desc';
+}
+
 export interface DataTableProps<Item> {
   data: Item[];
   columns: Column<Item>[];
@@ -119,6 +124,10 @@ export interface DataTableProps<Item> {
   onRowClick?: (rowData: Item) => void;
   className?: string;
   headerAlign?: AlignmentType;
+  /** When provided, sorting is delegated to the parent (server-side). */
+  onSortChange?: (sortConfig: DataTableSortConfig) => void;
+  /** Controlled sort state. Used with onSortChange for server-side sorting. */
+  sortConfig?: DataTableSortConfig;
 }
 
 const ALIGNMENT_CLASSES = {
@@ -387,13 +396,43 @@ export function DataTable<Item>({
   onRowClick,
   className,
   headerAlign = 'left',
+  onSortChange,
+  sortConfig,
 }: DataTableProps<Item>) {
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const isServerSideSort = !!onSortChange;
+
+  const [internalSorting, setInternalSorting] = useState<SortingState>([]);
+
+  // Convert controlled sortConfig to TanStack SortingState for header display
+  const sorting: SortingState = useMemo(() => {
+    if (isServerSideSort && sortConfig?.key) {
+      return [{ id: sortConfig.key, desc: sortConfig.direction === 'desc' }];
+    }
+    return internalSorting;
+  }, [isServerSideSort, sortConfig, internalSorting]);
+
+  const handleSortingChange = React.useCallback(
+    (updater: SortingState | ((old: SortingState) => SortingState)) => {
+      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+
+      if (isServerSideSort) {
+        const sort = newSorting[0];
+        if (sort) {
+          onSortChange({ key: sort.id, direction: sort.desc ? 'desc' : 'asc' });
+        } else {
+          onSortChange({ key: null, direction: 'asc' });
+        }
+      } else {
+        setInternalSorting(newSorting);
+      }
+    },
+    [isServerSideSort, onSortChange, sorting],
+  );
 
   const tableColumns = useMemo<ColumnDef<Item>[]>(() => {
     return columns.map((column, index) => {
       return {
-        id: `column-${index}`,
+        id: column.accessorKey ? String(column.accessorKey) : `column-${index}`,
         accessorKey: column.accessorKey as string,
         header: column.title,
         size: column.width
@@ -454,9 +493,10 @@ export function DataTable<Item>({
     state: {
       sorting,
     },
-    onSortingChange: setSorting,
+    onSortingChange: handleSortingChange,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    getSortedRowModel: isServerSideSort ? undefined : getSortedRowModel(),
+    manualSorting: isServerSideSort,
     manualPagination: true,
   });