@cdx-ui/components 0.0.1-beta.99 → 0.1.0

package/src/components/TablePagination/index.tsx

@@ -0,0 +1,498 @@
+import { createElement, forwardRef, useCallback, useMemo, type ReactNode } from 'react';
+import { I18nManager, Platform, View, type PressableProps, type ViewProps } from 'react-native';
+import { ChevronLeft, ChevronRight } from '@cdx-ui/icons';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { Select } from '../Select';
+import { Text } from '../Text';
+import {
+  TablePaginationProvider,
+  useRequiredTablePaginationContext,
+} from './TablePaginationContext';
+import { getTablePaginationItems } from './getTablePaginationItems';
+import {
+  tablePaginationEllipsisVariants,
+  tablePaginationItemVariants,
+  tablePaginationPageSizeVariants,
+  tablePaginationRootVariants,
+  tablePaginationStatusVariants,
+} from './styles';
+
+export { getTablePaginationItems } from './getTablePaginationItems';
+export type { TablePaginationItemToken } from './getTablePaginationItems';
+
+export type TablePaginationPageSizeOption = number | { value: number; label: string };
+
+export interface TablePaginationProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  /** 1-based current page. Controlled when set. */
+  page?: number;
+  defaultPage?: number;
+  /** Total page count. When set with no children, items are generated. */
+  count?: number;
+  onPageChange?: (page: number) => void;
+  siblingCount?: number;
+  pageSize?: number;
+  pageSizeOptions?: readonly TablePaginationPageSizeOption[];
+  onPageSizeChange?: (pageSize: number) => void;
+  disabled?: boolean;
+  'aria-label'?: string;
+}
+
+export interface TablePaginationItemProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  page?: number;
+  current?: boolean;
+  disabled?: boolean;
+  onPress?: PressableProps['onPress'];
+}
+
+export interface TablePaginationControlProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  onPress?: PressableProps['onPress'];
+}
+
+export interface TablePaginationEllipsisProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TablePaginationStatusProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TablePaginationPageSizeProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  'aria-label'?: string;
+}
+
+function normalizePageSizeOptions(
+  options: readonly TablePaginationPageSizeOption[],
+): { value: number; label: string }[] {
+  return options.map((option) =>
+    typeof option === 'number' ? { value: option, label: String(option) } : option,
+  );
+}
+
+const TablePaginationRoot = forwardRef<View, TablePaginationProps>(
+  (
+    {
+      asChild,
+      className,
+      children,
+      style,
+      page: pageProp,
+      defaultPage = 1,
+      count = 1,
+      onPageChange,
+      siblingCount = 1,
+      pageSize,
+      pageSizeOptions = [25, 50, 100],
+      onPageSizeChange,
+      disabled = false,
+      accessibilityLabel,
+      'aria-label': ariaLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const [page, setPage] = useControllableState({
+      prop: pageProp,
+      defaultProp: defaultPage,
+      onChange: onPageChange,
+    });
+    const resolvedPage = page ?? defaultPage;
+
+    const goToPage = useCallback(
+      (nextPage: number) => {
+        if (disabled) {
+          return;
+        }
+        const clamped = Math.min(Math.max(nextPage, 1), Math.max(count, 1));
+        setPage(clamped);
+      },
+      [count, disabled, setPage],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        page: resolvedPage,
+        count,
+        disabled,
+        goToPage,
+        pageSize,
+        pageSizeOptions,
+        onPageSizeChange,
+      }),
+      [resolvedPage, count, disabled, goToPage, pageSize, pageSizeOptions, onPageSizeChange],
+    );
+
+    const computedClassName = cn(tablePaginationRootVariants(), className);
+    const label = accessibilityLabel ?? ariaLabel ?? 'Table pagination';
+    const generatedItems = children
+      ? null
+      : getTablePaginationItems(resolvedPage, count, siblingCount);
+
+    const content = (
+      <>
+        {children ?? (
+          <>
+            <TablePaginationStatus />
+            <TablePaginationPrevious />
+            {generatedItems?.map((token, index) =>
+              token === 'ellipsis' ? (
+                <TablePaginationEllipsis key={`ellipsis-${String(index)}`} />
+              ) : (
+                <TablePaginationItem key={token} page={token} current={token === resolvedPage}>
+                  {token}
+                </TablePaginationItem>
+              ),
+            )}
+            <TablePaginationNext />
+            {pageSize !== undefined ? <TablePaginationPageSize /> : null}
+          </>
+        )}
+      </>
+    );
+
+    return (
+      <TablePaginationProvider value={contextValue}>
+        {asChild ? (
+          <Slot
+            ref={ref}
+            className={computedClassName}
+            style={style}
+            {...props}
+            {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination' }))}
+          >
+            {content}
+          </Slot>
+        ) : Platform.OS === 'web' ? (
+          createElement(
+            'nav',
+            {
+              ref,
+              'aria-label': label,
+              'data-slot': 'table-pagination',
+            },
+            <View className={computedClassName} style={style} {...props}>
+              {content}
+            </View>,
+          )
+        ) : (
+          <View
+            ref={ref}
+            className={computedClassName}
+            style={style}
+            accessibilityRole="adjustable"
+            accessibilityLabel={label}
+            accessibilityValue={{ min: 1, max: Math.max(count, 1), now: resolvedPage }}
+            {...props}
+            {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination' }))}
+          >
+            {content}
+          </View>
+        )}
+      </TablePaginationProvider>
+    );
+  },
+);
+
+TablePaginationRoot.displayName = 'TablePagination';
+
+const TablePaginationItem = forwardRef<View, TablePaginationItemProps>(
+  (
+    {
+      asChild,
+      className,
+      children,
+      page: pageProp,
+      current = false,
+      disabled: disabledProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const context = useRequiredTablePaginationContext();
+    const isDisabled = disabledProp ?? context.disabled;
+    const isCurrent = current || (pageProp !== undefined && pageProp === context.page);
+
+    const handlePress = composeEventHandlers(props.onPress, () => {
+      if (pageProp !== undefined) {
+        context.goToPage(pageProp);
+      }
+    });
+
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          className={cn(tablePaginationItemVariants(), className)}
+          {...props}
+          onPress={handlePress}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({ slot: 'table-pagination-item', selected: isCurrent }),
+          )}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    return (
+      <Button
+        ref={ref}
+        variant={isCurrent ? 'solid' : 'ghost'}
+        color="action"
+        size="small"
+        isDisabled={isDisabled}
+        className={cn(tablePaginationItemVariants(), className)}
+        accessibilityState={{ selected: isCurrent, disabled: isDisabled }}
+        {...(Platform.OS === 'web' && isCurrent ? { 'aria-current': 'page' } : {})}
+        {...props}
+        onPress={handlePress}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'table-pagination-item', selected: isCurrent }),
+        )}
+      >
+        <Button.Label>{children}</Button.Label>
+      </Button>
+    );
+  },
+);
+
+TablePaginationItem.displayName = 'TablePagination.Item';
+
+const TablePaginationPrevious = forwardRef<View, TablePaginationControlProps>(
+  ({ asChild, className, children, disabled: disabledProp, ...props }, ref) => {
+    const context = useRequiredTablePaginationContext();
+    const isAtStart = context.page <= 1;
+    const isDisabled = Boolean(disabledProp || context.disabled || isAtStart);
+    const glyph = I18nManager.isRTL ? ChevronRight : ChevronLeft;
+
+    const handlePress = composeEventHandlers(props.onPress, () => {
+      context.goToPage(context.page - 1);
+    });
+
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          className={className}
+          {...props}
+          onPress={handlePress}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-previous' }))}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    return (
+      <IconButton
+        ref={ref}
+        as={glyph}
+        variant="ghost"
+        color="neutral"
+        size="small"
+        isDisabled={isDisabled}
+        accessibilityLabel="Previous page"
+        accessibilityState={{ disabled: isDisabled }}
+        className={className}
+        {...props}
+        onPress={handlePress}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-previous' }))}
+      />
+    );
+  },
+);
+
+TablePaginationPrevious.displayName = 'TablePagination.Previous';
+
+const TablePaginationNext = forwardRef<View, TablePaginationControlProps>(
+  ({ asChild, className, children, disabled: disabledProp, ...props }, ref) => {
+    const context = useRequiredTablePaginationContext();
+    const isAtEnd = context.page >= context.count;
+    const isDisabled = Boolean(disabledProp || context.disabled || isAtEnd);
+    const glyph = I18nManager.isRTL ? ChevronLeft : ChevronRight;
+
+    const handlePress = composeEventHandlers(props.onPress, () => {
+      context.goToPage(context.page + 1);
+    });
+
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          className={className}
+          {...props}
+          onPress={handlePress}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-next' }))}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    return (
+      <IconButton
+        ref={ref}
+        as={glyph}
+        variant="ghost"
+        color="neutral"
+        size="small"
+        isDisabled={isDisabled}
+        accessibilityLabel="Next page"
+        accessibilityState={{ disabled: isDisabled }}
+        className={className}
+        {...props}
+        onPress={handlePress}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-next' }))}
+      />
+    );
+  },
+);
+
+TablePaginationNext.displayName = 'TablePagination.Next';
+
+const TablePaginationEllipsis = forwardRef<View, TablePaginationEllipsisProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tablePaginationEllipsisVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...(Platform.OS === 'web' ? { 'aria-hidden': true } : {})}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-ellipsis' }))}
+      >
+        {children ?? (
+          <Text size="md" className="text-content-tertiary">
+            …
+          </Text>
+        )}
+      </Comp>
+    );
+  },
+);
+
+TablePaginationEllipsis.displayName = 'TablePagination.Ellipsis';
+
+const TablePaginationStatus = forwardRef<View, TablePaginationStatusProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const context = useRequiredTablePaginationContext();
+    const total = Math.max(context.count, 1);
+    const label = `Page ${String(context.page)} of ${String(total)}`;
+    const computedClassName = cn(tablePaginationStatusVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...(Platform.OS === 'web'
+          ? { 'aria-live': 'polite' }
+          : { accessibilityLiveRegion: 'polite' })}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-status' }))}
+      >
+        {children ?? (
+          <Text size="md" className="text-content-secondary">
+            {label}
+          </Text>
+        )}
+      </Comp>
+    );
+  },
+);
+
+TablePaginationStatus.displayName = 'TablePagination.Status';
+
+const TablePaginationPageSize = forwardRef<View, TablePaginationPageSizeProps>(
+  ({ asChild, className, children, 'aria-label': ariaLabel, ...props }, ref) => {
+    const context = useRequiredTablePaginationContext();
+    const options = normalizePageSizeOptions(context.pageSizeOptions);
+    const value = context.pageSize !== undefined ? String(context.pageSize) : undefined;
+    const label = ariaLabel ?? 'Rows per page';
+
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          className={cn(tablePaginationPageSizeVariants(), className)}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-page-size' }))}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    return (
+      <Select
+        items={options.map((option) => ({ value: String(option.value), label: option.label }))}
+        value={value}
+        onValueChange={(next) => context.onPageSizeChange?.(Number(next))}
+        disabled={context.disabled}
+        size="small"
+        accessibilityLabel={label}
+        className={cn(tablePaginationPageSizeVariants(), className)}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-pagination-page-size' }))}
+      >
+        <Select.Trigger>
+          <Select.Value placeholder="Rows" />
+        </Select.Trigger>
+        <Select.Content>
+          {options.map((option) => (
+            <Select.Item key={option.value} value={String(option.value)}>
+              <Select.ItemLabel>{option.label}</Select.ItemLabel>
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+    );
+  },
+);
+
+TablePaginationPageSize.displayName = 'TablePagination.PageSize';
+
+type TablePaginationCompoundComponent = typeof TablePaginationRoot & {
+  Previous: typeof TablePaginationPrevious;
+  Next: typeof TablePaginationNext;
+  Item: typeof TablePaginationItem;
+  Ellipsis: typeof TablePaginationEllipsis;
+  Status: typeof TablePaginationStatus;
+  PageSize: typeof TablePaginationPageSize;
+};
+
+export const TablePagination = Object.assign(TablePaginationRoot, {
+  Previous: TablePaginationPrevious,
+  Next: TablePaginationNext,
+  Item: TablePaginationItem,
+  Ellipsis: TablePaginationEllipsis,
+  Status: TablePaginationStatus,
+  PageSize: TablePaginationPageSize,
+}) as TablePaginationCompoundComponent;

package/src/components/TablePagination/styles.ts

@@ -0,0 +1,15 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const tablePaginationRootVariants = cva('flex-row flex-wrap items-center gap-1');
+
+export const tablePaginationItemVariants = cva('min-w-9 shrink-0');
+
+export const tablePaginationEllipsisVariants = cva(
+  'min-w-9 shrink-0 items-center justify-center px-1 body-md text-content-tertiary select-none',
+);
+
+export const tablePaginationStatusVariants = cva('me-3 shrink-0 body-md text-content-secondary');
+
+export const tablePaginationPageSizeVariants = cva('ms-2 min-w-24');
+
+export type TablePaginationVariantProps = VariantProps<typeof tablePaginationRootVariants>;