@cdx-ui/components 0.2.1 → 0.2.3

package/src/components/ReorderableList/types.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import type { ScrollViewProps } from 'react-native';
+
+export interface ReorderableListRenderItemInfo<T> {
+  /** The item from `data` that this row renders. */
+  item: T;
+  /** Zero-based position of `item` in `data`. */
+  index: number;
+  /**
+   * `true` while this row is being dragged. Restyle the row with color or opacity only: on iOS,
+   * changing `zIndex` on the row (or anything wrapping its handle) mid-drag cancels the drag.
+   */
+  isDragging: boolean;
+}
+
+/**
+ * Overridable copy for reorder announcements and accessibility actions.
+ *
+ * Placeholders: `{item}` is the row name (from `getItemLabel`, or the `item` template),
+ * `{position}` is a 1-based position, and `{count}` is the number of rows.
+ */
+export interface ReorderableListLabels {
+  /**
+   * Row name used when `getItemLabel` is not provided. `{position}` is the row's position
+   * before the move.
+   * @default 'item {position}'
+   */
+  item: string;
+  /** @default 'Picked up {item}. Position {position} of {count}.' */
+  pickedUp: string;
+  /** @default 'Moved {item} to position {position} of {count}.' */
+  movedTo: string;
+  /** @default 'Dropped {item} at position {position} of {count}.' */
+  dropped: string;
+  /** @default 'Reorder cancelled. {item} returned to position {position} of {count}.' */
+  cancelled: string;
+  /**
+   * Read by screen readers when a drag handle receives focus on web.
+   * @default 'To pick up an item, press Space or Enter. Use the arrow keys to move it, then press Space or Enter to drop it, or Escape to cancel.'
+   */
+  screenReaderInstructions: string;
+  /** @default 'Move up' */
+  moveUp: string;
+  /** @default 'Move down' */
+  moveDown: string;
+  /** @default 'Move to top' */
+  moveToTop: string;
+  /** @default 'Move to bottom' */
+  moveToBottom: string;
+}
+
+export interface ReorderableListProps<T> extends Omit<
+  ScrollViewProps,
+  'children' | 'horizontal' | 'role'
+> {
+  /** Items in their current order. The parent owns this array and updates it from `onReorder`. */
+  data: T[];
+  /**
+   * Returns a stable, unique key for an item. Keys identify rows while they move, so they must
+   * not be derived from `index`. Duplicate keys log a warning in development.
+   */
+  keyExtractor: (item: T, index: number) => string;
+  /** Renders one row. Compose with `ListItem` and `ListItem.DragHandle`. */
+  renderItem: (info: ReorderableListRenderItemInfo<T>) => ReactNode;
+  /** Called with the reordered array after a drop or an accessibility move. */
+  onReorder: (data: T[]) => void;
+  /** Called after `onReorder` with the moved row's previous and new zero-based positions. */
+  onReorderIndices?: (from: number, to: number) => void;
+  /**
+   * Returns the name screen readers use for a row in reorder announcements. Without it,
+   * announcements use the `item` label (`item 2`). Keys are never announced.
+   */
+  getItemLabel?: (item: T, index: number) => string;
+  /**
+   * Overrides for announcement and accessibility-action copy. Unset keys keep their defaults.
+   * @default {}
+   */
+  labels?: Partial<ReorderableListLabels>;
+  className?: string;
+}

package/src/components/ReorderableList/useReorder.ts

