@duro-app/ui 0.24.0 → 0.25.0

package/src/components/Table/Table.stories.tsx

@@ -9,7 +9,10 @@ import {Button} from '../Button/Button'
 import {ActionBar} from '../ActionBar/ActionBar'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
-import {flexRender, createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, type SortingState, type ColumnFiltersState} from '@tanstack/react-table'
+import {flexRender, createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, type SortingState, type ColumnFiltersState, type PaginationState} from '@tanstack/react-table'
+import {useDataTable} from './useDataTable'
+import {Combobox} from '../Combobox/Combobox'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/Table',
@@ -429,30 +432,31 @@ export const AllVariants: Story = {
   },
 }
 
-
 // --- Sorting: demonstrates click-to-sort with hover indicators ---
 
-function SortingDemo() {
-  const data = [
-    {name: 'Traefik', role: 'Reverse Proxy', port: 443, uptime: '14d 3h'},
-    {name: 'Pi-hole', role: 'DNS Filter', port: 80, uptime: '14d 3h'},
-    {name: 'Grafana', role: 'Monitoring', port: 3000, uptime: '7d 12h'},
-    {name: 'Portainer', role: 'Container Mgmt', port: 9000, uptime: '2d 5h'},
-    {name: 'Nginx', role: 'Web Server', port: 8080, uptime: '30d 1h'},
-  ]
+type Service = {name: string; role: string; port: number; uptime: string}
 
-  const cols = [
-    createColumnHelper<typeof data[0]>().accessor('name', {header: 'Name', enableSorting: true}),
-    createColumnHelper<typeof data[0]>().accessor('role', {header: 'Role', enableSorting: true}),
-    createColumnHelper<typeof data[0]>().accessor('port', {header: 'Port', enableSorting: true}),
-    createColumnHelper<typeof data[0]>().accessor('uptime', {header: 'Uptime', enableSorting: true}),
-  ]
+const sortingData: Service[] = [
+  {name: 'Traefik', role: 'Reverse Proxy', port: 443, uptime: '14d 3h'},
+  {name: 'Pi-hole', role: 'DNS Filter', port: 80, uptime: '14d 3h'},
+  {name: 'Grafana', role: 'Monitoring', port: 3000, uptime: '7d 12h'},
+  {name: 'Portainer', role: 'Container Mgmt', port: 9000, uptime: '2d 5h'},
+  {name: 'Nginx', role: 'Web Server', port: 8080, uptime: '30d 1h'},
+]
+
+const sortingCols = [
+  createColumnHelper<Service>().accessor('name', {header: 'Name', enableSorting: true}),
+  createColumnHelper<Service>().accessor('role', {header: 'Role', enableSorting: true}),
+  createColumnHelper<Service>().accessor('port', {header: 'Port', enableSorting: true}),
+  createColumnHelper<Service>().accessor('uptime', {header: 'Uptime', enableSorting: true}),
+]
 
+function SortingDemo() {
   const [sorting, setSorting] = useState<SortingState>([])
 
   const table = useReactTable({
-    data,
-    columns: cols,
+    data: sortingData,
+    columns: sortingCols,
     state: {sorting},
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
@@ -501,22 +505,59 @@ export const Sorting: Story = {
   },
 }
 
+// --- Shared data helpers for interactive demos ---
+
+interface User {
+  name: string
+  role: string
+  status: string
+  email: string
+}
+
+const firstNames = [
+  'Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank',
+  'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul',
+  'Quinn', 'Rita', 'Sam', 'Tina', 'Uma', 'Vince', 'Wendy', 'Xander',
+  'Yara', 'Zach',
+]
+const lastNames = [
+  'Adams', 'Brown', 'Clark', 'Davis', 'Evans', 'Foster', 'Garcia',
+  'Hill', 'Ito', 'Jones', 'Kim', 'Lee', 'Moore', 'Nash', 'Owen',
+  'Patel', 'Quinn', 'Reed', 'Smith', 'Tran', 'Ueda', 'Voss', 'Wang',
+  'Xu', 'Yang', 'Zhang',
+]
+const roles = ['Admin', 'Editor', 'Viewer', 'Moderator', 'Analyst']
+const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']
+
+function generateUsers(count: number): User[] {
+  return Array.from({length: count}, (_, i) => {
+    const first = firstNames[i % firstNames.length]
+    const last = lastNames[(i * 7) % lastNames.length]
+    return {
+      name: `${first} ${last}`,
+      role: roles[i % roles.length],
+      status: statuses[i % statuses.length],
+      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+    }
+  })
+}
+
 // --- Pagination: demonstrates page navigation ---
 
-function PaginationDemo() {
-  const data = generateUsers(35)
+const paginationData = generateUsers(35)
 
-  const cols = [
-    createColumnHelper<User>().accessor('name', {header: 'Name'}),
-    createColumnHelper<User>().accessor('role', {header: 'Role'}),
-    createColumnHelper<User>().accessor('email', {header: 'Email'}),
-  ]
+const paginationCols = [
+  createColumnHelper<User>().accessor('name', {header: 'Name'}),
+  createColumnHelper<User>().accessor('role', {header: 'Role'}),
+  createColumnHelper<User>().accessor('email', {header: 'Email'}),
+]
 
+function PaginationDemo() {
   const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10})
 
   const table = useReactTable({
-    data,
-    columns: cols,
+    data: paginationData,
+    columns: paginationCols,
     state: {pagination},
     onPaginationChange: setPagination,
     getCoreRowModel: getCoreRowModel(),
@@ -564,21 +605,21 @@ export const WithPagination: Story = {
 
 // --- Filtering: demonstrates column filter inputs ---
 
-function FilteringDemo() {
-  const data = generateUsers(20)
+const filteringData = generateUsers(20)
 
-  const cols = [
-    createColumnHelper<User>().accessor('name', {header: 'Name', enableColumnFilter: true}),
-    createColumnHelper<User>().accessor('role', {header: 'Role', enableColumnFilter: false}),
-    createColumnHelper<User>().accessor('status', {header: 'Status', enableColumnFilter: false}),
-    createColumnHelper<User>().accessor('email', {header: 'Email', enableColumnFilter: true}),
-  ]
+const filteringCols = [
+  createColumnHelper<User>().accessor('name', {header: 'Name', enableColumnFilter: true}),
+  createColumnHelper<User>().accessor('role', {header: 'Role', enableColumnFilter: false}),
+  createColumnHelper<User>().accessor('status', {header: 'Status', enableColumnFilter: false}),
+  createColumnHelper<User>().accessor('email', {header: 'Email', enableColumnFilter: true}),
+]
 
+function FilteringDemo() {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 
   const table = useReactTable({
-    data,
-    columns: cols,
+    data: filteringData,
+    columns: filteringCols,
     state: {columnFilters},
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -628,44 +669,8 @@ export const WithFiltering: Story = {
   },
 }
 
-
 // --- FullFeatured: useDataTable with pagination, sorting, and filtering ---
 
-interface User {
-  name: string
-  role: string
-  status: string
-  email: string
-}
-
-const firstNames = [
-  'Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank',
-  'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul',
-  'Quinn', 'Rita', 'Sam', 'Tina', 'Uma', 'Vince', 'Wendy', 'Xander',
-  'Yara', 'Zach',
-]
-const lastNames = [
-  'Adams', 'Brown', 'Clark', 'Davis', 'Evans', 'Foster', 'Garcia',
-  'Hill', 'Ito', 'Jones', 'Kim', 'Lee', 'Moore', 'Nash', 'Owen',
-  'Patel', 'Quinn', 'Reed', 'Smith', 'Tran', 'Ueda', 'Voss', 'Wang',
-  'Xu', 'Yang', 'Zhang',
-]
-const roles = ['Admin', 'Editor', 'Viewer', 'Moderator', 'Analyst']
-const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']
-
-function generateUsers(count: number): User[] {
-  return Array.from({length: count}, (_, i) => {
-    const first = firstNames[i % firstNames.length]
-    const last = lastNames[(i * 7) % lastNames.length]
-    return {
-      name: `${first} ${last}`,
-      role: roles[i % roles.length],
-      status: statuses[i % statuses.length],
-      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
-    }
-  })
-}
-
 const fakeUsers = generateUsers(50)
 
 const columnHelper = createColumnHelper<User>()
@@ -674,35 +679,45 @@ const fullFeaturedColumns = [
   columnHelper.accessor('name', {
     header: 'Name',
     enableSorting: true,
-    enableColumnFilter: true,
+    enableColumnFilter: false,
   }),
   columnHelper.accessor('role', {
     header: 'Role',
     enableSorting: true,
-    enableColumnFilter: false,
+    enableColumnFilter: true,
   }),
   columnHelper.accessor('status', {
     header: 'Status',
     enableSorting: true,
-    enableColumnFilter: false,
+    enableColumnFilter: true,
   }),
   columnHelper.accessor('email', {
     header: 'Email',
     enableSorting: true,
-    enableColumnFilter: true,
+    enableColumnFilter: false,
   }),
 ]
 
 const fullFeaturedStyles = css.create({
   wrapper: {display: 'flex', flexDirection: 'column', gap: 0},
+  filterBar: {
+    display: 'flex',
+    gap: spacing.md,
+    paddingBottom: spacing.md,
+  },
   headerContent: {
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     cursor: 'pointer',
     userSelect: 'none',
   },
 })
 
+const uniqueRoles = [...new Set(fakeUsers.map((u) => u.role))].sort()
+const uniqueStatuses = [...new Set(fakeUsers.map((u) => u.status))].sort()
+
 function FullFeaturedDemo() {
   const table = useDataTable(fakeUsers, fullFeaturedColumns, {
     pagination: {pageSize: 10},
@@ -712,6 +727,48 @@ function FullFeaturedDemo() {
 
   return (
     <html.div style={fullFeaturedStyles.wrapper}>
+      <html.div style={fullFeaturedStyles.filterBar}>
+        <Combobox.Root
+          value={table.getColumn('role')?.getFilterValue() as string ?? ''}
+          onValueChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
+          onInputChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
+        >
+          <Combobox.Input placeholder="Filter role...">
+            <Combobox.Trigger />
+          </Combobox.Input>
+          <Combobox.Popup>
+            <Combobox.Item value="">
+              <Combobox.ItemText>All Roles</Combobox.ItemText>
+            </Combobox.Item>
+            {uniqueRoles.map((role) => (
+              <Combobox.Item key={role} value={role}>
+                <Combobox.ItemText>{role}</Combobox.ItemText>
+              </Combobox.Item>
+            ))}
+            <Combobox.Empty>No roles found</Combobox.Empty>
+          </Combobox.Popup>
+        </Combobox.Root>
+        <Combobox.Root
+          value={table.getColumn('status')?.getFilterValue() as string ?? ''}
+          onValueChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
+          onInputChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
+        >
+          <Combobox.Input placeholder="Filter status...">
+            <Combobox.Trigger />
+          </Combobox.Input>
+          <Combobox.Popup>
+            <Combobox.Item value="">
+              <Combobox.ItemText>All Statuses</Combobox.ItemText>
+            </Combobox.Item>
+            {uniqueStatuses.map((status) => (
+              <Combobox.Item key={status} value={status}>
+                <Combobox.ItemText>{status}</Combobox.ItemText>
+              </Combobox.Item>
+            ))}
+            <Combobox.Empty>No statuses found</Combobox.Empty>
+          </Combobox.Popup>
+        </Combobox.Root>
+      </html.div>
       <Table.Root>
         <Table.Header>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -725,12 +782,6 @@ function FullFeaturedDemo() {
                     {flexRender(header.column.columnDef.header, header.getContext())}
                     <Table.SortIndicator column={header.column} />
                   </html.div>
-                  {(header.column.id === 'name' || header.column.id === 'email') && (
-                    <Table.ColumnFilter
-                      column={header.column}
-                      placeholder={`Filter ${header.column.id}...`}
-                    />
-                  )}
                 </Table.HeaderCell>
               ))}
             </Table.Row>

package/src/components/Table/Table.tsx

@@ -1,4 +1,12 @@
-import {type ReactNode, type MutableRefObject, createContext, useContext, useRef, Children, isValidElement} from 'react'
+import {
+  type ReactNode,
+  type MutableRefObject,
+  createContext,
+  useContext,
+  useRef,
+  Children,
+  isValidElement,
+} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {Pagination} from './Pagination'
@@ -81,10 +89,7 @@ function Root({children, variant = 'default', size = 'md'}: RootProps) {
     <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
       <html.div
         role="table"
-        style={[
-          styles.root,
-          template ? styles.gridColumns(template) : undefined,
-        ]}
+        style={[styles.root, template ? styles.gridColumns(template) : undefined]}
       >
         {children}
       </html.div>

package/src/components/Table/useDataTable.ts

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   useReactTable,
   getCoreRowModel,
@@ -10,7 +10,6 @@ import {
   type ColumnFiltersState,
   type PaginationState,
   type RowSelectionState,
-  type TableOptions,
   type Table,
 } from '@tanstack/react-table'
 
@@ -47,67 +46,54 @@ export function useDataTable<TData>(
   options: UseDataTableOptions<TData> = {},
 ): Table<TData> {
   const {
-    pagination: paginationInit,
     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: paginationInit?.pageIndex ?? 0,
-    pageSize: paginationInit?.pageSize ?? 10,
+    pageIndex: options.pagination?.pageIndex ?? 0,
+    pageSize: options.pagination?.pageSize ?? 10,
   })
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
 
-  const handleRowSelectionChange = (updater: any) => {
-    setRowSelection(updater)
-    if (onSelectionChangeProp) {
-      const next = typeof updater === 'function' ? updater(rowSelection) : updater
-      onSelectionChangeProp(next)
-    }
-  }
+  const handleRowSelectionChange = useCallback(
+    (updater: any) => {
+      setRowSelection((prev: RowSelectionState) => {
+        const next = typeof updater === 'function' ? updater(prev) : updater
+        onSelectionChangeProp?.(next)
+        return next
+      })
+    },
+    [onSelectionChangeProp],
+  )
 
-  const tableOptions: TableOptions<TData> = {
+  // 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(),
-
-    // Sorting
-    ...(enableSorting && {
-      getSortedRowModel: getSortedRowModel(),
-      onSortingChange: setSorting,
-      state: {sorting},
-    }),
-
-    // Filtering
-    ...(enableFiltering && {
-      getFilteredRowModel: getFilteredRowModel(),
-      onColumnFiltersChange: setColumnFilters,
-    }),
-
-    // Pagination
-    ...(paginationInit && {
-      getPaginationRowModel: getPaginationRowModel(),
-      onPaginationChange: setPagination,
+    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,
     }),
-
-    // Row selection
-    ...(enableRowSelection && {
-      enableRowSelection: typeof enableRowSelection === 'function' ? enableRowSelection : true,
-      onRowSelectionChange: handleRowSelectionChange,
-    }),
-
-    // Merge all state
-    state: {
-      ...(enableSorting && {sorting}),
-      ...(enableFiltering && {columnFilters}),
-      ...(paginationInit && {pagination}),
-      ...(enableRowSelection && {rowSelection}),
-    },
-  }
-
-  return useReactTable(tableOptions)
+  })
 }

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/index.ts

@@ -21,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'
@@ -33,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'

package/src/strict.css

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