@cueplusplus/ui 0.5.0 → 0.6.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 +34 -0
- package/dist/chrome/_drag.js +59 -0
- package/dist/chrome/_status-bar-item.js +85 -0
- package/dist/chrome/_status-bar.d.ts +15 -0
- package/dist/chrome/_status-bar.js +171 -0
- package/dist/chrome/app-shell.d.ts +69 -1
- package/dist/chrome/app-shell.js +38 -11
- package/dist/chrome/index.d.ts +3 -2
- package/dist/chrome/status-bar.d.ts +87 -4
- package/dist/chrome/status-bar.js +80 -16
- package/dist/chrome/title-bar.d.ts +11 -1
- package/dist/chrome/title-bar.js +1 -3
- package/dist/date/_segments.js +15 -4
- package/dist/forms/_chassis.d.ts +104 -4
- package/dist/forms/_chassis.js +104 -4
- package/dist/forms/input-group.d.ts +8 -3
- package/dist/forms/input-group.js +8 -3
- package/dist/forms/number-field.d.ts +3 -2
- package/dist/forms/number-field.js +3 -2
- package/dist/index.d.ts +7 -3
- package/dist/index.js +4 -1
- package/dist/instruments/_data-row.js +118 -0
- package/dist/instruments/data-row.d.ts +94 -0
- package/dist/instruments/data-row.js +151 -0
- package/dist/instruments/data-tree.d.ts +126 -0
- package/dist/instruments/data-tree.js +303 -0
- package/dist/instruments/index.d.ts +5 -2
- package/dist/instruments/index.js +4 -1
- package/dist/instruments/ledger.d.ts +105 -0
- package/dist/instruments/ledger.js +114 -0
- package/dist/instruments/table.d.ts +70 -2
- package/dist/instruments/table.js +133 -39
- package/dist/theming/_presets.js +3 -3
- package/manifest/components/app-shell.json +45 -4
- package/manifest/components/autocomplete.json +2 -0
- package/manifest/components/color-field.json +2 -0
- package/manifest/components/color-picker.json +2 -0
- package/manifest/components/combobox.json +2 -0
- package/manifest/components/composer.json +2 -0
- package/manifest/components/data-row.json +203 -0
- package/manifest/components/data-tree.json +151 -0
- package/manifest/components/date-field.json +2 -0
- package/manifest/components/date-picker.json +2 -0
- package/manifest/components/date-range-picker.json +2 -0
- package/manifest/components/env-var-input.json +2 -0
- package/manifest/components/input-group.json +4 -2
- package/manifest/components/input.json +3 -1
- package/manifest/components/ledger.json +187 -0
- package/manifest/components/multi-select.json +2 -0
- package/manifest/components/musical-time-input.json +2 -0
- package/manifest/components/number-field.json +3 -1
- package/manifest/components/otp-field.json +2 -0
- package/manifest/components/password-input.json +2 -0
- package/manifest/components/scrub-input.json +2 -0
- package/manifest/components/search-input.json +2 -0
- package/manifest/components/select.json +1 -0
- package/manifest/components/status-bar.json +146 -12
- package/manifest/components/table-scroll-region.json +6 -0
- package/manifest/components/table.json +88 -4
- package/manifest/components/tags-input.json +2 -0
- package/manifest/components/textarea.json +3 -1
- package/manifest/components/time-field.json +2 -0
- package/manifest/components/title-bar.json +1 -1
- package/manifest/components/toggle-group.json +2 -0
- package/manifest/components/toggle.json +2 -0
- package/manifest/manifest.json +72 -33
- package/manifest/tokens.json +1 -1
- package/package.json +4 -4
package/dist/index.d.ts
CHANGED
|
@@ -25,7 +25,8 @@ import { Row, RowProps, SeamList, SeamListProps, rowVariants } from "./chrome/ro
|
|
|
25
25
|
import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./chrome/scroll-area.js";
|
|
26
26
|
import { SectionHeader, SectionHeaderProps } from "./chrome/section-header.js";
|
|
27
27
|
import { SegmentedControl, SegmentedControlItem, SegmentedControlProps, SegmentedControlSize } from "./chrome/segmented-control.js";
|
|
28
|
-
import {
|
|
28
|
+
import { StatusBarProminence } from "./chrome/_status-bar.js";
|
|
29
|
+
import { StatusBar, StatusBarGroupProps, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./chrome/status-bar.js";
|
|
29
30
|
import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "./chrome/tabs.js";
|
|
30
31
|
import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
|
|
31
32
|
import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
|
|
@@ -68,13 +69,16 @@ import "./icons/index.js";
|
|
|
68
69
|
import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
|
|
69
70
|
import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
|
|
70
71
|
import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
|
|
72
|
+
import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./instruments/data-row.js";
|
|
73
|
+
import { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState } from "./instruments/data-tree.js";
|
|
71
74
|
import { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone } from "./instruments/group-bar.js";
|
|
75
|
+
import { Ledger, LedgerEmptyProps, LedgerGroupProps, LedgerRootProps, LedgerTierProps } from "./instruments/ledger.js";
|
|
72
76
|
import { Meter, MeterProps, MeterProvenance, MeterTone } from "./instruments/meter.js";
|
|
73
77
|
import { Progress, ProgressProps } from "./instruments/progress.js";
|
|
74
78
|
import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./instruments/seam-grid.js";
|
|
75
79
|
import { Sparkline, SparklineProps } from "./instruments/sparkline.js";
|
|
76
80
|
import { Stat, StatProps, StatTone } from "./instruments/stat.js";
|
|
77
|
-
import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
|
|
81
|
+
import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
|
|
78
82
|
import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./instruments/terminal-frame.js";
|
|
79
83
|
import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/two-step-button.js";
|
|
80
84
|
import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
|
|
@@ -120,4 +124,4 @@ import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOp
|
|
|
120
124
|
import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
|
|
121
125
|
import { useTheme } from "./system/use-theme.js";
|
|
122
126
|
import { DensityLevel, FontName, Mode, ThemeName } from "./system/index.js";
|
|
123
|
-
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, 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, 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 StatusBarItemProps, 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 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 };
|
|
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 };
|
package/dist/index.js
CHANGED
|
@@ -69,7 +69,10 @@ import { Toggle } from "./forms/toggle.js";
|
|
|
69
69
|
import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
|
|
70
70
|
import { AppWindowFrame } from "./instruments/app-window-frame.js";
|
|
71
71
|
import { CopyButton } from "./instruments/copy-button.js";
|
|
72
|
+
import { DataRow } from "./instruments/data-row.js";
|
|
73
|
+
import { DataTree } from "./instruments/data-tree.js";
|
|
72
74
|
import { GroupBar } from "./instruments/group-bar.js";
|
|
75
|
+
import { Ledger } from "./instruments/ledger.js";
|
|
73
76
|
import { Meter } from "./instruments/meter.js";
|
|
74
77
|
import { Progress } from "./instruments/progress.js";
|
|
75
78
|
import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
|
|
@@ -108,4 +111,4 @@ import { Kbd } from "./primitives/kbd.js";
|
|
|
108
111
|
import { Skeleton } from "./primitives/skeleton.js";
|
|
109
112
|
import { useControlHeight, useDensity } from "./system/use-density.js";
|
|
110
113
|
import { useTheme } from "./system/use-theme.js";
|
|
111
|
-
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, 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, 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 };
|
|
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 };
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { cva } from "../lib/cva.js";
|
|
2
|
+
//#region src/instruments/_data-row.ts
|
|
3
|
+
/**
|
|
4
|
+
* The row recipe, in the three shapes the surfaces need.
|
|
5
|
+
*
|
|
6
|
+
* `layout` — `grid` is the row proper, whose children are its columns; `flex`
|
|
7
|
+
* is the tree row, which puts a disclosure chevron outside the grid so the
|
|
8
|
+
* chevron is not a column the caller has to count (see the column-count rule in
|
|
9
|
+
* {@link DATA_ROW_COLUMNS}).
|
|
10
|
+
*
|
|
11
|
+
* `indent` — the tree's depth step, folded into the row's own left padding
|
|
12
|
+
* rather than applied to an inner wrapper, because the guides
|
|
13
|
+
* ({@link DataTreeProps.guides}) are painted on the row's background box and
|
|
14
|
+
* have to start where the padding does.
|
|
15
|
+
*
|
|
16
|
+
* `interactive` — the row responds to a pointer and to the keyboard. The focus
|
|
17
|
+
* ring is *inset* (`-outline-offset-2`), the same ruling as `Row`: these rows
|
|
18
|
+
* live in clipped panes, where an outset ring on the first or last row is cut
|
|
19
|
+
* off by the pane's own rim. `outline-solid` rides along with every
|
|
20
|
+
* `outline-<n>` in this file because Tailwind v4 leaves `--tw-outline-style`
|
|
21
|
+
* unset otherwise and the ring never paints — `test/focus-ring.test.ts` is what
|
|
22
|
+
* keeps the pair together.
|
|
23
|
+
*
|
|
24
|
+
* The selected tint is in the base rather than in `interactive`: a static row in
|
|
25
|
+
* a selected group still reads as selected, and the attribute is the contract
|
|
26
|
+
* either way. It is declared after the hover wash on purpose — Tailwind emits
|
|
27
|
+
* `data-*` variants after `hover:`, so a selected row keeps its accent tint
|
|
28
|
+
* while the pointer is over it instead of flickering back to the hover grey.
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* cn(dataRowVariants({ interactive: true }), className)
|
|
32
|
+
*/
|
|
33
|
+
const dataRowVariants = cva([
|
|
34
|
+
"group/data-row w-full items-center gap-(--cue-space-3) py-(--cue-pad-row-y)",
|
|
35
|
+
"font-mono text-(length:--cue-text-ui) text-fg",
|
|
36
|
+
"border-t border-t-(--cue-hair) first:border-t-0",
|
|
37
|
+
"data-[selected]:bg-accent-soft data-[disabled]:pointer-events-none data-[disabled]:opacity-40"
|
|
38
|
+
].join(" "), {
|
|
39
|
+
variants: {
|
|
40
|
+
layout: {
|
|
41
|
+
grid: "grid [grid-template-columns:var(--cue-data-row-cols,1fr_auto)]",
|
|
42
|
+
flex: "flex"
|
|
43
|
+
},
|
|
44
|
+
indent: {
|
|
45
|
+
true: "pr-(--cue-pad-row-x) pl-[calc(var(--cue-pad-row-x)_+_var(--depth)_*_var(--cue-data-tree-indent,1.25rem))]",
|
|
46
|
+
false: "px-(--cue-pad-row-x)"
|
|
47
|
+
},
|
|
48
|
+
interactive: {
|
|
49
|
+
true: "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent",
|
|
50
|
+
false: ""
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
defaultVariants: {
|
|
54
|
+
layout: "grid",
|
|
55
|
+
indent: false,
|
|
56
|
+
interactive: false
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
/**
|
|
60
|
+
* Whether a click on a row means "open this row", and act on it if it does.
|
|
61
|
+
*
|
|
62
|
+
* Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
|
|
63
|
+
* the row is not simply a `<button>`:
|
|
64
|
+
*
|
|
65
|
+
* - **A control inside the row.** The action cluster, a menu trigger, a
|
|
66
|
+
* checkbox — pressing one is not the same gesture as picking the row. Anything
|
|
67
|
+
* under a `[data-stop]` ancestor is left entirely alone, which is why
|
|
68
|
+
* `DataRow.Actions` stamps that attribute on itself.
|
|
69
|
+
* - **A link inside the row.** A plain click on it should open the row's own
|
|
70
|
+
* surface (the drawer, the detail pane), so the anchor's navigation is
|
|
71
|
+
* suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
|
|
72
|
+
* whole value of having shipped a real `<a href>` in the first place.
|
|
73
|
+
* - **A secondary button.** Only the primary button activates; the middle
|
|
74
|
+
* button belongs to the browser.
|
|
75
|
+
* - **An already-handled event.** A caller's own `onClick` that called
|
|
76
|
+
* `preventDefault()` has said no.
|
|
77
|
+
*
|
|
78
|
+
* @param event The row's own click event.
|
|
79
|
+
* @param activate What "open this row" means to the surface.
|
|
80
|
+
* @example
|
|
81
|
+
* onClick={(event) => activateRowFromClick(event, () => open(row))}
|
|
82
|
+
*/
|
|
83
|
+
function activateRowFromClick(event, activate) {
|
|
84
|
+
if (event.defaultPrevented || event.button !== 0) return;
|
|
85
|
+
const target = event.target;
|
|
86
|
+
if (target === null) return;
|
|
87
|
+
if (target.closest("[data-stop]") !== null) return;
|
|
88
|
+
if (target.closest("a[href]") !== null) {
|
|
89
|
+
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
}
|
|
92
|
+
activate();
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Whether a key press on a row means "open this row", and act on it if it does.
|
|
96
|
+
*
|
|
97
|
+
* Guarded on `event.target === event.currentTarget` so a control inside the row
|
|
98
|
+
* keeps its own keys: without it a rename field on a row could never contain a
|
|
99
|
+
* space, and every action button's Enter would also open the row behind it.
|
|
100
|
+
*
|
|
101
|
+
* Space is prevented rather than merely handled, because the browser's default
|
|
102
|
+
* for Space on a focused non-control is to scroll the page — a row that opened
|
|
103
|
+
* a drawer *and* jumped the list a screenful would read as a bug.
|
|
104
|
+
*
|
|
105
|
+
* @param event The row's own keydown event.
|
|
106
|
+
* @param activate What "open this row" means to the surface.
|
|
107
|
+
* @example
|
|
108
|
+
* onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
|
|
109
|
+
*/
|
|
110
|
+
function activateRowFromKeyDown(event, activate) {
|
|
111
|
+
if (event.defaultPrevented) return;
|
|
112
|
+
if (event.target !== event.currentTarget) return;
|
|
113
|
+
if (event.key !== "Enter" && event.key !== " ") return;
|
|
114
|
+
event.preventDefault();
|
|
115
|
+
activate();
|
|
116
|
+
}
|
|
117
|
+
//#endregion
|
|
118
|
+
export { activateRowFromClick, activateRowFromKeyDown, dataRowVariants };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//#region src/instruments/data-row.d.ts
|
|
3
|
+
/** What an interactive row discloses, when it discloses something. */
|
|
4
|
+
interface DataRowDisclosure {
|
|
5
|
+
/** Whether the surface this row opens is currently showing. */
|
|
6
|
+
expanded: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* The `id` of the element the row opens, when that element is in the DOM.
|
|
9
|
+
*
|
|
10
|
+
* Omit it while the surface is closed and unrendered: `aria-controls`
|
|
11
|
+
* pointing at an id that does not exist is worse than no `aria-controls`.
|
|
12
|
+
*/
|
|
13
|
+
controls?: string;
|
|
14
|
+
}
|
|
15
|
+
interface DataRowRootProps extends React.ComponentPropsWithoutRef<"div"> {
|
|
16
|
+
/**
|
|
17
|
+
* The row responds to a pointer and to the keyboard: hover wash, `cursor`,
|
|
18
|
+
* an inset focus ring and a tab stop. Defaults to `false`.
|
|
19
|
+
*/
|
|
20
|
+
interactive?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Draw the row as picked out of the list. Defaults to `false`.
|
|
23
|
+
*
|
|
24
|
+
* Sets `data-selected`, which is also what the hover-revealed action track and
|
|
25
|
+
* the accent tint key off — so a `<tr data-selected>` in the table idiom gets
|
|
26
|
+
* exactly the same treatment without going through this component.
|
|
27
|
+
*/
|
|
28
|
+
selected?: boolean;
|
|
29
|
+
/** Grey the row out and stop it responding to anything. Defaults to `false`. */
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
/** What "open this row" means — a drawer, a detail pane, a route. */
|
|
32
|
+
onActivate?: () => void;
|
|
33
|
+
/**
|
|
34
|
+
* Expose the row as a disclosure: `data-expanded` always, `aria-expanded`
|
|
35
|
+
* when the row has a `role` that can carry it, and `aria-controls` when the
|
|
36
|
+
* disclosed element is on the page.
|
|
37
|
+
*
|
|
38
|
+
* **`aria-expanded` is gated on the role, because on a bare `<div>` it is
|
|
39
|
+
* worse than nothing.** A role-less div maps to `generic`, which supports
|
|
40
|
+
* only the global attributes — so the state is dropped outright by Blink,
|
|
41
|
+
* WebKit and Gecko alike (verified through Chromium's own accessibility
|
|
42
|
+
* tree), announces nothing, and adds a critical `aria-allowed-attr` finding
|
|
43
|
+
* to any axe run over the console that used it. `role` passes straight
|
|
44
|
+
* through as a div prop, so a row that genuinely is a disclosure says which
|
|
45
|
+
* kind it is — `role="button"` for a row that opens a drawer, `role="row"`
|
|
46
|
+
* inside a grid — and gets the attribute with it. Everything else gets
|
|
47
|
+
* `data-expanded`, which styles and tests exactly as well and promises
|
|
48
|
+
* nothing to a screen reader.
|
|
49
|
+
*
|
|
50
|
+
* The row is still not given a widget role on its own account: a
|
|
51
|
+
* `role="button"` row could not legally hold the buttons and links these rows
|
|
52
|
+
* exist to contain, and that judgement belongs to the caller who knows what
|
|
53
|
+
* their row does. Where the disclosure has to be bulletproof for assistive
|
|
54
|
+
* technology, reach for `DataTree` (real `treeitem` expansion) or a
|
|
55
|
+
* `Table.GroupRow` with a real toggle button in it.
|
|
56
|
+
*/
|
|
57
|
+
disclosure?: DataRowDisclosure;
|
|
58
|
+
}
|
|
59
|
+
/** The native `<span>` surface every row slot shares, plus `className`. */
|
|
60
|
+
type DataRowSlotProps = React.ComponentPropsWithoutRef<"span">;
|
|
61
|
+
/**
|
|
62
|
+
* The dense interactive row, as one anatomy three surfaces share.
|
|
63
|
+
*
|
|
64
|
+
* `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
|
|
65
|
+
* model, and this is the model: a marker, a label, a description, tags, a
|
|
66
|
+
* figure, and a trailing action cluster that is only there when you are looking
|
|
67
|
+
* at the row. Composing them yourself — rather than passing a `columns` array —
|
|
68
|
+
* is what keeps the primitive domain-neutral: a corpus of skills and a rig of
|
|
69
|
+
* fixtures need the same six slots and completely different columns.
|
|
70
|
+
*
|
|
71
|
+
* The slots are thin: each is a `<span>` with a `data-slot`, the type and
|
|
72
|
+
* truncation rule for its column, and nothing else. They may be used inside a
|
|
73
|
+
* `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
|
|
74
|
+
* `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
|
|
75
|
+
* without a second implementation.
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* <DataRow.Root interactive onActivate={() => open(skill)}>
|
|
79
|
+
* <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
|
|
80
|
+
* <DataRow.Label>{skill.name}</DataRow.Label>
|
|
81
|
+
* <DataRow.Meta>{skill.installs}</DataRow.Meta>
|
|
82
|
+
* </DataRow.Root>
|
|
83
|
+
*/
|
|
84
|
+
declare const DataRow: {
|
|
85
|
+
Root: React.ForwardRefExoticComponent<DataRowRootProps & React.RefAttributes<HTMLDivElement>>;
|
|
86
|
+
Marker: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
87
|
+
Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
88
|
+
Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
89
|
+
Tags: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
90
|
+
Meta: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
91
|
+
Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
92
|
+
};
|
|
93
|
+
//#endregion
|
|
94
|
+
export { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps };
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { activateRowFromClick, activateRowFromKeyDown, dataRowVariants } from "./_data-row.js";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region src/instruments/data-row.tsx
|
|
7
|
+
/**
|
|
8
|
+
* The roles that carry `aria-expanded`, per ARIA 1.2's own "supported in roles"
|
|
9
|
+
* list, filtered to the ones a row could plausibly be given.
|
|
10
|
+
*
|
|
11
|
+
* The absent case is the one that matters: no `role` at all. A `<div>` is
|
|
12
|
+
* `generic`, `generic` supports only the globals, and every engine drops an
|
|
13
|
+
* `aria-expanded` it finds there rather than exposing a state — so emitting it
|
|
14
|
+
* anyway buys nothing and costs a critical axe violation.
|
|
15
|
+
*/
|
|
16
|
+
const ROLES_SUPPORTING_EXPANDED = /* @__PURE__ */ new Set([
|
|
17
|
+
"application",
|
|
18
|
+
"button",
|
|
19
|
+
"checkbox",
|
|
20
|
+
"columnheader",
|
|
21
|
+
"combobox",
|
|
22
|
+
"grid",
|
|
23
|
+
"gridcell",
|
|
24
|
+
"link",
|
|
25
|
+
"listbox",
|
|
26
|
+
"menuitem",
|
|
27
|
+
"menuitemcheckbox",
|
|
28
|
+
"menuitemradio",
|
|
29
|
+
"row",
|
|
30
|
+
"rowheader",
|
|
31
|
+
"searchbox",
|
|
32
|
+
"switch",
|
|
33
|
+
"tab",
|
|
34
|
+
"table",
|
|
35
|
+
"textbox",
|
|
36
|
+
"treeitem"
|
|
37
|
+
]);
|
|
38
|
+
/**
|
|
39
|
+
* The dense interactive row, as one anatomy three surfaces share.
|
|
40
|
+
*
|
|
41
|
+
* `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
|
|
42
|
+
* model, and this is the model: a marker, a label, a description, tags, a
|
|
43
|
+
* figure, and a trailing action cluster that is only there when you are looking
|
|
44
|
+
* at the row. Composing them yourself — rather than passing a `columns` array —
|
|
45
|
+
* is what keeps the primitive domain-neutral: a corpus of skills and a rig of
|
|
46
|
+
* fixtures need the same six slots and completely different columns.
|
|
47
|
+
*
|
|
48
|
+
* The slots are thin: each is a `<span>` with a `data-slot`, the type and
|
|
49
|
+
* truncation rule for its column, and nothing else. They may be used inside a
|
|
50
|
+
* `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
|
|
51
|
+
* `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
|
|
52
|
+
* without a second implementation.
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* <DataRow.Root interactive onActivate={() => open(skill)}>
|
|
56
|
+
* <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
|
|
57
|
+
* <DataRow.Label>{skill.name}</DataRow.Label>
|
|
58
|
+
* <DataRow.Meta>{skill.installs}</DataRow.Meta>
|
|
59
|
+
* </DataRow.Root>
|
|
60
|
+
*/
|
|
61
|
+
const DataRow = {
|
|
62
|
+
Root: React.forwardRef(function DataRowRoot({ className, interactive = false, selected = false, disabled = false, onActivate, disclosure, onClick, onKeyDown, role, ...elementProps }, ref) {
|
|
63
|
+
const expandable = role !== void 0 && ROLES_SUPPORTING_EXPANDED.has(role);
|
|
64
|
+
const activate = React.useCallback(() => {
|
|
65
|
+
if (!disabled) onActivate?.();
|
|
66
|
+
}, [disabled, onActivate]);
|
|
67
|
+
const handleClick = React.useCallback((event) => {
|
|
68
|
+
onClick?.(event);
|
|
69
|
+
if (interactive) activateRowFromClick(event, activate);
|
|
70
|
+
}, [
|
|
71
|
+
activate,
|
|
72
|
+
interactive,
|
|
73
|
+
onClick
|
|
74
|
+
]);
|
|
75
|
+
const handleKeyDown = React.useCallback((event) => {
|
|
76
|
+
onKeyDown?.(event);
|
|
77
|
+
if (interactive) activateRowFromKeyDown(event, activate);
|
|
78
|
+
}, [
|
|
79
|
+
activate,
|
|
80
|
+
interactive,
|
|
81
|
+
onKeyDown
|
|
82
|
+
]);
|
|
83
|
+
return /* @__PURE__ */ jsx("div", {
|
|
84
|
+
ref,
|
|
85
|
+
...elementProps,
|
|
86
|
+
role,
|
|
87
|
+
"data-slot": "data-row",
|
|
88
|
+
"data-selected": selected ? "" : void 0,
|
|
89
|
+
"data-disabled": disabled ? "" : void 0,
|
|
90
|
+
"data-expanded": disclosure?.expanded === true ? "" : void 0,
|
|
91
|
+
tabIndex: interactive && !disabled ? 0 : void 0,
|
|
92
|
+
"aria-expanded": disclosure === void 0 || !expandable ? void 0 : disclosure.expanded,
|
|
93
|
+
"aria-controls": disclosure?.controls,
|
|
94
|
+
"aria-disabled": disabled ? true : void 0,
|
|
95
|
+
onClick: handleClick,
|
|
96
|
+
onKeyDown: handleKeyDown,
|
|
97
|
+
className: cn(dataRowVariants({ interactive }), className)
|
|
98
|
+
});
|
|
99
|
+
}),
|
|
100
|
+
Marker: React.forwardRef(function DataRowMarker({ className, ...elementProps }, ref) {
|
|
101
|
+
return /* @__PURE__ */ jsx("span", {
|
|
102
|
+
ref,
|
|
103
|
+
"data-slot": "data-row-marker",
|
|
104
|
+
className: cn("flex shrink-0 items-center", className),
|
|
105
|
+
...elementProps
|
|
106
|
+
});
|
|
107
|
+
}),
|
|
108
|
+
Label: React.forwardRef(function DataRowLabel({ className, ...elementProps }, ref) {
|
|
109
|
+
return /* @__PURE__ */ jsx("span", {
|
|
110
|
+
ref,
|
|
111
|
+
"data-slot": "data-row-label",
|
|
112
|
+
className: cn("min-w-0 truncate text-fg", className),
|
|
113
|
+
...elementProps
|
|
114
|
+
});
|
|
115
|
+
}),
|
|
116
|
+
Description: React.forwardRef(function DataRowDescription({ className, ...elementProps }, ref) {
|
|
117
|
+
return /* @__PURE__ */ jsx("span", {
|
|
118
|
+
ref,
|
|
119
|
+
"data-slot": "data-row-description",
|
|
120
|
+
className: cn("min-w-0 truncate text-(length:--cue-text-label) text-fg-muted", className),
|
|
121
|
+
...elementProps
|
|
122
|
+
});
|
|
123
|
+
}),
|
|
124
|
+
Tags: React.forwardRef(function DataRowTags({ className, ...elementProps }, ref) {
|
|
125
|
+
return /* @__PURE__ */ jsx("span", {
|
|
126
|
+
ref,
|
|
127
|
+
"data-slot": "data-row-tags",
|
|
128
|
+
className: cn("flex min-w-0 items-center gap-(--cue-space-1)", className),
|
|
129
|
+
...elementProps
|
|
130
|
+
});
|
|
131
|
+
}),
|
|
132
|
+
Meta: React.forwardRef(function DataRowMeta({ className, ...elementProps }, ref) {
|
|
133
|
+
return /* @__PURE__ */ jsx("span", {
|
|
134
|
+
ref,
|
|
135
|
+
"data-slot": "data-row-meta",
|
|
136
|
+
className: cn("shrink-0 tabular-nums text-fg-subtle", className),
|
|
137
|
+
...elementProps
|
|
138
|
+
});
|
|
139
|
+
}),
|
|
140
|
+
Actions: React.forwardRef(function DataRowActions({ className, ...elementProps }, ref) {
|
|
141
|
+
return /* @__PURE__ */ jsx("span", {
|
|
142
|
+
ref,
|
|
143
|
+
"data-slot": "data-row-actions",
|
|
144
|
+
"data-stop": "",
|
|
145
|
+
className: cn("invisible inline-flex shrink-0 items-center gap-(--cue-space-1) [&>*]:shrink-0", "group-hover/data-row:visible group-focus-within/data-row:visible group-data-[selected]/data-row:visible", "[@media(hover:none)]:visible", className),
|
|
146
|
+
...elementProps
|
|
147
|
+
});
|
|
148
|
+
})
|
|
149
|
+
};
|
|
150
|
+
//#endregion
|
|
151
|
+
export { DataRow };
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//#region src/instruments/data-tree.d.ts
|
|
3
|
+
/** What a row knows about itself when its content is a function. */
|
|
4
|
+
interface DataTreeRowState {
|
|
5
|
+
/** Depth from the roots; `0` for a root. */
|
|
6
|
+
level: number;
|
|
7
|
+
/** Whether the node declares children at all. */
|
|
8
|
+
hasChildren: boolean;
|
|
9
|
+
/** Whether those children are currently shown. */
|
|
10
|
+
expanded: boolean;
|
|
11
|
+
/** Whether this row is the selected one. */
|
|
12
|
+
selected: boolean;
|
|
13
|
+
}
|
|
14
|
+
/** One node of the tree: an identity, a row's worth of content, and children. */
|
|
15
|
+
interface DataTreeItem {
|
|
16
|
+
/** Stable identity: what selection, expansion and focus are keyed on. */
|
|
17
|
+
id: string;
|
|
18
|
+
/**
|
|
19
|
+
* The row's content — normally `DataRow` slots, in the same order and with
|
|
20
|
+
* the same tracks as the other idioms drawing this dataset.
|
|
21
|
+
*
|
|
22
|
+
* A function receives the row's own state, for the cases where the content
|
|
23
|
+
* differs by it: a count that only shows while a node is folded, a different
|
|
24
|
+
* marker for an expanded parent.
|
|
25
|
+
*/
|
|
26
|
+
row: React.ReactNode | ((state: DataTreeRowState) => React.ReactNode);
|
|
27
|
+
/**
|
|
28
|
+
* Nested nodes. An empty array still makes the row a parent — an empty folder
|
|
29
|
+
* is a folder, and `aria-expanded` on it is the truth.
|
|
30
|
+
*/
|
|
31
|
+
children?: readonly DataTreeItem[];
|
|
32
|
+
/** Grey the row out; it stays reachable by keyboard but cannot be selected. */
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
}
|
|
35
|
+
interface DataTreeProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onSelect"> {
|
|
36
|
+
/** The roots, in display order. */
|
|
37
|
+
items: readonly DataTreeItem[];
|
|
38
|
+
/** Expanded ids when controlled. Pass with `onExpandedChange`. */
|
|
39
|
+
expanded?: readonly string[];
|
|
40
|
+
/** Initially expanded ids when uncontrolled. */
|
|
41
|
+
defaultExpanded?: readonly string[];
|
|
42
|
+
/** Called with the whole next expanded set whenever a row is folded or unfolded. */
|
|
43
|
+
onExpandedChange?: (expanded: string[]) => void;
|
|
44
|
+
/** Selected id when controlled. Pass with `onSelect`. */
|
|
45
|
+
selected?: string | null;
|
|
46
|
+
/** Initially selected id when uncontrolled. */
|
|
47
|
+
defaultSelected?: string | null;
|
|
48
|
+
/** Called with the id of the row the user selected. */
|
|
49
|
+
onSelect?: (id: string) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Draw the depth guides. Defaults to `true`.
|
|
52
|
+
*
|
|
53
|
+
* Roots never draw one — there is no ancestor to draw — so a flat tree draws
|
|
54
|
+
* none at all whatever this is set to.
|
|
55
|
+
*/
|
|
56
|
+
guides?: boolean;
|
|
57
|
+
/** Accessible name for the tree. Required in practice — name what it lists. */
|
|
58
|
+
"aria-label"?: string;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* A hierarchy of multi-column rows: the tree idiom over the `DataRow` anatomy.
|
|
62
|
+
*
|
|
63
|
+
* ## The ARIA pattern, chosen before the component was written
|
|
64
|
+
*
|
|
65
|
+
* `role="treegrid"` is **rejected** for this foundation. It is the semantically
|
|
66
|
+
* exact answer — tabular *and* hierarchical — and it is the one with the worst
|
|
67
|
+
* real-world assistive-technology record: Adrian Roselli's survey of expando
|
|
68
|
+
* tables calls its support poor and notes that the APG's own worked example
|
|
69
|
+
* carries unresolved issues; fancytree's maintainer describes treegrid support
|
|
70
|
+
* as unproven ground; MUI X shipped hierarchical rows with no `aria-level` /
|
|
71
|
+
* `aria-expanded` / `aria-setsize` at all and retrofitted them later. Treegrid
|
|
72
|
+
* earns its cost when cells are individually interactive or editable, because
|
|
73
|
+
* then a reader genuinely needs two-dimensional cell navigation. This surface is
|
|
74
|
+
* read-and-navigate: you move down rows, fold a branch, and open the thing a row
|
|
75
|
+
* names.
|
|
76
|
+
*
|
|
77
|
+
* So the pattern is `role="tree"` with `role="treeitem"` rows — VS Code's
|
|
78
|
+
* choice and Carbon's, and the best-supported composite pattern in ARIA:
|
|
79
|
+
*
|
|
80
|
+
* - A **flat DOM** with `aria-level` / `aria-posinset` / `aria-setsize` per row
|
|
81
|
+
* rather than nested `role="group"` wrappers.
|
|
82
|
+
* - **Roving tabindex**: the tree is one Tab stop and the arrows move inside it.
|
|
83
|
+
* - The **APG tree keyboard map**: Up/Down between visible rows, Home/End to the
|
|
84
|
+
* ends, Right to unfold then to descend, Left to fold then to ascend,
|
|
85
|
+
* Enter/Space to select.
|
|
86
|
+
* - Expansion lives on the **row**, as `aria-expanded` on the `treeitem` — that
|
|
87
|
+
* is what tree semantics mean by a parent, and it is why the chevron here is
|
|
88
|
+
* `role="presentation"` rather than a button. (The other half of this trade
|
|
89
|
+
* is `Table.GroupRow`, where the table's semantics own the grouping and a real
|
|
90
|
+
* `<button aria-expanded>` owns the disclosure. Two patterns, each internally
|
|
91
|
+
* consistent; what would be wrong is half of each.)
|
|
92
|
+
*
|
|
93
|
+
* **The documented trade**: columns are not independently navigable. A row's
|
|
94
|
+
* multi-column content lives *inside* the treeitem, so a screen-reader user
|
|
95
|
+
* hears the row as one string rather than moving cell to cell through it. For a
|
|
96
|
+
* dense browse-and-open surface that is the better bargain — `tree` works today
|
|
97
|
+
* on every screen reader, `treegrid` does not — but a surface whose cells are
|
|
98
|
+
* genuinely editable has outgrown this component and wants a real treegrid from
|
|
99
|
+
* a library that maintains one.
|
|
100
|
+
*
|
|
101
|
+
* ## Everything else
|
|
102
|
+
*
|
|
103
|
+
* Rows are the `DataRow` chassis: same padding, same hairline, same hover wash,
|
|
104
|
+
* same inset focus ring, same `group/data-row`, so `DataRow.Actions` reveals in
|
|
105
|
+
* a tree exactly as it does in a ledger. The row element itself is the
|
|
106
|
+
* treeitem — one element owns focus, expansion, selection and the click reading
|
|
107
|
+
* — and the caller's `DataRow.*` slots are its content.
|
|
108
|
+
*
|
|
109
|
+
* A tree whose items declare no children anywhere is a flat list: no chevrons,
|
|
110
|
+
* no spacer column where a chevron would be, no guides, and `aria-expanded` on
|
|
111
|
+
* nothing. A leaf row that carried `aria-expanded="false"` would tell a screen
|
|
112
|
+
* reader it has children it does not have.
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* <DataTree
|
|
116
|
+
* aria-label="Patch"
|
|
117
|
+
* items={nodes}
|
|
118
|
+
* defaultExpanded={["inputs"]}
|
|
119
|
+
* selected={selected}
|
|
120
|
+
* onSelect={setSelected}
|
|
121
|
+
* className="[--cue-data-row-cols:1fr_8rem_auto]"
|
|
122
|
+
* />
|
|
123
|
+
*/
|
|
124
|
+
declare const DataTree: React.ForwardRefExoticComponent<DataTreeProps & React.RefAttributes<HTMLDivElement>>;
|
|
125
|
+
//#endregion
|
|
126
|
+
export { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState };
|