@stll/ui 0.23.0 → 0.24.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/README.md +4 -2
- package/dist/components/button-variants.d.ts +2 -2
- package/dist/components/sidebar.d.ts +1 -1
- package/dist/components/workspace-shell.d.ts +9 -2
- package/dist/components/workspace-shell.js +3 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -1
- package/dist/kanban/card-shell.d.ts +16 -1
- package/dist/kanban/card-shell.js +26 -3
- package/dist/kanban/cell-action.d.ts +10 -2
- package/dist/kanban/cell-action.js +12 -3
- package/dist/kanban/column-band-header.d.ts +3 -2
- package/dist/kanban/column-band-header.js +5 -3
- package/dist/kanban/column-header.d.ts +4 -4
- package/dist/kanban/column-header.js +6 -6
- package/dist/kanban/index.d.ts +3 -2
- package/dist/kanban/index.js +2 -1
- package/dist/kanban/layout-tokens.d.ts +28 -0
- package/dist/kanban/layout-tokens.js +28 -0
- package/dist/kanban/subgroup-board.d.ts +30 -2
- package/dist/kanban/subgroup-board.js +77 -26
- package/dist/kanban/virtual-cell.js +7 -3
- package/dist/lib/control-size.d.ts +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -33,8 +33,10 @@ convenience; the subpaths are the real surface, and in-repo code uses those.
|
|
|
33
33
|
## Workspace shell
|
|
34
34
|
|
|
35
35
|
`WorkspaceShell` is the complete desktop and tablet application frame. It
|
|
36
|
-
keeps navigation, sticky top chrome, the active route, and
|
|
37
|
-
inline-end dock as sibling surfaces inside one dynamic viewport.
|
|
36
|
+
keeps navigation, sticky top chrome, the active route, and an optional
|
|
37
|
+
inline-end dock as sibling surfaces inside one dynamic viewport. A host with
|
|
38
|
+
nothing for the inline-end edge omits `endDock`, and the content column
|
|
39
|
+
extends to the frame's edge instead of reserving width for an empty rail. Route content
|
|
38
40
|
is the sole scroller, so a feature cannot accidentally render an app inside
|
|
39
41
|
the app.
|
|
40
42
|
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
*/
|
|
11
11
|
declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
|
|
12
12
|
declare const buttonVariants: (props?: ({
|
|
13
|
-
size?: "default" | "
|
|
14
|
-
variant?: "
|
|
13
|
+
size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
|
|
14
|
+
variant?: "default" | "destructive" | "destructive-outline" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
|
|
15
15
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { buttonAccessibleDisabledClass, buttonVariants };
|
|
@@ -83,7 +83,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
|
|
|
83
83
|
declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
|
|
84
84
|
declare const sidebarMenuButtonVariants: (props?: ({
|
|
85
85
|
variant?: "default" | "outline" | null | undefined;
|
|
86
|
-
size?: "default" | "
|
|
86
|
+
size?: "default" | "lg" | "sm" | "rail" | null | undefined;
|
|
87
87
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
88
88
|
declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
|
|
89
89
|
asChild?: boolean;
|
|
@@ -31,8 +31,12 @@ type WorkspaceShellProps = {
|
|
|
31
31
|
navigation: WorkspaceNavigation;
|
|
32
32
|
/** Sticky route chrome; managed navigation exposes its compact trigger here. */
|
|
33
33
|
topBar: (context: WorkspaceTopBarContext) => ReactElement;
|
|
34
|
-
/**
|
|
35
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Inline-end rail or inspector dock. Omit it and the shell mounts no end
|
|
36
|
+
* dock at all: no rail, none of its inline-end width reservation, and the
|
|
37
|
+
* content column extends to the frame's inline-end edge.
|
|
38
|
+
*/
|
|
39
|
+
endDock?: ReactElement | undefined;
|
|
36
40
|
/** Active route content. */
|
|
37
41
|
children: ReactNode;
|
|
38
42
|
};
|
|
@@ -40,6 +44,9 @@ type WorkspaceShellProps = {
|
|
|
40
44
|
* Stella's complete authenticated workspace frame. It owns the dynamic
|
|
41
45
|
* viewport, sibling rail geometry, sticky top chrome, and sole content
|
|
42
46
|
* scroller so product routes cannot create an app inside the app.
|
|
47
|
+
*
|
|
48
|
+
* The end dock is optional: a host with nothing to put on the inline-end edge
|
|
49
|
+
* omits it rather than reserving width for an empty rail.
|
|
43
50
|
*/
|
|
44
51
|
declare const WorkspaceShell: ({ children, endDock, navigation, topBar }: WorkspaceShellProps) => import("react").JSX.Element;
|
|
45
52
|
type WorkspaceEndRailChatAction = {
|
|
@@ -11,6 +11,9 @@ import { useEffect } from "react";
|
|
|
11
11
|
* Stella's complete authenticated workspace frame. It owns the dynamic
|
|
12
12
|
* viewport, sibling rail geometry, sticky top chrome, and sole content
|
|
13
13
|
* scroller so product routes cannot create an app inside the app.
|
|
14
|
+
*
|
|
15
|
+
* The end dock is optional: a host with nothing to put on the inline-end edge
|
|
16
|
+
* omits it rather than reserving width for an empty rail.
|
|
14
17
|
*/
|
|
15
18
|
const WorkspaceShell = ({ children, endDock, navigation, topBar }) => {
|
|
16
19
|
const isCompact = useIsMobile();
|
package/dist/index.d.ts
CHANGED
|
@@ -79,11 +79,12 @@ import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, K
|
|
|
79
79
|
import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./kanban/matrix.js";
|
|
80
80
|
import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KanbanColumnBandSpan, hasKanbanColumnBands, resolveKanbanColumnBands } from "./kanban/column-bands.js";
|
|
81
81
|
import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./kanban/column-header.js";
|
|
82
|
+
import { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX } from "./kanban/layout-tokens.js";
|
|
82
83
|
import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./kanban/sortable-interactions.logic.js";
|
|
83
84
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
|
|
84
85
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
|
|
85
86
|
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
86
|
-
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
|
|
87
|
+
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneColumnActionContext, KanbanSubgroupLaneColumnSummaryContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
|
|
87
88
|
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./kanban/band-peek.js";
|
|
88
89
|
import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption, KanbanCollapsedBandCaptionProps } from "./kanban/sticky-lane.js";
|
|
89
90
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./kanban/virtual-cell.js";
|
|
@@ -98,4 +99,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffS
|
|
|
98
99
|
import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
|
|
99
100
|
import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
|
|
100
101
|
import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
|
|
101
|
-
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, MenuPreviewLayout, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useViewportWidth, visibleColumnIds };
|
|
102
|
+
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, type BidiDirection, BidiText, type BidiTextProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BuildKanbanBoardMatrixParams, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, type ColorPickerContentProps, type ColorPickerProps, type ColorPreset, ColorVariants, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, type ControlSize, type CreateKanbanDropIntentParams, DEFAULT_PRESETS, DataTable, type DataTableAriaSort, type DataTableColumn, type DataTableProps, type DataTableRowAction, DatePickerPopover, type DatePickerPopoverProps, DestructiveActionConfirmation, DestructiveConfirmDialog, type DestructiveConfirmDialogProps, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, type HexColorPickerProps, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneColumnActionContext, type KanbanSubgroupLaneColumnSummaryContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, Label, MenuPreviewLayout, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OptionColor, type OrderKanbanCellsByColumnsParams, OutlineItem, OutlineRail, OutlineRailProps, OverlayLayer, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, ReviewAuthorAvatar, ReviewCommentAuthor, ReviewCommentCard, ReviewDecisionActions, ReviewDecisionSize, ReviewDecisionState, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffSegmentType, ReviewDiffText, ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone, ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusBadge, ReviewStatusDot, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, ScrollToTopProps, SecretInput, type SecretInputProps, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, type SheetSide, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, type SortDirection, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, type TableColumnCapabilities, type TableColumnDescriptor, TableFooter, TableHead, TableHeader, TableRow, type TableSchema, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, type TextareaProps, type ToastPosition, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, UserText, type WorkspaceCompactNavigation, WorkspaceEndRail, type WorkspaceEndRailChatAction, type WorkspaceEndRailProps, type WorkspaceNavigation, WorkspaceShell, type WorkspaceShellProps, type WorkspaceTopBarContext, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useViewportWidth, visibleColumnIds };
|
package/dist/index.js
CHANGED
|
@@ -72,6 +72,7 @@ import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parseP
|
|
|
72
72
|
import { selectKanbanCardFieldIds } from "./kanban/card-properties.js";
|
|
73
73
|
import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption } from "./kanban/sticky-lane.js";
|
|
74
74
|
import { KanbanCardShell } from "./kanban/card-shell.js";
|
|
75
|
+
import { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX } from "./kanban/layout-tokens.js";
|
|
75
76
|
import { KanbanCellAction } from "./kanban/cell-action.js";
|
|
76
77
|
import { KanbanColumnBandHeader } from "./kanban/column-band-header.js";
|
|
77
78
|
import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
|
|
@@ -94,4 +95,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETI
|
|
|
94
95
|
import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
|
|
95
96
|
import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
|
|
96
97
|
import { ReviewStatusBadge } from "./review/review-status-badge.js";
|
|
97
|
-
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanCollapsedBandCaption, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useViewportWidth, visibleColumnIds };
|
|
98
|
+
export { APPLICATION_RAIL_BUTTON_SIZE, APPLICATION_RAIL_ICON_SIZE, APPLICATION_RAIL_WIDTH, Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport, AnchoredToastProvider, ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu, ApplicationRailSeparator, Avatar, AvatarFallback, AvatarImage, BOARD_DRAG_OVERLAY_Z_INDEX, BidiText, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONTROL_SIZE, CONTROL_SIZES, CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, Checkbox, ColorPicker, ColorPickerContent, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandCollection, CommandDialog, CommandDialogPopup, CommandDialogTrigger, CommandEmpty, CommandFooter, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandList, CommandPanel, CommandSeparator, CommandShortcut, DEFAULT_PRESETS, DataTable, DatePickerPopover, DestructiveActionConfirmation, DestructiveConfirmDialog, Dialog, DialogBackdrop, DialogBackdrop as DialogOverlay, DialogClose, DialogPopup as DialogContent, DialogPopup, DialogCreateHandle, DialogDescription, DialogFooter, DialogHeader, DialogPanel, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DirectionalIcon, DiscordLogoIcon, Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, GitHubLogoIcon, HexColorPicker, PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanCollapsedBandCaption, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, OutlineRail, PROPERTY_ROW_GRID, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger, PreviewCardPrimitive, PreviewPane, ResourceCalendar, ReviewAuthorAvatar, ReviewCommentCard, ReviewDecisionActions, ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, ReviewOutOfDateNotice, ReviewSeverityDot, ReviewStatusBadge, ReviewStatusDot, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, ScrollArea, ScrollBar, ScrollToTop, SecretInput, SegmentedIconToggle, Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetBackdrop as SheetOverlay, SheetClose, SheetPopup as SheetContent, SheetPopup, SheetDescription, SheetFooter, SheetHeader, SheetPanel, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SortableHead, StellaMark, StellaWordmarkLatin, TOAST_RIGHT_OFFSET_VAR, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, TRACKED_DELETION_STYLE, TRACKED_INSERTION_STYLE, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsPanel, TabsList, TabsTab, TabsTab as TabsTrigger, TextSeparator, Textarea, ToastProvider, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger, UNKNOWN_AUTHOR_LABEL, UserText, WorkspaceEndRail, WorkspaceShell, assertConsecutiveCalendarDates, buildKanbanBoardMatrix, buttonAccessibleDisabledClass, buttonVariants, cn, composeRefs, containedEventHandler, containedHandler, contentDir, createKanbanDropIntent, duplicateColumnIds, emptyColor, entityTabGlyph, findTableColumn, getFirstWeekday, getInitials, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, getLocaleWeekInfo, getResourceCalendarPlacement, getWeekendDays, hasKanbanColumnBands, hideableColumnIds, isKanbanGroupingRenderable, isStructuredInputType, kanbanKeyboardCoordinates, layoutResourceCalendarEntries, nextCalendarDate, optionColors, orderKanbanCellsByColumns, parsePersistedPaneWidth, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, resolveKeyboardWidth, resolveOptionColor, reviewDiffSegmentKeys, reviewSeverityTone, selectKanbanCardFieldIds, selectKanbanRows, shouldForceSidebarCollapsed, sortableColumnIds, stellaToast, tableColumnIds, tableColumnSizing, useComboboxFilter, useContentDir, useDestructiveActionConfirmation, useInspectorPaneWidth, useIsMobile, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors, useLatest, useSidebar, useSidebarInlineSize, useViewportWidth, visibleColumnIds };
|
|
@@ -4,12 +4,27 @@ type KanbanCardShellProps = {
|
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
/** Overlay slot pinned to the top-end corner (row actions). */
|
|
6
6
|
actions?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Whether `actions` are drawn at all times or only once the card is under
|
|
9
|
+
* the pointer. `"hover"` also hands their placement to the shell, so the
|
|
10
|
+
* quiet actions of every board rest in the same corner and a caller passes
|
|
11
|
+
* bare icon buttons; `"always"` (the default) leaves a caller's own overlay
|
|
12
|
+
* exactly where it put it.
|
|
13
|
+
*
|
|
14
|
+
* A pointer that cannot hover would never reveal them, so a coarse pointer
|
|
15
|
+
* keeps them shown.
|
|
16
|
+
*/
|
|
17
|
+
actionsVisibility?: "always" | "hover" | undefined;
|
|
7
18
|
/**
|
|
8
19
|
* The card's identity row: whatever says which card this is, held at the top
|
|
9
20
|
* of the card while the card scrolls past under it, and released where the
|
|
10
21
|
* card ends. A card taller than the viewport otherwise loses its own name
|
|
11
22
|
* halfway down. Omit it and the card renders exactly as it did before.
|
|
12
23
|
*
|
|
24
|
+
* The row runs the card's full width and the actions overlay leads the same
|
|
25
|
+
* corner over it, so leave the row's end side clear of anything the actions
|
|
26
|
+
* would cover.
|
|
27
|
+
*
|
|
13
28
|
* Booleans are excluded so `condition && <Row />` cannot reach the slot: a
|
|
14
29
|
* `false` React renders as nothing would still leave the row's divider and
|
|
15
30
|
* spacing behind. Write the absent case as `condition ? <Row /> : null`.
|
|
@@ -41,6 +56,6 @@ type KanbanCardShellProps = {
|
|
|
41
56
|
* Nothing here clips its overflow: a pinned identity row stops sticking the
|
|
42
57
|
* moment anything between it and the scroll container clips.
|
|
43
58
|
*/
|
|
44
|
-
declare const KanbanCardShell: ({ children, actions, stickyHeader, active, onOpen, bodyRef, dragRef, className }: KanbanCardShellProps) => import("react").JSX.Element;
|
|
59
|
+
declare const KanbanCardShell: ({ children, actions, actionsVisibility, stickyHeader, active, onOpen, bodyRef, dragRef, className }: KanbanCardShellProps) => import("react").JSX.Element;
|
|
45
60
|
//#endregion
|
|
46
61
|
export { KanbanCardShell, KanbanCardShellProps };
|
|
@@ -15,7 +15,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
15
15
|
* Nothing here clips its overflow: a pinned identity row stops sticking the
|
|
16
16
|
* moment anything between it and the scroll container clips.
|
|
17
17
|
*/
|
|
18
|
-
const KanbanCardShell = ({ children, actions, stickyHeader, active, onOpen, bodyRef, dragRef, className }) => {
|
|
18
|
+
const KanbanCardShell = ({ children, actions, actionsVisibility = "always", stickyHeader, active, onOpen, bodyRef, dragRef, className }) => {
|
|
19
19
|
const body = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
20
20
|
stickyHeader === void 0 || stickyHeader === null ? null : /* @__PURE__ */ jsx("div", {
|
|
21
21
|
className: cn(STICKY_HEADER_CLASS, KANBAN_CARD_STICKY_TOP_CLASS),
|
|
@@ -23,7 +23,11 @@ const KanbanCardShell = ({ children, actions, stickyHeader, active, onOpen, body
|
|
|
23
23
|
children: stickyHeader
|
|
24
24
|
}),
|
|
25
25
|
children,
|
|
26
|
-
actions
|
|
26
|
+
actionsVisibility === "hover" && actions !== void 0 ? /* @__PURE__ */ jsx("div", {
|
|
27
|
+
className: HOVER_ACTIONS_CLASS,
|
|
28
|
+
"data-kanban-card-actions": "hover",
|
|
29
|
+
children: actions
|
|
30
|
+
}) : actions
|
|
27
31
|
] });
|
|
28
32
|
if (!onOpen) return /* @__PURE__ */ jsx("div", {
|
|
29
33
|
className: "group/card",
|
|
@@ -59,11 +63,30 @@ const ACTIVE_CLASS = "ring-primary/30 ring-2";
|
|
|
59
63
|
* passes behind it instead of reading through it, ruled off with the card's own
|
|
60
64
|
* border weight.
|
|
61
65
|
*
|
|
66
|
+
* `bg-card` on its own is not enough: a consumer is free to define that token
|
|
67
|
+
* with an alpha channel, and a translucent pinned row lets the very cards it
|
|
68
|
+
* is holding back read through it. The card colour goes down as a flat
|
|
69
|
+
* gradient layer over the opaque page background instead, which is the card's
|
|
70
|
+
* own surface at full opacity whatever the token turns out to be.
|
|
71
|
+
*
|
|
62
72
|
* No `z-index`: being positioned is already enough to paint over the card's
|
|
63
73
|
* flow content, and taking a layer would put the row over the `actions`
|
|
64
74
|
* overlay, which callers anchor to the same corner with no layer of its own.
|
|
65
75
|
* Tree order settles the rest, and the row renders before `actions`.
|
|
66
76
|
*/
|
|
67
|
-
const STICKY_HEADER_CLASS = "bg-card sticky mb-2 border-b pb-2";
|
|
77
|
+
const STICKY_HEADER_CLASS = "bg-background bg-[linear-gradient(var(--color-card),var(--color-card))] sticky mb-2 border-b pb-2";
|
|
78
|
+
/**
|
|
79
|
+
* Where the shell puts the actions it reveals on hover.
|
|
80
|
+
*
|
|
81
|
+
* The overlay takes a layer of its own here, unlike the always-visible slot:
|
|
82
|
+
* it has to stay over the pinned identity row that leads the same corner, and
|
|
83
|
+
* the row's own comment explains why the row cannot take one instead. An open
|
|
84
|
+
* menu holds the actions on through its trigger's `aria-expanded`, or the
|
|
85
|
+
* trigger would disappear from under the popup it just opened.
|
|
86
|
+
*
|
|
87
|
+
* The fade is decoration: a reader who asked for less motion still gets the
|
|
88
|
+
* actions, they simply arrive at once.
|
|
89
|
+
*/
|
|
90
|
+
const HOVER_ACTIONS_CLASS = "absolute end-1.5 top-1.5 z-10 flex items-center gap-0.5 opacity-0 transition-opacity group-hover/card:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100";
|
|
68
91
|
//#endregion
|
|
69
92
|
export { KanbanCardShell };
|
|
@@ -3,12 +3,20 @@ import { ComponentProps } from "react";
|
|
|
3
3
|
//#region src/kanban/cell-action.d.ts
|
|
4
4
|
type KanbanCellActionProps = Omit<ComponentProps<typeof Button>, "variant">;
|
|
5
5
|
/**
|
|
6
|
-
* The quiet action at the end of a cell: a full-width
|
|
7
|
-
*
|
|
6
|
+
* The quiet action at the end of a cell: a full-width row that adds a card to
|
|
7
|
+
* that column and lane.
|
|
8
8
|
*
|
|
9
9
|
* Every board rendered its own copy of this row and the copies drifted in
|
|
10
10
|
* height, tone, and icon size. One primitive keeps the footer of every cell on
|
|
11
11
|
* the same rhythm as a card, so an empty cell and a full one end the same way.
|
|
12
|
+
*
|
|
13
|
+
* It is drawn as the outline of a card rather than as a button: the row stands
|
|
14
|
+
* where the next card will, so a dashed card-shaped slot says what pressing it
|
|
15
|
+
* produces, which a ghost button in the same place never did. It stays a
|
|
16
|
+
* `Button` underneath for the focus ring and the coarse-pointer touch target
|
|
17
|
+
* the variant already carries; only the height is restated per breakpoint,
|
|
18
|
+
* since the button's own size drops a step at `sm` and the row has to hold the
|
|
19
|
+
* board's chrome rhythm at every width.
|
|
12
20
|
*/
|
|
13
21
|
declare const KanbanCellAction: ({ children, className, ...props }: KanbanCellActionProps) => import("react").JSX.Element;
|
|
14
22
|
//#endregion
|
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
2
|
import { Button } from "../components/button.js";
|
|
3
|
+
import "./layout-tokens.js";
|
|
3
4
|
import { PlusIcon } from "lucide-react";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
//#region src/kanban/cell-action.tsx
|
|
6
7
|
/**
|
|
7
|
-
* The quiet action at the end of a cell: a full-width
|
|
8
|
-
*
|
|
8
|
+
* The quiet action at the end of a cell: a full-width row that adds a card to
|
|
9
|
+
* that column and lane.
|
|
9
10
|
*
|
|
10
11
|
* Every board rendered its own copy of this row and the copies drifted in
|
|
11
12
|
* height, tone, and icon size. One primitive keeps the footer of every cell on
|
|
12
13
|
* the same rhythm as a card, so an empty cell and a full one end the same way.
|
|
14
|
+
*
|
|
15
|
+
* It is drawn as the outline of a card rather than as a button: the row stands
|
|
16
|
+
* where the next card will, so a dashed card-shaped slot says what pressing it
|
|
17
|
+
* produces, which a ghost button in the same place never did. It stays a
|
|
18
|
+
* `Button` underneath for the focus ring and the coarse-pointer touch target
|
|
19
|
+
* the variant already carries; only the height is restated per breakpoint,
|
|
20
|
+
* since the button's own size drops a step at `sm` and the row has to hold the
|
|
21
|
+
* board's chrome rhythm at every width.
|
|
13
22
|
*/
|
|
14
23
|
const KanbanCellAction = ({ children, className, ...props }) => /* @__PURE__ */ jsxs(Button, {
|
|
15
|
-
className: cn("text-muted-foreground hover:text-foreground
|
|
24
|
+
className: cn("border-border/70 text-muted-foreground hover:bg-muted/40 hover:text-foreground flex w-full items-center justify-start gap-1.5 rounded-lg border border-dashed px-3 text-sm", "h-9", "sm:h-9", className),
|
|
16
25
|
"data-slot": "kanban-cell-action",
|
|
17
26
|
...props,
|
|
18
27
|
variant: "ghost",
|
|
@@ -30,8 +30,9 @@ type KanbanColumnBandHeaderProps = {
|
|
|
30
30
|
actions?: ReactNode;
|
|
31
31
|
};
|
|
32
32
|
/**
|
|
33
|
-
* The band line above a run of columns: one
|
|
34
|
-
* and count, so a band costs the board a
|
|
33
|
+
* The band line above a run of columns: one `KANBAN_BAND_CAPTION_ROW_HEIGHT`
|
|
34
|
+
* row of toggle, swatch, name, and count, so a band costs the board a
|
|
35
|
+
* caption's height and nothing more.
|
|
35
36
|
* Folded, only the toggle remains in this line; the band's name moves down
|
|
36
37
|
* into the narrow column body, where the height is already there.
|
|
37
38
|
*/
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
2
|
import { DirectionalIcon } from "../components/directional-icon.js";
|
|
3
|
+
import "./layout-tokens.js";
|
|
3
4
|
import { ChevronDownIcon } from "lucide-react";
|
|
4
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
//#region src/kanban/column-band-header.tsx
|
|
6
7
|
/**
|
|
7
|
-
* The band line above a run of columns: one
|
|
8
|
-
* and count, so a band costs the board a
|
|
8
|
+
* The band line above a run of columns: one `KANBAN_BAND_CAPTION_ROW_HEIGHT`
|
|
9
|
+
* row of toggle, swatch, name, and count, so a band costs the board a
|
|
10
|
+
* caption's height and nothing more.
|
|
9
11
|
* Folded, only the toggle remains in this line; the band's name moves down
|
|
10
12
|
* into the narrow column body, where the height is already there.
|
|
11
13
|
*/
|
|
12
14
|
const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, compact = collapsed, toggleLabel, onCollapsedChange, actions }) => /* @__PURE__ */ jsxs("div", {
|
|
13
|
-
className: cn("flex
|
|
15
|
+
className: cn("flex items-center gap-1", "h-7", compact ? "justify-center" : "pe-1"),
|
|
14
16
|
"data-collapsed": collapsed ? "" : void 0,
|
|
15
17
|
"data-compact": compact ? "" : void 0,
|
|
16
18
|
"data-slot": "kanban-column-band-header",
|
|
@@ -20,10 +20,10 @@ type KanbanColumnHeaderProps = {
|
|
|
20
20
|
* The column header row: one rhythm for the swatch, the name, the count, the
|
|
21
21
|
* calculation, and the column's controls, so every board's header lines up.
|
|
22
22
|
*
|
|
23
|
-
* Fixed at `
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
23
|
+
* Fixed at `KANBAN_CHROME_ROW_HEIGHT`, the height a lane's own rows take, so
|
|
24
|
+
* every chrome row on the board sits on one rhythm and a column's top edge
|
|
25
|
+
* lines up with the lane rows under it. The title clips instead of wrapping
|
|
26
|
+
* so a long name can never grow the row past that height.
|
|
27
27
|
*/
|
|
28
28
|
declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions, className }: KanbanColumnHeaderProps) => import("react").JSX.Element;
|
|
29
29
|
//#endregion
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
|
-
import
|
|
2
|
+
import "./layout-tokens.js";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
//#region src/kanban/column-header.tsx
|
|
5
5
|
/**
|
|
6
6
|
* The column header row: one rhythm for the swatch, the name, the count, the
|
|
7
7
|
* calculation, and the column's controls, so every board's header lines up.
|
|
8
8
|
*
|
|
9
|
-
* Fixed at `
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
9
|
+
* Fixed at `KANBAN_CHROME_ROW_HEIGHT`, the height a lane's own rows take, so
|
|
10
|
+
* every chrome row on the board sits on one rhythm and a column's top edge
|
|
11
|
+
* lines up with the lane rows under it. The title clips instead of wrapping
|
|
12
|
+
* so a long name can never grow the row past that height.
|
|
13
13
|
*/
|
|
14
14
|
const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions, className }) => /* @__PURE__ */ jsxs("div", {
|
|
15
|
-
className: cn("flex items-center gap-2 px-3",
|
|
15
|
+
className: cn("flex items-center gap-2 px-3", "h-9", className),
|
|
16
16
|
children: [
|
|
17
17
|
swatch,
|
|
18
18
|
/* @__PURE__ */ jsxs("span", {
|
package/dist/kanban/index.d.ts
CHANGED
|
@@ -6,12 +6,13 @@ import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, K
|
|
|
6
6
|
import { BuildKanbanBoardMatrixParams, CreateKanbanDropIntentParams, KANBAN_BOARD_AXES, KanbanBoardAxis, KanbanBoardCell, KanbanBoardColumn, KanbanBoardCoordinate, KanbanBoardDestination, KanbanBoardLane, KanbanBoardMatrix, KanbanDropAxisChange, KanbanDropIntent, OrderKanbanCellsByColumnsParams, ResolveKanbanGroupValueParams, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, orderKanbanCellsByColumns } from "./matrix.js";
|
|
7
7
|
import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KanbanColumnBandSpan, hasKanbanColumnBands, resolveKanbanColumnBands } from "./column-bands.js";
|
|
8
8
|
import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js";
|
|
9
|
+
import { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX } from "./layout-tokens.js";
|
|
9
10
|
import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
|
|
10
11
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
|
|
11
12
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./sortable-edge.js";
|
|
12
13
|
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
|
|
13
|
-
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
|
|
14
|
+
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneColumnActionContext, KanbanSubgroupLaneColumnSummaryContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
|
|
14
15
|
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
|
|
15
16
|
import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption, KanbanCollapsedBandCaptionProps } from "./sticky-lane.js";
|
|
16
17
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./virtual-cell.js";
|
|
17
|
-
export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
|
18
|
+
export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, KanbanCollapsedBandCaption, type KanbanCollapsedBandCaptionProps, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneColumnActionContext, type KanbanSubgroupLaneColumnSummaryContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
package/dist/kanban/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { selectKanbanCardFieldIds } from "./card-properties.js";
|
|
2
2
|
import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption } from "./sticky-lane.js";
|
|
3
3
|
import { KanbanCardShell } from "./card-shell.js";
|
|
4
|
+
import { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX } from "./layout-tokens.js";
|
|
4
5
|
import { KanbanCellAction } from "./cell-action.js";
|
|
5
6
|
import { KanbanColumnBandHeader } from "./column-band-header.js";
|
|
6
7
|
import { getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
|
|
@@ -14,4 +15,4 @@ import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanban
|
|
|
14
15
|
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
|
|
15
16
|
import { KanbanSubgroupBoard } from "./subgroup-board.js";
|
|
16
17
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./virtual-cell.js";
|
|
17
|
-
export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanCollapsedBandCaption, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
|
18
|
+
export { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_STICKY_TOP_VAR, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanCollapsedBandCaption, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//#region src/kanban/layout-tokens.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* The heights the board's chrome rows are built from.
|
|
4
|
+
*
|
|
5
|
+
* A board stacks several rows of chrome above the first card — the band
|
|
6
|
+
* caption, the column headers, a lane's identity and its per-column
|
|
7
|
+
* summaries — and every one of them is pinned at some point, so their heights
|
|
8
|
+
* are what a card's own pinned row is offset by. Naming them once keeps the
|
|
9
|
+
* rows on a single rhythm and keeps the pixel value that offsets a sticky
|
|
10
|
+
* control in step with the class that draws the row.
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* The column header row and a lane's rows: a *fixed* height, tighter than the
|
|
14
|
+
* inspector's 48px toolbar row, because a board shows three of these before
|
|
15
|
+
* the first card and each one costs the cards their space. Fixed rather than
|
|
16
|
+
* minimum: a row that grows with its content moves every offset below it.
|
|
17
|
+
*/
|
|
18
|
+
declare const KANBAN_CHROME_ROW_HEIGHT: "h-9";
|
|
19
|
+
declare const KANBAN_CHROME_ROW_HEIGHT_PX: 36;
|
|
20
|
+
/**
|
|
21
|
+
* The band caption line, one step shorter again: a band names a run of
|
|
22
|
+
* columns rather than holding controls of its own, so it reads as a label
|
|
23
|
+
* over the header row rather than a second row of chrome.
|
|
24
|
+
*/
|
|
25
|
+
declare const KANBAN_BAND_CAPTION_ROW_HEIGHT: "h-7";
|
|
26
|
+
declare const KANBAN_BAND_CAPTION_ROW_HEIGHT_PX: 28;
|
|
27
|
+
//#endregion
|
|
28
|
+
export { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//#region src/kanban/layout-tokens.ts
|
|
2
|
+
/**
|
|
3
|
+
* The heights the board's chrome rows are built from.
|
|
4
|
+
*
|
|
5
|
+
* A board stacks several rows of chrome above the first card — the band
|
|
6
|
+
* caption, the column headers, a lane's identity and its per-column
|
|
7
|
+
* summaries — and every one of them is pinned at some point, so their heights
|
|
8
|
+
* are what a card's own pinned row is offset by. Naming them once keeps the
|
|
9
|
+
* rows on a single rhythm and keeps the pixel value that offsets a sticky
|
|
10
|
+
* control in step with the class that draws the row.
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* The column header row and a lane's rows: a *fixed* height, tighter than the
|
|
14
|
+
* inspector's 48px toolbar row, because a board shows three of these before
|
|
15
|
+
* the first card and each one costs the cards their space. Fixed rather than
|
|
16
|
+
* minimum: a row that grows with its content moves every offset below it.
|
|
17
|
+
*/
|
|
18
|
+
const KANBAN_CHROME_ROW_HEIGHT = "h-9";
|
|
19
|
+
const KANBAN_CHROME_ROW_HEIGHT_PX = 36;
|
|
20
|
+
/**
|
|
21
|
+
* The band caption line, one step shorter again: a band names a run of
|
|
22
|
+
* columns rather than holding controls of its own, so it reads as a label
|
|
23
|
+
* over the header row rather than a second row of chrome.
|
|
24
|
+
*/
|
|
25
|
+
const KANBAN_BAND_CAPTION_ROW_HEIGHT = "h-7";
|
|
26
|
+
const KANBAN_BAND_CAPTION_ROW_HEIGHT_PX = 28;
|
|
27
|
+
//#endregion
|
|
28
|
+
export { KANBAN_BAND_CAPTION_ROW_HEIGHT, KANBAN_BAND_CAPTION_ROW_HEIGHT_PX, KANBAN_CHROME_ROW_HEIGHT, KANBAN_CHROME_ROW_HEIGHT_PX };
|
|
@@ -11,6 +11,17 @@ type KanbanSubgroupLaneIdentityContext = {
|
|
|
11
11
|
group: KanbanGroup;
|
|
12
12
|
count: number;
|
|
13
13
|
};
|
|
14
|
+
/** One column's cell in a lane's own row, and what that cell stands for. */
|
|
15
|
+
type KanbanSubgroupLaneColumnSummaryContext = {
|
|
16
|
+
lane: KanbanGroup;
|
|
17
|
+
column: KanbanBoardColumn;
|
|
18
|
+
/** Rows in this lane/column intersection, including zero. */
|
|
19
|
+
count: number;
|
|
20
|
+
};
|
|
21
|
+
type KanbanSubgroupLaneColumnActionContext = {
|
|
22
|
+
lane: KanbanGroup;
|
|
23
|
+
column: KanbanBoardColumn;
|
|
24
|
+
};
|
|
14
25
|
type KanbanSubgroupCellContext<TRow> = {
|
|
15
26
|
cell: KanbanBoardCell<TRow>;
|
|
16
27
|
/** Number of rows in this lane/column intersection, including zero. */
|
|
@@ -66,6 +77,18 @@ type KanbanSubgroupBoardProps<TRow> = {
|
|
|
66
77
|
renderColumnHeader: (context: KanbanSubgroupColumnHeaderContext) => ReactNode;
|
|
67
78
|
renderLaneIdentity: (context: KanbanSubgroupLaneIdentityContext) => ReactNode;
|
|
68
79
|
renderCell: (context: KanbanSubgroupCellContext<TRow>) => ReactNode;
|
|
80
|
+
/**
|
|
81
|
+
* What a lane's own row says about one column: its count by default. The
|
|
82
|
+
* row is pinned, so this is the one line about a column that survives a
|
|
83
|
+
* scroll down a lane hundreds of cards tall — a calculation belongs here
|
|
84
|
+
* rather than at the end of a cell nobody reaches.
|
|
85
|
+
*/
|
|
86
|
+
renderLaneColumnSummary?: ((context: KanbanSubgroupLaneColumnSummaryContext) => ReactNode) | undefined;
|
|
87
|
+
/**
|
|
88
|
+
* The control at the end of a lane's cell for one column, such as adding a
|
|
89
|
+
* card straight into that intersection. None by default.
|
|
90
|
+
*/
|
|
91
|
+
renderLaneColumnAction?: ((context: KanbanSubgroupLaneColumnActionContext) => ReactNode) | undefined;
|
|
69
92
|
/**
|
|
70
93
|
* The line above a band's columns. Defaults to `KanbanColumnBandHeader`
|
|
71
94
|
* with the band's label and count.
|
|
@@ -115,6 +138,11 @@ type KanbanSubgroupBoardProps<TRow> = {
|
|
|
115
138
|
/**
|
|
116
139
|
* Reusable swimlane layout over the canonical two-axis Kanban matrix.
|
|
117
140
|
*
|
|
141
|
+
* Every lane leads with a row of its own, pinned on both axes: its name at the
|
|
142
|
+
* visible inline edge, and beside each column what that column holds in this
|
|
143
|
+
* lane, so a reader deep inside a lane still knows which lane it is and what
|
|
144
|
+
* is around them.
|
|
145
|
+
*
|
|
118
146
|
* Columns that carry band metadata render under a one-line band caption and
|
|
119
147
|
* can be collapsed as a run: the band folds into one narrow slot in every
|
|
120
148
|
* row, whose cells stay reachable (a host renders its drop target in them),
|
|
@@ -124,6 +152,6 @@ type KanbanSubgroupBoardProps<TRow> = {
|
|
|
124
152
|
* in every state; the caption line never grows past its own height, so a
|
|
125
153
|
* folded band costs no vertical space.
|
|
126
154
|
*/
|
|
127
|
-
declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
|
|
155
|
+
declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
|
|
128
156
|
//#endregion
|
|
129
|
-
export { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };
|
|
157
|
+
export { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneColumnActionContext, KanbanSubgroupLaneColumnSummaryContext, KanbanSubgroupLaneIdentityContext };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
2
|
import { DirectionalIcon } from "../components/directional-icon.js";
|
|
3
|
-
import { KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption } from "./sticky-lane.js";
|
|
3
|
+
import { KANBAN_STICKY_TOP_CLASS, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption } from "./sticky-lane.js";
|
|
4
|
+
import "./layout-tokens.js";
|
|
4
5
|
import { KanbanColumnBandHeader } from "./column-band-header.js";
|
|
5
6
|
import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_CLASS, resolveKanbanColumnBands } from "./column-bands.js";
|
|
6
7
|
import { KANBAN_CARD_DRAG_MIME } from "./drag-interactions.js";
|
|
@@ -9,6 +10,28 @@ import { ChevronDownIcon } from "lucide-react";
|
|
|
9
10
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
10
11
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
11
12
|
//#region src/kanban/subgroup-board.tsx
|
|
13
|
+
/**
|
|
14
|
+
* How far a lane's own pinned row reaches: its identity line over the line of
|
|
15
|
+
* per-column summaries, each fixed at the chrome row height.
|
|
16
|
+
*
|
|
17
|
+
* Stated rather than measured, because both lines are fixed by construction —
|
|
18
|
+
* a caller's summary or action renders inside a row that cannot grow — and the
|
|
19
|
+
* cells below have to know the offset before the first paint, or every card's
|
|
20
|
+
* pinned identity row spends that frame parked where the lane row is about
|
|
21
|
+
* to be.
|
|
22
|
+
*/
|
|
23
|
+
const LANE_ROW_HEIGHT_PX = 72;
|
|
24
|
+
/**
|
|
25
|
+
* A finger's 44px target on a toggle the chrome row keeps at 36px.
|
|
26
|
+
*
|
|
27
|
+
* The same pseudo-element the shared `Button` extends its own targets with:
|
|
28
|
+
* the visible control keeps the row's height, and only the touch surface
|
|
29
|
+
* grows. It grows evenly above and below rather than downwards, so the extra
|
|
30
|
+
* reach stops well short of the controls a caller renders in the summaries
|
|
31
|
+
* under it — those sit at the far end of their own column, not under the
|
|
32
|
+
* lane's name.
|
|
33
|
+
*/
|
|
34
|
+
const LANE_TOGGLE_COARSE_TARGET_CLASS = "relative pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:-inset-y-1 pointer-coarse:after:min-h-11";
|
|
12
35
|
const groupValueKey = (value) => value === null ? "null" : `value:${value.length}:${value}`;
|
|
13
36
|
const columnKey = (column) => column.type === "group" ? `group:${groupValueKey(column.group.value)}` : `destination:${column.destination.id}`;
|
|
14
37
|
const spanKey = (span) => span.band === null ? `single:${span.columns.map(columnKey).join("|")}` : `band:${span.band.id}`;
|
|
@@ -16,6 +39,11 @@ const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0)
|
|
|
16
39
|
/**
|
|
17
40
|
* Reusable swimlane layout over the canonical two-axis Kanban matrix.
|
|
18
41
|
*
|
|
42
|
+
* Every lane leads with a row of its own, pinned on both axes: its name at the
|
|
43
|
+
* visible inline edge, and beside each column what that column holds in this
|
|
44
|
+
* lane, so a reader deep inside a lane still knows which lane it is and what
|
|
45
|
+
* is around them.
|
|
46
|
+
*
|
|
19
47
|
* Columns that carry band metadata render under a one-line band caption and
|
|
20
48
|
* can be collapsed as a run: the band folds into one narrow slot in every
|
|
21
49
|
* row, whose cells stay reachable (a host renders its drop target in them),
|
|
@@ -25,7 +53,7 @@ const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0)
|
|
|
25
53
|
* in every state; the caption line never grows past its own height, so a
|
|
26
54
|
* folded band costs no vertical space.
|
|
27
55
|
*/
|
|
28
|
-
const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
|
|
56
|
+
const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
|
|
29
57
|
const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
|
|
30
58
|
const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
|
|
31
59
|
const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
|
|
@@ -221,7 +249,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
221
249
|
const foldedCount = (span, cells) => {
|
|
222
250
|
const count = rowsIn(cellsOf(span, cells));
|
|
223
251
|
return /* @__PURE__ */ jsx("div", {
|
|
224
|
-
className: "flex justify-center",
|
|
252
|
+
className: cn("flex items-center justify-center", "h-9"),
|
|
225
253
|
"data-kanban-lane-column-count": count,
|
|
226
254
|
children: /* @__PURE__ */ jsx("span", {
|
|
227
255
|
className: "text-muted-foreground text-xs tabular-nums",
|
|
@@ -229,7 +257,33 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
229
257
|
})
|
|
230
258
|
});
|
|
231
259
|
};
|
|
260
|
+
/** One column's cell in a lane's row: what it holds, then what it offers. */
|
|
261
|
+
const laneColumnCell = (group, column, count) => /* @__PURE__ */ jsxs("div", {
|
|
262
|
+
className: cn("flex items-center gap-1 px-3", "h-9"),
|
|
263
|
+
"data-kanban-lane-column-count": count,
|
|
264
|
+
children: [renderLaneColumnSummary ? renderLaneColumnSummary({
|
|
265
|
+
column,
|
|
266
|
+
count,
|
|
267
|
+
lane: group
|
|
268
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
269
|
+
className: "text-muted-foreground text-xs tabular-nums",
|
|
270
|
+
children: formatCount(count)
|
|
271
|
+
}), renderLaneColumnAction === void 0 ? null : /* @__PURE__ */ jsx("span", {
|
|
272
|
+
className: "ms-auto flex items-center",
|
|
273
|
+
children: renderLaneColumnAction({
|
|
274
|
+
column,
|
|
275
|
+
lane: group
|
|
276
|
+
})
|
|
277
|
+
})]
|
|
278
|
+
});
|
|
232
279
|
const stickyTopStyle = { [KANBAN_STICKY_TOP_VAR]: `${String(headerHeight)}px` };
|
|
280
|
+
/**
|
|
281
|
+
* What a lane's cells find pinned above them: the board's header and the
|
|
282
|
+
* lane's own row. Restating the offset rather than adding to the inherited
|
|
283
|
+
* one, because a custom property that reads itself is a cycle and resolves
|
|
284
|
+
* to nothing at all.
|
|
285
|
+
*/
|
|
286
|
+
const laneCellsStickyTopStyle = { [KANBAN_STICKY_TOP_VAR]: `${String(headerHeight + LANE_ROW_HEIGHT_PX)}px` };
|
|
233
287
|
return /* @__PURE__ */ jsx("div", {
|
|
234
288
|
className: cn("h-full overflow-auto px-4 pb-4", className),
|
|
235
289
|
style: stickyTopStyle,
|
|
@@ -237,7 +291,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
237
291
|
className: "min-w-max",
|
|
238
292
|
children: [
|
|
239
293
|
/* @__PURE__ */ jsxs("div", {
|
|
240
|
-
className: "bg-background sticky top-0 z-20
|
|
294
|
+
className: "bg-background sticky top-0 z-20",
|
|
241
295
|
"data-kanban-board-header": "",
|
|
242
296
|
ref: headerRef,
|
|
243
297
|
children: [hasBands ? /* @__PURE__ */ jsx("div", {
|
|
@@ -265,7 +319,11 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
265
319
|
onDragLeave: (event) => {
|
|
266
320
|
if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.openDragLeave(band.id);
|
|
267
321
|
},
|
|
268
|
-
children:
|
|
322
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
323
|
+
className: "bg-background sticky start-0 z-10 w-fit max-w-full",
|
|
324
|
+
"data-kanban-band-caption": "",
|
|
325
|
+
children: bandHeader(band, span)
|
|
326
|
+
})
|
|
269
327
|
}, spanKey(span));
|
|
270
328
|
})
|
|
271
329
|
}) : null, renderRow({
|
|
@@ -299,12 +357,14 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
299
357
|
const cellFor = (column) => cells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
|
|
300
358
|
return /* @__PURE__ */ jsxs("section", {
|
|
301
359
|
className: "border-border/60 border-b py-1 first:pt-0 last:border-b-0",
|
|
302
|
-
children: [
|
|
303
|
-
|
|
304
|
-
|
|
360
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
361
|
+
className: cn("bg-background sticky z-10", KANBAN_STICKY_TOP_CLASS),
|
|
362
|
+
"data-kanban-lane-row": "",
|
|
363
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
364
|
+
className: cn("sticky start-0 flex w-fit items-center", "h-9"),
|
|
305
365
|
children: /* @__PURE__ */ jsxs("button", {
|
|
306
366
|
"aria-expanded": !collapsed,
|
|
307
|
-
className: "hover:bg-muted/60 flex
|
|
367
|
+
className: cn("hover:bg-muted/60 flex items-center gap-2 rounded-lg px-2 text-start transition-[background-color]", "h-9", LANE_TOGGLE_COARSE_TARGET_CLASS),
|
|
308
368
|
onClick: () => setLaneCollapsed(group, count, !collapsed),
|
|
309
369
|
type: "button",
|
|
310
370
|
children: [
|
|
@@ -323,23 +383,14 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
323
383
|
})
|
|
324
384
|
]
|
|
325
385
|
})
|
|
326
|
-
}),
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
renderColumn: (column) => {
|
|
330
|
-
const columnRows = cellFor(column)?.rows.length ?? 0;
|
|
331
|
-
return /* @__PURE__ */ jsx("div", {
|
|
332
|
-
className: "px-3",
|
|
333
|
-
"data-kanban-lane-column-count": columnRows,
|
|
334
|
-
children: /* @__PURE__ */ jsx("span", {
|
|
335
|
-
className: "text-muted-foreground text-xs tabular-nums",
|
|
336
|
-
children: formatCount(columnRows)
|
|
337
|
-
})
|
|
338
|
-
});
|
|
339
|
-
},
|
|
386
|
+
}), renderRow({
|
|
387
|
+
label: "Lane column summaries",
|
|
388
|
+
renderColumn: (column) => laneColumnCell(group, column, cellFor(column)?.rows.length ?? 0),
|
|
340
389
|
renderFoldedBand: (_band, span) => foldedCount(span, cells)
|
|
341
|
-
})
|
|
342
|
-
|
|
390
|
+
})]
|
|
391
|
+
}), !collapsed && /* @__PURE__ */ jsx("div", {
|
|
392
|
+
style: laneCellsStickyTopStyle,
|
|
393
|
+
children: renderRow({
|
|
343
394
|
className: "pb-1",
|
|
344
395
|
renderColumn: (column, band) => {
|
|
345
396
|
const cell = cellFor(column);
|
|
@@ -352,7 +403,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
352
403
|
},
|
|
353
404
|
renderFoldedBand: (band, span) => foldedCell(band, span, cells, group.value)
|
|
354
405
|
})
|
|
355
|
-
]
|
|
406
|
+
})]
|
|
356
407
|
}, groupValueKey(group.value));
|
|
357
408
|
}),
|
|
358
409
|
footer
|
|
@@ -3,7 +3,7 @@ import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_CLASS, resolveKanbanCardS
|
|
|
3
3
|
import { useKanbanDropTarget } from "./sortable-interactions.js";
|
|
4
4
|
import { resolveOptionColor } from "../lib/option-color.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import {
|
|
6
|
+
import { useId, useLayoutEffect, useRef, useState } from "react";
|
|
7
7
|
import { useDndContext } from "@dnd-kit/core";
|
|
8
8
|
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
|
|
9
9
|
import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
|
|
@@ -102,14 +102,18 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
|
|
|
102
102
|
const hasStickyFooter = footerPlacement === "sticky-start" && footer !== null && footer !== void 0;
|
|
103
103
|
const stickyFooterRef = useRef(null);
|
|
104
104
|
const [stickyFooterHeight, setStickyFooterHeight] = useState(0);
|
|
105
|
-
|
|
105
|
+
useLayoutEffect(() => {
|
|
106
106
|
const element = stickyFooterRef.current;
|
|
107
107
|
if (element === null) {
|
|
108
108
|
setStickyFooterHeight(0);
|
|
109
109
|
return;
|
|
110
110
|
}
|
|
111
|
+
const measure = (height) => {
|
|
112
|
+
setStickyFooterHeight((current) => current === height ? current : height);
|
|
113
|
+
};
|
|
114
|
+
measure(element.getBoundingClientRect().height);
|
|
111
115
|
const observer = new ResizeObserver(() => {
|
|
112
|
-
|
|
116
|
+
measure(element.getBoundingClientRect().height);
|
|
113
117
|
});
|
|
114
118
|
observer.observe(element);
|
|
115
119
|
return () => observer.disconnect();
|
|
@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
|
|
|
5
5
|
readonly lg: "lg";
|
|
6
6
|
}>;
|
|
7
7
|
type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
|
|
8
|
-
declare const CONTROL_SIZES: readonly ("default" | "
|
|
8
|
+
declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
|
|
9
9
|
//#endregion
|
|
10
10
|
export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stll/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.0",
|
|
4
4
|
"description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"base-ui",
|
|
@@ -593,8 +593,8 @@
|
|
|
593
593
|
"tailwind-merge": "^3.6.0"
|
|
594
594
|
},
|
|
595
595
|
"devDependencies": {
|
|
596
|
-
"@atlaskit/pragmatic-drag-and-drop": "^3.
|
|
597
|
-
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.
|
|
596
|
+
"@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
|
|
597
|
+
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
|
|
598
598
|
"@base-ui/react": "1.7.0",
|
|
599
599
|
"@dnd-kit/core": "^6.3.1",
|
|
600
600
|
"@dnd-kit/sortable": "^10.0.0",
|
|
@@ -612,8 +612,8 @@
|
|
|
612
612
|
"vite": "8.2.1"
|
|
613
613
|
},
|
|
614
614
|
"peerDependencies": {
|
|
615
|
-
"@atlaskit/pragmatic-drag-and-drop": "^3.
|
|
616
|
-
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.
|
|
615
|
+
"@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
|
|
616
|
+
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
|
|
617
617
|
"@base-ui/react": "^1.7.0",
|
|
618
618
|
"@dnd-kit/core": "^6.3.1",
|
|
619
619
|
"@dnd-kit/sortable": "^10.0.0",
|