@mirror-physics/fractal-ui 0.2.0-next.23 → 0.2.0-next.24

package/dist/index.d.cts

@@ -164,6 +164,10 @@ interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
 declare function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }: CheckboxProps): React.JSX.Element;
 
 type SortDirection = 'asc' | 'desc' | null;
+interface SortableTableDefaultSort {
+    key: string;
+    direction: Exclude<SortDirection, null>;
+}
 interface SortableTableColumn<T> {
     key: string;
     header: string;
@@ -186,6 +190,9 @@ interface SortableTableProps<T> {
     /** Removes the table's outer border and radius for use inside another framed surface. */
     embedded?: boolean;
     className?: string;
+    /** Baseline row ordering that does not appear as an active user sort. */
+    defaultSort?: SortableTableDefaultSort;
+    /** Initial visible user sort state. */
     defaultSortKey?: string;
     defaultSortDirection?: SortDirection;
     sortKey?: string | null;
@@ -197,7 +204,7 @@ interface SortableTableProps<T> {
     /** Directional affordance displayed over the right edge of an interactive row. */
     rowAction?: SortableTableRowAction<T>;
 }
-declare function SortableTable<T>({ columns, data, emptyMessage, header, size, embedded, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
+declare function SortableTable<T>({ columns, data, emptyMessage, header, size, embedded, className, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -335,4 +342,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipTone, ContentSwitcher, type ContentSwitcherItem, type ContentSwitcherProps, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, type FileDropzoneProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, Pagination, type PaginationProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, type SidePanelProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type SortableTableRowAction, type TabItem, Tabs, type TabsProps, TextButton, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, type TextareaProps, Toggle, type ToggleProps, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipTone, ContentSwitcher, type ContentSwitcherItem, type ContentSwitcherProps, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, type FileDropzoneProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, Pagination, type PaginationProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, type SidePanelProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, type SortableTableProps, type SortableTableRowAction, type TabItem, Tabs, type TabsProps, TextButton, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, type TextareaProps, Toggle, type ToggleProps, cn, useEscapeDismiss };

package/dist/index.d.ts

@@ -164,6 +164,10 @@ interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
 declare function Checkbox({ checked, onCheckedChange, className, disabled, onClick, onKeyDown, ...props }: CheckboxProps): React.JSX.Element;
 
 type SortDirection = 'asc' | 'desc' | null;
+interface SortableTableDefaultSort {
+    key: string;
+    direction: Exclude<SortDirection, null>;
+}
 interface SortableTableColumn<T> {
     key: string;
     header: string;
@@ -186,6 +190,9 @@ interface SortableTableProps<T> {
     /** Removes the table's outer border and radius for use inside another framed surface. */
     embedded?: boolean;
     className?: string;
+    /** Baseline row ordering that does not appear as an active user sort. */
+    defaultSort?: SortableTableDefaultSort;
+    /** Initial visible user sort state. */
     defaultSortKey?: string;
     defaultSortDirection?: SortDirection;
     sortKey?: string | null;
@@ -197,7 +204,7 @@ interface SortableTableProps<T> {
     /** Directional affordance displayed over the right edge of an interactive row. */
     rowAction?: SortableTableRowAction<T>;
 }
-declare function SortableTable<T>({ columns, data, emptyMessage, header, size, embedded, className, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
+declare function SortableTable<T>({ columns, data, emptyMessage, header, size, embedded, className, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, highlightRow, onRowClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -335,4 +342,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipTone, ContentSwitcher, type ContentSwitcherItem, type ContentSwitcherProps, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, type FileDropzoneProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, Pagination, type PaginationProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, type SidePanelProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableProps, type SortableTableRowAction, type TabItem, Tabs, type TabsProps, TextButton, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, type TextareaProps, Toggle, type ToggleProps, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertTitle, Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipTone, ContentSwitcher, type ContentSwitcherItem, type ContentSwitcherProps, DataTable, type DataTableColumn, type DataTableProps, Disclosure, type DisclosureProps, Dropdown, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, type FileDropzoneProps, FolderCard, type FolderCardProps, Input, type InputProps, Label, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, type LinkProps, type LinkSize, type LinkTheme, Modal, type ModalProps, Pagination, type PaginationProps, PromptCard, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, type SidePanelProps, Sidebar, SidebarBrand, SidebarFooter, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, type SortableTableProps, type SortableTableRowAction, type TabItem, Tabs, type TabsProps, TextButton, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, type TextareaProps, Toggle, type ToggleProps, cn, useEscapeDismiss };

package/dist/index.js

@@ -702,6 +702,7 @@ function SortableTable({
   size = "md",
   embedded = false,
   className,
+  defaultSort,
   defaultSortKey = void 0,
   defaultSortDirection = null,
   sortKey: controlledKey,
@@ -716,12 +717,16 @@ function SortableTable({
   const isControlled = controlledKey !== void 0 && controlledDirection !== void 0;
   const activeKey = isControlled ? controlledKey : internalKey;
   const activeDirection = isControlled ? controlledDirection : internalDirection;
+  const baselineKey = defaultSort?.key ?? null;
+  const baselineDirection = defaultSort?.direction ?? null;
+  const effectiveKey = activeKey && activeDirection ? activeKey : baselineKey;
+  const effectiveDirection = activeKey && activeDirection ? activeDirection : baselineDirection;
   const sorted = useMemo(() => {
-    if (!activeKey || !activeDirection) return data;
-    const col = columns.find((c) => c.key === activeKey);
+    if (!effectiveKey || !effectiveDirection) return data;
+    const col = columns.find((c) => c.key === effectiveKey);
     if (!col) return data;
     const accessor = col.sortAccessor ?? ((row) => {
-      const value = row[activeKey];
+      const value = row[effectiveKey];
       return typeof value === "string" || typeof value === "number" ? value : null;
     });
     const copy = [...data];
@@ -732,19 +737,21 @@ function SortableTable({
       if (av == null) return 1;
       if (bv == null) return -1;
       if (typeof av === "number" && typeof bv === "number") {
-        return activeDirection === "asc" ? av - bv : bv - av;
+        return effectiveDirection === "asc" ? av - bv : bv - av;
       }
       const as = String(av).toLowerCase();
       const bs = String(bv).toLowerCase();
-      if (as < bs) return activeDirection === "asc" ? -1 : 1;
-      if (as > bs) return activeDirection === "asc" ? 1 : -1;
+      if (as < bs) return effectiveDirection === "asc" ? -1 : 1;
+      if (as > bs) return effectiveDirection === "asc" ? 1 : -1;
       return 0;
     });
     return copy;
-  }, [data, columns, activeKey, activeDirection]);
+  }, [data, columns, effectiveKey, effectiveDirection]);
   const handleSortClick = (key) => {
     let nextDirection;
-    if (activeKey !== key) {
+    if (!activeKey || !activeDirection) {
+      nextDirection = baselineKey === key && baselineDirection ? baselineDirection : "asc";
+    } else if (activeKey !== key) {
       nextDirection = "asc";
     } else if (activeDirection === "asc") {
       nextDirection = "desc";