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;
@@ -96,32 +95,6 @@ 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 = (
-  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;
-};
-
 /**
  *
  * @param props - Component props.
@@ -170,18 +143,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 +157,6 @@ export function DataPagination({
     return null;
   }
 
-  const shouldShowPageNumbers = isRegular;
   const safeCurrentPageSize = currentPageSize as number;
 
   return (
@@ -223,9 +183,7 @@ export function DataPagination({
                     : (regularState.currentPage - 1) * regularState.pageSize + 1,
                   locale,
                 )}
-              </span>{' '}
-              {labels.to}{' '}
-              <span className="font-medium text-foreground">
+                -
                 {formatNumber(
                   Math.min(
                     regularState.currentPage * regularState.pageSize,
@@ -237,8 +195,34 @@ export function DataPagination({
               {labels.of}{' '}
               <span className="font-medium text-foreground">
                 {formatNumber(regularState.totalItems, locale)}
+              </span>
+              {labels.results && <> {labels.results}</>}
+            </>
+          ) : checkpointState?.totalItems !== undefined &&
+            checkpointState?.currentPage !== undefined ? (
+            <>
+              {labels.showing}{' '}
+              <span className="font-medium text-foreground">
+                {formatNumber(
+                  checkpointState.totalItems === 0
+                    ? 0
+                    : (checkpointState.currentPage - 1) * checkpointState.pageSize + 1,
+                  locale,
+                )}
+                -
+                {formatNumber(
+                  Math.min(
+                    checkpointState.currentPage * checkpointState.pageSize,
+                    checkpointState.totalItems,
+                  ),
+                  locale,
+                )}
               </span>{' '}
-              {labels.results}
+              {labels.of}{' '}
+              <span className="font-medium text-foreground">
+                {formatNumber(checkpointState.totalItems, locale)}
+              </span>
+              {labels.results && <> {labels.results}</>}
             </>
           ) : checkpointState?.totalItems !== undefined ? (
             <>
@@ -254,7 +238,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 +275,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,
   });
 

packages/react/src/components/index.ts

@@ -12,6 +12,7 @@ export {
 } from './auth0/my-organization/sso-provider-create';
 export { SsoProviderTable, SsoProviderTableView } from './auth0/my-organization/sso-provider-table';
 export { DomainTable, DomainTableView } from './auth0/my-organization/domain-table';
+export { OrganizationMemberManagement } from './auth0/my-organization/organization-member-management';
 export {
   OrganizationDetailsEdit,
   OrganizationDetailsEditView,

packages/react/src/components/ui/chip.tsx

@@ -0,0 +1,113 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const chipVariants = cva(
+  'theme-default:shadow-xs box-border inline-flex items-center gap-1 overflow-clip rounded-2xl border border-transparent font-medium',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground theme-default:border-primary hover:bg-primary/90',
+        secondary:
+          'theme-default:bg-muted bg-accent/10 text-muted-foreground hover:bg-accent/20 theme-default:border-muted-foreground/25 theme-default:hover:bg-muted/90',
+        outline: 'border-border hover:bg-muted',
+        info: 'bg-info text-info-foreground theme-default:border-info-foreground/25 hover:bg-info/90',
+        success:
+          'bg-success theme-default:border-success-foreground/25 text-success-foreground hover:bg-success/90',
+        warning:
+          'bg-warning theme-default:border-warning-foreground/25 text-warning-foreground hover:bg-warning/90',
+        destructive:
+          'bg-destructive theme-default:border-destructive-foreground/25 text-destructive-foreground hover:bg-destructive/90',
+      },
+      size: {
+        sm: 'rounded-lg py-0.5 pr-0.5 pl-1.5 text-xs',
+        md: 'rounded-xl py-1 pr-1 pl-2 text-sm',
+        lg: 'rounded-2xl py-1.5 pr-1.5 pl-2.5 text-sm',
+      },
+      disabled: {
+        true: 'pointer-events-none opacity-50',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      disabled: false,
+    },
+  },
+);
+
+const iconSizeVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'h-5 w-5 rounded-md',
+      md: 'h-6 w-6 rounded-lg',
+      lg: 'h-7 w-7 rounded-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+interface ChipProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chipVariants> {
+  onDelete?: () => void;
+  icon?: React.ReactNode;
+}
+
+function Chip({
+  children,
+  variant,
+  size,
+  disabled,
+  onDelete,
+  icon,
+  className,
+  ...props
+}: ChipProps) {
+  const handleChipClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onDelete?.();
+  };
+
+  return (
+    <div
+      className={cn(chipVariants({ variant, size, disabled }), className)}
+      {...props}
+      data-slot="chip"
+      onClick={handleChipClick}
+    >
+      {icon && <span className="shrink-0">{icon}</span>}
+      <span className="pointer-events-none">{children}</span>
+      {onDelete && (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleDeleteClick}
+          className={cn(
+            chipVariants({ variant, disabled }),
+            iconSizeVariants({ size }),
+            'theme-default:shadow-none border-none p-1',
+          )}
+          disabled={!!disabled}
+        >
+          <X className={iconSizeVariants({ size })} />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export { Chip };

packages/react/src/components/ui/color-picker.tsx

@@ -651,9 +651,10 @@ export const ColorPickerInput = ({
       )}
       {showColorPicker && (
         <Popover open={open} onOpenChange={handlePickerOpenChange}>
-          <PopoverTrigger ref={triggerRef} asChild>
+          <PopoverTrigger ref={triggerRef}>
             <div className="sr-only" />
           </PopoverTrigger>
+
           <PopoverContent
             className="w-full max-w-72 p-0"
             align="start"