@@ -0,0 +1,159 @@
+import { useCallback, useMemo } from 'react';
+import type { AccessibilityActionEvent, AccessibilityActionInfo } from 'react-native';
+import { formatReorderMessage, resolveReorderableListLabels } from './labels';
+import { reorderItems } from './reorderItems';
+import type { ReorderableRowContextValue, ReorderableRowHandle } from './rowContext';
+import type { ReorderableListLabels, ReorderableListProps } from './types';
+
+type ReorderActionName = 'moveUp' | 'moveDown' | 'moveToTop' | 'moveToBottom';
+
+export function buildReorderAccessibilityActions(
+  index: number,
+  count: number,
+  labels: ReorderableListLabels,
+): AccessibilityActionInfo[] {
+  const actions: AccessibilityActionInfo[] = [];
+  if (index > 0) {
+    actions.push({ name: 'moveUp', label: labels.moveUp });
+    if (index > 1) actions.push({ name: 'moveToTop', label: labels.moveToTop });
+  }
+  if (index < count - 1) {
+    actions.push({ name: 'moveDown', label: labels.moveDown });
+    if (index < count - 2) actions.push({ name: 'moveToBottom', label: labels.moveToBottom });
+  }
+  return actions;
+}
+
+/** Target index for a reorder accessibility action, or `undefined` for other actions. */
+export function getReorderActionTarget(
+  actionName: string,
+  index: number,
+  count: number,
+): number | undefined {
+  switch (actionName as ReorderActionName) {
+    case 'moveUp':
+      return index - 1;
+    case 'moveDown':
+      return index + 1;
+    case 'moveToTop':
+      return 0;
+    case 'moveToBottom':
+      return count - 1;
+    default:
+      return undefined;
+  }
+}
+
+/** Duplicate keys in `data`, for the development warning. */
+export function findDuplicateKeys<T>(
+  data: readonly T[],
+  keyExtractor: (item: T, index: number) => string,
+): string[] {
+  const seen = new Set<string>();
+  const duplicates = new Set<string>();
+  data.forEach((item, index) => {
+    const key = keyExtractor(item, index);
+    if (seen.has(key)) duplicates.add(key);
+    seen.add(key);
+  });
+  return [...duplicates];
+}
+
+type ReorderControllerOptions<T> = Pick<
+  ReorderableListProps<T>,
+  'data' | 'onReorder' | 'onReorderIndices' | 'getItemLabel' | 'labels'
+> & {
+  announce: (message: string) => void;
+};
+
+export interface ReorderController<T> {
+  labels: ReorderableListLabels;
+  /** Commits a move from one position to another and announces it. */
+  moveItem: (fromIndex: number, toIndex: number) => void;
+  /** Formats an announcement for the item currently at `fromIndex`. */
+  describe: (
+    key: 'pickedUp' | 'movedTo' | 'dropped' | 'cancelled',
+    fromIndex: number,
+    position: number,
+  ) => string | undefined;
+  data: T[];
+}
+
+export function useReorderController<T>({
+  data,
+  onReorder,
+  onReorderIndices,
+  getItemLabel,
+  labels: labelsProp,
+  announce,
+}: ReorderControllerOptions<T>): ReorderController<T> {
+  const labels = useMemo(() => resolveReorderableListLabels(labelsProp), [labelsProp]);
+
+  const describe = useCallback<ReorderController<T>['describe']>(
+    (key, fromIndex, position) => {
+      const item = data[fromIndex];
+      if (item === undefined) return undefined;
+      return formatReorderMessage(key, {
+        labels,
+        getItemLabel,
+        item,
+        fromIndex,
+        position,
+        count: data.length,
+      });
+    },
+    [data, getItemLabel, labels],
+  );
+
+  const moveItem = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (fromIndex < 0 || fromIndex >= data.length) return;
+      const target = Math.min(Math.max(toIndex, 0), data.length - 1);
+      if (target === fromIndex) return;
+      const message = describe('movedTo', fromIndex, target);
+      onReorder(reorderItems(data, fromIndex, target));
+      onReorderIndices?.(fromIndex, target);
+      if (message) announce(message);
+    },
+    [announce, data, describe, onReorder, onReorderIndices],
+  );
+
+  // Stable identity: web's accessibility memo keys off this object. A fresh return every render
+  // rebuilds createReorderAnnouncements and clears lastAnnouncedIndex, so pick-up is replaced by
+  // "moved to" the current position.
+  return useMemo(() => ({ labels, moveItem, describe, data }), [labels, moveItem, describe, data]);
+}
+
+interface RowValueOptions {
+  index: number;
+  count: number;
+  isDragging: boolean;
+  handle: ReorderableRowHandle;
+  labels: ReorderableListLabels;
+  moveItem: (fromIndex: number, toIndex: number) => void;
+}
+
+export function useReorderableRowValue({
+  index,
+  count,
+  isDragging,
+  handle,
+  labels,
+  moveItem,
+}: RowValueOptions): ReorderableRowContextValue {
+  return useMemo(() => {
+    const move = (toIndex: number) => moveItem(index, toIndex);
+    return {
+      isDragging,
+      index,
+      count,
+      move,
+      accessibilityActions: buildReorderAccessibilityActions(index, count, labels),
+      onAccessibilityAction: (event: AccessibilityActionEvent) => {
+        const target = getReorderActionTarget(event.nativeEvent.actionName, index, count);
+        if (target !== undefined) move(target);
+      },
+      handle,
+    };
+  }, [count, handle, index, isDragging, labels, moveItem]);
+}

