@acronis-platform/ui-react 5.3.0 → 5.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/data-table/data-table-bulk-actions-bar.js +1 -1
- package/dist/components/ui/data-table/data-table-bulk-actions-bar.js.map +1 -1
- package/dist/components/ui/data-table/data-table-view-options.js +3 -2
- package/dist/components/ui/data-table/data-table-view-options.js.map +1 -1
- package/dist/components/ui/data-table/data-table.js +149 -144
- package/dist/components/ui/data-table/data-table.js.map +1 -1
- package/dist/components/ui/segment-control/segment-control.js +99 -0
- package/dist/components/ui/segment-control/segment-control.js.map +1 -0
- package/dist/components/ui/table/table-view-options.js +88 -33
- package/dist/components/ui/table/table-view-options.js.map +1 -1
- package/dist/components/ui/table/table.js.map +1 -1
- package/dist/index.js +33 -32
- package/dist/llms/data-table.md +33 -7
- package/dist/llms/segment-control.md +161 -0
- package/dist/llms/table.md +56 -23
- package/dist/llms.txt +5 -1
- package/dist/react.js +33 -32
- package/dist/src/components/ui/data-table/data-table-view-options.d.ts +1 -1
- package/dist/src/components/ui/data-table/data-table.d.ts +19 -3
- package/dist/src/components/ui/data-table/data-table.docs.d.ts +19 -6
- package/dist/src/components/ui/segment-control/index.d.ts +1 -0
- package/dist/src/components/ui/segment-control/segment-control.d.ts +32 -0
- package/dist/src/components/ui/table/table-view-options.d.ts +9 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/ui-react.css +1 -1
- package/package.json +3 -3
package/dist/llms/table.md
CHANGED
|
@@ -73,21 +73,21 @@ sort and URL-synced state.
|
|
|
73
73
|
|
|
74
74
|
## Parts
|
|
75
75
|
|
|
76
|
-
| Part | Element | Purpose
|
|
77
|
-
| ------------------- | --------- |
|
|
78
|
-
| `Table` | `table` | The table, in a horizontally scrollable container.
|
|
79
|
-
| `TableHeader` | `thead` | Column-header section.
|
|
80
|
-
| `TableBody` | `tbody` | Data rows section.
|
|
81
|
-
| `TableFooter` | `tfoot` | Summary section with a top divider.
|
|
82
|
-
| `TableRow` | `tr` | A row; `selected` applies the active state.
|
|
83
|
-
| `TableHead` | `th` | Column header; `sortable` + `sortDirection` + `onSort`; `wrap`.
|
|
84
|
-
| `TableCell` | `td` | A data cell; `wrap` lets it grow to fit multi-line content.
|
|
85
|
-
| `TableSelectCell` | `td`/`th` | 32px leading selection cell for a `Checkbox`; `header` renders the select-all `th`.
|
|
86
|
-
| `TableActionsCell` | `td` | 48px trailing cell for a row's overflow trigger; owns the hover/press tint and focus ring.
|
|
87
|
-
| `TableSettingsCell` | `th` | 48px trailing header cell for the column-settings trigger.
|
|
88
|
-
| `TableCaption` | `caption` | Optional caption below the table.
|
|
89
|
-
| `TablePagination` | `div` | Plain-prop pagination bar (no TanStack dependency).
|
|
90
|
-
| `TableViewOptions` | `div` |
|
|
76
|
+
| Part | Element | Purpose |
|
|
77
|
+
| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
78
|
+
| `Table` | `table` | The table, in a horizontally scrollable container. |
|
|
79
|
+
| `TableHeader` | `thead` | Column-header section. |
|
|
80
|
+
| `TableBody` | `tbody` | Data rows section. |
|
|
81
|
+
| `TableFooter` | `tfoot` | Summary section with a top divider. |
|
|
82
|
+
| `TableRow` | `tr` | A row; `selected` applies the active state. |
|
|
83
|
+
| `TableHead` | `th` | Column header; `sortable` + `sortDirection` + `onSort`; `wrap`. |
|
|
84
|
+
| `TableCell` | `td` | A data cell; `wrap` lets it grow to fit multi-line content. |
|
|
85
|
+
| `TableSelectCell` | `td`/`th` | 32px leading selection cell for a `Checkbox`; `header` renders the select-all `th`. |
|
|
86
|
+
| `TableActionsCell` | `td` | 48px trailing cell for a row's overflow trigger; owns the hover/press tint and focus ring. |
|
|
87
|
+
| `TableSettingsCell` | `th` | 48px trailing header cell for the column-settings trigger. |
|
|
88
|
+
| `TableCaption` | `caption` | Optional caption below the table. |
|
|
89
|
+
| `TablePagination` | `div` | Plain-prop pagination bar (no TanStack dependency). |
|
|
90
|
+
| `TableViewOptions` | `div` | Searchable, internally scrolling show/hide-columns dropdown. Optional `category` values create labelled sections with per-category Show all actions; `iconOnly` fits `TableSettingsCell`. |
|
|
91
91
|
|
|
92
92
|
## Hooks
|
|
93
93
|
|
|
@@ -132,7 +132,7 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
|
|
|
132
132
|
Name
|
|
133
133
|
</TableHead>
|
|
134
134
|
|
|
135
|
-
// Wrappable cell — grows to fit multi-line content
|
|
135
|
+
// Wrappable cell — drops the fixed row height and grows to fit multi-line content
|
|
136
136
|
<TableCell wrap>{longDescription}</TableCell>
|
|
137
137
|
|
|
138
138
|
// Header row — select-all cell leading, column-settings cell trailing
|
|
@@ -142,7 +142,11 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
|
|
|
142
142
|
</TableSelectCell>
|
|
143
143
|
<TableHead>Name</TableHead>
|
|
144
144
|
<TableSettingsCell>
|
|
145
|
-
<TableViewOptions
|
|
145
|
+
<TableViewOptions
|
|
146
|
+
iconOnly
|
|
147
|
+
columns={columns}
|
|
148
|
+
onToggle={toggleColumn}
|
|
149
|
+
/>
|
|
146
150
|
</TableSettingsCell>
|
|
147
151
|
</TableRow>
|
|
148
152
|
|
|
@@ -176,7 +180,7 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
|
|
|
176
180
|
| `selected` | `boolean` | `false` | no | On a row — marks it selected (active row token + `data-state="selected"`). |
|
|
177
181
|
| `sortable` | `boolean` | `false` | no | On a column header — renders a focusable sort affordance and exposes `aria-sort`. |
|
|
178
182
|
| `sort-direction` | `'asc' | 'desc' | false` | `false` | no | On a sortable column header — the current sort direction (`false` = sortable but unsorted). Drives the sort icon and `aria-sort`. |
|
|
179
|
-
| `wrap` | `boolean` | `false` | no | On a cell or column header — allow the content to wrap onto multiple lines (`whitespace-normal`) and drop the fixed row height so the cell grows to fit multi-line content
|
|
183
|
+
| `wrap` | `boolean` | `false` | no | On a cell or column header — allow the content to wrap onto multiple lines (`whitespace-normal`) and drop the fixed row height so the cell grows to fit multi-line content. Default cells retain native table auto-layout; truncation is opt-in through a constrained cell or class. |
|
|
180
184
|
| `header` | `boolean` | `false` | no | On the select-cell — render the header's select-all cell (`<th>`) instead of a row's selection cell (`<td>`). |
|
|
181
185
|
| `bulk-selection-active` | `boolean` | `false` | no | On the actions-cell — suppress this row's actions because a *bulk* selection is in play: the cell keeps its 48px column (so the grid doesn't reflow) but renders no children and no hover/press tint. The threshold is one or more rows being selected — a single selected row is already a bulk selection and loses its row actions. With a TanStack table, pass `isBulkSelectionActive(table)` (from the data-table part) instead of re-deriving it. |
|
|
182
186
|
| `page-index` | `number` | — | yes | On the pagination part — the zero-based index of the current page. |
|
|
@@ -185,7 +189,7 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
|
|
|
185
189
|
| `page-size-options` | `number[]` | `[10, 20, 30, 40, 50]` | no | On the pagination part — the page-size options offered in the rows-per-page select. |
|
|
186
190
|
| `total-rows` | `number` | — | no | On the pagination part — total rows across all pages (drives the summary text). |
|
|
187
191
|
| `selected-rows` | `number` | — | no | On the pagination part — number of currently selected rows (drives the selection summary text). |
|
|
188
|
-
| `columns` | `{ id: string; label: string; hidden: boolean }[]` | — | yes | On the view-options part — the toggleable columns and their current visibility. |
|
|
192
|
+
| `columns` | `{ id: string; label: string; hidden: boolean; category?: string }[]` | — | yes | On the view-options part — the toggleable columns and their current visibility. Columns with the same optional category render in a labelled section with a per-category action that reveals every hidden column. |
|
|
189
193
|
| `rows-per-page-label` | `string` | `'Rows per page'` | no | On the pagination part — label of the rows-per-page select (also its accessible name). Override to localize. |
|
|
190
194
|
| `first-page-label` | `string` | `'Go to first page'` | no | On the pagination part — accessible name of the first-page control. |
|
|
191
195
|
| `previous-page-label` | `string` | `'Go to previous page'` | no | On the pagination part — accessible name of the previous-page control. |
|
|
@@ -196,7 +200,9 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
|
|
|
196
200
|
| `trigger-label` | `ReactNode` | `'View'` | no | On the view-options part — the trigger button label. Ignored when `icon-only` is set. |
|
|
197
201
|
| `icon-only` | `boolean` | `false` | no | On the view-options part — render the trigger as a cog-only icon button instead of a labelled button: the shape that fits the 48px `TableSettingsCell` column. |
|
|
198
202
|
| `trigger-aria-label` | `string` | `'Column settings'` | no | On the view-options part — accessible name of the `icon-only` trigger. Override to localize. |
|
|
199
|
-
| `
|
|
203
|
+
| `search-placeholder` | `string` | `'Search columns'` | no | On the view-options part — placeholder and accessible name of the in-dropdown column filter. Override to localize. |
|
|
204
|
+
| `show-all-label` | `ReactNode` | `'Show all'` | no | On the view-options part — visible label of each category action that reveals every hidden column in that category. Its accessible name also includes the category label. |
|
|
205
|
+
| `no-results-label` | `ReactNode` | `'No columns found.'` | no | On the view-options part — empty state shown when no column label matches the search query. Override to localize. |
|
|
200
206
|
|
|
201
207
|
## Events
|
|
202
208
|
|
|
@@ -311,7 +317,7 @@ Scenario: A wrapping cell grows the row
|
|
|
311
317
|
Given a TableCell (or TableHead) with wrap = true holding multi-line content
|
|
312
318
|
When it renders
|
|
313
319
|
Then it uses whitespace-normal and drops the fixed row height
|
|
314
|
-
And the row grows to fit the content
|
|
320
|
+
And the row grows to fit the content
|
|
315
321
|
```
|
|
316
322
|
|
|
317
323
|
### Pagination (TablePagination)
|
|
@@ -345,12 +351,36 @@ Scenario: Selection summary
|
|
|
345
351
|
|
|
346
352
|
```gherkin
|
|
347
353
|
Scenario: Toggling column visibility
|
|
348
|
-
Given a TableViewOptions with a { id, label, hidden }[] of columns
|
|
354
|
+
Given a TableViewOptions with a { id, label, hidden, category? }[] of columns
|
|
349
355
|
When the user toggles a column's checkbox in the dropdown
|
|
350
356
|
Then the toggle event fires with that column's id
|
|
351
357
|
And the consumer updates the column's hidden flag
|
|
352
358
|
```
|
|
353
359
|
|
|
360
|
+
```gherkin
|
|
361
|
+
Scenario: Searching columns
|
|
362
|
+
Given an open TableViewOptions
|
|
363
|
+
When the user types into the column search field
|
|
364
|
+
Then only columns whose labels contain the query remain
|
|
365
|
+
And an overridable empty state renders when no labels match
|
|
366
|
+
```
|
|
367
|
+
|
|
368
|
+
```gherkin
|
|
369
|
+
Scenario: Categorized columns
|
|
370
|
+
Given columns sharing a category
|
|
371
|
+
Then they render in a group programmatically named by that category
|
|
372
|
+
And the category's Show all action is also named with the category
|
|
373
|
+
When the user activates Show all
|
|
374
|
+
Then the toggle event fires once for every hidden column in that category
|
|
375
|
+
```
|
|
376
|
+
|
|
377
|
+
```gherkin
|
|
378
|
+
Scenario: A long column list scrolls inside the dropdown
|
|
379
|
+
Given the open column list is taller than the available viewport height
|
|
380
|
+
Then the 300px dropdown is capped to the available height
|
|
381
|
+
And the dropdown itself scrolls vertically
|
|
382
|
+
```
|
|
383
|
+
|
|
354
384
|
```gherkin
|
|
355
385
|
Scenario: The icon-only trigger fits the settings cell
|
|
356
386
|
Given a TableViewOptions with icon-only = true
|
|
@@ -425,7 +455,10 @@ headers natively. Use the parts as their elements intend.
|
|
|
425
455
|
items; each row shows a presentational checkbox box beside the column name and
|
|
426
456
|
the row itself carries `role="menuitemcheckbox"` + `aria-checked`. The trigger
|
|
427
457
|
has a visible "View" label, or — with `iconOnly` — is a cog-only icon button
|
|
428
|
-
named by `triggerAriaLabel` (default "Column settings").
|
|
458
|
+
named by `triggerAriaLabel` (default "Column settings"). Each categorized
|
|
459
|
+
group is named by its visible heading, and each repeated Show all action
|
|
460
|
+
combines its localized visible label with that category so assistive
|
|
461
|
+
technology can distinguish the actions.
|
|
429
462
|
|
|
430
463
|
## Contrast
|
|
431
464
|
|
package/dist/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Acronis UI Kit for React — LLM Reference
|
|
2
2
|
|
|
3
|
-
> `@acronis-platform/ui-react` v5.
|
|
3
|
+
> `@acronis-platform/ui-react` v5.4.0
|
|
4
4
|
|
|
5
5
|
Machine-readable component reference compiled from framework-agnostic specs.
|
|
6
6
|
Each entry links to a self-contained markdown file with props, behavior,
|
|
@@ -142,3 +142,7 @@ accessibility notes, and usage examples.
|
|
|
142
142
|
- [DropdownMenu](./llms/dropdown-menu.md): A menu of actions anchored to a trigger (typically a `ButtonMenu`), opened on demand. Composable parts — trigger, content, group (section), item, shortcut, submenu — built on the Base UI Menu primitive. Themed by the `--ui-button-menu-dropdown-*` token tier from @acronis-platform/tokens-pd.
|
|
143
143
|
- [Popover](./llms/popover.md): A floating panel anchored to a trigger, shown on demand for secondary content or quick actions. Built on the Base UI Popover primitive (positioning, focus management, outside-press / Esc dismissal). Ported from the legacy shadcn-uikit `Popover`; container chrome themed by the `--ui-popover-*` tier, with optional `PopoverBody`/`PopoverFooter` parts for the body-rhythm and default action-row recipe shown in Figma.
|
|
144
144
|
- [Sheet](./llms/sheet.md): A modal side panel anchored to a screen edge — for showing or acting on detailed information without leaving the page. Composable parts (trigger, overlay, content, header, title, close, body, description, footer) on the Base UI Dialog primitive, with a slide transition. Was `Details` in the Vue kit (re-exported under `Details*` aliases). Initial version ported from the legacy shadcn-uikit `Sheet`; design reconciliation against Figma (Cyber-Compliance node 3442-31542) is pending.
|
|
145
|
+
|
|
146
|
+
## Selection
|
|
147
|
+
|
|
148
|
+
- [SegmentControl](./llms/segment-control.md): A compact, single-choice control for switching between related views or filters. It has hug and fill layouts and may show a counter beside an item.
|
package/dist/react.js
CHANGED
|
@@ -59,14 +59,14 @@ import { InputSearch as L } from "./components/ui/input-search/input-search.js";
|
|
|
59
59
|
import { DataTableToolbar as Er } from "./components/ui/data-table/data-table-toolbar.js";
|
|
60
60
|
import { InputDatePicker as Dr } from "./components/ui/input-date-picker/input-date-picker.js";
|
|
61
61
|
import { DateRangePicker as Or } from "./components/ui/date-range-picker/date-range-picker.js";
|
|
62
|
-
import { DescriptionList as
|
|
63
|
-
import { InputBox as
|
|
64
|
-
import { InputText as
|
|
65
|
-
import { Loading as
|
|
66
|
-
import { Dialog as
|
|
67
|
-
import { DialogFooterCarousel as
|
|
68
|
-
import { DialogWelcome as
|
|
69
|
-
import { Empty as
|
|
62
|
+
import { DescriptionList as R, DescriptionListActions as kr, DescriptionListItem as Ar, DescriptionListLabel as jr, DescriptionListValue as Mr, DescriptionListValueDescription as Nr } from "./components/ui/description-list/description-list.js";
|
|
63
|
+
import { InputBox as Pr } from "./components/ui/input/input.js";
|
|
64
|
+
import { InputText as z } from "./components/ui/input-text/input-text.js";
|
|
65
|
+
import { Loading as Fr, loadingVariants as Ir } from "./components/ui/loading/loading.js";
|
|
66
|
+
import { Dialog as Lr, DialogClose as Rr } from "./components/ui/dialog/dialog.js";
|
|
67
|
+
import { DialogFooterCarousel as zr } from "./components/ui/dialog-footer-carousel/dialog-footer-carousel.js";
|
|
68
|
+
import { DialogWelcome as Br } from "./components/ui/dialog-welcome/dialog-welcome.js";
|
|
69
|
+
import { Empty as Vr, EmptyActions as Hr, EmptyDescription as Ur, EmptyHeader as Wr, EmptyIcon as Gr, EmptyLinks as Kr, EmptyTitle as qr } from "./components/ui/empty/empty.js";
|
|
70
70
|
import { EmptyOverlay as Jr, emptyOverlayIconVariants as Yr } from "./components/ui/empty-overlay/empty-overlay.js";
|
|
71
71
|
import { labelClassName as Xr } from "./components/ui/label/label.js";
|
|
72
72
|
import { Separator as Zr } from "./components/ui/separator/separator.js";
|
|
@@ -101,27 +101,28 @@ import { SankeyChart as ca } from "./components/ui/sankey-chart/sankey-chart.js"
|
|
|
101
101
|
import { ScatterChart as la } from "./components/ui/scatter-chart/scatter-chart.js";
|
|
102
102
|
import { ScrollArea as ua, ScrollBar as da } from "./components/ui/scroll-area/scroll-area.js";
|
|
103
103
|
import { Section as fa, SectionContent as pa, SectionHeader as ma, sectionVariants as ha, useSectionContext as ga } from "./components/ui/section/section.js";
|
|
104
|
-
import {
|
|
105
|
-
import {
|
|
106
|
-
import {
|
|
107
|
-
import {
|
|
108
|
-
import {
|
|
109
|
-
import {
|
|
110
|
-
import {
|
|
111
|
-
import {
|
|
112
|
-
import {
|
|
113
|
-
import {
|
|
114
|
-
import {
|
|
115
|
-
import {
|
|
116
|
-
import {
|
|
117
|
-
import {
|
|
118
|
-
import {
|
|
119
|
-
import {
|
|
120
|
-
import {
|
|
121
|
-
import {
|
|
122
|
-
import {
|
|
123
|
-
import {
|
|
124
|
-
import {
|
|
125
|
-
import {
|
|
126
|
-
import {
|
|
127
|
-
|
|
104
|
+
import { SegmentControl as _a, SegmentControlItem as va, segmentControlVariants as ya } from "./components/ui/segment-control/segment-control.js";
|
|
105
|
+
import { Sheet as H, SheetBody as U, SheetClose as W, SheetCloseButton as G, SheetContent as K, SheetDescription as q, SheetFooter as J, SheetHeader as Y, SheetOverlay as X, SheetPortal as Z, SheetTitle as Q, SheetTrigger as $, sheetVariants as ba } from "./components/ui/sheet/sheet.js";
|
|
106
|
+
import { SheetDetails as xa } from "./components/ui/sheet/sheet-details.js";
|
|
107
|
+
import { Slider as Sa } from "./components/ui/slider/slider.js";
|
|
108
|
+
import { Stack as Ca, stackVariants as wa } from "./components/ui/stack/stack.js";
|
|
109
|
+
import { Stepper as Ta } from "./components/ui/stepper/stepper.js";
|
|
110
|
+
import { StepperItem as Ea, stepperItemVariants as Da } from "./components/ui/stepper-item/stepper-item.js";
|
|
111
|
+
import { ResizableHandle as Oa, ResizablePanel as ka, ResizablePanelGroup as Aa } from "./components/ui/resizable/resizable.js";
|
|
112
|
+
import { SidebarPrimary as ja, SidebarPrimaryCollapseTrigger as Ma, SidebarPrimaryContent as Na, SidebarPrimaryFooter as Pa, SidebarPrimaryHeader as Fa, SidebarPrimaryMenu as Ia, SidebarPrimaryMenuItem as La, SidebarPrimaryMenuItemExtras as Ra, SidebarPrimarySection as za, sidebarPrimaryMenuItemVariants as Ba } from "./components/ui/sidebar-primary/sidebar-primary.js";
|
|
113
|
+
import { SidebarSecondary as Va, SidebarSecondaryCollapseTrigger as Ha, SidebarSecondaryContent as Ua, SidebarSecondaryFooter as Wa, SidebarSecondaryHeader as Ga, SidebarSecondaryMenu as Ka, SidebarSecondaryMenuItem as qa, SidebarSecondaryMenuItemExtras as Ja, SidebarSecondarySection as Ya, SidebarSecondarySectionLabel as Xa, sidebarSecondaryMenuItemVariants as Za } from "./components/ui/sidebar-secondary/sidebar-secondary.js";
|
|
114
|
+
import { ButtonIconMenu as Qa } from "./components/ui/button-icon-menu/button-icon-menu.js";
|
|
115
|
+
import { Tabs as $a, TabsContent as eo, TabsList as to, TabsTrigger as no } from "./components/ui/tabs/tabs.js";
|
|
116
|
+
import { Toaster as ro, toast as io, toastVariants as ao } from "./components/ui/toast/toast.js";
|
|
117
|
+
import { Toggle as oo, ToggleGroup as so, ToggleGroupItem as co } from "./components/ui/toggle-group/toggle-group.js";
|
|
118
|
+
import { Toolbar as lo, ToolbarActionList as uo, ToolbarActions as fo } from "./components/ui/toolbar/toolbar.js";
|
|
119
|
+
import { middleTruncate as po } from "./components/ui/truncate-text/middle-truncate.js";
|
|
120
|
+
import { measureTextWidth as mo } from "./components/ui/truncate-text/text-width.js";
|
|
121
|
+
import { TruncateText as ho } from "./components/ui/truncate-text/truncate-text.js";
|
|
122
|
+
import { Timeline as go, TimelineItem as _o } from "./components/ui/timeline/timeline.js";
|
|
123
|
+
import { Timer as vo } from "./components/ui/timer/timer.js";
|
|
124
|
+
import { TreeItem as yo } from "./components/ui/tree-item/tree-item.js";
|
|
125
|
+
import { Treemap as bo } from "./components/ui/treemap/treemap.js";
|
|
126
|
+
import { WidgetPlaceholder as xo, WidgetPlaceholderAction as So, WidgetPlaceholderContent as Co, WidgetPlaceholderFooter as wo, WidgetPlaceholderHeader as To, WidgetPlaceholderIcon as Eo, WidgetPlaceholderImage as Do, WidgetPlaceholderText as Oo, WidgetPlaceholderTitle as ko } from "./components/ui/widget-placeholder/widget-placeholder.js";
|
|
127
|
+
import { Wizard as Ao, WizardBody as jo, WizardHeader as Mo, WizardSubtitle as No } from "./components/ui/wizard/wizard.js";
|
|
128
|
+
export { _e as Accordion, xe as AccordionContainer, Se as AccordionContainerContent, Ce as AccordionContainerTrigger, ve as AccordionContent, ye as AccordionItem, be as AccordionTrigger, n as Alert, r as AlertActions, i as AlertClose, a as AlertContent, o as AlertDescription, s as AlertIcon, c as AlertText, l as AlertTitle, h as AppShellChat, g as AppShellChatChat, _ as AppShellChatChatBody, v as AppShellChatChatHeader, y as AppShellChatContent, b as AppShellChatContentBody, x as AppShellChatContentHeader, S as AppShellChatSidebar, ct as AreaChart, ut as Avatar, dt as AvatarFallback, ft as AvatarGroup, pt as AvatarImage, ce as BREAKPOINT_2XL, le as BREAKPOINT_3XL, ue as BREAKPOINT_4XL, de as BREAKPOINT_LG, fe as BREAKPOINT_XL, V as Badge, ht as BarChart, _t as Breadcrumb, vt as BreadcrumbEllipsis, yt as BreadcrumbItem, bt as BreadcrumbLink, xt as BreadcrumbList, St as BreadcrumbPage, Ct as BreadcrumbSeparator, wt as Button, Et as ButtonGroup, Dt as ButtonGroupItem, e as ButtonIcon, qt as ButtonIconInput, Qa as ButtonIconMenu, At as ButtonMenu, Le as CHART_BRUSH_ARIA_LABEL, Re as CHART_BRUSH_HEIGHT, T as CHART_CATEGORICAL_TOKENS, E as CHART_DEFAULT_PALETTE, D as CHART_DIVERGING_TOKENS, ze as CHART_LABEL_FILL_CLASS, Be as CHART_LABEL_FILL_ON_SERIES_CLASS, Ve as CHART_LABEL_FONT_SIZE, He as CHART_LABEL_MARGIN, Ue as CHART_REFERENCE_LINE_STROKE, O as CHART_SEQUENTIAL_TOKENS, un as CHART_STATE_ILLUSTRATIONS, k as CHART_STATUS_TOKENS, Mt as Calendar, Nt as CalendarDayButton, Wt as CalendarHeader, Gt as CalendarItem, Kt as CalendarPanel, Xt as Card, Zt as CardContent, tn as CardFilter, Qt as CardFooter, $t as CardHeader, rn as CardSection, sn as CardWidget, on as CardWidgetCarousel, cn as CategoryBar, ke as ChartContainer, Ae as ChartLegend, je as ChartLegendContent, dn as ChartState, Me as ChartStyle, Ne as ChartTooltip, Pe as ChartTooltipContent, fn as ChartWidget, pn as Checkbox, mn as Chip, gn as Combobox, _n as ComboboxContent, vn as ComboboxEmpty, yn as ComboboxGroup, bn as ComboboxGroupLabel, xn as ComboboxInput, Sn as ComboboxItem, Cn as ComboboxList, wn as ComposedChart, En as ConfidenceCone, re as DEFAULT_TABLE_URL_PARAM_KEYS, rr as DataTable, cr as DataTableBulkActionsBar, lr as DataTableColumnHeader, ur as DataTableExpandTrigger, dr as DataTablePagination, Er as DataTableToolbar, nr as DataTableViewOptions, Or as DateRangePicker, R as DescriptionList, kr as DescriptionListActions, Ar as DescriptionListItem, jr as DescriptionListLabel, Mr as DescriptionListValue, Nr as DescriptionListValueDescription, H as Details, U as DetailsBody, W as DetailsClose, G as DetailsCloseButton, K as DetailsContent, q as DetailsDescription, J as DetailsFooter, Y as DetailsHeader, X as DetailsOverlay, Z as DetailsPortal, Q as DetailsTitle, $ as DetailsTrigger, Lr as Dialog, Rr as DialogClose, zr as DialogFooterCarousel, Pt as DialogFooterDefault, Br as DialogWelcome, Dn as DropdownMenu, On as DropdownMenuCheckboxItem, kn as DropdownMenuContent, An as DropdownMenuGroup, jn as DropdownMenuItem, Mn as DropdownMenuLabel, Nn as DropdownMenuPortal, Pn as DropdownMenuRadioGroup, Fn as DropdownMenuRadioItem, In as DropdownMenuSeparator, Ln as DropdownMenuShortcut, Rn as DropdownMenuSub, zn as DropdownMenuSubContent, Bn as DropdownMenuSubTrigger, Vn as DropdownMenuTrigger, Vr as Empty, Hr as EmptyActions, Ur as EmptyDescription, Wr as EmptyHeader, Gr as EmptyIcon, Kr as EmptyLinks, Jr as EmptyOverlay, qr as EmptyTitle, fi as FUNNEL_CHART_DEFAULT_PALETTE, Qr as Field, $r as FieldContent, ei as FieldControl, ti as FieldDescription, ni as FieldError, ri as FieldGroup, ii as FieldLabel, ai as FieldLegend, oi as FieldSeparator, si as FieldSet, ci as FieldTitle, di as FilterCards, fr as FilterChips, pr as FilterChipsList, mr as FilterChipsReset, xr as FilterSearch, Sr as FilterSearchActions, Cr as FilterSearchAppliedFilters, wr as FilterSearchFilters, li as FittedActions, yi as Form, pi as FunnelChart, gi as Grid, vi as Histogram, z as Input, Pr as InputBox, Dr as InputDatePicker, Ti as InputNumPicker, Ei as InputOTP, Di as InputPassword, L as InputSearch, A as InputSelect, j as InputSelectContent, Ft as InputSelectDescription, It as InputSelectError, Lt as InputSelectExpander, Rt as InputSelectField, zt as InputSelectGroup, M as InputSelectItem, Bt as InputSelectLabel, Vt as InputSelectSearch, N as InputSelectSection, P as InputSelectSectionLabel, Ht as InputSelectStatus, F as InputSelectTrigger, I as InputSelectValue, z as InputText, B as InputTextArea, Oi as LineChart, Ai as Link, Fr as Loading, Fi as Metric, Ii as NumberField, Li as NumberFieldDecrement, Ri as NumberFieldGroup, zi as NumberFieldIncrement, Bi as NumberFieldInput, Vi as PageContent, Ui as PageHeader, Wi as PageHeaderActions, Gi as PageHeaderDescription, Ki as PageHeaderDescriptionRow, qi as PageHeaderRow, Ji as PageHeaderTags, Yi as PageHeaderTitle, Xi as Pagination, Zi as PaginationContent, Qi as PaginationEllipsis, $i as PaginationItem, ea as PaginationLink, ta as PaginationNext, na as PaginationPrevious, ra as PieChart, hr as Popover, gr as PopoverBody, _r as PopoverContent, vr as PopoverFooter, yr as PopoverPortal, br as PopoverTrigger, he as PortalContainerProvider, aa as Progress, oa as ProgressCircle, pe as ROOT_FONT_SIZE_PX, bi as RadarChart, Si as RadialBarChart, Ci as Radio, wi as RadioGroup, Oa as ResizableHandle, ka as ResizablePanel, Aa as ResizablePanelGroup, ca as SankeyChart, la as ScatterChart, ua as ScrollArea, da as ScrollBar, L as Search, fa as Section, pa as SectionContent, ma as SectionHeader, _a as SegmentControl, va as SegmentControlItem, A as Select, j as SelectContent, N as SelectGroup, P as SelectGroupLabel, M as SelectItem, F as SelectTrigger, I as SelectValue, Zr as Separator, H as Sheet, U as SheetBody, W as SheetClose, G as SheetCloseButton, K as SheetContent, q as SheetDescription, xa as SheetDetails, J as SheetFooter, Y as SheetHeader, X as SheetOverlay, Z as SheetPortal, Q as SheetTitle, $ as SheetTrigger, ja as SidebarPrimary, Ma as SidebarPrimaryCollapseTrigger, Na as SidebarPrimaryContent, Pa as SidebarPrimaryFooter, Fa as SidebarPrimaryHeader, Ia as SidebarPrimaryMenu, La as SidebarPrimaryMenuItem, Ra as SidebarPrimaryMenuItemExtras, za as SidebarPrimarySection, Va as SidebarSecondary, Ha as SidebarSecondaryCollapseTrigger, Ua as SidebarSecondaryContent, Wa as SidebarSecondaryFooter, Ga as SidebarSecondaryHeader, Ka as SidebarSecondaryMenu, qa as SidebarSecondaryMenuItem, Ja as SidebarSecondaryMenuItemExtras, Ya as SidebarSecondarySection, Xa as SidebarSecondarySectionLabel, Mi as Skeleton, Sa as Slider, Ca as Stack, Ta as Stepper, Ea as StepperItem, Yt as Switch, Hn as Table, Un as TableActionsCell, Wn as TableBody, Gn as TableCaption, Kn as TableCell, qn as TableFooter, Jn as TableHead, Yn as TableHeader, $n as TablePagination, Xn as TableRow, Zn as TableSelectCell, Qn as TableSettingsCell, er as TableViewOptions, $a as Tabs, eo as TabsContent, to as TabsList, no as TabsTrigger, V as Tag, B as Textarea, go as Timeline, _o as TimelineItem, vo as Timer, ro as Toaster, oo as Toggle, so as ToggleGroup, co as ToggleGroupItem, lo as Toolbar, uo as ToolbarActionList, fo as ToolbarActions, d as Tooltip, f as TooltipContent, p as TooltipProvider, m as TooltipTrigger, yo as TreeItem, bo as Treemap, Ni as TrendIndicator, ho as TruncateText, xo as WidgetPlaceholder, So as WidgetPlaceholderAction, Co as WidgetPlaceholderContent, wo as WidgetPlaceholderFooter, To as WidgetPlaceholderHeader, Eo as WidgetPlaceholderIcon, Do as WidgetPlaceholderImage, Oo as WidgetPlaceholderText, ko as WidgetPlaceholderTitle, Ao as Wizard, jo as WizardBody, Mo as WizardHeader, No as WizardSubtitle, u as alertVariants, lt as areaChartVariants, mt as avatarVariants, gt as barChartVariants, Ot as buttonGroupItemVariants, kt as buttonGroupVariants, Jt as buttonIconInputVariants, t as buttonIconVariants, jt as buttonMenuVariants, Tt as buttonVariants, nn as cardFilterVariants, an as cardSectionVariants, en as cardVariants, ln as categoryBarVariants, hn as chipVariants, ee as cn, Tn as composedChartVariants, ui as computeFittedVisibleCount, We as createTickFormatter, Ge as dropProjectionPayload, Yr as emptyOverlayIconVariants, Te as findDuplicateTones, Ke as formatCompactNumber, qe as formatPercent, mi as funnelChartPercent, hi as funnelChartVariants, C as getAppShellChatInitialLayout, ir as getCellStyle, ar as getColumnWidth, or as getPinnedStyle, me as getViewportWidth, _i as gridVariants, tr as isBulkSelectionActive, Xr as labelClassName, ki as lineChartVariants, ji as linkVariants, Ee as listPaletteChoices, De as listPaletteStops, Ir as loadingVariants, mo as measureTextWidth, po as middleTruncate, ie as parseTableUrlState, ia as pieChartVariants, sa as progressCircleVariants, xi as radarChartVariants, sr as reorderColumn, Je as resolveAnimation, Ye as resolveAxisDomain, Xe as resolveBrushProps, Ze as resolveCartesianLabelPosition, Qe as resolveCategoryRange, Fe as resolveChartColors, $e as resolveChartReferenceValue, et as resolveLabelFillClass, tt as resolveReferenceLineProps, nt as resolveRotatedTickAnchor, Oe as resolveSeriesColor, rt as resolveXAxisHeight, it as resolveXAxisTitle, at as resolveYAxisTitle, ha as sectionVariants, ya as segmentControlVariants, ae as serializeTableUrlState, ba as sheetVariants, Ba as sidebarPrimaryMenuItemVariants, Za as sidebarSecondaryMenuItemVariants, wa as stackVariants, Da as stepperItemVariants, Hi as tagVariants, Ie as toCssKey, ot as toLabelFormatter, st as toReferenceLineList, io as toast, ao as toastVariants, Pi as trendIndicatorVariants, we as useAccordionContainerContext, w as useAppShellChatInitialLayout, Tr as useFilterSearchFilters, Ut as useInputSelectFilter, ne as useIntersectionObserver, ge as usePortalContainer, ga as useSectionContext, te as useSortState, oe as useTableUrlState, se as useWizard };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Table } from '@tanstack/react-table';
|
|
2
2
|
import { TableViewOptionsProps } from '../table';
|
|
3
|
-
interface DataTableViewOptionsProps<TData> extends Pick<TableViewOptionsProps, 'triggerLabel' | 'iconOnly' | 'triggerAriaLabel'> {
|
|
3
|
+
interface DataTableViewOptionsProps<TData> extends Pick<TableViewOptionsProps, 'triggerLabel' | 'iconOnly' | 'triggerAriaLabel' | 'searchPlaceholder' | 'showAllLabel' | 'noResultsLabel'> {
|
|
4
4
|
table: Table<TData>;
|
|
5
5
|
}
|
|
6
6
|
export declare function DataTableViewOptions<TData>({ table, ...triggerProps }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,6 +9,10 @@ declare module '@tanstack/react-table' {
|
|
|
9
9
|
* row height); mirrors the `Table` primitives' `wrap` prop on TableHead/TableCell.
|
|
10
10
|
*/
|
|
11
11
|
wrap?: boolean;
|
|
12
|
+
/** Label shown for this column in the visibility dropdown. */
|
|
13
|
+
label?: string;
|
|
14
|
+
/** Optional visibility-dropdown category for this column. */
|
|
15
|
+
category?: string;
|
|
12
16
|
}
|
|
13
17
|
}
|
|
14
18
|
export declare function getPinnedStyle<TData>(column: Column<TData, unknown>): CSSProperties | undefined;
|
|
@@ -64,10 +68,10 @@ type DataTableDataSourceProps<TData, TValue> = {
|
|
|
64
68
|
* configured on that instance). Makes `columns`/`data` unnecessary (they're
|
|
65
69
|
* only used to build DataTable's own instance) and the following props
|
|
66
70
|
* no-ops (configure the equivalent directly on the external instance
|
|
67
|
-
* instead): `columnVisibility`, `onColumnVisibilityChange`,
|
|
71
|
+
* instead): `getRowId`, `columnVisibility`, `onColumnVisibilityChange`,
|
|
68
72
|
* `onColumnSizingChange`, `enableColumnResizing`,
|
|
69
73
|
* `enableColumnReordering`, `columnOrder`, `onColumnOrderChange`,
|
|
70
|
-
* `getRowCanExpand`,
|
|
74
|
+
* `getRowCanExpand`, `rowSelection`, `onRowSelectionChange`,
|
|
71
75
|
* `manualSorting`, `sorting`, `onSortingChange`, `paginationMode`,
|
|
72
76
|
* `onLoadMore`, `loadMoreRootMargin`, `hasNextPage`, `isLoadingMore`.
|
|
73
77
|
* `meta.pin`-driven column pinning is also skipped — pin/unpin the
|
|
@@ -76,6 +80,12 @@ type DataTableDataSourceProps<TData, TValue> = {
|
|
|
76
80
|
table: TanstackTable<TData>;
|
|
77
81
|
};
|
|
78
82
|
interface DataTableOwnProps<TData> {
|
|
83
|
+
/**
|
|
84
|
+
* Derives a stable row id from the row data (e.g. `row => row.id`) instead of the default
|
|
85
|
+
* array index — needed whenever `data` can reorder (sort/filter) while a row's own per-row
|
|
86
|
+
* state (selection, a hook keyed by row) should follow the row, not the slot it occupied.
|
|
87
|
+
*/
|
|
88
|
+
getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
|
|
79
89
|
/** Enables row expansion for rows that return true. Pair with `renderExpandedRow`. */
|
|
80
90
|
getRowCanExpand?: (row: Row<TData>) => boolean;
|
|
81
91
|
/**
|
|
@@ -237,6 +247,12 @@ interface DataTableOwnProps<TData> {
|
|
|
237
247
|
* Override to localize.
|
|
238
248
|
*/
|
|
239
249
|
columnSettingsLabel?: string;
|
|
250
|
+
/** Placeholder and accessible name of the column-visibility search field. */
|
|
251
|
+
columnSearchPlaceholder?: string;
|
|
252
|
+
/** Label of the per-category action that reveals every column. */
|
|
253
|
+
showAllColumnsLabel?: ReactNode;
|
|
254
|
+
/** Empty state shown when the column search has no matches. */
|
|
255
|
+
noColumnsFoundLabel?: ReactNode;
|
|
240
256
|
/**
|
|
241
257
|
* Copy of the tooltip shown while a header cell is hovered/focused — one
|
|
242
258
|
* line per capability that column actually has (sort/reorder/resize).
|
|
@@ -246,5 +262,5 @@ interface DataTableOwnProps<TData> {
|
|
|
246
262
|
headerHints?: Partial<DataTableHeaderHints>;
|
|
247
263
|
}
|
|
248
264
|
export type DataTableProps<TData, TValue = unknown> = DataTableOwnProps<TData> & DataTableDataSourceProps<TData, TValue>;
|
|
249
|
-
export declare function DataTable<TData, TValue = unknown>({ columns, data, table: externalTable, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, enableColumnReordering, columnOrder: controlledColumnOrder, onColumnOrderChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, rowSelection: controlledRowSelection, onRowSelectionChange, manualSorting, sorting: controlledSorting, onSortingChange, renderRow, renderEmptyState, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, resizeColumnLabel, emptyLabel, isLoadingMore, hideActionColumn, renderRowActions, rowActionsLabel, columnSettingsLabel, headerHints, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
265
|
+
export declare function DataTable<TData, TValue = unknown>({ columns, data, table: externalTable, getRowId, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, enableColumnReordering, columnOrder: controlledColumnOrder, onColumnOrderChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, rowSelection: controlledRowSelection, onRowSelectionChange, manualSorting, sorting: controlledSorting, onSortingChange, renderRow, renderEmptyState, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, resizeColumnLabel, emptyLabel, isLoadingMore, hideActionColumn, renderRowActions, rowActionsLabel, columnSettingsLabel, columnSearchPlaceholder, showAllColumnsLabel, noColumnsFoundLabel, headerHints, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
250
266
|
export {};
|
|
@@ -13,14 +13,21 @@ export interface DataTableProps {
|
|
|
13
13
|
* DataTable's own — DataTable then owns no state and renders the caller's
|
|
14
14
|
* instance as-is. Makes `columns`/`data` unnecessary and the following props
|
|
15
15
|
* no-ops (configure the equivalent on the external instance instead):
|
|
16
|
-
* `
|
|
17
|
-
* `
|
|
18
|
-
* `
|
|
19
|
-
* `
|
|
20
|
-
* `
|
|
21
|
-
*
|
|
16
|
+
* `getRowId`, `columnVisibility`, `onColumnVisibilityChange`,
|
|
17
|
+
* `onColumnSizingChange`, `enableColumnResizing`, `enableColumnReordering`,
|
|
18
|
+
* `columnOrder`, `onColumnOrderChange`, `getRowCanExpand`, `rowSelection`,
|
|
19
|
+
* `onRowSelectionChange`, `manualSorting`, `sorting`, `onSortingChange`,
|
|
20
|
+
* `paginationMode`, `onLoadMore`, `loadMoreRootMargin`, `hasNextPage`,
|
|
21
|
+
* `isLoadingMore`. `meta.pin`-driven column pinning is also skipped —
|
|
22
|
+
* pin/unpin the caller's own instance via TanStack's `column.pin()`.
|
|
22
23
|
*/
|
|
23
24
|
table?: unknown;
|
|
25
|
+
/**
|
|
26
|
+
* Derives a stable row id from the row data (e.g. `row => row.id`) instead of
|
|
27
|
+
* the default array index — needed whenever `data` can reorder while a row's
|
|
28
|
+
* own per-row state should follow the row, not the slot it occupied.
|
|
29
|
+
*/
|
|
30
|
+
getRowId?: (originalRow: unknown, index: number) => string;
|
|
24
31
|
/** Enables row expansion for rows that return true; pair with `renderExpandedRow`. */
|
|
25
32
|
getRowCanExpand?: (row: unknown) => boolean;
|
|
26
33
|
/** Renders the detail content for an expanded row. */
|
|
@@ -152,6 +159,12 @@ export interface DataTableProps {
|
|
|
152
159
|
rowActionsLabel?: string;
|
|
153
160
|
/** Accessible name of the action column's column-visibility trigger. */
|
|
154
161
|
columnSettingsLabel?: string;
|
|
162
|
+
/** Placeholder and accessible name of the column-visibility search field. */
|
|
163
|
+
columnSearchPlaceholder?: string;
|
|
164
|
+
/** Label of the per-category action that reveals every column. */
|
|
165
|
+
showAllColumnsLabel?: ReactNode;
|
|
166
|
+
/** Empty state shown when the column search has no matches. */
|
|
167
|
+
noColumnsFoundLabel?: ReactNode;
|
|
155
168
|
/**
|
|
156
169
|
* Copy of the tooltip shown while a header cell is hovered/focused — one
|
|
157
170
|
* `{ label, action }` line per capability that column actually has. Merged
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SegmentControl, SegmentControlItem, type SegmentControlItemProps, type SegmentControlProps, segmentControlVariants, } from './segment-control';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Radio as RadioPrimitive } from '@base-ui/react/radio';
|
|
2
|
+
import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import { TagProps } from '../tag';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
declare const segmentControlVariants: (props?: ({
|
|
7
|
+
variant?: "fill" | "hug" | null | undefined;
|
|
8
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
|
+
export interface SegmentControlProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive>, 'className'>, VariantProps<typeof segmentControlVariants> {
|
|
10
|
+
className?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Figma `hasScroll`: puts the items on a scrollable track and pins a pair of
|
|
13
|
+
* paging chevrons to the inline end. The chevron block reserves its width so
|
|
14
|
+
* the final item is never hidden underneath it. Items keep their natural
|
|
15
|
+
* width so the track can overflow, which takes precedence over `fill`'s item
|
|
16
|
+
* stretching.
|
|
17
|
+
*/
|
|
18
|
+
hasScroll?: boolean;
|
|
19
|
+
/** Accessible label for the previous-page chevron. */
|
|
20
|
+
scrollPrevLabel?: string;
|
|
21
|
+
/** Accessible label for the next-page chevron. */
|
|
22
|
+
scrollNextLabel?: string;
|
|
23
|
+
}
|
|
24
|
+
declare const SegmentControl: React.ForwardRefExoticComponent<SegmentControlProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export interface SegmentControlItemProps extends React.ComponentPropsWithoutRef<typeof RadioPrimitive.Root> {
|
|
26
|
+
/** Whether a Tag counter is rendered after the label. */
|
|
27
|
+
hasCounter?: boolean;
|
|
28
|
+
/** Tag configuration, applied only while `hasCounter` is true. */
|
|
29
|
+
counter?: Pick<TagProps, 'variant' | 'size' | 'icon' | 'children'>;
|
|
30
|
+
}
|
|
31
|
+
declare const SegmentControlItem: React.ForwardRefExoticComponent<SegmentControlItemProps & React.RefAttributes<HTMLSpanElement>>;
|
|
32
|
+
export { SegmentControl, SegmentControlItem, segmentControlVariants };
|
|
@@ -6,6 +6,8 @@ export interface TableColumnVisibility {
|
|
|
6
6
|
label: string;
|
|
7
7
|
/** Whether the column is currently hidden. */
|
|
8
8
|
hidden: boolean;
|
|
9
|
+
/** Optional section name used to group related columns in the dropdown. */
|
|
10
|
+
category?: string;
|
|
9
11
|
}
|
|
10
12
|
export interface TableViewOptionsProps {
|
|
11
13
|
/** The toggleable columns and their current visibility. */
|
|
@@ -21,8 +23,14 @@ export interface TableViewOptionsProps {
|
|
|
21
23
|
iconOnly?: boolean;
|
|
22
24
|
/** Accessible name of the `iconOnly` trigger. Override to localize. */
|
|
23
25
|
triggerAriaLabel?: string;
|
|
26
|
+
/** Placeholder and accessible name of the column filter. */
|
|
27
|
+
searchPlaceholder?: string;
|
|
28
|
+
/** Label of the action that reveals every column in a category. */
|
|
29
|
+
showAllLabel?: React.ReactNode;
|
|
30
|
+
/** Empty state shown when no column matches the search query. */
|
|
31
|
+
noResultsLabel?: React.ReactNode;
|
|
24
32
|
}
|
|
25
|
-
declare function TableViewOptions({ columns, onToggle, triggerLabel, iconOnly, triggerAriaLabel, }: TableViewOptionsProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
declare function TableViewOptions({ columns, onToggle, triggerLabel, iconOnly, triggerAriaLabel, searchPlaceholder, showAllLabel, noResultsLabel, }: TableViewOptionsProps): import("react/jsx-runtime").JSX.Element;
|
|
26
34
|
declare namespace TableViewOptions {
|
|
27
35
|
var displayName: string;
|
|
28
36
|
}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -79,6 +79,7 @@ export { InputSearch as Search, type InputSearchProps as SearchProps, } from './
|
|
|
79
79
|
export { InputTextArea as Textarea, type InputTextAreaProps as TextareaProps, } from './components/ui/input-text-area';
|
|
80
80
|
export * from './components/ui/section';
|
|
81
81
|
export * from './components/ui/select';
|
|
82
|
+
export * from './components/ui/segment-control';
|
|
82
83
|
export * from './components/ui/separator';
|
|
83
84
|
export * from './components/ui/sheet';
|
|
84
85
|
export * from './components/ui/skeleton';
|