@cueplusplus/ui 0.5.0 → 0.7.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 +53 -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 +8 -3
- package/dist/index.js +5 -1
- package/dist/instruments/_data-row.d.ts +68 -0
- package/dist/instruments/_data-row.js +139 -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 +6 -2
- package/dist/instruments/index.js +5 -1
- package/dist/instruments/ledger.d.ts +105 -0
- package/dist/instruments/ledger.js +114 -0
- package/dist/instruments/table.d.ts +108 -2
- package/dist/instruments/table.js +165 -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 +208 -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 +113 -5
- 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 +2 -2
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";
|
|
@@ -65,16 +66,20 @@ import { Plussie, PlussieExpression, PlussieProps } from "./brand/plussie.js";
|
|
|
65
66
|
import "./brand/index.js";
|
|
66
67
|
import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
|
|
67
68
|
import "./icons/index.js";
|
|
69
|
+
import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
|
|
68
70
|
import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
|
|
69
71
|
import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
|
|
70
72
|
import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
|
|
73
|
+
import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./instruments/data-row.js";
|
|
74
|
+
import { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState } from "./instruments/data-tree.js";
|
|
71
75
|
import { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone } from "./instruments/group-bar.js";
|
|
76
|
+
import { Ledger, LedgerEmptyProps, LedgerGroupProps, LedgerRootProps, LedgerTierProps } from "./instruments/ledger.js";
|
|
72
77
|
import { Meter, MeterProps, MeterProvenance, MeterTone } from "./instruments/meter.js";
|
|
73
78
|
import { Progress, ProgressProps } from "./instruments/progress.js";
|
|
74
79
|
import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./instruments/seam-grid.js";
|
|
75
80
|
import { Sparkline, SparklineProps } from "./instruments/sparkline.js";
|
|
76
81
|
import { Stat, StatProps, StatTone } from "./instruments/stat.js";
|
|
77
|
-
import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
|
|
82
|
+
import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
|
|
78
83
|
import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./instruments/terminal-frame.js";
|
|
79
84
|
import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/two-step-button.js";
|
|
80
85
|
import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
|
|
@@ -120,4 +125,4 @@ import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOp
|
|
|
120
125
|
import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
|
|
121
126
|
import { useTheme } from "./system/use-theme.js";
|
|
122
127
|
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 };
|
|
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,9 +67,13 @@ 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";
|
|
73
|
+
import { DataRow } from "./instruments/data-row.js";
|
|
74
|
+
import { DataTree } from "./instruments/data-tree.js";
|
|
72
75
|
import { GroupBar } from "./instruments/group-bar.js";
|
|
76
|
+
import { Ledger } from "./instruments/ledger.js";
|
|
73
77
|
import { Meter } from "./instruments/meter.js";
|
|
74
78
|
import { Progress } from "./instruments/progress.js";
|
|
75
79
|
import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
|
|
@@ -108,4 +112,4 @@ import { Kbd } from "./primitives/kbd.js";
|
|
|
108
112
|
import { Skeleton } from "./primitives/skeleton.js";
|
|
109
113
|
import { useControlHeight, useDensity } from "./system/use-density.js";
|
|
110
114
|
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 };
|
|
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 };
|
|
@@ -0,0 +1,139 @@
|
|
|
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
|
+
* 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
|
+
*
|
|
69
|
+
* Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
|
|
70
|
+
* the row is not simply a `<button>`:
|
|
71
|
+
*
|
|
72
|
+
* - **A control inside the row.** The action cluster, a menu trigger, a
|
|
73
|
+
* checkbox — pressing one is not the same gesture as picking the row. Anything
|
|
74
|
+
* under a `[data-stop]` ancestor is left entirely alone, which is why
|
|
75
|
+
* `DataRow.Actions` stamps that attribute on itself.
|
|
76
|
+
* - **A link inside the row.** A plain click on it should open the row's own
|
|
77
|
+
* surface (the drawer, the detail pane), so the anchor's navigation is
|
|
78
|
+
* suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
|
|
79
|
+
* whole value of having shipped a real `<a href>` in the first place.
|
|
80
|
+
* - **A secondary button.** Only the primary button activates; the middle
|
|
81
|
+
* button belongs to the browser.
|
|
82
|
+
* - **An already-handled event.** A caller's own `onClick` that called
|
|
83
|
+
* `preventDefault()` has said no.
|
|
84
|
+
*
|
|
85
|
+
* @param event The row's own click event.
|
|
86
|
+
* @param activate What "open this row" means to the surface.
|
|
87
|
+
* @example
|
|
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
|
+
* >
|
|
97
|
+
*/
|
|
98
|
+
function activateRowFromClick(event, activate) {
|
|
99
|
+
if (event.defaultPrevented || event.button !== 0) return;
|
|
100
|
+
const target = event.target;
|
|
101
|
+
if (target === null) return;
|
|
102
|
+
if (target.closest("[data-stop]") !== null) return;
|
|
103
|
+
if (target.closest("a[href]") !== null) {
|
|
104
|
+
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
|
|
105
|
+
event.preventDefault();
|
|
106
|
+
}
|
|
107
|
+
activate();
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Whether a key press on a row means "open this row", and act on it if it does.
|
|
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
|
+
*
|
|
118
|
+
* Guarded on `event.target === event.currentTarget` so a control inside the row
|
|
119
|
+
* keeps its own keys: without it a rename field on a row could never contain a
|
|
120
|
+
* space, and every action button's Enter would also open the row behind it.
|
|
121
|
+
*
|
|
122
|
+
* Space is prevented rather than merely handled, because the browser's default
|
|
123
|
+
* for Space on a focused non-control is to scroll the page — a row that opened
|
|
124
|
+
* a drawer *and* jumped the list a screenful would read as a bug.
|
|
125
|
+
*
|
|
126
|
+
* @param event The row's own keydown event.
|
|
127
|
+
* @param activate What "open this row" means to the surface.
|
|
128
|
+
* @example
|
|
129
|
+
* onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
|
|
130
|
+
*/
|
|
131
|
+
function activateRowFromKeyDown(event, activate) {
|
|
132
|
+
if (event.defaultPrevented) return;
|
|
133
|
+
if (event.target !== event.currentTarget) return;
|
|
134
|
+
if (event.key !== "Enter" && event.key !== " ") return;
|
|
135
|
+
event.preventDefault();
|
|
136
|
+
activate();
|
|
137
|
+
}
|
|
138
|
+
//#endregion
|
|
139
|
+
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 };
|