diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index b7b4d4dc05..289a301701 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -679,7 +679,7 @@ export interface FieldLabelProps // @public (undocumented) export interface FilterState { // (undocumented) - onFilterChange: (filter: TFilter) => void; + onChange: (value: TFilter) => void; // (undocumented) value: TFilter | undefined; } @@ -1258,7 +1258,7 @@ export interface SearchFieldProps // @public (undocumented) export interface SearchState { // (undocumented) - onSearchChange: (value: string) => void; + onChange: (value: string) => void; // (undocumented) value: string; } diff --git a/packages/ui/src/components/Table/hooks/types.ts b/packages/ui/src/components/Table/hooks/types.ts index f6311b7ebe..a09fae0946 100644 --- a/packages/ui/src/components/Table/hooks/types.ts +++ b/packages/ui/src/components/Table/hooks/types.ts @@ -20,13 +20,13 @@ import type { SortDescriptor, TableItem, TableProps } from '../types'; /** @public */ export interface FilterState { value: TFilter | undefined; - onFilterChange: (filter: TFilter) => void; + onChange: (value: TFilter) => void; } /** @public */ export interface SearchState { value: string; - onSearchChange: (value: string) => void; + onChange: (value: string) => void; } /** @public */ diff --git a/packages/ui/src/components/Table/hooks/useTable.ts b/packages/ui/src/components/Table/hooks/useTable.ts index e024f8a335..6b653c41db 100644 --- a/packages/ui/src/components/Table/hooks/useTable.ts +++ b/packages/ui/src/components/Table/hooks/useTable.ts @@ -98,9 +98,16 @@ export function useTable( ): UseTableResult { const query = useQueryState(options); + const initialModeRef = useRef(options.mode); + if (initialModeRef.current !== options.mode) { + throw new Error( + `useTable mode cannot change from '${initialModeRef.current}' to '${options.mode}'. ` + + `The mode must remain stable for the lifetime of the component.`, + ); + } + let pagination: PaginationResult & { reload: () => void }; - // Conditional hooks - mode is stable for lifetime of component if (options.mode === 'complete') { pagination = useCompletePagination(options, query); } else if (options.mode === 'offset') { @@ -125,7 +132,7 @@ export function useTable( return { tableProps, reload: pagination.reload, - filter: { value: query.filter, onFilterChange: query.setFilter }, - search: { value: query.search, onSearchChange: query.setSearch }, + filter: { value: query.filter, onChange: query.setFilter }, + search: { value: query.search, onChange: query.setSearch }, }; } diff --git a/packages/ui/src/components/Table/stories/Table.dev.stories.tsx b/packages/ui/src/components/Table/stories/Table.dev.stories.tsx index 5be055cd01..1dea70e322 100644 --- a/packages/ui/src/components/Table/stories/Table.dev.stories.tsx +++ b/packages/ui/src/components/Table/stories/Table.dev.stories.tsx @@ -30,12 +30,12 @@ import { type ColumnConfig, } from '..'; import { Button } from '../../Button'; -import { TextField } from '../../TextField'; import { Select } from '../../Select'; import { Flex } from '../../Flex'; import { data as data1 } from './mocked-data1'; import { data as data4 } from './mocked-data4'; import { selectionData, selectionColumns, tableStoriesMeta } from './utils'; +import { SearchField } from '../../SearchField'; const meta = { title: 'Backstage UI/Table/dev', @@ -186,12 +186,11 @@ export const Search: Story = { return (
- search.onSearchChange(value)} style={{ marginBottom: '16px' }} + {...search} /> -