@tensor_1/react 2.11.0 → 2.12.0

package/dist/index.d.cts

@@ -140,6 +140,30 @@ interface UseTableResult<T> {
  */
 declare function useTable<T extends Row>(data: readonly T[], options?: UseTableOptions): UseTableResult<T>;
 
+interface UseVirtualRowsOptions {
+    /** Fixed rendered row height in pixels. */
+    rowHeight: number;
+    /** Rows rendered beyond each viewport edge. Default: 6. */
+    overscan?: number;
+    /** Render all rows at or below this count. Default: 100. */
+    threshold?: number;
+}
+interface UseVirtualRowsResult<T> {
+    /** Attach to the scrolling TableWrap. */
+    containerRef: RefObject<HTMLDivElement>;
+    rows: readonly T[];
+    startIndex: number;
+    padTop: number;
+    padBottom: number;
+    totalHeight: number;
+    virtualized: boolean;
+}
+/**
+ * Owns scroll/resize observation and exposes the small visible row window.
+ * Consumers render padTop/padBottom spacer rows inside their existing tbody.
+ */
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+
 /**
  * uix overlay positioning — framework-agnostic, dependency-free anchored placement.
  *
@@ -605,7 +629,7 @@ declare function Toaster({ children, className, ...props }: ToasterProps): react
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-declare function TableWrap({ children, className, ...props }: TableWrapProps): react.JSX.Element;
+declare const TableWrap: react.ForwardRefExoticComponent<TableWrapProps & react.RefAttributes<HTMLDivElement>>;
 type TableDensity = 'compact' | 'standard' | 'comfortable';
 type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
@@ -1270,4 +1294,4 @@ interface StatusRowProps extends HTMLAttributes<HTMLDivElement> {
 /** Status row — indicator + name + trailing meta (`.uix-status-row`). */
 declare function StatusRow({ indicator, name, meta, className, ...props }: StatusRowProps): react.JSX.Element;
 
-export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, type Placement, Popover, type PopoverProps, type PositionOptions, type PositionResult, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Rect, ResourceGrid, type ResourceGridProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, type Side, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, computePosition, cx, flattenTree, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, treeNav, useAnchoredPosition, useDialog, useTable, virtualWindow };
+export { Alert, type AlertProps, type AlertTone, type Align, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, type ColumnFilter, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FlatNode, Highlighted, type HighlightedProps, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, Meter, type MeterProps, type MeterTone, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, type Placement, Popover, type PopoverProps, type PositionOptions, type PositionResult, type Primitive, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Rect, ResourceGrid, type ResourceGridProps, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, type Side, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, type UseVirtualRowsOptions, type UseVirtualRowsResult, UserChip, type UserChipProps, type ViewState, type VirtualWindow, applyFilters, clampWidth, computePosition, cx, flattenTree, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, treeNav, useAnchoredPosition, useDialog, useTable, useVirtualRows, virtualWindow };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { cx } from './cx.js';
 export { useDialog } from './hooks/useDialog.js';
 export { UseTableOptions, UseTableResult, useTable } from './hooks/useTable.js';
+export { UseVirtualRowsOptions, UseVirtualRowsResult, useVirtualRows } from './hooks/useVirtualRows.js';
 export { UseAnchoredPositionOptions, useAnchoredPosition } from './hooks/useAnchoredPosition.js';
 export { Align, Placement, PositionOptions, PositionResult, Rect, Side, Size, computePosition } from './overlay-position.js';
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps } from './components/Button.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 import { cx } from "./cx.js";
 import { useDialog } from "./hooks/useDialog.js";
 import { useTable } from "./hooks/useTable.js";
+import { useVirtualRows } from "./hooks/useVirtualRows.js";
 import { useAnchoredPosition } from "./hooks/useAnchoredPosition.js";
 import { computePosition } from "./overlay-position.js";
 import { Button, ButtonGroup } from "./components/Button.js";
@@ -182,5 +183,6 @@ export {
   treeNav,
   useAnchoredPosition,
   useDialog,
-  useTable
+  useTable,
+  useVirtualRows
 };

package/dist/table-engine.js

@@ -1,19 +1,20 @@
+const stringCollator = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
 function compare(a, b) {
   if (a == null && b == null) return 0;
   if (a == null) return -1;
   if (b == null) return 1;
   if (typeof a === "number" && typeof b === "number") return a - b;
-  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+  return stringCollator.compare(String(a), String(b));
 }
 function multiSort(rows, keys) {
   if (!keys.length) return rows.slice();
-  return rows.map((row, i) => ({ row, i })).sort((x, y) => {
+  return rows.slice().sort((a, b) => {
     for (const k of keys) {
-      const c = compare(x.row[k.field], y.row[k.field]);
+      const c = compare(a[k.field], b[k.field]);
       if (c !== 0) return k.dir === "ascending" ? c : -c;
     }
-    return x.i - y.i;
-  }).map((w) => w.row);
+    return 0;
+  });
 }
 function nextSortDir(current) {
   if (current === "ascending") return "descending";
@@ -213,7 +214,8 @@ function toggleId(set, id) {
   return next;
 }
 function selectAllState(selected, pageIds) {
-  const on = pageIds.filter((id) => selected.has(id)).length;
+  let on = 0;
+  for (const id of pageIds) if (selected.has(id)) on += 1;
   if (on === 0) return "none";
   return on === pageIds.length ? "all" : "some";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",
@@ -26,22 +26,36 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js",
       "require": "./dist/chart.cjs"
+    },
+    "./chart/preset": {
+      "types": "./dist/chart-preset.d.ts",
+      "import": "./dist/chart-preset.js",
+      "require": "./dist/chart-preset.cjs"
     }
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "test": "node --test"
+    "test": "node --test",
+    "test:performance": "node scripts/table-performance.mjs",
+    "size": "node scripts/check-chart-preset-size.mjs"
   },
   "peerDependencies": {
+    "echarts": "^5.6.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "echarts": "^5.6.0",
+    "esbuild": "^0.27.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   }