@duro-app/ui 0.23.0 → 0.25.0

package/src/components/Table/useDataTable.ts

@@ -0,0 +1,99 @@
+import {useCallback, useState} from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  type ColumnDef,
+  type SortingState,
+  type ColumnFiltersState,
+  type PaginationState,
+  type RowSelectionState,
+  type Table,
+} from '@tanstack/react-table'
+
+export interface UseDataTableOptions<TData> {
+  /** Initial pagination state */
+  pagination?: {pageSize?: number; pageIndex?: number}
+  /** Enable sorting on columns that don't explicitly disable it */
+  enableSorting?: boolean
+  /** Enable column filtering */
+  enableFiltering?: boolean
+  /** Enable row selection (checkbox) */
+  enableRowSelection?: boolean | ((row: any) => boolean)
+  /** Callback when row selection changes */
+  onRowSelectionChange?: (selection: RowSelectionState) => void
+}
+
+/**
+ * Thin wrapper around TanStack's useReactTable.
+ * Pre-configures row models for pagination, sorting, and filtering.
+ * Returns the full TanStack table instance.
+ *
+ * @example
+ * ```tsx
+ * const table = useDataTable(users, columns, {
+ *   pagination: { pageSize: 20 },
+ *   enableSorting: true,
+ *   enableFiltering: true,
+ * })
+ * ```
+ */
+export function useDataTable<TData>(
+  data: TData[],
+  columns: ColumnDef<TData, any>[],
+  options: UseDataTableOptions<TData> = {},
+): Table<TData> {
+  const {
+    enableSorting = false,
+    enableFiltering = false,
+    enableRowSelection = false,
+    onRowSelectionChange: onSelectionChangeProp,
+  } = options
+
+  const enablePagination = options.pagination != null
+
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: options.pagination?.pageIndex ?? 0,
+    pageSize: options.pagination?.pageSize ?? 10,
+  })
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const handleRowSelectionChange = useCallback(
+    (updater: any) => {
+      setRowSelection((prev: RowSelectionState) => {
+        const next = typeof updater === 'function' ? updater(prev) : updater
+        onSelectionChangeProp?.(next)
+        return next
+      })
+    },
+    [onSelectionChangeProp],
+  )
+
+  // Follow TanStack's recommended pattern: always pass all row models
+  // unconditionally and let the library handle unused ones. Conditional
+  // spreads create unstable option shapes that can trigger infinite loops.
+  return useReactTable({
+    data,
+    columns,
+    state: {sorting, columnFilters, pagination, rowSelection},
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    enableSorting,
+    enableRowSelection:
+      typeof enableRowSelection === 'function' ? enableRowSelection : !!enableRowSelection,
+    onRowSelectionChange: handleRowSelectionChange,
+    // When pagination is disabled, set a very large page size to show all rows
+    ...(!enablePagination && {
+      autoResetPageIndex: false,
+    }),
+  })
+}

package/src/components/Textarea/Textarea.tsx

@@ -41,6 +41,7 @@ export function Textarea({
   const effectiveOnChange = onChange ?? fieldCtx?.onChange
   const effectiveOnBlur = onBlur ?? fieldCtx?.onBlur
   const effectiveRef = ref ?? fieldCtx?.ref
+  const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
 
   return (
@@ -52,7 +53,7 @@ export function Textarea({
       rows={rows}
       value={effectiveValue}
       defaultValue={defaultValue}
-      disabled={disabled}
+      disabled={effectiveDisabled}
       aria-describedby={
         ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
       }

package/src/docs/helpers.tsx

@@ -64,7 +64,7 @@ export function TypeScaleTable({rows, label}: TypeScaleTableProps) {
   return (
     <html.div>
       {label && <html.h3 style={styles.label}>{label}</html.h3>}
-      <Table.Root columns={4} variant="striped" size="sm">
+      <Table.Root variant="striped" size="sm">
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Step</Table.HeaderCell>
@@ -106,7 +106,7 @@ export function TokenTable({tokens, label}: TokenTableProps) {
   return (
     <html.div>
       {label && <html.h3 style={styles.label}>{label}</html.h3>}
-      <Table.Root columns={3} variant="striped" size="sm">
+      <Table.Root variant="striped" size="sm">
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Token</Table.HeaderCell>

package/src/index.ts

@@ -8,6 +8,7 @@ export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
+export {ButtonGroup} from './components/ButtonGroup/ButtonGroup'
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
@@ -20,6 +21,7 @@ export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {List, type ListSelectionMode} from './components/List/List'
 export {Field} from './components/Field/Field'
 export {Form, type FormProps} from './components/Form/Form'
+export type {LabelPosition, NecessityIndicator} from './components/Form/FormContext'
 export {Fieldset, type FieldsetGap} from './components/Fieldset/Fieldset'
 export {Input, type InputVariant} from './components/Input/Input'
 export {InputGroup} from './components/InputGroup/InputGroup'
@@ -32,6 +34,7 @@ export {Menu} from './components/Menu/Menu'
 export {Panel} from './components/Panel/Panel'
 export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
+export {Combobox} from './components/Combobox/Combobox'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
@@ -41,6 +44,8 @@ export {
   type StatusIconVariant,
 } from './components/StatusIcon/StatusIcon'
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
+// TanStack Table: consumers install @tanstack/react-table directly and use
+// Table.Pagination, Table.SortIndicator, Table.ColumnFilter for styled integration
 export {Tabs} from './components/Tabs/Tabs'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {ThemeProvider, type ThemeName} from './components/ThemeProvider/ThemeProvider'

package/src/strict.css

@@ -1,2 +1,7 @@
 @layer reset;
 @react-strict-dom;
+
+/* Table: reveal sort indicator on header cell hover */
+[role='columnheader']:hover [data-sort-indicator] {
+  opacity: 1 !important;
+}