package/src/components/ReorderableList/webDnd.ts

@@ -0,0 +1,60 @@
+import type { ReorderController } from './useReorder';
+
+type Id = string | number;
+
+interface DragArgs {
+  active: { id: Id };
+  over: { id: Id } | null;
+}
+
+/** Maps a dnd-kit drop to `data` positions, or `null` when nothing should move. */
+export function resolveDragEnd(
+  ids: readonly string[],
+  activeId: Id,
+  overId: Id | null | undefined,
+): { from: number; to: number } | null {
+  if (overId == null || activeId === overId) return null;
+  const from = ids.indexOf(String(activeId));
+  const to = ids.indexOf(String(overId));
+  if (from === -1 || to === -1) return null;
+  return { from, to };
+}
+
+/**
+ * Position-based dnd-kit announcements. dnd-kit's defaults read the raw draggable ids, which are
+ * `keyExtractor` keys — these never mention them.
+ */
+export function createReorderAnnouncements<T>(
+  ids: readonly string[],
+  describe: ReorderController<T>['describe'],
+) {
+  const indexOf = (id: Id | undefined) => (id === undefined ? -1 : ids.indexOf(String(id)));
+  // dnd-kit reports the row's own slot as "over" right after pick-up; skip repeats so the
+  // pick-up message is not replaced by "moved to" its current position.
+  let lastAnnouncedIndex = -1;
+
+  return {
+    onDragStart({ active }: Pick<DragArgs, 'active'>) {
+      const from = indexOf(active.id);
+      lastAnnouncedIndex = from;
+      return from === -1 ? undefined : describe('pickedUp', from, from);
+    },
+    onDragOver({ active, over }: DragArgs) {
+      const from = indexOf(active.id);
+      const to = indexOf(over?.id);
+      if (from === -1 || to === -1 || to === lastAnnouncedIndex) return undefined;
+      lastAnnouncedIndex = to;
+      return describe('movedTo', from, to);
+    },
+    onDragEnd({ active, over }: DragArgs) {
+      const from = indexOf(active.id);
+      if (from === -1) return undefined;
+      const to = indexOf(over?.id);
+      return describe('dropped', from, to === -1 ? from : to);
+    },
+    onDragCancel({ active }: DragArgs) {
+      const from = indexOf(active.id);
+      return from === -1 ? undefined : describe('cancelled', from, from);
+    },
+  };
+}

package/src/components/ScopedTheme/index.tsx

@@ -1,7 +1,12 @@
 import type { ComponentProps } from 'react';
 import { ScopedTheme as UniwindScopedTheme } from 'uniwind';
 
