@mirror-physics/fractal-ui 0.2.0-next.63 → 0.2.0-next.65

package/dist/index.d.ts

@@ -255,6 +255,16 @@ interface SortableTableRowAction<T> {
     label: (row: T, index: number) => string;
     icon: (row: T, index: number) => ReactNode;
 }
+interface SortableTableSelection<T> {
+    /** Returns whether a row is selected. Selection is controlled by the consumer. */
+    isSelected: (row: T) => boolean;
+    /** Called when an individual row or the select-all control changes selection. */
+    onSelectedChange: (row: T, selected: boolean) => void;
+    /** Accessible name for an individual row's checkbox. */
+    getRowLabel: (row: T) => string;
+    /** Accessible name for the header checkbox. */
+    selectAllLabel?: string;
+}
 interface SortableTablePagination {
     page: number;
     pageSize: number;
@@ -262,6 +272,8 @@ interface SortableTablePagination {
 interface SortableTableProps<T> {
     columns: SortableTableColumn<T>[];
     data: T[];
+    /** Accessible name applied to the underlying table element. */
+    'aria-label'?: string;
     emptyMessage?: string;
     header?: ReactNode;
     size?: 'sm' | 'md' | 'lg';
@@ -282,6 +294,10 @@ interface SortableTableProps<T> {
      */
     pagination?: SortableTablePagination;
     highlightRow?: (row: T, index: number) => boolean;
+    /** Adds a leading checkbox column with controlled row selection. */
+    selection?: SortableTableSelection<T>;
+    /** Disabled rows remain visible but cannot be selected or activated. */
+    isRowDisabled?: (row: T) => boolean;
     /** Invoked when a row is selected. Enables pointer and keyboard row activation. */
     onRowClick?: (row: T, index: number) => void;
     /** Invoked when a row is double-clicked. */
@@ -289,7 +305,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, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, pagination, highlightRow, onRowClick, onRowDoubleClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
+declare function SortableTable<T>({ columns, data, 'aria-label': ariaLabel, emptyMessage, header, size, embedded, className, defaultSort, defaultSortKey, defaultSortDirection, sortKey: controlledKey, sortDirection: controlledDirection, onSortChange, pagination, highlightRow, selection, isRowDisabled, onRowClick, onRowDoubleClick, rowAction, }: SortableTableProps<T>): React.JSX.Element;
 
 interface TabItem {
     id: string;
@@ -545,4 +561,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SurfaceGhostProps, type TabItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SortableTableSelection, type SurfaceGhostProps, type TabItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };

package/dist/index.js

@@ -1340,6 +1340,7 @@ import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function SortableTable({
   columns,
   data,
+  "aria-label": ariaLabel,
   emptyMessage,
   header,
   size = "md",
@@ -1353,6 +1354,8 @@ function SortableTable({
   onSortChange,
   pagination,
   highlightRow,
+  selection,
+  isRowDisabled,
   onRowClick,
   onRowDoubleClick,
   rowAction
@@ -1400,6 +1403,10 @@ function SortableTable({
     const startIndex = (page - 1) * pageSize;
     return sorted.slice(startIndex, startIndex + pageSize);
   }, [pagination, sorted]);
+  const selectableRows = selection ? data.filter((row) => !isRowDisabled?.(row)) : [];
+  const selectedRowCount = selection ? selectableRows.filter(selection.isSelected).length : 0;
+  const allRowsSelected = selectableRows.length > 0 && selectedRowCount === selectableRows.length;
+  const someRowsSelected = selectedRowCount > 0 && !allRowsSelected;
   const handleSortClick = (key) => {
     let nextDirection;
     if (!activeKey || !activeDirection) {
@@ -1424,62 +1431,92 @@ function SortableTable({
   };
   return /* @__PURE__ */ jsx19("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ jsxs16("div", { className: "fractal-sortable-table-surface", children: [
     header && /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-header", children: header }),
-    visibleRows.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs16("table", { className: "fractal-sortable-table-table", children: [
-      /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
-        const isActive = activeKey === col.key && activeDirection !== null;
-        if (!col.sortable) {
+    visibleRows.length === 0 ? /* @__PURE__ */ jsx19("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ jsxs16("table", { "aria-label": ariaLabel, className: "fractal-sortable-table-table", children: [
+      /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs16("tr", { className: "fractal-sortable-table-thead-row", children: [
+        selection && /* @__PURE__ */ jsx19(
+          "th",
+          {
+            className: "fractal-sortable-table-th fractal-sortable-table-selection-cell",
+            scope: "col",
+            children: /* @__PURE__ */ jsx19(
+              Checkbox,
+              {
+                "aria-label": selection.selectAllLabel ?? "Select all rows",
+                checked: allRowsSelected,
+                disabled: selectableRows.length === 0,
+                indeterminate: someRowsSelected,
+                onCheckedChange: (checked) => {
+                  selectableRows.forEach((row) => {
+                    if (selection.isSelected(row) !== checked) {
+                      selection.onSelectedChange(row, checked);
+                    }
+                  });
+                }
+              }
+            )
+          }
+        ),
+        columns.map((col) => {
+          const isActive = activeKey === col.key && activeDirection !== null;
+          if (!col.sortable) {
+            return /* @__PURE__ */ jsx19(
+              "th",
+              {
+                className: "fractal-sortable-table-th",
+                scope: "col",
+                style: { width: col.width },
+                children: col.header
+              },
+              col.key
+            );
+          }
           return /* @__PURE__ */ jsx19(
             "th",
             {
-              className: "fractal-sortable-table-th",
+              className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
+              scope: "col",
               style: { width: col.width },
-              children: col.header
+              children: /* @__PURE__ */ jsxs16(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "fractal-sortable-table-sort-button",
+                    isActive && "fractal-sortable-table-sort-button--active"
+                  ),
+                  onClick: () => handleSortClick(col.key),
+                  "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
+                  children: [
+                    /* @__PURE__ */ jsx19("span", { children: col.header }),
+                    /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx19(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx19(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx19(ArrowsUpDown, { size: 14 }) })
+                  ]
+                }
+              )
             },
             col.key
           );
-        }
-        return /* @__PURE__ */ jsx19(
-          "th",
-          {
-            className: "fractal-sortable-table-th fractal-sortable-table-th--sortable",
-            style: { width: col.width },
-            children: /* @__PURE__ */ jsxs16(
-              "button",
-              {
-                type: "button",
-                className: cn(
-                  "fractal-sortable-table-sort-button",
-                  isActive && "fractal-sortable-table-sort-button--active"
-                ),
-                onClick: () => handleSortClick(col.key),
-                "aria-sort": isActive ? activeDirection === "asc" ? "ascending" : "descending" : "none",
-                children: [
-                  /* @__PURE__ */ jsx19("span", { children: col.header }),
-                  /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-sort-icon", "aria-hidden": "true", children: isActive && activeDirection === "asc" ? /* @__PURE__ */ jsx19(ArrowUp, { size: 14 }) : isActive && activeDirection === "desc" ? /* @__PURE__ */ jsx19(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx19(ArrowsUpDown, { size: 14 }) })
-                ]
-              }
-            )
-          },
-          col.key
-        );
-      }) }) }),
+        })
+      ] }) }),
       /* @__PURE__ */ jsx19("tbody", { children: visibleRows.map((row, rowIndex) => {
         const highlighted = highlightRow?.(row, rowIndex) ?? false;
-        const interactive = Boolean(onRowClick || onRowDoubleClick);
-        const action = rowAction ? {
+        const disabled = isRowDisabled?.(row) ?? false;
+        const interactive = !disabled && Boolean(onRowClick || onRowDoubleClick);
+        const action = !disabled && rowAction ? {
           label: rowAction.label(row, rowIndex),
           icon: rowAction.icon(row, rowIndex)
         } : null;
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsxs16(
           "tr",
           {
             className: cn(
               "fractal-sortable-table-row",
               highlighted && "fractal-sortable-table-row--highlighted",
-              interactive && "fractal-sortable-table-row--interactive"
+              interactive && "fractal-sortable-table-row--interactive",
+              disabled && "fractal-sortable-table-row--disabled"
             ),
-            onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
-            onDoubleClick: onRowDoubleClick ? () => onRowDoubleClick(row, rowIndex) : void 0,
+            "data-disabled": disabled || void 0,
+            onClick: !disabled && onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+            onDoubleClick: !disabled && onRowDoubleClick ? () => onRowDoubleClick(row, rowIndex) : void 0,
             onKeyDown: interactive ? (event) => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
@@ -1488,23 +1525,38 @@ function SortableTable({
               }
             } : void 0,
             "aria-label": action?.label,
+            "aria-disabled": disabled || void 0,
             role: interactive ? "button" : void 0,
             tabIndex: interactive ? 0 : void 0,
-            children: columns.map((col, columnIndex) => /* @__PURE__ */ jsxs16(
-              "td",
-              {
-                className: cn(
-                  "fractal-sortable-table-td",
-                  action && columnIndex === columns.length - 1 && "fractal-sortable-table-td--row-action"
-                ),
-                style: { width: col.width, textAlign: col.align ?? "left" },
-                children: [
-                  col.render(row, rowIndex),
-                  action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
-                ]
-              },
-              col.key
-            ))
+            children: [
+              selection && /* @__PURE__ */ jsx19("td", { className: "fractal-sortable-table-td fractal-sortable-table-selection-cell", children: /* @__PURE__ */ jsx19(
+                Checkbox,
+                {
+                  "aria-label": selection.getRowLabel(row),
+                  checked: !disabled && selection.isSelected(row),
+                  disabled,
+                  onClick: (event) => event.stopPropagation(),
+                  onCheckedChange: (checked) => {
+                    if (!disabled) selection.onSelectedChange(row, checked);
+                  }
+                }
+              ) }),
+              columns.map((col, columnIndex) => /* @__PURE__ */ jsxs16(
+                "td",
+                {
+                  className: cn(
+                    "fractal-sortable-table-td",
+                    action && columnIndex === columns.length - 1 && "fractal-sortable-table-td--row-action"
+                  ),
+                  style: { width: col.width, textAlign: col.align ?? "left" },
+                  children: [
+                    col.render(row, rowIndex),
+                    action && columnIndex === columns.length - 1 && /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-row-action", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("span", { className: "fractal-sortable-table-row-action__icon", children: action.icon }) })
+                  ]
+                },
+                col.key
+              ))
+            ]
           },
           rowIndex
         );