diff --git a/docs/component-migration-map.md b/docs/component-migration-map.md index 75be009c..37b28f8f 100644 --- a/docs/component-migration-map.md +++ b/docs/component-migration-map.md @@ -75,12 +75,12 @@ export const COMPONENT_MIGRATION_MAP = { StreamingTable: { type: "removed", to: null, - note: "Use Table with the table hooks (useTableModel/useTableSorting/etc.).", + note: "Use FlexGrid with createFlexGrid, fed by useStreamingBuffer.", }, EnhancedTable: { type: "removed", to: null, - note: "Use Table with the table hooks (useTableModel/useTableSorting/etc.).", + note: "Use DataGrid with createDataGrid.", }, WindowMockup: { type: "removed", to: null }, diff --git a/docs/ui-usage.md b/docs/ui-usage.md index 6c695f4b..4ad3b465 100644 --- a/docs/ui-usage.md +++ b/docs/ui-usage.md @@ -132,7 +132,7 @@ the shared fallback. This works with PathScale Fonts and application-owned font - **Dates**: Calendar, RangeCalendar, DatePicker, DateRangePicker (internal date engine); DateField, TimeField (separate segmented editors) - **Color**: ColorPicker, ColorArea, ColorSlider, ColorSwatch(+Picker), ColorWheel, ComplexColorWheel, ColorWheelFlower, ThemeColorPicker - **Overlays**: Modal, Drawer, Popover, Dropdown, Menu, Toast, Disclosure(+Group), Accordion -- **Data**: DataGrid (assembled, `createDataGrid` model), FlexGrid (incremental reveal, `createFlexGrid` model), Table (headless compound + hooks), plus primitives `useVirtualRows`, `useStreamingBuffer`, `useStreamingSubscription` +- **Data**: DataGrid (assembled, `createDataGrid` model), FlexGrid (incremental reveal, `createFlexGrid` model), Table (headless compound, bring your own model), plus primitives `useStreamingBuffer`, `useStreamingSubscription` - **Auth kit**: AuthForm, AuthCard, AuthFieldGroup, AuthSubmitButton, AuthFooterLinks, AuthPoweredBy, AuthErrorMessage, AuthSuccessMessage — Layouts composing Button/Card/fields. Their spacing, alignment and tone are recipe parameters (`gap`, `align`, `variant`), so a consumer asks for the presentation it wants rather than restating utility classes. AuthCard exposes `header`, `headings`, `title`, `description`, `branding`, `body` and `footer` as `data-slot` targets. - **Visual FX**: MetalBorder (WebGL liquid-metal border; presets `chromatic|silver|gold`, `kind="pill"|"circle"`, `glow`, `strength` 0-100, `theme="dark"|"light"|"auto"`), GlowCard (mouse-tracking glow), NoiseBackground (animated gradient blobs), ImmersiveLanding (full mini-app w/ PWA widgets), VideoPreview, LiveChat, ChatBubble, LanguageSwitcher @@ -353,24 +353,35 @@ can address the trigger and the field by name instead of guessing at the markup. ## Table (headless assembly) +`Table` is the compound for markup you write yourself. It has no model of its +own: the row model hooks -- `useTableModel`, `useTableSorting`, +`useTablePagination`, `useTableFiltering`, `useTableExpansion`, +`useTableSelection` -- went out with TanStack, and nothing replaced them +in that shape. Reach for `Table` only when you need markup `DataGrid` +cannot draw, such as an animated expanded row or a bespoke row component, +and drive it from `createDataGrid`: + ```tsx -import { useTableModel, useTableSorting, useTablePagination, TableRoot, TableContent, ... } from "@pathscale/ui"; - -const sorting = useTableSorting(); -const pagination = useTablePagination(); // default page sizes [10,25,50,100] -const table = useTableModel({ - data: () => rows(), columns, - sorting: sorting.sorting, setSorting: sorting.setSorting, - pagination: pagination.pagination, setPagination: pagination.setPagination, - enableSorting: true, enablePagination: true, -}); -// render table.getHeaderGroups()/getRowModel().rows into: -// … +import { createDataGrid, Table, TableSortIcon } from "@pathscale/ui"; + +const grid = createDataGrid({ columns, rows: props.rows, pageSize: 10 }); + +// grid.visibleColumns() for the header, grid.pageRows() for the body, +// grid.sort() / grid.setSort for , +// grid.page() / grid.pageCount() / grid.switchPage() for pagination. ``` -- State-slice hooks (all controlled-or-uncontrolled): `useTableSorting`, `useTableSelection`, `useTableFiltering` (per-column popovers + `getColumnFilterProps`), `useTablePagination` (⚠️ `nextPage(max)`/`lastPage(max)` need caller-supplied max page index), `useTableExpansion`. +If you do not need your own markup, use `DataGrid` instead: it draws the +header, rows, pagination and empty state from the same model. + +- The grid model owns sorting, filtering, paging, selection and grouping. + What it deliberately does not own is presentation state, such as which + filter popover is open, or which rows a bespoke table has expanded. A + consumer keeping its own markup owns that too, and should key expansion by + row id rather than index so sorting or paging does not leave the wrong row + open. - Parts: TableRoot/ScrollContainer/Content/Header/Column/Body/Row/Cell/ExpandedRow/Footer/PageSize/ResizableContainer/ColumnResizer/LoadMore(+Content), plus SortIcon, ExpandToggle, InlineConfirm, MobileListView (responsive card fallback), VirtualSpacerRow. -- **Virtualization is not built in.** `useVirtualRows` was a thin wrapper over `@tanstack/solid-virtual` that nothing in the library used; it was removed with the rest of TanStack. `VirtualSpacerRow` is still here for a caller that brings its own windowing. +- **Virtualization is not built in.** `useVirtualRows` was a thin wrapper over `@tanstack/solid-virtual` that nothing in the library used; it was removed with the rest of TanStack. For a long unpaged list use `createFlexGrid`, which reveals incrementally and removes the construction cost windowing was there to avoid. `VirtualSpacerRow` is still here for a caller that brings its own windowing. ## Motion diff --git a/src/components/toast/index.ts b/src/components/toast/index.ts index a54d0a31..b93d6214 100644 --- a/src/components/toast/index.ts +++ b/src/components/toast/index.ts @@ -1,3 +1,8 @@ +// Named rather than left as the default export. The package root +// re-exports this module's `default` and its `toast` function in one +// block, and the bundler collapsed both onto `toast`: `Toast` in the +// built entry became the toast *function*, so `Toast.Provider` and every +// other compound member was undefined for consumers. export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, @@ -5,6 +10,7 @@ export { DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, default, + default as Toast, type HeroUIToastOptions, ToastActionButton, type ToastActionButtonProps, diff --git a/src/index.ts b/src/index.ts index 3f9d66ca..f2b077b8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -527,7 +527,7 @@ export { DEFAULT_SCALE_FACTOR as DEFAULT_TOAST_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, - default as Toast, + Toast, ToastActionButton, ToastCloseButton, ToastContent,