@cueplusplus/ui 0.6.0 → 0.8.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/CHANGELOG.md +29 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/instruments/_data-row.d.ts +68 -0
- package/dist/instruments/_data-row.js +21 -0
- package/dist/instruments/_ledger-disclosure.js +103 -0
- package/dist/instruments/_ledger.d.ts +21 -0
- package/dist/instruments/_ledger.js +5 -0
- package/dist/instruments/index.d.ts +2 -1
- package/dist/instruments/index.js +2 -1
- package/dist/instruments/ledger.d.ts +112 -13
- package/dist/instruments/ledger.js +128 -38
- package/dist/instruments/table.d.ts +40 -2
- package/dist/instruments/table.js +35 -3
- package/manifest/components/data-row.json +5 -0
- package/manifest/components/data-tree.json +1 -0
- package/manifest/components/ledger.json +82 -7
- package/manifest/components/table.json +28 -4
- package/manifest/manifest.json +7 -7
- package/manifest/tokens.json +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# @cueplusplus/ui
|
|
2
2
|
|
|
3
|
+
## 0.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 4c7b963: `Ledger.Tier` and `Ledger.Group` take `collapsible`: the heading stays the `h2`/`h3` element it always was and gains a real `button[aria-expanded aria-controls]` inside it, which folds the run of rows below away. The heading outline is untouched, so a page that offers the same dataset folded and unfolded does not move a screen-reader user's heading list. Expansion is controlled or uncontrolled — `expanded`, `defaultExpanded`, `onExpandedChange` — and the library stores nothing: which places a reader folded is the caller's to keep. A folded run of rows is hidden rather than unmounted, so a group holding its own fold inside a tier still holds it after the tier above has been shut and opened again. A ledger nobody asks to fold renders exactly as before, with no client boundary.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- @cueplusplus/tokens@0.8.0
|
|
12
|
+
|
|
13
|
+
## 0.7.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- 1217d75: `Table.GroupRow` takes `headingLevel` (`2`–`6`), which makes the divider's label
|
|
18
|
+
slot a real heading element instead of a `<span>` — so a grouped table joins the
|
|
19
|
+
page's heading outline without nesting an `<h2>` inside a `<span>`, which is what
|
|
20
|
+
passing a heading as `label` had to do. It defaults to no heading, so every
|
|
21
|
+
existing divider is unchanged.
|
|
22
|
+
|
|
23
|
+
The row-activation reading is now public: `activateRowFromClick` and
|
|
24
|
+
`activateRowFromKeyDown` are exported from `@cueplusplus/ui`, so a `Table.Row` —
|
|
25
|
+
which owns its own activation — or any other element a console makes into a row
|
|
26
|
+
runs the same decision `DataRow.Root` runs, instead of a second copy of it.
|
|
27
|
+
|
|
28
|
+
### Patch Changes
|
|
29
|
+
|
|
30
|
+
- @cueplusplus/tokens@0.7.0
|
|
31
|
+
|
|
3
32
|
## 0.6.0
|
|
4
33
|
|
|
5
34
|
### Minor Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -66,6 +66,7 @@ import { Plussie, PlussieExpression, PlussieProps } from "./brand/plussie.js";
|
|
|
66
66
|
import "./brand/index.js";
|
|
67
67
|
import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
|
|
68
68
|
import "./icons/index.js";
|
|
69
|
+
import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
|
|
69
70
|
import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
|
|
70
71
|
import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
|
|
71
72
|
import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
|
|
@@ -124,4 +125,4 @@ import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOp
|
|
|
124
125
|
import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
|
|
125
126
|
import { useTheme } from "./system/use-theme.js";
|
|
126
127
|
import { DensityLevel, FontName, Mode, ThemeName } from "./system/index.js";
|
|
127
|
-
export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
|
|
128
|
+
export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
|
package/dist/index.js
CHANGED
|
@@ -67,6 +67,7 @@ import { Textarea } from "./forms/textarea.js";
|
|
|
67
67
|
import { ToggleGroup } from "./forms/toggle-group.js";
|
|
68
68
|
import { Toggle } from "./forms/toggle.js";
|
|
69
69
|
import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
|
|
70
|
+
import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
|
|
70
71
|
import { AppWindowFrame } from "./instruments/app-window-frame.js";
|
|
71
72
|
import { CopyButton } from "./instruments/copy-button.js";
|
|
72
73
|
import { DataRow } from "./instruments/data-row.js";
|
|
@@ -111,4 +112,4 @@ import { Kbd } from "./primitives/kbd.js";
|
|
|
111
112
|
import { Skeleton } from "./primitives/skeleton.js";
|
|
112
113
|
import { useControlHeight, useDensity } from "./system/use-density.js";
|
|
113
114
|
import { useTheme } from "./system/use-theme.js";
|
|
114
|
-
export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
|
|
115
|
+
export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import "../lib/cva.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
//#region src/instruments/_data-row.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Whether a click on a row means "open this row", and act on it if it does.
|
|
6
|
+
*
|
|
7
|
+
* Exported because more surfaces need this reading than ship a `DataRow.Root`:
|
|
8
|
+
* `Table.Row` documents activation as the caller's job, and a console that draws
|
|
9
|
+
* its list as a `<tr>` in one view and a `DataRow.Root` in another would
|
|
10
|
+
* otherwise run two implementations of one decision — which is how the table
|
|
11
|
+
* view quietly loses modifier-click on the row's link while the ledger view
|
|
12
|
+
* keeps it. `DataRow.Root` calls this exact function; so should you.
|
|
13
|
+
*
|
|
14
|
+
* Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
|
|
15
|
+
* the row is not simply a `<button>`:
|
|
16
|
+
*
|
|
17
|
+
* - **A control inside the row.** The action cluster, a menu trigger, a
|
|
18
|
+
* checkbox — pressing one is not the same gesture as picking the row. Anything
|
|
19
|
+
* under a `[data-stop]` ancestor is left entirely alone, which is why
|
|
20
|
+
* `DataRow.Actions` stamps that attribute on itself.
|
|
21
|
+
* - **A link inside the row.** A plain click on it should open the row's own
|
|
22
|
+
* surface (the drawer, the detail pane), so the anchor's navigation is
|
|
23
|
+
* suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
|
|
24
|
+
* whole value of having shipped a real `<a href>` in the first place.
|
|
25
|
+
* - **A secondary button.** Only the primary button activates; the middle
|
|
26
|
+
* button belongs to the browser.
|
|
27
|
+
* - **An already-handled event.** A caller's own `onClick` that called
|
|
28
|
+
* `preventDefault()` has said no.
|
|
29
|
+
*
|
|
30
|
+
* @param event The row's own click event.
|
|
31
|
+
* @param activate What "open this row" means to the surface.
|
|
32
|
+
* @example
|
|
33
|
+
* onClick={(event) => activateRowFromClick(event, () => open(row))}
|
|
34
|
+
* @example
|
|
35
|
+
* // The same decision on a table row, which owns its activation itself.
|
|
36
|
+
* <Table.Row
|
|
37
|
+
* interactive
|
|
38
|
+
* tabIndex={0}
|
|
39
|
+
* onClick={(event) => activateRowFromClick(event, () => open(device))}
|
|
40
|
+
* onKeyDown={(event) => activateRowFromKeyDown(event, () => open(device))}
|
|
41
|
+
* >
|
|
42
|
+
*/
|
|
43
|
+
declare function activateRowFromClick(event: React.MouseEvent<HTMLElement>, activate: () => void): void;
|
|
44
|
+
/**
|
|
45
|
+
* Whether a key press on a row means "open this row", and act on it if it does.
|
|
46
|
+
*
|
|
47
|
+
* The other half of {@link activateRowFromClick}, and not optional: a row that
|
|
48
|
+
* opens on click and not on Enter is reachable by pointer only. It fires only
|
|
49
|
+
* when the row itself has focus, so the element it is attached to needs a
|
|
50
|
+
* `tabIndex` — a `<div>` and a `<tr>` are both unfocusable by default, and this
|
|
51
|
+
* handler on an unfocusable row is dead code.
|
|
52
|
+
*
|
|
53
|
+
* Guarded on `event.target === event.currentTarget` so a control inside the row
|
|
54
|
+
* keeps its own keys: without it a rename field on a row could never contain a
|
|
55
|
+
* space, and every action button's Enter would also open the row behind it.
|
|
56
|
+
*
|
|
57
|
+
* Space is prevented rather than merely handled, because the browser's default
|
|
58
|
+
* for Space on a focused non-control is to scroll the page — a row that opened
|
|
59
|
+
* a drawer *and* jumped the list a screenful would read as a bug.
|
|
60
|
+
*
|
|
61
|
+
* @param event The row's own keydown event.
|
|
62
|
+
* @param activate What "open this row" means to the surface.
|
|
63
|
+
* @example
|
|
64
|
+
* onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
|
|
65
|
+
*/
|
|
66
|
+
declare function activateRowFromKeyDown(event: React.KeyboardEvent<HTMLElement>, activate: () => void): void;
|
|
67
|
+
//#endregion
|
|
68
|
+
export { activateRowFromClick, activateRowFromKeyDown };
|
|
@@ -59,6 +59,13 @@ const dataRowVariants = cva([
|
|
|
59
59
|
/**
|
|
60
60
|
* Whether a click on a row means "open this row", and act on it if it does.
|
|
61
61
|
*
|
|
62
|
+
* Exported because more surfaces need this reading than ship a `DataRow.Root`:
|
|
63
|
+
* `Table.Row` documents activation as the caller's job, and a console that draws
|
|
64
|
+
* its list as a `<tr>` in one view and a `DataRow.Root` in another would
|
|
65
|
+
* otherwise run two implementations of one decision — which is how the table
|
|
66
|
+
* view quietly loses modifier-click on the row's link while the ledger view
|
|
67
|
+
* keeps it. `DataRow.Root` calls this exact function; so should you.
|
|
68
|
+
*
|
|
62
69
|
* Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
|
|
63
70
|
* the row is not simply a `<button>`:
|
|
64
71
|
*
|
|
@@ -79,6 +86,14 @@ const dataRowVariants = cva([
|
|
|
79
86
|
* @param activate What "open this row" means to the surface.
|
|
80
87
|
* @example
|
|
81
88
|
* onClick={(event) => activateRowFromClick(event, () => open(row))}
|
|
89
|
+
* @example
|
|
90
|
+
* // The same decision on a table row, which owns its activation itself.
|
|
91
|
+
* <Table.Row
|
|
92
|
+
* interactive
|
|
93
|
+
* tabIndex={0}
|
|
94
|
+
* onClick={(event) => activateRowFromClick(event, () => open(device))}
|
|
95
|
+
* onKeyDown={(event) => activateRowFromKeyDown(event, () => open(device))}
|
|
96
|
+
* >
|
|
82
97
|
*/
|
|
83
98
|
function activateRowFromClick(event, activate) {
|
|
84
99
|
if (event.defaultPrevented || event.button !== 0) return;
|
|
@@ -94,6 +109,12 @@ function activateRowFromClick(event, activate) {
|
|
|
94
109
|
/**
|
|
95
110
|
* Whether a key press on a row means "open this row", and act on it if it does.
|
|
96
111
|
*
|
|
112
|
+
* The other half of {@link activateRowFromClick}, and not optional: a row that
|
|
113
|
+
* opens on click and not on Enter is reachable by pointer only. It fires only
|
|
114
|
+
* when the row itself has focus, so the element it is attached to needs a
|
|
115
|
+
* `tabIndex` — a `<div>` and a `<tr>` are both unfocusable by default, and this
|
|
116
|
+
* handler on an unfocusable row is dead code.
|
|
117
|
+
*
|
|
97
118
|
* Guarded on `event.target === event.currentTarget` so a control inside the row
|
|
98
119
|
* keeps its own keys: without it a rename field on a row could never contain a
|
|
99
120
|
* space, and every action button's Enter would also open the row behind it.
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { ChevronRightGlyph } from "../chrome/_glyphs.js";
|
|
4
|
+
import { headingTag } from "./_ledger.js";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
//#region src/instruments/_ledger-disclosure.tsx
|
|
8
|
+
/**
|
|
9
|
+
* A heading that folds the rows beneath it: the accordion pattern, once, for
|
|
10
|
+
* both of the ledger's headings.
|
|
11
|
+
*
|
|
12
|
+
* ## Why the button is inside the heading rather than instead of it
|
|
13
|
+
*
|
|
14
|
+
* This is the disclosure shape the APG calls an accordion, and the one
|
|
15
|
+
* `Table.GroupRow`'s own note already points at — *"a real
|
|
16
|
+
* `<button aria-expanded aria-controls>` inside this cell, never the row
|
|
17
|
+
* itself"*. The heading element survives, so the page's `h2`/`h3` outline is
|
|
18
|
+
* unchanged whether a tier folds or not, and a screen-reader user who navigates
|
|
19
|
+
* a two-hundred-row ledger by heading — which is what the outline is *for* —
|
|
20
|
+
* finds the same places in the same order either way. Making the heading the
|
|
21
|
+
* button, or replacing it with one, would trade that outline for a control, and
|
|
22
|
+
* the outline is the more valuable of the two.
|
|
23
|
+
*
|
|
24
|
+
* The glyph is `aria-hidden`, so the button's accessible name is the heading's
|
|
25
|
+
* own words. A reader hears "Ours, 13, collapsed button", not "button".
|
|
26
|
+
*
|
|
27
|
+
* ## Why the folded rows are hidden rather than unmounted
|
|
28
|
+
*
|
|
29
|
+
* A folded run of rows stays mounted inside a panel that carries `hidden`. The
|
|
30
|
+
* obvious alternative — dropping the children while the run is shut, so that
|
|
31
|
+
* folding something away costs nothing to have folded — is wrong here, and the
|
|
32
|
+
* reason is that **the rows are not always inert**. A `Ledger.Group` inside a
|
|
33
|
+
* tier is itself a disclosure holding its own uncontrolled state: unmount it
|
|
34
|
+
* and that state goes with it, so a reader who folds three groups, folds the
|
|
35
|
+
* tier over them and opens it again finds all three sprung back open. A control
|
|
36
|
+
* that says nothing about touching them had quietly undone their work. React
|
|
37
|
+
* state below a fold is the caller's too, and this component is not entitled to
|
|
38
|
+
* throw it away.
|
|
39
|
+
*
|
|
40
|
+
* Nothing is given up in exchange. A `hidden` subtree is out of the
|
|
41
|
+
* accessibility tree exactly as an absent one is — no heading in it reaches the
|
|
42
|
+
* outline, no row in it answers `getByRole`, and a screen reader walks past all
|
|
43
|
+
* of it — so the two forms are indistinguishable to the reader this component
|
|
44
|
+
* is built for. What differs is only that the caller's state survives.
|
|
45
|
+
*
|
|
46
|
+
* The panel element itself would have to stay in any case: `aria-controls` must
|
|
47
|
+
* name an element that exists, and pointed at a node that leaves with its
|
|
48
|
+
* contents it becomes a dangling reference and an `aria-valid-attr-value`
|
|
49
|
+
* failure — the very trap `DataRowDisclosure.controls` documents.
|
|
50
|
+
*
|
|
51
|
+
* ## Why the folded panel wears no classes at all
|
|
52
|
+
*
|
|
53
|
+
* `hidden` is a UA rule, `[hidden] { display: none }`, and **any author
|
|
54
|
+
* `display` beats it**: a panel that keeps `flex` while it is `hidden` is a
|
|
55
|
+
* panel that is not hidden. Rather than fight that with a `display` utility
|
|
56
|
+
* whose win depends on Tailwind's emission order, the folded panel is given no
|
|
57
|
+
* class list at all, and the layout classes come back when it opens.
|
|
58
|
+
*
|
|
59
|
+
* Keeping the rows mounted is what makes this load-bearing rather than tidy.
|
|
60
|
+
* When the panel was emptied on folding there was nothing inside to leak; now
|
|
61
|
+
* the panel's own `display: none` is the only thing standing between a folded
|
|
62
|
+
* run of rows and a visible one. It is enough — a `display: none` element
|
|
63
|
+
* generates no boxes for any of its descendants, whatever `display` each of
|
|
64
|
+
* them asks for — but it has to actually apply, and jsdom cannot see whether it
|
|
65
|
+
* does, which is why `tests/browser/data-surfaces.spec.ts` reads the computed
|
|
66
|
+
* `display` on both real engines.
|
|
67
|
+
*/
|
|
68
|
+
function LedgerDisclosure({ headingLevel, headingSlot, headingClassName, toggleSlot, toggleClassName, panelSlot, panelClassName, label, expanded: expandedProp, defaultExpanded = true, onExpandedChange, children }) {
|
|
69
|
+
const [selfExpanded, setSelfExpanded] = React.useState(defaultExpanded);
|
|
70
|
+
const expanded = expandedProp ?? selfExpanded;
|
|
71
|
+
const panelId = React.useId();
|
|
72
|
+
const Heading = headingTag(headingLevel);
|
|
73
|
+
const toggle = () => {
|
|
74
|
+
const next = !expanded;
|
|
75
|
+
if (expandedProp === void 0) setSelfExpanded(next);
|
|
76
|
+
onExpandedChange?.(next);
|
|
77
|
+
};
|
|
78
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
|
|
79
|
+
"data-slot": headingSlot,
|
|
80
|
+
className: headingClassName,
|
|
81
|
+
children: /* @__PURE__ */ jsxs("button", {
|
|
82
|
+
type: "button",
|
|
83
|
+
"data-slot": toggleSlot,
|
|
84
|
+
"aria-expanded": expanded,
|
|
85
|
+
"aria-controls": panelId,
|
|
86
|
+
onClick: toggle,
|
|
87
|
+
className: toggleClassName,
|
|
88
|
+
children: [/* @__PURE__ */ jsx(ChevronRightGlyph, {
|
|
89
|
+
"aria-hidden": "true",
|
|
90
|
+
"data-slot": `${toggleSlot}-glyph`,
|
|
91
|
+
className: cn("size-icon-sm shrink-0 self-center transition-transform duration-150 motion-reduce:transition-none", expanded ? "rotate-90" : null)
|
|
92
|
+
}), label]
|
|
93
|
+
})
|
|
94
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
95
|
+
id: panelId,
|
|
96
|
+
"data-slot": panelSlot,
|
|
97
|
+
hidden: !expanded,
|
|
98
|
+
className: expanded ? panelClassName : void 0,
|
|
99
|
+
children
|
|
100
|
+
})] });
|
|
101
|
+
}
|
|
102
|
+
//#endregion
|
|
103
|
+
export { LedgerDisclosure };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
//#region src/instruments/_ledger.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* The outline half of the ledger, in a module carrying no runtime directive.
|
|
4
|
+
*
|
|
5
|
+
* `ledger.tsx` renders on the server and has to keep doing so — a document of
|
|
6
|
+
* two hundred rows that ships its own JavaScript in order to be *read* is
|
|
7
|
+
* exactly what the static form exists to avoid — while the disclosure in
|
|
8
|
+
* `_ledger-disclosure.tsx` holds React state and is therefore `"use client"`.
|
|
9
|
+
*
|
|
10
|
+
* A server module may **render** a client one, but it may not **call into** it:
|
|
11
|
+
* every value imported from a `"use client"` file is a client reference, and
|
|
12
|
+
* invoking one during a server render throws rather than returning a tag name.
|
|
13
|
+
* So the two symbols both halves need — what a heading level is, and which
|
|
14
|
+
* element it names — live here, in a plain module either graph can compile,
|
|
15
|
+
* instead of being copied into both and drifting the day one of them learns
|
|
16
|
+
* about `h5`.
|
|
17
|
+
*/
|
|
18
|
+
/** The heading elements a tier or a group may be given. */
|
|
19
|
+
type LedgerHeadingLevel = 2 | 3 | 4;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { LedgerHeadingLevel };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
|
|
1
2
|
import { AppWindowFrame, AppWindowFrameProps } from "./app-window-frame.js";
|
|
2
3
|
import { CopyButton, CopyButtonProps } from "./copy-button.js";
|
|
3
4
|
import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./data-row.js";
|
|
@@ -13,4 +14,4 @@ import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHead
|
|
|
13
14
|
import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./terminal-frame.js";
|
|
14
15
|
import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./two-step-button.js";
|
|
15
16
|
import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./usage-chart.js";
|
|
16
|
-
export { AppWindowFrame, type AppWindowFrameProps, CopyButton, type CopyButtonProps, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Meter, type MeterProps, type MeterProvenance, type MeterTone, Progress, type ProgressProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, Sparkline, type SparklineProps, Stat, type StatProps, type StatTone, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone };
|
|
17
|
+
export { AppWindowFrame, type AppWindowFrameProps, CopyButton, type CopyButtonProps, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Meter, type MeterProps, type MeterProvenance, type MeterTone, Progress, type ProgressProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, Sparkline, type SparklineProps, Stat, type StatProps, type StatTone, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
|
|
1
2
|
import { AppWindowFrame } from "./app-window-frame.js";
|
|
2
3
|
import { CopyButton } from "./copy-button.js";
|
|
3
4
|
import { DataRow } from "./data-row.js";
|
|
@@ -13,4 +14,4 @@ import { Table, TableScrollRegion } from "./table.js";
|
|
|
13
14
|
import { TerminalFrame } from "./terminal-frame.js";
|
|
14
15
|
import { TwoStepButton } from "./two-step-button.js";
|
|
15
16
|
import { UsageChart } from "./usage-chart.js";
|
|
16
|
-
export { AppWindowFrame, CopyButton, DataRow, DataTree, GroupBar, Ledger, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart };
|
|
17
|
+
export { AppWindowFrame, CopyButton, DataRow, DataTree, GroupBar, Ledger, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
+
import { LedgerHeadingLevel } from "./_ledger.js";
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
//#region src/instruments/ledger.d.ts
|
|
3
|
-
/** The heading elements a tier or a group may be given. */
|
|
4
|
-
type LedgerHeadingLevel = 2 | 3 | 4;
|
|
5
4
|
interface LedgerRootProps extends React.ComponentPropsWithoutRef<"div"> {
|
|
6
5
|
/**
|
|
7
6
|
* Make the ledger a size container, so a caller's `@container` rules shed
|
|
@@ -40,6 +39,48 @@ interface LedgerTierProps extends React.ComponentPropsWithoutRef<"section"> {
|
|
|
40
39
|
headingLevel?: LedgerHeadingLevel;
|
|
41
40
|
/** A qualifier printed after the name — a date, a source, a state. */
|
|
42
41
|
note?: React.ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* Put a disclosure in the tier's heading that folds its rows away. Defaults
|
|
44
|
+
* to `false`, and a tier with no `heading` has nothing to fold from, so it
|
|
45
|
+
* ignores this and renders as it always has.
|
|
46
|
+
*
|
|
47
|
+
* **This is the accordion pattern, not the tree pattern.** What folds is the
|
|
48
|
+
* heading — a *place* — and the `<h2>` stays exactly where it was with a real
|
|
49
|
+
* `<button aria-expanded aria-controls>` inside it. The rows below are hidden
|
|
50
|
+
* while it is shut, which takes them out of the accessibility tree and out of
|
|
51
|
+
* the layout but keeps whatever state they hold. If what you are folding is a
|
|
52
|
+
* *row*, and the thing under it is that row's children rather than that
|
|
53
|
+
* place's contents, you want `DataTree` and its `treeitem` semantics instead.
|
|
54
|
+
*/
|
|
55
|
+
collapsible?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Whether the tier is open, when the caller owns the state.
|
|
58
|
+
*
|
|
59
|
+
* **Persistence is the caller's.** Which places a reader has folded is a fact
|
|
60
|
+
* about the reader, not about the list, and it belongs wherever that consumer
|
|
61
|
+
* keeps the rest of them — `localStorage`, a URL, a profile. This library
|
|
62
|
+
* stores nothing. Pass this with {@link LedgerTierProps.onExpandedChange};
|
|
63
|
+
* omit both and the tier keeps its own state from
|
|
64
|
+
* {@link LedgerTierProps.defaultExpanded}. Ignored unless `collapsible`.
|
|
65
|
+
*/
|
|
66
|
+
expanded?: boolean;
|
|
67
|
+
/**
|
|
68
|
+
* Whether an uncontrolled tier starts open. Defaults to `true`.
|
|
69
|
+
*
|
|
70
|
+
* Open, because a ledger whose content is folded away on first paint has
|
|
71
|
+
* hidden the thing the reader came for; the reader folds what they are done
|
|
72
|
+
* with. Ignored unless `collapsible`, and ignored entirely once
|
|
73
|
+
* {@link LedgerTierProps.expanded} is passed.
|
|
74
|
+
*/
|
|
75
|
+
defaultExpanded?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Called with the tier's next state each time the reader presses the
|
|
78
|
+
* disclosure — `true` when it is being opened, `false` when it is being shut.
|
|
79
|
+
*
|
|
80
|
+
* Fires in both the controlled and the uncontrolled form, so a consumer can
|
|
81
|
+
* record what was folded without also having to own the state.
|
|
82
|
+
*/
|
|
83
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
43
84
|
}
|
|
44
85
|
interface LedgerGroupProps extends React.ComponentPropsWithoutRef<"div"> {
|
|
45
86
|
/**
|
|
@@ -64,24 +105,70 @@ interface LedgerGroupProps extends React.ComponentPropsWithoutRef<"div"> {
|
|
|
64
105
|
* rather than measuring at runtime.
|
|
65
106
|
*/
|
|
66
107
|
sticky?: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Put a disclosure in the group's slug that folds its rows away. Defaults to
|
|
110
|
+
* `false`, and an unlabelled group has no slug to fold from, so it ignores
|
|
111
|
+
* this. The same accordion pattern the tier takes — see
|
|
112
|
+
* {@link LedgerTierProps.collapsible} for why it is not the tree pattern.
|
|
113
|
+
*/
|
|
114
|
+
collapsible?: boolean;
|
|
115
|
+
/**
|
|
116
|
+
* Whether the group is open, when the caller owns the state. Persistence is
|
|
117
|
+
* the caller's; see {@link LedgerTierProps.expanded}.
|
|
118
|
+
*/
|
|
119
|
+
expanded?: boolean;
|
|
120
|
+
/** Whether an uncontrolled group starts open. Defaults to `true`. */
|
|
121
|
+
defaultExpanded?: boolean;
|
|
122
|
+
/** Called with the group's next state each time the reader presses the slug. */
|
|
123
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
67
124
|
}
|
|
68
125
|
interface LedgerEmptyProps extends React.ComponentPropsWithoutRef<"p"> {}
|
|
69
126
|
/**
|
|
70
127
|
* A grouped run of dense rows under sticky headings: the ledger idiom.
|
|
71
128
|
*
|
|
72
|
-
* The flattest of the three surfaces this package ships over one row model
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
129
|
+
* The flattest of the three surfaces this package ships over one row model:
|
|
130
|
+
* headings, slugs, rows. What it owns above all is the document outline. Tiers
|
|
131
|
+
* and groups are real `<h2>` / `<h3>` elements at caller-chosen levels, because
|
|
132
|
+
* in a list of two hundred rows the heading list *is* how a screen-reader user
|
|
133
|
+
* navigates.
|
|
134
|
+
*
|
|
135
|
+
* ## Folding: the accordion pattern, opt-in, and why it lives here
|
|
78
136
|
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
* rows
|
|
137
|
+
* This component used to refuse disclosure outright, on the grounds that *a
|
|
138
|
+
* ledger which folds is a tree with worse semantics*. That ruling was right
|
|
139
|
+
* about rows and wrong about places, and the distinction is the whole of
|
|
140
|
+
* {@link LedgerTierProps.collapsible}:
|
|
82
141
|
*
|
|
83
|
-
*
|
|
84
|
-
* `
|
|
142
|
+
* - **`DataTree` folds a row.** Its `role="treeitem"` rows carry their own
|
|
143
|
+
* `aria-expanded`, its chevron is `role="presentation"` because in tree
|
|
144
|
+
* semantics the row owns its expansion, and a tier and a subgroup drawn
|
|
145
|
+
* through it stop being places and become rows. A consumer who measured this
|
|
146
|
+
* exact shape through `DataTree` counted **zero** `h2`/`h3` elements and zero
|
|
147
|
+
* `button[aria-expanded]`, which is `DataTree` working correctly and still
|
|
148
|
+
* not being what a grouped document needs.
|
|
149
|
+
* - **`Ledger` folds a place.** A tier is already an `<h2>`, which is already
|
|
150
|
+
* the right element for it, so the disclosure goes *inside* the heading as a
|
|
151
|
+
* real `<button aria-expanded aria-controls>` — the accordion pattern, and
|
|
152
|
+
* the same one `Table.GroupRow`'s note has always pointed at for a table that
|
|
153
|
+
* genuinely needs to fold. The outline is untouched: the heading list of a
|
|
154
|
+
* folding ledger and a plain one are identical, which is what lets a page
|
|
155
|
+
* offer both idioms over one dataset without the outline moving under a
|
|
156
|
+
* reader who switches.
|
|
157
|
+
*
|
|
158
|
+
* So it is one component with two forms rather than a `DisclosureLedger` beside
|
|
159
|
+
* it: everything a folding ledger needs — the gutter track, the sticky offsets,
|
|
160
|
+
* the label recipe, the type contract — is this component, and a sibling would
|
|
161
|
+
* have been a copy of all of it wrapped around one `<button>`.
|
|
162
|
+
*
|
|
163
|
+
* Expansion is controllable and stores nothing. *Which* places a reader has
|
|
164
|
+
* folded is a fact about the reader; consumers keep that set themselves and
|
|
165
|
+
* pass it back in. A folded run of rows is hidden rather than unmounted, so a
|
|
166
|
+
* group that keeps its own fold inside a tier still keeps it after the tier has
|
|
167
|
+
* been shut and opened over it.
|
|
168
|
+
*
|
|
169
|
+
* Static markup — no `"use client"` — **until a heading is asked to fold**, at
|
|
170
|
+
* which point that heading and its rows become a small client island and the
|
|
171
|
+
* rest of the ledger keeps rendering on the server.
|
|
85
172
|
*
|
|
86
173
|
* @example
|
|
87
174
|
* <Ledger.Root className="[--cue-data-row-cols:1fr_8rem_auto]">
|
|
@@ -94,6 +181,18 @@ interface LedgerEmptyProps extends React.ComponentPropsWithoutRef<"p"> {}
|
|
|
94
181
|
* </Ledger.Group>
|
|
95
182
|
* </Ledger.Tier>
|
|
96
183
|
* </Ledger.Root>
|
|
184
|
+
*
|
|
185
|
+
* @example
|
|
186
|
+
* // Folded places are the reader's, so the reader's storage holds them.
|
|
187
|
+
* <Ledger.Tier
|
|
188
|
+
* heading="Ours"
|
|
189
|
+
* count={13}
|
|
190
|
+
* collapsible
|
|
191
|
+
* expanded={!folded.includes("ours")}
|
|
192
|
+
* onExpandedChange={(open) => remember("ours", open)}
|
|
193
|
+
* >
|
|
194
|
+
* <Ledger.Group label="released">…</Ledger.Group>
|
|
195
|
+
* </Ledger.Tier>
|
|
97
196
|
*/
|
|
98
197
|
declare const Ledger: {
|
|
99
198
|
Root: React.ForwardRefExoticComponent<LedgerRootProps & React.RefAttributes<HTMLDivElement>>;
|