@acronis-platform/ui-react 5.3.1 → 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.js +142 -141
- 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/index.js +33 -32
- package/dist/llms/segment-control.md +161 -0
- package/dist/llms.txt +5 -1
- package/dist/react.js +33 -32
- package/dist/src/components/ui/data-table/data-table.d.ts +9 -3
- package/dist/src/components/ui/data-table/data-table.docs.d.ts +13 -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/index.d.ts +1 -0
- package/dist/ui-react.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
# SegmentControl
|
|
2
|
+
|
|
3
|
+
> 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.
|
|
4
|
+
|
|
5
|
+
**Status:** ready · **Category:** selection · **Since:** v5.4.0
|
|
6
|
+
|
|
7
|
+
## Import
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { SegmentControl, SegmentControlItem } from '@acronis-platform/ui-react'
|
|
11
|
+
import { SquareDashedIcon } from '@acronis-platform/icons-react/stroke-mono'
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Quick example
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
<SegmentControl variant="fill" defaultValue="active" aria-label="Status">
|
|
19
|
+
<SegmentControlItem value="active" hasCounter counter={{ variant: 'neutral', size: 'sm', icon: <SquareDashedIcon size={16} />, children: '7' }}>
|
|
20
|
+
Active
|
|
21
|
+
</SegmentControlItem>
|
|
22
|
+
<SegmentControlItem value="completed">Completed</SegmentControlItem>
|
|
23
|
+
<SegmentControlItem value="all">All</SegmentControlItem>
|
|
24
|
+
</SegmentControl>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Use SegmentControl to switch among a small number of mutually exclusive views,
|
|
28
|
+
filters, or modes when the current choice should remain visible.
|
|
29
|
+
|
|
30
|
+
## When to use
|
|
31
|
+
|
|
32
|
+
- Switch between two related views with `variant="hug"`.
|
|
33
|
+
- Switch between three or more peer views across an available row with
|
|
34
|
+
`variant="fill"`.
|
|
35
|
+
- Show a compact per-view count by enabling `hasCounter` and passing Tag props
|
|
36
|
+
through an item's `counter`.
|
|
37
|
+
|
|
38
|
+
## When not to use
|
|
39
|
+
|
|
40
|
+
- A multi-select formatting or filter control — use **ToggleGroup**.
|
|
41
|
+
- A long list or form selection needing descriptions — use **RadioGroup** or
|
|
42
|
+
**Select**.
|
|
43
|
+
- Navigation that also swaps page panels — use **Tabs**.
|
|
44
|
+
|
|
45
|
+
## Example (React)
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import { SegmentControl, SegmentControlItem } from '@acronis-platform/ui-react';
|
|
49
|
+
import { SquareDashedIcon } from '@acronis-platform/icons-react/stroke-mono';
|
|
50
|
+
|
|
51
|
+
<SegmentControl variant="fill" defaultValue="active" aria-label="Status">
|
|
52
|
+
<SegmentControlItem
|
|
53
|
+
value="active"
|
|
54
|
+
hasCounter
|
|
55
|
+
counter={{
|
|
56
|
+
variant: 'neutral',
|
|
57
|
+
size: 'sm',
|
|
58
|
+
icon: <SquareDashedIcon size={16} />,
|
|
59
|
+
children: '7',
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
Active
|
|
63
|
+
</SegmentControlItem>
|
|
64
|
+
<SegmentControlItem value="completed">Completed</SegmentControlItem>
|
|
65
|
+
<SegmentControlItem value="all">All</SegmentControlItem>
|
|
66
|
+
</SegmentControl>;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Give the group a meaningful accessible name. Each item needs a unique `value`.
|
|
70
|
+
|
|
71
|
+
## Props
|
|
72
|
+
|
|
73
|
+
| Prop | Type | Default | Required | Description |
|
|
74
|
+
|------|------|---------|----------|-------------|
|
|
75
|
+
| `variant` | `'hug' | 'fill'` | `'hug'` | no | Layout mode. Use `hug` for one or two items; `fill` makes the control and its direct items share the available inline width for three or more. |
|
|
76
|
+
| `has-scroll` | `boolean` | `false` | no | Puts the items on a horizontally scrollable track and pins a pair of paging chevrons to its inline end. Items keep their natural width so the track can overflow, which takes precedence over `fill`'s item stretching. |
|
|
77
|
+
| `scroll-prev-label` | `string` | `'Previous'` | no | Accessible label for the previous-page chevron. |
|
|
78
|
+
| `scroll-next-label` | `string` | `'Next'` | no | Accessible label for the next-page chevron. |
|
|
79
|
+
| `value` | `string` | — | no | Controlled selected item value. Pair with value-change. |
|
|
80
|
+
| `default-value` | `string` | — | no | Initially selected item value when uncontrolled. |
|
|
81
|
+
| `disabled` | `boolean` | `false` | no | Disables every group item; items may also be disabled individually. |
|
|
82
|
+
| `name` | `string` | — | no | Form field name submitted with the selected value. |
|
|
83
|
+
| `required` | `boolean` | `false` | no | Requires a selected item before a containing form submits. |
|
|
84
|
+
| `item.has-counter` | `boolean` | `false` | no | Enables the item's trailing Tag counter. |
|
|
85
|
+
| `item.counter` | `{ variant, size, icon, children }` | — | no | Tag props used only when item.has-counter is true. |
|
|
86
|
+
|
|
87
|
+
## Events
|
|
88
|
+
|
|
89
|
+
| Event | Payload | Description |
|
|
90
|
+
|-------|---------|-------------|
|
|
91
|
+
| `value-change` | `string` | Fired for an enabled selection change; React exposes `onValueChange(value, details)`. |
|
|
92
|
+
|
|
93
|
+
## Content slots
|
|
94
|
+
|
|
95
|
+
| Slot | Description |
|
|
96
|
+
|------|-------------|
|
|
97
|
+
| `default` | SegmentControlItem children. Every item requires a unique value and label content; its Tag counter renders only when hasCounter is true. |
|
|
98
|
+
|
|
99
|
+
## Behavior
|
|
100
|
+
|
|
101
|
+
### Selection
|
|
102
|
+
|
|
103
|
+
**Given** a SegmentControl with items
|
|
104
|
+
**When** a user clicks an enabled item, presses `Space`, or navigates with an
|
|
105
|
+
arrow key
|
|
106
|
+
**Then** that item becomes the only selected item
|
|
107
|
+
**And** the group emits `value-change` with its value.
|
|
108
|
+
|
|
109
|
+
**Given** controlled `value`
|
|
110
|
+
**When** a user selects another item
|
|
111
|
+
**Then** the component emits `value-change`
|
|
112
|
+
**And** the visual selection changes only when the consumer updates `value`.
|
|
113
|
+
|
|
114
|
+
### Layout
|
|
115
|
+
|
|
116
|
+
**Given** one or two items
|
|
117
|
+
**When** `variant` is `hug` (the default)
|
|
118
|
+
**Then** the control takes only the width its content needs.
|
|
119
|
+
|
|
120
|
+
**Given** three or more items in an available row
|
|
121
|
+
**When** `variant` is `fill`
|
|
122
|
+
**Then** the control fills that row and direct items share its available width.
|
|
123
|
+
|
|
124
|
+
### Counter and disabled items
|
|
125
|
+
|
|
126
|
+
**Given** an item with `hasCounter` set to `true`
|
|
127
|
+
**When** it renders
|
|
128
|
+
**Then** its configured Tag follows the label within the item.
|
|
129
|
+
|
|
130
|
+
**Given** `counter` configuration without `hasCounter`
|
|
131
|
+
**When** the item renders
|
|
132
|
+
**Then** no Tag is rendered.
|
|
133
|
+
|
|
134
|
+
**Given** a disabled group or item
|
|
135
|
+
**When** the user attempts to select it
|
|
136
|
+
**Then** its value does not change and no value-change event is emitted.
|
|
137
|
+
|
|
138
|
+
## Accessibility
|
|
139
|
+
|
|
140
|
+
## Role and name
|
|
141
|
+
|
|
142
|
+
- The root has `role="radiogroup"`; every item has `role="radio"` and exposes
|
|
143
|
+
`aria-checked`.
|
|
144
|
+
- Supply an accessible name to the group through `aria-label` or
|
|
145
|
+
`aria-labelledby`. Item labels and counters form each item's accessible name.
|
|
146
|
+
|
|
147
|
+
## Keyboard and focus
|
|
148
|
+
|
|
149
|
+
- `Tab` and `Shift+Tab` enter and leave the radio group at its roving tab stop.
|
|
150
|
+
- Arrow keys move selection and focus between enabled items, respecting writing
|
|
151
|
+
direction as provided by the underlying radio-group primitive.
|
|
152
|
+
- `Space` selects the focused item. Disabled items cannot be selected.
|
|
153
|
+
- Keyboard focus displays the 3px `--ui-focus-primary` ring; pointer focus does
|
|
154
|
+
not.
|
|
155
|
+
|
|
156
|
+
## Contrast and disabled state
|
|
157
|
+
|
|
158
|
+
- Idle, hover, and selected foreground/surface pairs resolve through the
|
|
159
|
+
SegmentControl token tier, preserving brand and light/dark overrides.
|
|
160
|
+
- Disabled items are inert and visually muted. Do not use a disabled option as
|
|
161
|
+
the only way to communicate essential status.
|
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 };
|
|
@@ -68,10 +68,10 @@ type DataTableDataSourceProps<TData, TValue> = {
|
|
|
68
68
|
* configured on that instance). Makes `columns`/`data` unnecessary (they're
|
|
69
69
|
* only used to build DataTable's own instance) and the following props
|
|
70
70
|
* no-ops (configure the equivalent directly on the external instance
|
|
71
|
-
* instead): `columnVisibility`, `onColumnVisibilityChange`,
|
|
71
|
+
* instead): `getRowId`, `columnVisibility`, `onColumnVisibilityChange`,
|
|
72
72
|
* `onColumnSizingChange`, `enableColumnResizing`,
|
|
73
73
|
* `enableColumnReordering`, `columnOrder`, `onColumnOrderChange`,
|
|
74
|
-
* `getRowCanExpand`,
|
|
74
|
+
* `getRowCanExpand`, `rowSelection`, `onRowSelectionChange`,
|
|
75
75
|
* `manualSorting`, `sorting`, `onSortingChange`, `paginationMode`,
|
|
76
76
|
* `onLoadMore`, `loadMoreRootMargin`, `hasNextPage`, `isLoadingMore`.
|
|
77
77
|
* `meta.pin`-driven column pinning is also skipped — pin/unpin the
|
|
@@ -80,6 +80,12 @@ type DataTableDataSourceProps<TData, TValue> = {
|
|
|
80
80
|
table: TanstackTable<TData>;
|
|
81
81
|
};
|
|
82
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;
|
|
83
89
|
/** Enables row expansion for rows that return true. Pair with `renderExpandedRow`. */
|
|
84
90
|
getRowCanExpand?: (row: Row<TData>) => boolean;
|
|
85
91
|
/**
|
|
@@ -256,5 +262,5 @@ interface DataTableOwnProps<TData> {
|
|
|
256
262
|
headerHints?: Partial<DataTableHeaderHints>;
|
|
257
263
|
}
|
|
258
264
|
export type DataTableProps<TData, TValue = unknown> = DataTableOwnProps<TData> & DataTableDataSourceProps<TData, TValue>;
|
|
259
|
-
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, columnSearchPlaceholder, showAllColumnsLabel, noColumnsFoundLabel, 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;
|
|
260
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. */
|
|
@@ -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 };
|
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';
|