-export type ScopedThemeProps = ComponentProps<typeof UniwindScopedTheme>;
+export type ScopedThemeProps = ComponentProps<typeof UniwindScopedTheme> & {
+  /** The theme forced on the subtree, such as `'dark'` or `'light'`. */
+  theme: ComponentProps<typeof UniwindScopedTheme>['theme'];
+  /** The subtree that renders in `theme`. */
+  children?: ComponentProps<typeof UniwindScopedTheme>['children'];
+};
 
 /**
  * Forces a specific theme on a component subtree, regardless of the application's

package/src/components/Skeleton/index.tsx

@@ -11,7 +11,10 @@ import { cn } from '@cdx-ui/utils';
 import { skeletonVariants } from './styles';
 
 export interface SkeletonProps extends ViewProps {
+  /** Size and shape classes for the placeholder, such as `h-4 w-32 rounded-md`. */
   className?: string;
+  /** Optional content to render inside the placeholder. */
+  children?: ViewProps['children'];
   /**
    * Half-cycle of the opacity pulse (`1` → `0.35`) in milliseconds.
    * A full pulse takes `duration × 2`.

package/src/components/TablePagination/index.tsx

@@ -26,57 +26,111 @@ export type { TablePaginationItemToken } from './getTablePaginationItems';
 export type TablePaginationPageSizeOption = number | { value: number; label: string };
 
 export interface TablePaginationProps extends ViewProps {
+  /** Render the consumer's child element in place of the default container. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the container's own styles. */
   className?: string;
+  /** Custom layout of pagination parts. Omit to render the status, controls and generated page items. */
   children?: ReactNode;
   /** 1-based current page. Controlled when set. */
   page?: number;
+  /**
+   * Initial 1-based page when uncontrolled.
+   * @default 1
+   */
   defaultPage?: number;
   /** Total page count. When set with no children, items are generated. */
   count?: number;
+  /** Called with the new 1-based page when the user changes page. */
   onPageChange?: (page: number) => void;
+  /**
+   * Number of page items shown on each side of the current page before an ellipsis.
+   * @default 1
+   */
   siblingCount?: number;
+  /** Current rows-per-page value. When set with no children, the page-size select is rendered. */
   pageSize?: number;
+  /**
+   * Choices offered by `TablePagination.PageSize`, as numbers or `{ value, label }` pairs.
+   * @default [25, 50, 100]
+   */
   pageSizeOptions?: readonly TablePaginationPageSizeOption[];
+  /** Called with the new rows-per-page value when the user picks one. */
   onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * Disables every control in the pagination.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Accessible name for the pagination.
+   * @default 'Table pagination'
+   */
   'aria-label'?: string;
 }
 
 export interface TablePaginationItemProps extends ViewProps {
+  /** Render the consumer's child element in place of the default page button. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the item's own styles. */
   className?: string;
+  /** The page number or label to display. */
   children?: ReactNode;
+  /** 1-based page this item navigates to when pressed. */
   page?: number;
+  /**
+   * Marks the item as the current page. Set automatically when `page` matches the current page.
+   * @default false
+   */
   current?: boolean;
+  /** Disables the item. Defaults to the pagination's `disabled`. */
   disabled?: boolean;
+  /** Called on press, before the pagination navigates to `page`. */
   onPress?: PressableProps['onPress'];
 }
 
 export interface TablePaginationControlProps extends ViewProps {
+  /** Render the consumer's child element in place of the default icon button. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the control's own styles. */
   className?: string;
+  /** The element to render when `asChild` is set. */
   children?: ReactNode;
+  /** Disables the control. It is also disabled at the first or last page, or when the pagination is disabled. */
   disabled?: boolean;
+  /** Called on press, before the pagination moves to the adjacent page. */
   onPress?: PressableProps['onPress'];
 }
 
 export interface TablePaginationEllipsisProps extends ViewProps {
+  /** Render the consumer's child element in place of the default `View` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the ellipsis's own styles. */
   className?: string;
+  /** Custom content in place of the default `…`. */
   children?: ReactNode;
 }
 
 export interface TablePaginationStatusProps extends ViewProps {
+  /** Render the consumer's child element in place of the default `View` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the status's own styles. */
   className?: string;
+  /** Custom status content in place of the default "Page N of M" text. */
   children?: ReactNode;
 }
 
 export interface TablePaginationPageSizeProps extends ViewProps {
+  /** Render the consumer's child element in place of the default select. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the select's own styles. */
   className?: string;
+  /** The element to render when `asChild` is set. */
   children?: ReactNode;
+  /**
+   * Accessible name for the page-size select.
+   * @default 'Rows per page'
+   */
   'aria-label'?: string;
 }
 

