@kinetixui/ui 0.19.0 → 0.20.1

package/dist/index.d.ts

@@ -1622,12 +1622,17 @@ interface DataGridColumn<TData> {
     onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
 /** A rectangular range of cells, in display order (after sorting and column reordering). */
-interface DataGridSelection {
+interface DataGridRange {
     /** first and last selected row index, inclusive, into the *displayed* (sorted) rows */
     rows: [number, number];
     /** ids of the selected columns, in display order */
     columns: string[];
 }
+/** The selection: the range being edited (`rows` / `columns`, the last one) plus every range in `ranges`. */
+interface DataGridSelection extends DataGridRange {
+    /** every selected range, in the order they were added — more than one after Ctrl/Cmd+click or Ctrl+Space */
+    ranges: DataGridRange[];
+}
 interface DataGridProps<TData> {
     columns: DataGridColumn<TData>[];
     data: TData[];
@@ -1638,9 +1643,10 @@ interface DataGridProps<TData> {
     getRowId?: (row: TData, index: number) => React$1.Key;
     className?: string;
     /**
-     * Opt in to range selection: Shift+arrows / Shift+click extend a rectangle from the anchor cell,
-     * Ctrl/Cmd+A selects everything, Ctrl/Cmd+C copies the range as tab-separated text (each
-     * column's `value()`; empty where a column has none), Esc clears. Sets aria-multiselectable.
+     * Opt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the
+     * anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects
+     * everything; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
+     * a column has none; ranges separated by a blank line); Esc clears. Sets aria-multiselectable.
      */
     selectable?: boolean;
     /** fires when the selected range changes; `null` when it is cleared */
@@ -1812,4 +1818,4 @@ declare const MarkdownEditor: React$1.ForwardRefExoticComponent<MarkdownEditorPr
 /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, type DataGridColumn, type DataGridProps, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffViewer, type DiffViewerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, KinetixDirectionProvider, type KinetixDirectionProviderProps, Label, List, ListItem, type ListItemProps, MarkdownEditor, type MarkdownEditorProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBubble, type MessageBubbleProps, Metric, type MetricProps, Modal, type ModalProps, type ModalType, MultiSelect, type MultiSelectOption, type MultiSelectProps, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, type TourProps, type TourStep, TreeItem, type TreeItemProps, TreeView, type TreeViewProps, TypingIndicator, type UploadFile, VirtualList, type VirtualListProps, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, type DataGridColumn, type DataGridProps, type DataGridRange, type DataGridSelection, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffViewer, type DiffViewerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, KinetixDirectionProvider, type KinetixDirectionProviderProps, Label, List, ListItem, type ListItemProps, MarkdownEditor, type MarkdownEditorProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBubble, type MessageBubbleProps, Metric, type MetricProps, Modal, type ModalProps, type ModalType, MultiSelect, type MultiSelectOption, type MultiSelectProps, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, type TourProps, type TourStep, TreeItem, type TreeItemProps, TreeView, type TreeViewProps, TypingIndicator, type UploadFile, VirtualList, type VirtualListProps, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };

package/dist/index.js

@@ -5148,6 +5148,19 @@ function DataGrid({
   const pendingFocusRef = React83.useRef(null);
   const [announcement, setAnnouncement] = React83.useState("");
   const [sel, setSel] = React83.useState(null);
+  const [extra, setExtra] = React83.useState([]);
+  const dragRef = React83.useRef(null);
+  React83.useEffect(() => {
+    const end = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener("mouseup", end);
+    return () => window.removeEventListener("mouseup", end);
+  }, []);
+  const clearSel = () => {
+    setSel(null);
+    setExtra([]);
+  };
   const onSelectionChangeRef = React83.useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const lastEmittedRef = React83.useRef("null");
@@ -5158,43 +5171,62 @@ function DataGrid({
   const activeRendered = activeRow < 0 || activeRow >= startIndex && activeRow < endIndex;
   const tabStop = { row: activeRendered ? activeRow : -1, columnId: activeCol };
   const colKey = colIds.join("|");
-  const range = React83.useMemo(() => {
-    if (!selectable || !sel) return null;
-    const a = colIds.indexOf(sel.anchor.columnId);
-    const b = colIds.indexOf(sel.end.columnId);
-    if (a < 0 || b < 0) return null;
-    return { r0: Math.min(sel.anchor.row, sel.end.row), r1: Math.max(sel.anchor.row, sel.end.row), c0: Math.min(a, b), c1: Math.max(a, b) };
-  }, [selectable, sel, colKey]);
-  React83.useEffect(() => setSel(null), [sort, rowCount]);
+  const rects = React83.useMemo(() => {
+    if (!selectable) return [];
+    const out = [];
+    for (const s of sel ? [...extra, sel] : extra) {
+      const a = colIds.indexOf(s.anchor.columnId);
+      const b = colIds.indexOf(s.end.columnId);
+      if (a < 0 || b < 0) continue;
+      out.push({ r0: Math.min(s.anchor.row, s.end.row), r1: Math.max(s.anchor.row, s.end.row), c0: Math.min(a, b), c1: Math.max(a, b) });
+    }
+    return out;
+  }, [selectable, sel, extra, colKey]);
+  const hasSelection = rects.length > 0;
+  const cellCount = rects.reduce((n, r) => n + (r.r1 - r.r0 + 1) * (r.c1 - r.c0 + 1), 0);
+  const isSelectedCell = (row, colIdx) => rects.some((r) => row >= r.r0 && row <= r.r1 && colIdx >= r.c0 && colIdx <= r.c1);
+  React83.useEffect(() => {
+    setSel(null);
+    setExtra([]);
+  }, [sort, rowCount]);
   React83.useEffect(() => {
     if (!selectable) return;
-    const value = range ? { rows: [range.r0, range.r1], columns: colIds.slice(range.c0, range.c1 + 1) } : null;
+    const ranges = rects.map((r) => ({ rows: [r.r0, r.r1], columns: colIds.slice(r.c0, r.c1 + 1) }));
+    const value = ranges.length ? { ...ranges[ranges.length - 1], ranges } : null;
     const key = JSON.stringify(value);
     if (key === lastEmittedRef.current) return;
     lastEmittedRef.current = key;
     onSelectionChangeRef.current?.(value);
-    setAnnouncement(value ? `${(range.r1 - range.r0 + 1) * (range.c1 - range.c0 + 1)} cells selected` : "Selection cleared");
-  }, [selectable, range]);
+    setAnnouncement(value ? `${cellCount} cells selected` : "Selection cleared");
+  }, [selectable, rects]);
   function extendSelection(fromRow, fromCol, toRow, toCol) {
     const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
     const end = { row: Math.max(0, Math.min(toRow, rowCount - 1)), columnId: toCol };
     setSel({ anchor, end });
     moveTo(end.row, end.columnId);
   }
+  function addRange(row, columnId, prev) {
+    const previous = sel ?? (prev ? { anchor: prev, end: prev } : null);
+    if (previous) setExtra((x) => [...x, previous]);
+    setSel({ anchor: { row, columnId }, end: { row, columnId } });
+  }
   function selectAll() {
     if (rowCount === 0 || colIds.length === 0) return;
+    setExtra([]);
     setSel({ anchor: { row: 0, columnId: colIds[0] }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1] } });
   }
   function copySelection() {
-    if (!range) return;
-    const ids = colIds.slice(range.c0, range.c1 + 1);
-    const text = sortedData.slice(range.r0, range.r1 + 1).map((r) => ids.map((id) => {
-      const c = columnById.get(id);
-      return c?.value ? String(c.value(r)) : "";
-    }).join("	")).join("\n");
+    if (!hasSelection) return;
+    const text = rects.map((r) => {
+      const ids = colIds.slice(r.c0, r.c1 + 1);
+      return sortedData.slice(r.r0, r.r1 + 1).map((row) => ids.map((id) => {
+        const c = columnById.get(id);
+        return c?.value ? String(c.value(row)) : "";
+      }).join("	")).join("\n");
+    }).join("\n\n");
     try {
       void navigator.clipboard?.writeText(text);
-      setAnnouncement(`Copied ${(range.r1 - range.r0 + 1) * ids.length} cells`);
+      setAnnouncement(`Copied ${cellCount} cells`);
     } catch {
     }
   }
@@ -5277,13 +5309,17 @@ function DataGrid({
         e.preventDefault();
         return selectAll();
       }
-      if (mod && e.key.toLowerCase() === "c" && range) {
+      if (mod && e.key.toLowerCase() === "c" && hasSelection) {
         e.preventDefault();
         return copySelection();
       }
-      if (e.key === "Escape" && sel) {
+      if (mod && e.key === " ") {
+        e.preventDefault();
+        return addRange(row, column.id, { row, columnId: column.id });
+      }
+      if (e.key === "Escape" && hasSelection) {
         e.preventDefault();
-        return setSel(null);
+        return clearSel();
       }
     }
     const extend = selectable && e.shiftKey && row >= 0;
@@ -5291,7 +5327,7 @@ function DataGrid({
       e.preventDefault();
       const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))];
       if (extend) return extendSelection(row, column.id, r, target);
-      if (sel) setSel(null);
+      if (hasSelection) clearSel();
       moveTo(r, target);
     };
     switch (e.key) {
@@ -5413,7 +5449,7 @@ function DataGrid({
                   const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
                   const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 } : {};
                   const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
-                  const selected = selectable && !!range && rowIndex >= range.r0 && rowIndex <= range.r1 && colIdx >= range.c0 && colIdx <= range.c1;
+                  const selected = selectable && isSelectedCell(rowIndex, colIdx);
                   return /* @__PURE__ */ jsx89(
                     "div",
                     {
@@ -5422,11 +5458,29 @@ function DataGrid({
                       "aria-selected": selectable ? selected : void 0,
                       "data-cell": `${rowIndex}:${column.id}`,
                       onMouseDown: (e) => {
-                        if (!selectable || e.button !== 0) return;
+                        if (!selectable || e.button !== 0 || isEditing) return;
+                        const here = { row: rowIndex, columnId: column.id };
                         if (e.shiftKey) {
                           e.preventDefault();
                           extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
-                        } else if (sel) setSel(null);
+                        } else if (e.ctrlKey || e.metaKey) {
+                          addRange(rowIndex, column.id, activeRow >= 0 ? { row: activeRow, columnId: activeCol } : void 0);
+                          dragRef.current = here;
+                        } else {
+                          if (hasSelection) clearSel();
+                          dragRef.current = here;
+                        }
+                      },
+                      onMouseEnter: (e) => {
+                        const start = dragRef.current;
+                        if (!selectable || !start) return;
+                        if (e.buttons !== 1) {
+                          dragRef.current = null;
+                          return;
+                        }
+                        if (start.row === rowIndex && start.columnId === column.id) return;
+                        setSel({ anchor: start, end: { row: rowIndex, columnId: column.id } });
+                        moveTo(rowIndex, column.id);
                       },
                       onDoubleClick: () => column.editable && setEditing({ rowIndex, columnId: column.id }),
                       tabIndex: tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1,
@@ -5435,6 +5489,7 @@ function DataGrid({
                       className: cn(
                         "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                         column.pinned && "bg-background",
+                        selectable && "select-none",
                         selected && "bg-accent"
                       ),
                       style: { width, ...pinnedStyle },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.19.0",
+    "@kinetixui/tokens": "0.20.1",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",

package/src/components/data-grid.tsx

@@ -25,13 +25,19 @@ export interface DataGridColumn<TData> {
 }
 
 /** A rectangular range of cells, in display order (after sorting and column reordering). */
-export interface DataGridSelection {
+export interface DataGridRange {
   /** first and last selected row index, inclusive, into the *displayed* (sorted) rows */
   rows: [number, number];
   /** ids of the selected columns, in display order */
   columns: string[];
 }
 
+/** The selection: the range being edited (`rows` / `columns`, the last one) plus every range in `ranges`. */
+export interface DataGridSelection extends DataGridRange {
+  /** every selected range, in the order they were added — more than one after Ctrl/Cmd+click or Ctrl+Space */
+  ranges: DataGridRange[];
+}
+
 export interface DataGridProps<TData> {
   columns: DataGridColumn<TData>[];
   data: TData[];
@@ -42,9 +48,10 @@ export interface DataGridProps<TData> {
   getRowId?: (row: TData, index: number) => React.Key;
   className?: string;
   /**
-   * Opt in to range selection: Shift+arrows / Shift+click extend a rectangle from the anchor cell,
-   * Ctrl/Cmd+A selects everything, Ctrl/Cmd+C copies the range as tab-separated text (each
-   * column's `value()`; empty where a column has none), Esc clears. Sets aria-multiselectable.
+   * Opt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the
+   * anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects
+   * everything; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
+   * a column has none; ranges separated by a blank line); Esc clears. Sets aria-multiselectable.
    */
   selectable?: boolean;
   /** fires when the selected range changes; `null` when it is cleared */
@@ -223,7 +230,22 @@ function DataGrid<TData>({
 
   // ── range selection (opt-in) ──────────────────────────────────────────────────────────────
   type Anchor = { row: number; columnId: string };
-  const [sel, setSel] = React.useState<{ anchor: Anchor; end: Anchor } | null>(null);
+  type Sel = { anchor: Anchor; end: Anchor };
+  const [sel, setSel] = React.useState<Sel | null>(null);
+  /** ranges committed before the current one (Ctrl/Cmd+click, Ctrl+Space) */
+  const [extra, setExtra] = React.useState<Sel[]>([]);
+  const dragRef = React.useRef<Anchor | null>(null);
+  React.useEffect(() => {
+    const end = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener("mouseup", end);
+    return () => window.removeEventListener("mouseup", end);
+  }, []);
+  const clearSel = () => {
+    setSel(null);
+    setExtra([]);
+  };
   const onSelectionChangeRef = React.useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const lastEmittedRef = React.useRef("null");
@@ -237,28 +259,39 @@ function DataGrid<TData>({
   const activeRendered = activeRow < 0 || (activeRow >= startIndex && activeRow < endIndex);
   const tabStop: Pos = { row: activeRendered ? activeRow : -1, columnId: activeCol };
   const colKey = colIds.join("|");
-  const range = React.useMemo(() => {
-    if (!selectable || !sel) return null;
-    const a = colIds.indexOf(sel.anchor.columnId);
-    const b = colIds.indexOf(sel.end.columnId);
-    if (a < 0 || b < 0) return null;
-    return { r0: Math.min(sel.anchor.row, sel.end.row), r1: Math.max(sel.anchor.row, sel.end.row), c0: Math.min(a, b), c1: Math.max(a, b) };
+  const rects = React.useMemo(() => {
+    if (!selectable) return [];
+    const out: { r0: number; r1: number; c0: number; c1: number }[] = [];
+    for (const s of sel ? [...extra, sel] : extra) {
+      const a = colIds.indexOf(s.anchor.columnId);
+      const b = colIds.indexOf(s.end.columnId);
+      if (a < 0 || b < 0) continue;
+      out.push({ r0: Math.min(s.anchor.row, s.end.row), r1: Math.max(s.anchor.row, s.end.row), c0: Math.min(a, b), c1: Math.max(a, b) });
+    }
+    return out;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectable, sel, colKey]);
+  }, [selectable, sel, extra, colKey]);
+  const hasSelection = rects.length > 0;
+  const cellCount = rects.reduce((n, r) => n + (r.r1 - r.r0 + 1) * (r.c1 - r.c0 + 1), 0);
+  const isSelectedCell = (row: number, colIdx: number) => rects.some((r) => row >= r.r0 && row <= r.r1 && colIdx >= r.c0 && colIdx <= r.c1);
 
   // Selection refers to displayed rows, so a re-sort or a different row count invalidates it.
-  React.useEffect(() => setSel(null), [sort, rowCount]);
+  React.useEffect(() => {
+    setSel(null);
+    setExtra([]);
+  }, [sort, rowCount]);
 
   React.useEffect(() => {
     if (!selectable) return;
-    const value = range ? { rows: [range.r0, range.r1] as [number, number], columns: colIds.slice(range.c0, range.c1 + 1) } : null;
+    const ranges: DataGridRange[] = rects.map((r) => ({ rows: [r.r0, r.r1] as [number, number], columns: colIds.slice(r.c0, r.c1 + 1) }));
+    const value: DataGridSelection | null = ranges.length ? { ...ranges[ranges.length - 1]!, ranges } : null;
     const key = JSON.stringify(value);
     if (key === lastEmittedRef.current) return;
     lastEmittedRef.current = key;
     onSelectionChangeRef.current?.(value);
-    setAnnouncement(value ? `${(range!.r1 - range!.r0 + 1) * (range!.c1 - range!.c0 + 1)} cells selected` : "Selection cleared");
+    setAnnouncement(value ? `${cellCount} cells selected` : "Selection cleared");
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectable, range]);
+  }, [selectable, rects]);
 
   function extendSelection(fromRow: number, fromCol: string, toRow: number, toCol: string) {
     const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
@@ -267,21 +300,33 @@ function DataGrid<TData>({
     moveTo(end.row, end.columnId);
   }
 
+  /** Start a new range at a cell, keeping the current one (the active cell counts when nothing is selected yet). */
+  function addRange(row: number, columnId: string, prev?: Anchor) {
+    const previous = sel ?? (prev ? { anchor: prev, end: prev } : null);
+    if (previous) setExtra((x) => [...x, previous]);
+    setSel({ anchor: { row, columnId }, end: { row, columnId } });
+  }
+
   function selectAll() {
     if (rowCount === 0 || colIds.length === 0) return;
+    setExtra([]);
     setSel({ anchor: { row: 0, columnId: colIds[0]! }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1]! } });
   }
 
   function copySelection() {
-    if (!range) return;
-    const ids = colIds.slice(range.c0, range.c1 + 1);
-    const text = sortedData
-      .slice(range.r0, range.r1 + 1)
-      .map((r) => ids.map((id) => { const c = columnById.get(id); return c?.value ? String(c.value(r)) : ""; }).join("\t"))
-      .join("\n");
+    if (!hasSelection) return;
+    const text = rects
+      .map((r) => {
+        const ids = colIds.slice(r.c0, r.c1 + 1);
+        return sortedData
+          .slice(r.r0, r.r1 + 1)
+          .map((row) => ids.map((id) => { const c = columnById.get(id); return c?.value ? String(c.value(row)) : ""; }).join("\t"))
+          .join("\n");
+      })
+      .join("\n\n");
     try {
       void navigator.clipboard?.writeText(text);
-      setAnnouncement(`Copied ${(range.r1 - range.r0 + 1) * ids.length} cells`);
+      setAnnouncement(`Copied ${cellCount} cells`);
     } catch {
       /* clipboard unavailable (insecure context / permission) — nothing to announce */
     }
@@ -377,13 +422,18 @@ function DataGrid<TData>({
         e.preventDefault();
         return selectAll();
       }
-      if (mod && e.key.toLowerCase() === "c" && range) {
+      if (mod && e.key.toLowerCase() === "c" && hasSelection) {
         e.preventDefault();
         return copySelection();
       }
-      if (e.key === "Escape" && sel) {
+      if (mod && e.key === " ") {
+        // keyboard equivalent of Ctrl/Cmd+click: keep what is selected and start another range here
         e.preventDefault();
-        return setSel(null);
+        return addRange(row, column.id, { row, columnId: column.id });
+      }
+      if (e.key === "Escape" && hasSelection) {
+        e.preventDefault();
+        return clearSel();
       }
     }
     const extend = selectable && e.shiftKey && row >= 0;
@@ -391,7 +441,7 @@ function DataGrid<TData>({
       e.preventDefault();
       const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))]!;
       if (extend) return extendSelection(row, column.id, r, target);
-      if (sel) setSel(null); // a plain move collapses the range
+      if (hasSelection) clearSel(); // a plain move collapses the selection
       moveTo(r, target);
     };
     switch (e.key) {
@@ -530,7 +580,7 @@ function DataGrid<TData>({
                         ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 }
                         : {};
                   const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
-                  const selected = selectable && !!range && rowIndex >= range.r0 && rowIndex <= range.r1 && colIdx >= range.c0 && colIdx <= range.c1;
+                  const selected = selectable && isSelectedCell(rowIndex, colIdx);
                   return (
                     <div
                       key={column.id}
@@ -539,13 +589,31 @@ function DataGrid<TData>({
                       aria-selected={selectable ? selected : undefined}
                       data-cell={`${rowIndex}:${column.id}`}
                       onMouseDown={(e) => {
-                        if (!selectable || e.button !== 0) return;
+                        if (!selectable || e.button !== 0 || isEditing) return;
+                        const here = { row: rowIndex, columnId: column.id };
                         if (e.shiftKey) {
                           // extend from the previously active cell (focus has not moved yet on mousedown) — even when it has
                           // since scrolled out of the rendered window
                           e.preventDefault();
                           extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
-                        } else if (sel) setSel(null);
+                        } else if (e.ctrlKey || e.metaKey) {
+                          addRange(rowIndex, column.id, activeRow >= 0 ? { row: activeRow, columnId: activeCol } : undefined);
+                          dragRef.current = here; // Ctrl+drag sizes the new range
+                        } else {
+                          if (hasSelection) clearSel();
+                          dragRef.current = here; // a plain click selects nothing until the pointer reaches another cell
+                        }
+                      }}
+                      onMouseEnter={(e) => {
+                        const start = dragRef.current;
+                        if (!selectable || !start) return;
+                        if (e.buttons !== 1) {
+                          dragRef.current = null; // the button was released outside the grid
+                          return;
+                        }
+                        if (start.row === rowIndex && start.columnId === column.id) return;
+                        setSel({ anchor: start, end: { row: rowIndex, columnId: column.id } });
+                        moveTo(rowIndex, column.id); // the dragged-to cell becomes the active one, so Shift+arrows continue from it
                       }}
                       onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
                       // roving tabindex; Enter or F2 edits an editable cell (the spreadsheet convention)
@@ -555,6 +623,7 @@ function DataGrid<TData>({
                       className={cn(
                         "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                         column.pinned && "bg-background",
+                        selectable && "select-none",
                         selected && "bg-accent",
                       )}
                       style={{ width, ...pinnedStyle }}

package/src/components-keyboard.test.tsx

@@ -660,7 +660,7 @@ describe("DataGrid", () => {
 
       expect(selectedCells()).toHaveLength(4); // rows 0-1 x Name, ID
       expect(cell(1, 1)).toHaveFocus();
-      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 1], columns: ["name", "id"] });
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 1], columns: ["name", "id"], ranges: [{ rows: [0, 1], columns: ["name", "id"] }] });
       expect(screen.getByRole("status")).toHaveTextContent("4 cells selected");
     });
 
@@ -749,7 +749,106 @@ describe("DataGrid", () => {
       await user.keyboard("{Shift>}");
       await user.click(target);
       await user.keyboard("{/Shift}");
-      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, targetRow], columns: ["name"] });
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, targetRow], columns: ["name"], ranges: [{ rows: [0, targetRow], columns: ["name"] }] });
+    });
+
+    it("Ctrl+click adds a separate range and keeps the first, reporting both", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}"); // Name, rows 0-1
+      await user.keyboard("{Control>}");
+      await user.click(cell(2, 1)); // ID, row 2
+      await user.keyboard("{/Control}");
+      expect(selectedCells()).toHaveLength(3);
+      expect(cell(0, 0)).toHaveAttribute("aria-selected", "true");
+      expect(cell(2, 1)).toHaveAttribute("aria-selected", "true");
+      expect(cell(2, 0)).toHaveAttribute("aria-selected", "false");
+      expect(onSelectionChange).toHaveBeenLastCalledWith({
+        rows: [2, 2],
+        columns: ["id"],
+        ranges: [
+          { rows: [0, 1], columns: ["name"] },
+          { rows: [2, 2], columns: ["id"] },
+        ],
+      });
+      expect(screen.getByRole("status")).toHaveTextContent("3 cells selected");
+    });
+
+    it("Ctrl+click with nothing selected keeps the active cell as the first range", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active: row 0, Name — not selected yet
+      await user.keyboard("{Control>}");
+      await user.click(cell(2, 1));
+      await user.keyboard("{/Control}");
+      expect(selectedCells()).toHaveLength(2);
+      expect(cell(0, 0)).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("Ctrl+Space is the keyboard way to add a range; Shift+arrows then extends the new one", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // row 0, Name
+      await user.keyboard("{Control>} {/Control}"); // range 1 = this cell
+      await user.keyboard("{ArrowDown}{ArrowDown}"); // plain arrows collapse everything...
+      expect(selectedCells()).toHaveLength(0);
+      await user.keyboard("{Control>} {/Control}"); // ...so start over at row 2
+      await user.keyboard("{ArrowUp}");
+      expect(selectedCells()).toHaveLength(0);
+      // build two ranges without collapsing: Shift+arrows extends, Ctrl+Space branches
+      await user.keyboard("{ArrowUp}{Shift>}{ArrowDown}{/Shift}"); // rows 0-1
+      await user.keyboard("{Control>} {/Control}"); // second range starts at the active cell (row 1)
+      await user.keyboard("{Shift>}{ArrowDown}{ArrowRight}{/Shift}"); // rows 1-2, Name+ID
+      expect(onSelectionChange).toHaveBeenLastCalledWith({
+        rows: [1, 2],
+        columns: ["name", "id"],
+        ranges: [
+          { rows: [0, 1], columns: ["name"] },
+          { rows: [1, 2], columns: ["name", "id"] },
+        ],
+      });
+    });
+
+    it("Ctrl+C copies every range, separated by a blank line", async () => {
+      const user = userEvent.setup();
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // Cara
+      await user.keyboard("{Control>}");
+      await user.click(cell(2, 1)); // 3
+      await user.keyboard("{/Control}");
+      await user.keyboard("{Control>}c{/Control}");
+      expect(writeText).toHaveBeenCalledWith("Cara\n\n3");
+      expect(screen.getByRole("status")).toHaveTextContent("Copied 2 cells");
+    });
+
+    it("dragging across cells selects the rectangle; a plain click selects nothing", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.pointer({ keys: "[MouseLeft>]", target: cell(0, 0) });
+      expect(selectedCells()).toHaveLength(0); // pressed but not moved
+      await user.pointer({ target: cell(1, 1) });
+      await user.pointer({ keys: "[/MouseLeft]" });
+      expect(selectedCells()).toHaveLength(4);
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 1], columns: ["name", "id"], ranges: [{ rows: [0, 1], columns: ["name", "id"] }] });
+      expect(cell(1, 1)).toHaveFocus(); // Shift+arrows continue from the end
+    });
+
+    it("moving over cells with no button held does not select", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.pointer({ keys: "[MouseLeft>]", target: cell(0, 0) });
+      await user.pointer({ keys: "[/MouseLeft]" });
+      await user.pointer({ target: cell(2, 1) });
+      expect(selectedCells()).toHaveLength(0);
     });
 
     it("re-sorting clears the selection (it refers to displayed rows)", async () => {

package/src/index.ts

@@ -372,7 +372,7 @@ export { MultiSelect, type MultiSelectOption, type MultiSelectProps } from "./co
 export { MessageBubble, TypingIndicator, type MessageBubbleProps } from "./components/message-bubble";
 export { Tour, type TourStep, type TourProps } from "./components/tour";
 export { VirtualList, type VirtualListProps } from "./components/virtual-list";
-export { DataGrid, type DataGridColumn, type DataGridProps } from "./components/data-grid";
+export { DataGrid, type DataGridColumn, type DataGridProps, type DataGridRange, type DataGridSelection } from "./components/data-grid";
 export { JsonViewer, type JsonViewerProps } from "./components/json-viewer";
 export { DiffViewer, type DiffViewerProps } from "./components/diff-viewer";
 export { ColorPicker, type ColorPickerProps } from "./components/color-picker";