package/src/components/Text/index.tsx

@@ -8,7 +8,7 @@ export type TextColor = NonNullable<TextVariantProps['color']>;
 export type TextSize = NonNullable<TextVariantProps['size']>;
 export type TextWeight = NonNullable<TextVariantProps['weight']>;
 
-export type TextProps = Omit<TextVariantProps, 'color' | 'size' | 'weight'> &
+export type TextProps = Omit<TextVariantProps, 'color' | 'size' | 'weight' | 'italic'> &
   ComponentPropsWithoutRef<typeof RNText> & {
     /**
      * Semantic content color, mapped to the matching `text-content-*` token.
@@ -27,7 +27,12 @@ export type TextProps = Omit<TextVariantProps, 'color' | 'size' | 'weight'> &
      * @default 'normal'
      */
     weight?: TextWeight;
+    /** Renders the text in italics. A nested `Text` inherits its parent's style when omitted. */
+    italic?: TextVariantProps['italic'];
+    /** Additional Uniwind/Tailwind classes, merged after the text's own styles. */
     className?: string;
+    /** Text content, which may include nested `Text` elements. */
+    children?: ComponentPropsWithoutRef<typeof RNText>['children'];
   };
 
 export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(

package/src/components/Tile/styles.ts

@@ -43,7 +43,10 @@ export const tileRootVariants = cva(
   {
     variants: {
       shape: {
-        flat: 'rounded-none border-0 bg-transparent',
+        flat: [
+          'rounded-none border-0 bg-transparent',
+          'data-[state=selected]:bg-surface-action-tint',
+        ].join(' '),
         card: [
           'rounded-[var(--border-radius-default)] border-1 border-solid',
           'border-stroke-secondary',

package/src/components/index.ts

@@ -52,6 +52,11 @@ export * from './ScrollShadow';
 export * from './Select';
 export * from './Slider';
 export * from './VirtualizedList';
+export type {
+  ReorderableListLabels,
+  ReorderableListProps,
+  ReorderableListRenderItemInfo,
+} from './ReorderableList/types';
 export * from './Switch';
 export * from './Tabs';
 export * from './Table';

package/src/reorderable-list.ts

@@ -0,0 +1 @@
+export * from './components/ReorderableList';

package/src/styles.css

@@ -1,2 +1,20 @@
 @source './**/*.{ts,tsx}';
 @source '../../data-grid/src/**/*.{ts,tsx}';
+
+/*
+ * react-native-web resets every root <Text> to `display: inline`, which stops
+ * `text-align` from working inside a plain block parent. Its reset class is
+ * `css-text-<hash>` in development and `css-<hash>` in production; the hash is
+ * derived from RNW's Text reset style and is checked against RNW's actual output
+ * by __tests__/rnw-text-reset.test.ts.
+ *
+ * Uniwind moves that reset into `@layer rnw`, the first layer in the document.
+ * Joining the same layer with equal specificity overrides only the reset:
+ * Tailwind utilities (layered or not) and RNW's unlayered `numberOfLines`
+ * styles still win.
+ */
+@layer rnw {
+  :is(.css-text-146c3p1, .css-146c3p1) {
+    display: revert;
+  }
+}