@stll/ui 0.17.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button-variants.d.ts +2 -2
- package/dist/components/button-variants.js +1 -0
- package/dist/index.d.ts +4 -3
- package/dist/index.js +3 -2
- package/dist/kanban/band-peek.d.ts +66 -0
- package/dist/kanban/band-peek.js +109 -0
- package/dist/kanban/column-band-header.d.ts +22 -9
- package/dist/kanban/column-band-header.js +25 -25
- package/dist/kanban/index.d.ts +4 -3
- package/dist/kanban/index.js +3 -2
- package/dist/kanban/subgroup-board.d.ts +27 -13
- package/dist/kanban/subgroup-board.js +61 -53
- package/dist/lib/control-size.d.ts +1 -1
- package/dist/styles/theme.css +8 -29
- package/package.json +1 -1
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
*/
|
|
11
11
|
declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
|
|
12
12
|
declare const buttonVariants: (props?: ({
|
|
13
|
-
size?: "
|
|
14
|
-
variant?: "
|
|
13
|
+
size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
|
|
14
|
+
variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
|
|
15
15
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { buttonAccessibleDisabledClass, buttonVariants };
|
|
@@ -17,6 +17,7 @@ const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-ba
|
|
|
17
17
|
},
|
|
18
18
|
variants: {
|
|
19
19
|
size: {
|
|
20
|
+
chip: "h-7 gap-1.5 rounded-full px-2.5 text-xs before:rounded-full sm:text-xs",
|
|
20
21
|
default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
|
|
21
22
|
icon: "size-9 sm:size-8",
|
|
22
23
|
"icon-lg": "size-10 sm:size-9",
|
package/dist/index.d.ts
CHANGED
|
@@ -70,7 +70,7 @@ import "./inspector/index.js";
|
|
|
70
70
|
import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./kanban/card-properties.js";
|
|
71
71
|
import { KanbanCardShell, KanbanCardShellProps } from "./kanban/card-shell.js";
|
|
72
72
|
import { KanbanCellAction, KanbanCellActionProps } from "./kanban/cell-action.js";
|
|
73
|
-
import { KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./kanban/column-band-header.js";
|
|
73
|
+
import { KanbanBandToggleActivation, KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./kanban/column-band-header.js";
|
|
74
74
|
import { ColorVariants, OptionColor, emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
|
|
75
75
|
import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./kanban/grouping.js";
|
|
76
76
|
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,7 +80,8 @@ import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSo
|
|
|
80
80
|
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";
|
|
81
81
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
|
|
82
82
|
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
83
|
-
import {
|
|
83
|
+
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./kanban/subgroup-board.js";
|
|
84
|
+
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./kanban/band-peek.js";
|
|
84
85
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./kanban/virtual-cell.js";
|
|
85
86
|
import "./kanban/index.js";
|
|
86
87
|
import { getInitials } from "./lib/initials.js";
|
|
@@ -93,4 +94,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffSegment, ReviewDiffS
|
|
|
93
94
|
import { ReviewOutOfDateNotice, ReviewOutOfDateReason, ReviewOutOfDateTone } from "./review/review-out-of-date-notice.js";
|
|
94
95
|
import { ReviewStatusBadge, ReviewStatusSize, ReviewStatusTone, ReviewStatusVariant } from "./review/review-status-badge.js";
|
|
95
96
|
import { ReviewSeverityDot, ReviewSeverityLevel, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
|
|
96
|
-
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, 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_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, 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_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, 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, 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_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, 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, 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, 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, useViewportWidth, visibleColumnIds };
|
|
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, 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, 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_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_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, 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_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, 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, 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, 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, useViewportWidth, visibleColumnIds };
|
package/dist/index.js
CHANGED
|
@@ -78,7 +78,8 @@ import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./k
|
|
|
78
78
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./kanban/sortable-interactions.js";
|
|
79
79
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./kanban/sortable-edge.js";
|
|
80
80
|
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./kanban/drag-interactions.js";
|
|
81
|
-
import { KANBAN_BAND_PEEK_DELAY_MS,
|
|
81
|
+
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./kanban/band-peek.js";
|
|
82
|
+
import { KanbanSubgroupBoard } from "./kanban/subgroup-board.js";
|
|
82
83
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./kanban/virtual-cell.js";
|
|
83
84
|
import { getInitials } from "./lib/initials.js";
|
|
84
85
|
import { emptyColor, optionColors, resolveOptionColor } from "./lib/option-color.js";
|
|
@@ -89,4 +90,4 @@ import { ReviewDiffDeletion, ReviewDiffInsertion, ReviewDiffText, TRACKED_DELETI
|
|
|
89
90
|
import { ReviewOutOfDateNotice } from "./review/review-out-of-date-notice.js";
|
|
90
91
|
import { ReviewSeverityDot, ReviewStatusDot, reviewSeverityTone } from "./review/review-severity-dot.js";
|
|
91
92
|
import { ReviewStatusBadge } from "./review/review-status-badge.js";
|
|
92
|
-
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, 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_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, 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_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, 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, 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, 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, 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, useViewportWidth, visibleColumnIds };
|
|
93
|
+
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, 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_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_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, Label, MenuPreviewLayout, 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, 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, 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, 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, useViewportWidth, visibleColumnIds };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
//#region src/kanban/band-peek.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* The peek a collapsed band opens while a pointer rests on its folded slot,
|
|
4
|
+
* as a state machine with an injectable scheduler so its timing rules can be
|
|
5
|
+
* tested without a DOM.
|
|
6
|
+
*
|
|
7
|
+
* Two rules keep a peek from fighting the pointer:
|
|
8
|
+
*
|
|
9
|
+
* - A slot that appeared under the pointer does not peek. Folding a band
|
|
10
|
+
* from its caption leaves the new slot right under the cursor; the first
|
|
11
|
+
* movement there must not reopen what was just closed. The band is
|
|
12
|
+
* suppressed until the pointer leaves the slot once.
|
|
13
|
+
* - A peek ends only after the pointer has left every part of the open
|
|
14
|
+
* band for a short linger. The band renders as separate elements (its
|
|
15
|
+
* caption, then its columns in each lane), so moving from the caption
|
|
16
|
+
* down into a column crosses an element boundary; without the linger the
|
|
17
|
+
* band would fold under the pointer and the slot would peek it straight
|
|
18
|
+
* back open.
|
|
19
|
+
*/
|
|
20
|
+
/** How long a pointer rests on a folded slot before the band peeks open. */
|
|
21
|
+
declare const KANBAN_BAND_PEEK_DELAY_MS = 400;
|
|
22
|
+
/** How long the pointer may be outside an open band before the peek ends. */
|
|
23
|
+
declare const KANBAN_BAND_PEEK_LINGER_MS = 150;
|
|
24
|
+
/** Runs `callback` after `ms`; the returned function cancels it. */
|
|
25
|
+
type BandPeekScheduler = (callback: () => void, ms: number) => () => void;
|
|
26
|
+
type BandPeekControllerOptions = {
|
|
27
|
+
/** Receives the band currently peeked open, or `null`. */
|
|
28
|
+
onChange: (peekingBandId: string | null) => void;
|
|
29
|
+
delayMs?: number;
|
|
30
|
+
lingerMs?: number;
|
|
31
|
+
/** Injectable so tests drive a manual clock. */
|
|
32
|
+
schedule?: BandPeekScheduler;
|
|
33
|
+
};
|
|
34
|
+
type BandPeekController = {
|
|
35
|
+
/** The pointer moved inside a band's folded slot. */
|
|
36
|
+
slotPointerMove: (bandId: string) => void;
|
|
37
|
+
/** The pointer left a band's folded slot. */
|
|
38
|
+
slotPointerLeave: (bandId: string) => void;
|
|
39
|
+
/** The pointer entered a part of a band that is rendered open. */
|
|
40
|
+
openPointerEnter: (bandId: string) => void;
|
|
41
|
+
/** The pointer left a part of a band that is rendered open. */
|
|
42
|
+
openPointerLeave: (bandId: string) => void;
|
|
43
|
+
/**
|
|
44
|
+
* The band was folded by a pointer on its caption, so its slot now sits
|
|
45
|
+
* under the pointer; it must not peek until the pointer leaves the slot.
|
|
46
|
+
*/
|
|
47
|
+
foldedUnderPointer: (bandId: string) => void;
|
|
48
|
+
/**
|
|
49
|
+
* The band was folded without a pointer on it (keyboard, or a controlled
|
|
50
|
+
* caller): any peek ends, and the slot may peek on the next hover.
|
|
51
|
+
*/
|
|
52
|
+
bandFolded: (bandId: string) => void;
|
|
53
|
+
/** The band was pinned open (its toggle, or a peek confirmed by a click). */
|
|
54
|
+
bandExpanded: (bandId: string) => void;
|
|
55
|
+
/**
|
|
56
|
+
* A band's folded slot left the DOM (the band expanded or disappeared) so
|
|
57
|
+
* a peek it was about to open, or a suppression it carried, no longer
|
|
58
|
+
* applies.
|
|
59
|
+
*/
|
|
60
|
+
slotUnmounted: (bandId: string) => void;
|
|
61
|
+
/** Ends any pending timer, for unmount. */
|
|
62
|
+
dispose: () => void;
|
|
63
|
+
};
|
|
64
|
+
declare const createBandPeekController: ({ onChange, delayMs, lingerMs, schedule }: BandPeekControllerOptions) => BandPeekController;
|
|
65
|
+
//#endregion
|
|
66
|
+
export { BandPeekController, BandPeekControllerOptions, BandPeekScheduler, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, createBandPeekController };
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
//#region src/kanban/band-peek.ts
|
|
2
|
+
/**
|
|
3
|
+
* The peek a collapsed band opens while a pointer rests on its folded slot,
|
|
4
|
+
* as a state machine with an injectable scheduler so its timing rules can be
|
|
5
|
+
* tested without a DOM.
|
|
6
|
+
*
|
|
7
|
+
* Two rules keep a peek from fighting the pointer:
|
|
8
|
+
*
|
|
9
|
+
* - A slot that appeared under the pointer does not peek. Folding a band
|
|
10
|
+
* from its caption leaves the new slot right under the cursor; the first
|
|
11
|
+
* movement there must not reopen what was just closed. The band is
|
|
12
|
+
* suppressed until the pointer leaves the slot once.
|
|
13
|
+
* - A peek ends only after the pointer has left every part of the open
|
|
14
|
+
* band for a short linger. The band renders as separate elements (its
|
|
15
|
+
* caption, then its columns in each lane), so moving from the caption
|
|
16
|
+
* down into a column crosses an element boundary; without the linger the
|
|
17
|
+
* band would fold under the pointer and the slot would peek it straight
|
|
18
|
+
* back open.
|
|
19
|
+
*/
|
|
20
|
+
/** How long a pointer rests on a folded slot before the band peeks open. */
|
|
21
|
+
const KANBAN_BAND_PEEK_DELAY_MS = 400;
|
|
22
|
+
/** How long the pointer may be outside an open band before the peek ends. */
|
|
23
|
+
const KANBAN_BAND_PEEK_LINGER_MS = 150;
|
|
24
|
+
const hostScheduler = (callback, ms) => {
|
|
25
|
+
const timer = setTimeout(callback, ms);
|
|
26
|
+
return () => clearTimeout(timer);
|
|
27
|
+
};
|
|
28
|
+
const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, schedule = hostScheduler }) => {
|
|
29
|
+
let peekingBandId = null;
|
|
30
|
+
let suppressedBandId = null;
|
|
31
|
+
let cancelOpen = null;
|
|
32
|
+
let openingBandId = null;
|
|
33
|
+
let cancelEnd = null;
|
|
34
|
+
const clearOpenTimer = () => {
|
|
35
|
+
if (cancelOpen !== null) {
|
|
36
|
+
cancelOpen();
|
|
37
|
+
cancelOpen = null;
|
|
38
|
+
openingBandId = null;
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const clearEndTimer = () => {
|
|
42
|
+
if (cancelEnd !== null) {
|
|
43
|
+
cancelEnd();
|
|
44
|
+
cancelEnd = null;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
const setPeeking = (bandId) => {
|
|
48
|
+
if (peekingBandId === bandId) return;
|
|
49
|
+
peekingBandId = bandId;
|
|
50
|
+
onChange(bandId);
|
|
51
|
+
};
|
|
52
|
+
const bandFolded = (bandId) => {
|
|
53
|
+
if (openingBandId === bandId) clearOpenTimer();
|
|
54
|
+
if (peekingBandId === bandId) {
|
|
55
|
+
clearEndTimer();
|
|
56
|
+
setPeeking(null);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
return {
|
|
60
|
+
slotPointerMove: (bandId) => {
|
|
61
|
+
if (suppressedBandId === bandId || peekingBandId === bandId || openingBandId === bandId) return;
|
|
62
|
+
clearOpenTimer();
|
|
63
|
+
openingBandId = bandId;
|
|
64
|
+
cancelOpen = schedule(() => {
|
|
65
|
+
cancelOpen = null;
|
|
66
|
+
openingBandId = null;
|
|
67
|
+
clearEndTimer();
|
|
68
|
+
setPeeking(bandId);
|
|
69
|
+
}, delayMs);
|
|
70
|
+
},
|
|
71
|
+
slotPointerLeave: (bandId) => {
|
|
72
|
+
if (openingBandId === bandId) clearOpenTimer();
|
|
73
|
+
if (suppressedBandId === bandId) suppressedBandId = null;
|
|
74
|
+
},
|
|
75
|
+
openPointerEnter: (bandId) => {
|
|
76
|
+
if (peekingBandId === bandId) clearEndTimer();
|
|
77
|
+
},
|
|
78
|
+
openPointerLeave: (bandId) => {
|
|
79
|
+
if (peekingBandId !== bandId || cancelEnd !== null) return;
|
|
80
|
+
cancelEnd = schedule(() => {
|
|
81
|
+
cancelEnd = null;
|
|
82
|
+
setPeeking(null);
|
|
83
|
+
}, lingerMs);
|
|
84
|
+
},
|
|
85
|
+
foldedUnderPointer: (bandId) => {
|
|
86
|
+
bandFolded(bandId);
|
|
87
|
+
suppressedBandId = bandId;
|
|
88
|
+
},
|
|
89
|
+
bandFolded,
|
|
90
|
+
bandExpanded: (bandId) => {
|
|
91
|
+
if (openingBandId === bandId) clearOpenTimer();
|
|
92
|
+
if (suppressedBandId === bandId) suppressedBandId = null;
|
|
93
|
+
if (peekingBandId === bandId) {
|
|
94
|
+
clearEndTimer();
|
|
95
|
+
setPeeking(null);
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
slotUnmounted: (bandId) => {
|
|
99
|
+
if (openingBandId === bandId) clearOpenTimer();
|
|
100
|
+
if (suppressedBandId === bandId) suppressedBandId = null;
|
|
101
|
+
},
|
|
102
|
+
dispose: () => {
|
|
103
|
+
clearOpenTimer();
|
|
104
|
+
clearEndTimer();
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
//#endregion
|
|
109
|
+
export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, createBandPeekController };
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
//#region src/kanban/column-band-header.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* How a band toggle was activated. A pointer activation leaves the pointer
|
|
5
|
+
* over whatever replaces the caption (the folded slot), which matters to the
|
|
6
|
+
* board's peek behaviour; a keyboard activation does not.
|
|
7
|
+
*/
|
|
8
|
+
type KanbanBandToggleActivation = {
|
|
9
|
+
viaPointer: boolean;
|
|
10
|
+
};
|
|
3
11
|
type KanbanColumnBandHeaderProps = {
|
|
4
12
|
/** The band name, or the control that has taken its place. */
|
|
5
13
|
title: ReactNode;
|
|
@@ -7,21 +15,26 @@ type KanbanColumnBandHeaderProps = {
|
|
|
7
15
|
swatch?: ReactNode;
|
|
8
16
|
/** Short text after the name, such as the band's card count. */
|
|
9
17
|
meta?: ReactNode;
|
|
10
|
-
/**
|
|
18
|
+
/** The band's persisted state; drives the toggle, its icon, and its label. */
|
|
11
19
|
collapsed: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Render only the toggle, for the narrow slot of a folded band. Defaults to
|
|
22
|
+
* `collapsed`; a board that peeks a collapsed band open passes `false` so
|
|
23
|
+
* the caption shows the name while the toggle still offers to pin it open.
|
|
24
|
+
*/
|
|
25
|
+
compact?: boolean | undefined;
|
|
12
26
|
/** Accessible name for the toggle, such as "Collapse To do". */
|
|
13
27
|
toggleLabel: string;
|
|
14
|
-
onCollapsedChange: (collapsed: boolean) => void;
|
|
28
|
+
onCollapsedChange: (collapsed: boolean, activation: KanbanBandToggleActivation) => void;
|
|
15
29
|
/** Band menu or other controls, after the toggle. */
|
|
16
30
|
actions?: ReactNode;
|
|
17
31
|
};
|
|
18
32
|
/**
|
|
19
|
-
* The band
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* the
|
|
23
|
-
* `aria-expanded` for the columns it hides.
|
|
33
|
+
* The band line above a run of columns: one 28px row of toggle, swatch, name,
|
|
34
|
+
* and count, so a band costs the board a caption's height and nothing more.
|
|
35
|
+
* Folded, only the toggle remains in this line; the band's name moves down
|
|
36
|
+
* into the narrow column body, where the height is already there.
|
|
24
37
|
*/
|
|
25
|
-
declare const KanbanColumnBandHeader: ({ title, swatch, meta, collapsed, toggleLabel, onCollapsedChange, actions }: KanbanColumnBandHeaderProps) => import("react").JSX.Element;
|
|
38
|
+
declare const KanbanColumnBandHeader: ({ title, swatch, meta, collapsed, compact, toggleLabel, onCollapsedChange, actions }: KanbanColumnBandHeaderProps) => import("react").JSX.Element;
|
|
26
39
|
//#endregion
|
|
27
|
-
export { KanbanColumnBandHeader, KanbanColumnBandHeaderProps };
|
|
40
|
+
export { KanbanBandToggleActivation, KanbanColumnBandHeader, KanbanColumnBandHeaderProps };
|
|
@@ -1,42 +1,42 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
2
|
import { DirectionalIcon } from "../components/directional-icon.js";
|
|
3
3
|
import { ChevronDownIcon } from "lucide-react";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
//#region src/kanban/column-band-header.tsx
|
|
6
6
|
/**
|
|
7
|
-
* The band
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* the
|
|
11
|
-
* `aria-expanded` for the columns it hides.
|
|
7
|
+
* The band line above a run of columns: one 28px row of toggle, swatch, name,
|
|
8
|
+
* and count, so a band costs the board a caption's height and nothing more.
|
|
9
|
+
* Folded, only the toggle remains in this line; the band's name moves down
|
|
10
|
+
* into the narrow column body, where the height is already there.
|
|
12
11
|
*/
|
|
13
|
-
const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, toggleLabel, onCollapsedChange, actions }) => /* @__PURE__ */ jsxs("div", {
|
|
14
|
-
className: cn("flex items-center gap-
|
|
12
|
+
const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, compact = collapsed, toggleLabel, onCollapsedChange, actions }) => /* @__PURE__ */ jsxs("div", {
|
|
13
|
+
className: cn("flex h-7 items-center gap-1", compact ? "justify-center" : "pe-1"),
|
|
15
14
|
"data-collapsed": collapsed ? "" : void 0,
|
|
15
|
+
"data-compact": compact ? "" : void 0,
|
|
16
16
|
"data-slot": "kanban-column-band-header",
|
|
17
|
-
children: [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
17
|
+
children: [/* @__PURE__ */ jsx("button", {
|
|
18
|
+
"aria-expanded": !collapsed,
|
|
19
|
+
"aria-label": toggleLabel,
|
|
20
|
+
className: "hover:bg-muted/60 text-muted-foreground hover:text-foreground flex size-6 shrink-0 items-center justify-center rounded-md transition-[background-color]",
|
|
21
|
+
onClick: (event) => onCollapsedChange(!collapsed, { viaPointer: event.detail > 0 }),
|
|
22
|
+
title: toggleLabel,
|
|
23
|
+
type: "button",
|
|
24
|
+
children: /* @__PURE__ */ jsx(DirectionalIcon, {
|
|
25
|
+
className: cn("size-3.5 transition-transform", collapsed && "-rotate-90"),
|
|
26
|
+
flip: collapsed,
|
|
27
|
+
icon: ChevronDownIcon
|
|
28
|
+
})
|
|
29
|
+
}), compact ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
30
30
|
swatch,
|
|
31
31
|
/* @__PURE__ */ jsxs("span", {
|
|
32
|
-
className:
|
|
32
|
+
className: "flex min-w-0 flex-1 items-baseline gap-1.5 truncate text-xs font-medium",
|
|
33
33
|
children: [title, meta !== void 0 && /* @__PURE__ */ jsx("span", {
|
|
34
|
-
className: "text-muted-foreground
|
|
34
|
+
className: "text-muted-foreground font-normal tabular-nums",
|
|
35
35
|
children: meta
|
|
36
36
|
})]
|
|
37
37
|
}),
|
|
38
|
-
|
|
39
|
-
]
|
|
38
|
+
actions
|
|
39
|
+
] })]
|
|
40
40
|
});
|
|
41
41
|
//#endregion
|
|
42
42
|
export { KanbanColumnBandHeader };
|
package/dist/kanban/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { KanbanCardFieldSelection, selectKanbanCardFieldIds } from "./card-properties.js";
|
|
2
2
|
import { KanbanCardShell, KanbanCardShellProps } from "./card-shell.js";
|
|
3
3
|
import { KanbanCellAction, KanbanCellActionProps } from "./cell-action.js";
|
|
4
|
-
import { KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./column-band-header.js";
|
|
4
|
+
import { KanbanBandToggleActivation, KanbanColumnBandHeader, KanbanColumnBandHeaderProps } from "./column-band-header.js";
|
|
5
5
|
import { KanbanBuiltInGroup, KanbanColumnBand, KanbanGroup, KanbanGroupOption, KanbanGrouping, KanbanSchema, ResolveKanbanGroupingParams, getKanbanGroupingPropertyId, getKanbanGroups, isKanbanGroupingRenderable, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanRows } from "./grouping.js";
|
|
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";
|
|
@@ -10,6 +10,7 @@ import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSo
|
|
|
10
10
|
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
11
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./sortable-edge.js";
|
|
12
12
|
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
|
|
13
|
-
import {
|
|
13
|
+
import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
|
|
14
|
+
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
|
|
14
15
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./virtual-cell.js";
|
|
15
|
-
export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, 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_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, 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, 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 };
|
|
16
|
+
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_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_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, 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 };
|
package/dist/kanban/index.js
CHANGED
|
@@ -10,6 +10,7 @@ import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./s
|
|
|
10
10
|
import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
|
|
11
11
|
import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./sortable-edge.js";
|
|
12
12
|
import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
|
|
13
|
-
import { KANBAN_BAND_PEEK_DELAY_MS,
|
|
13
|
+
import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
|
|
14
|
+
import { KanbanSubgroupBoard } from "./subgroup-board.js";
|
|
14
15
|
import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./virtual-cell.js";
|
|
15
|
-
export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, 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_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, 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 };
|
|
16
|
+
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_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_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, 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 };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
+
import { KanbanBandToggleActivation } from "./column-band-header.js";
|
|
1
2
|
import { KanbanColumnBand, KanbanGroup } from "./grouping.js";
|
|
2
3
|
import { KanbanBoardCell, KanbanBoardColumn, KanbanBoardMatrix } from "./matrix.js";
|
|
3
4
|
import { ReactNode } from "react";
|
|
4
5
|
//#region src/kanban/subgroup-board.d.ts
|
|
5
|
-
/** How long a pointer rests on a collapsed band before it peeks open. */
|
|
6
|
-
declare const KANBAN_BAND_PEEK_DELAY_MS = 400;
|
|
7
6
|
type KanbanSubgroupColumnHeaderContext = {
|
|
8
7
|
column: KanbanBoardColumn;
|
|
9
8
|
count: number;
|
|
@@ -23,8 +22,20 @@ type KanbanSubgroupBandHeaderContext = {
|
|
|
23
22
|
columns: KanbanBoardColumn[];
|
|
24
23
|
/** Rows across the band's columns, every lane included. */
|
|
25
24
|
count: number;
|
|
25
|
+
/** The persisted state the toggle reports and flips. */
|
|
26
26
|
collapsed: boolean;
|
|
27
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Whether the band renders as one narrow slot right now. False while a
|
|
29
|
+
* collapsed band peeks open under the pointer, so a caption can show its
|
|
30
|
+
* name and offer to pin the band open.
|
|
31
|
+
*/
|
|
32
|
+
folded: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* A custom caption reports which way it was activated; omitting the
|
|
35
|
+
* activation is read as a pointer fold, the conservative choice for the
|
|
36
|
+
* peek that follows.
|
|
37
|
+
*/
|
|
38
|
+
onCollapsedChange: (collapsed: boolean, activation?: KanbanBandToggleActivation) => void;
|
|
28
39
|
};
|
|
29
40
|
/**
|
|
30
41
|
* One lane's slot for a collapsed band: the cells it hides, so a host can
|
|
@@ -50,13 +61,14 @@ type KanbanSubgroupBoardProps<TRow> = {
|
|
|
50
61
|
renderLaneIdentity: (context: KanbanSubgroupLaneIdentityContext) => ReactNode;
|
|
51
62
|
renderCell: (context: KanbanSubgroupCellContext<TRow>) => ReactNode;
|
|
52
63
|
/**
|
|
53
|
-
* The
|
|
64
|
+
* The line above a band's columns. Defaults to `KanbanColumnBandHeader`
|
|
54
65
|
* with the band's label and count.
|
|
55
66
|
*/
|
|
56
67
|
renderBandHeader?: ((context: KanbanSubgroupBandHeaderContext) => ReactNode) | undefined;
|
|
57
68
|
/**
|
|
58
|
-
* A lane's slot while its band is collapsed. Defaults to the
|
|
59
|
-
* a host that accepts drops into a collapsed
|
|
69
|
+
* A lane's slot while its band is collapsed. Defaults to the band's name
|
|
70
|
+
* set vertically over the count; a host that accepts drops into a collapsed
|
|
71
|
+
* band renders its target here.
|
|
60
72
|
*/
|
|
61
73
|
renderCollapsedBandCell?: ((context: KanbanSubgroupCollapsedBandCellContext<TRow>) => ReactNode) | undefined;
|
|
62
74
|
/** Accessible name for a band's collapse toggle. */
|
|
@@ -74,13 +86,15 @@ type KanbanSubgroupBoardProps<TRow> = {
|
|
|
74
86
|
/**
|
|
75
87
|
* Reusable swimlane layout over the canonical two-axis Kanban matrix.
|
|
76
88
|
*
|
|
77
|
-
* Columns that carry band metadata render under a band
|
|
78
|
-
* collapsed as a run: the band folds into one narrow slot in every
|
|
79
|
-
* cells stay reachable (a host renders its drop target in them),
|
|
80
|
-
* open while a pointer rests on it, so a drag can still land on a
|
|
81
|
-
* column inside. Every row is laid out span by span with the same
|
|
82
|
-
* which is what keeps headers, counts, and cells aligned
|
|
89
|
+
* Columns that carry band metadata render under a one-line band caption and
|
|
90
|
+
* can be collapsed as a run: the band folds into one narrow slot in every
|
|
91
|
+
* row, whose cells stay reachable (a host renders its drop target in them),
|
|
92
|
+
* and peeks open while a pointer rests on it, so a drag can still land on a
|
|
93
|
+
* specific column inside. Every row is laid out span by span with the same
|
|
94
|
+
* widths, which is what keeps captions, headers, counts, and cells aligned
|
|
95
|
+
* in every state; the caption line never grows past its own height, so a
|
|
96
|
+
* folded band costs no vertical space.
|
|
83
97
|
*/
|
|
84
98
|
declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
|
|
85
99
|
//#endregion
|
|
86
|
-
export {
|
|
100
|
+
export { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };
|
|
@@ -2,31 +2,34 @@ import { cn } from "../lib/utils.js";
|
|
|
2
2
|
import { DirectionalIcon } from "../components/directional-icon.js";
|
|
3
3
|
import { KanbanColumnBandHeader } from "./column-band-header.js";
|
|
4
4
|
import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_CLASS, resolveKanbanColumnBands } from "./column-bands.js";
|
|
5
|
+
import { createBandPeekController } from "./band-peek.js";
|
|
5
6
|
import { ChevronDownIcon } from "lucide-react";
|
|
6
7
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { useEffect, useMemo,
|
|
8
|
+
import { useEffect, useMemo, useState } from "react";
|
|
8
9
|
//#region src/kanban/subgroup-board.tsx
|
|
9
10
|
const groupValueKey = (value) => value === null ? "null" : `value:${value.length}:${value}`;
|
|
10
11
|
const columnKey = (column) => column.type === "group" ? `group:${groupValueKey(column.group.value)}` : `destination:${column.destination.id}`;
|
|
11
12
|
const spanKey = (span) => span.band === null ? `single:${span.columns.map(columnKey).join("|")}` : `band:${span.band.id}`;
|
|
12
13
|
const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0);
|
|
13
|
-
/** How long a pointer rests on a collapsed band before it peeks open. */
|
|
14
|
-
const KANBAN_BAND_PEEK_DELAY_MS = 400;
|
|
15
14
|
/**
|
|
16
15
|
* Reusable swimlane layout over the canonical two-axis Kanban matrix.
|
|
17
16
|
*
|
|
18
|
-
* Columns that carry band metadata render under a band
|
|
19
|
-
* collapsed as a run: the band folds into one narrow slot in every
|
|
20
|
-
* cells stay reachable (a host renders its drop target in them),
|
|
21
|
-
* open while a pointer rests on it, so a drag can still land on a
|
|
22
|
-
* column inside. Every row is laid out span by span with the same
|
|
23
|
-
* which is what keeps headers, counts, and cells aligned
|
|
17
|
+
* Columns that carry band metadata render under a one-line band caption and
|
|
18
|
+
* can be collapsed as a run: the band folds into one narrow slot in every
|
|
19
|
+
* row, whose cells stay reachable (a host renders its drop target in them),
|
|
20
|
+
* and peeks open while a pointer rests on it, so a drag can still land on a
|
|
21
|
+
* specific column inside. Every row is laid out span by span with the same
|
|
22
|
+
* widths, which is what keeps captions, headers, counts, and cells aligned
|
|
23
|
+
* in every state; the caption line never grows past its own height, so a
|
|
24
|
+
* folded band costs no vertical space.
|
|
24
25
|
*/
|
|
25
26
|
const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
|
|
26
27
|
const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
|
|
27
28
|
const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
|
|
28
29
|
const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
|
|
29
30
|
const [peekingBandId, setPeekingBandId] = useState(null);
|
|
31
|
+
const [peek] = useState(() => createBandPeekController({ onChange: setPeekingBandId }));
|
|
32
|
+
useEffect(() => () => peek.dispose(), [peek]);
|
|
30
33
|
const { cellsByLaneValue, countByColumnValue, ungroupedCells } = useMemo(() => {
|
|
31
34
|
const laneCells = /* @__PURE__ */ new Map();
|
|
32
35
|
const columnCounts = /* @__PURE__ */ new Map();
|
|
@@ -73,12 +76,24 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
73
76
|
return next;
|
|
74
77
|
});
|
|
75
78
|
};
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
/** The band's persisted state: what the toggle reports and flips. */
|
|
80
|
+
const isBandCollapsedNow = (band) => isBandCollapsed ? isBandCollapsed(band) : collapsedBandIds.has(band.id);
|
|
81
|
+
/**
|
|
82
|
+
* Whether the band renders folded right now. A peek opens the layout
|
|
83
|
+
* without changing the persisted state, so a peeked band still reports
|
|
84
|
+
* itself collapsed and its toggle pins it open rather than closing it.
|
|
85
|
+
*/
|
|
86
|
+
const isBandFolded = (band) => peekingBandId !== band.id && isBandCollapsedNow(band);
|
|
87
|
+
const peekedBand = peekingBandId === null ? null : spans.find((span) => span.band?.id === peekingBandId)?.band ?? null;
|
|
88
|
+
const staleBandId = peekingBandId !== null && (peekedBand === null || !isBandCollapsedNow(peekedBand)) ? peekingBandId : null;
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
if (staleBandId !== null) peek.bandExpanded(staleBandId);
|
|
91
|
+
}, [peek, staleBandId]);
|
|
92
|
+
const setBandCollapsed = (band, collapsed, activation) => {
|
|
93
|
+
const viaPointer = activation === void 0 ? true : activation.viaPointer;
|
|
94
|
+
if (!collapsed) peek.bandExpanded(band.id);
|
|
95
|
+
else if (viaPointer) peek.foldedUnderPointer(band.id);
|
|
96
|
+
else peek.bandFolded(band.id);
|
|
82
97
|
if (onBandCollapsedChange) {
|
|
83
98
|
onBandCollapsedChange(band, collapsed);
|
|
84
99
|
return;
|
|
@@ -90,7 +105,6 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
90
105
|
return next;
|
|
91
106
|
});
|
|
92
107
|
};
|
|
93
|
-
const endPeek = () => setPeekingBandId(null);
|
|
94
108
|
const columnCount = (column) => countByColumnValue.get(columnKey(column)) ?? 0;
|
|
95
109
|
const cellsOf = (span, cells) => span.columns.flatMap((column) => cells.filter((cell) => columnKey(cell.coordinate.column) === columnKey(column)));
|
|
96
110
|
const spanWidth = (span) => span.columns.length * 300 + (span.columns.length - 1) * 12;
|
|
@@ -106,14 +120,14 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
106
120
|
if (band !== null && isBandFolded(band)) return /* @__PURE__ */ jsx(FoldedBandSlot, {
|
|
107
121
|
band,
|
|
108
122
|
className: KANBAN_COLLAPSED_BAND_WIDTH_CLASS,
|
|
109
|
-
|
|
110
|
-
onPeekEnd: endPeek,
|
|
123
|
+
peek,
|
|
111
124
|
children: renderFoldedBand(band, span)
|
|
112
125
|
}, spanKey(span));
|
|
113
126
|
return /* @__PURE__ */ jsx("div", {
|
|
114
127
|
className: "flex gap-3",
|
|
115
128
|
"data-kanban-band": band?.id,
|
|
116
|
-
|
|
129
|
+
onPointerEnter: band === null ? void 0 : () => peek.openPointerEnter(band.id),
|
|
130
|
+
onPointerLeave: band === null ? void 0 : () => peek.openPointerLeave(band.id),
|
|
117
131
|
children: span.columns.map((column) => /* @__PURE__ */ jsx("div", {
|
|
118
132
|
className: KANBAN_COLUMN_WIDTH_CLASS,
|
|
119
133
|
children: renderColumn(column)
|
|
@@ -122,17 +136,20 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
122
136
|
})
|
|
123
137
|
});
|
|
124
138
|
const bandHeader = (band, span) => {
|
|
125
|
-
const collapsed =
|
|
139
|
+
const collapsed = isBandCollapsedNow(band);
|
|
140
|
+
const folded = isBandFolded(band);
|
|
126
141
|
const context = {
|
|
127
142
|
band,
|
|
128
143
|
collapsed,
|
|
129
144
|
columns: span.columns,
|
|
130
145
|
count: span.columns.reduce((sum, column) => sum + columnCount(column), 0),
|
|
131
|
-
|
|
146
|
+
folded,
|
|
147
|
+
onCollapsedChange: (next, activation) => setBandCollapsed(band, next, activation)
|
|
132
148
|
};
|
|
133
149
|
if (renderBandHeader) return /* @__PURE__ */ jsx(Fragment, { children: renderBandHeader(context) });
|
|
134
150
|
return /* @__PURE__ */ jsx(KanbanColumnBandHeader, {
|
|
135
151
|
collapsed,
|
|
152
|
+
compact: folded,
|
|
136
153
|
meta: formatCount(context.count),
|
|
137
154
|
title: band.label,
|
|
138
155
|
toggleLabel: formatBandToggleLabel ? formatBandToggleLabel(band, collapsed) : band.label,
|
|
@@ -148,10 +165,16 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
148
165
|
count,
|
|
149
166
|
laneValue
|
|
150
167
|
}) });
|
|
151
|
-
return /* @__PURE__ */
|
|
152
|
-
className: "text-muted-foreground flex
|
|
168
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
169
|
+
className: "text-muted-foreground flex flex-col items-center gap-2 py-2 text-xs",
|
|
153
170
|
"data-kanban-collapsed-band-count": count,
|
|
154
|
-
children:
|
|
171
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
172
|
+
className: "max-h-40 truncate font-medium [writing-mode:vertical-rl]",
|
|
173
|
+
children: band.label
|
|
174
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
175
|
+
className: "tabular-nums",
|
|
176
|
+
children: formatCount(count)
|
|
177
|
+
})]
|
|
155
178
|
});
|
|
156
179
|
};
|
|
157
180
|
const foldedCount = (span, cells) => {
|
|
@@ -173,7 +196,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
173
196
|
/* @__PURE__ */ jsxs("div", {
|
|
174
197
|
className: "bg-background sticky top-0 z-20 pt-4 pb-3",
|
|
175
198
|
children: [hasBands ? /* @__PURE__ */ jsx("div", {
|
|
176
|
-
className: "flex gap-3 pb-
|
|
199
|
+
className: "flex items-end gap-3 pb-1.5",
|
|
177
200
|
"data-kanban-band-row": "",
|
|
178
201
|
children: spans.map((span) => {
|
|
179
202
|
const band = span.band;
|
|
@@ -183,16 +206,16 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
183
206
|
}, spanKey(span));
|
|
184
207
|
if (isBandFolded(band)) return /* @__PURE__ */ jsx(FoldedBandSlot, {
|
|
185
208
|
band,
|
|
186
|
-
className: cn("border-border/60
|
|
187
|
-
|
|
188
|
-
onPeekEnd: endPeek,
|
|
209
|
+
className: cn("border-border/60 border-b", KANBAN_COLLAPSED_BAND_WIDTH_CLASS),
|
|
210
|
+
peek,
|
|
189
211
|
children: bandHeader(band, span)
|
|
190
212
|
}, spanKey(span));
|
|
191
213
|
return /* @__PURE__ */ jsx("div", {
|
|
192
|
-
className: "border-border/60
|
|
214
|
+
className: "border-border/60 shrink-0 border-b",
|
|
193
215
|
"data-kanban-band": band.id,
|
|
194
216
|
style: { width: `${String(spanWidth(span))}px` },
|
|
195
|
-
|
|
217
|
+
onPointerEnter: () => peek.openPointerEnter(band.id),
|
|
218
|
+
onPointerLeave: () => peek.openPointerLeave(band.id),
|
|
196
219
|
children: bandHeader(band, span)
|
|
197
220
|
}, spanKey(span));
|
|
198
221
|
})
|
|
@@ -287,35 +310,20 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
|
|
|
287
310
|
});
|
|
288
311
|
};
|
|
289
312
|
/**
|
|
290
|
-
* The narrow slot a folded band occupies in a row.
|
|
291
|
-
*
|
|
292
|
-
*
|
|
313
|
+
* The narrow slot a folded band occupies in a row. Its pointer events go to
|
|
314
|
+
* the board's peek controller, which decides when a resting pointer peeks
|
|
315
|
+
* the band open and keeps a slot that appeared under the pointer folded.
|
|
293
316
|
*/
|
|
294
|
-
const FoldedBandSlot = ({ band, children, className,
|
|
295
|
-
|
|
296
|
-
useEffect(() => () => {
|
|
297
|
-
if (timer.current !== null) clearTimeout(timer.current);
|
|
298
|
-
}, []);
|
|
317
|
+
const FoldedBandSlot = ({ band, children, className, peek }) => {
|
|
318
|
+
useEffect(() => () => peek.slotUnmounted(band.id), [peek, band.id]);
|
|
299
319
|
return /* @__PURE__ */ jsx("div", {
|
|
300
320
|
className,
|
|
301
321
|
"data-kanban-band": band.id,
|
|
302
322
|
"data-kanban-band-collapsed": "",
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
timer.current = setTimeout(() => {
|
|
306
|
-
timer.current = null;
|
|
307
|
-
onPeek(band.id);
|
|
308
|
-
}, 400);
|
|
309
|
-
},
|
|
310
|
-
onPointerLeave: () => {
|
|
311
|
-
if (timer.current !== null) {
|
|
312
|
-
clearTimeout(timer.current);
|
|
313
|
-
timer.current = null;
|
|
314
|
-
}
|
|
315
|
-
onPeekEnd();
|
|
316
|
-
},
|
|
323
|
+
onPointerMove: () => peek.slotPointerMove(band.id),
|
|
324
|
+
onPointerLeave: () => peek.slotPointerLeave(band.id),
|
|
317
325
|
children
|
|
318
326
|
});
|
|
319
327
|
};
|
|
320
328
|
//#endregion
|
|
321
|
-
export {
|
|
329
|
+
export { KanbanSubgroupBoard };
|
|
@@ -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 ("
|
|
8
|
+
declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
|
|
9
9
|
//#endregion
|
|
10
10
|
export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };
|
package/dist/styles/theme.css
CHANGED
|
@@ -1200,36 +1200,15 @@
|
|
|
1200
1200
|
}
|
|
1201
1201
|
}
|
|
1202
1202
|
|
|
1203
|
-
/*
|
|
1204
|
-
*
|
|
1205
|
-
*
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
scrollbar-
|
|
1203
|
+
/* A scroll container with no scrollbar and no reserved track. For strips
|
|
1204
|
+
* whose overflow is signalled another way (an edge fade, a visible partial
|
|
1205
|
+
* item): a hover-revealed scrollbar would still reserve its track only when
|
|
1206
|
+
* the content overflows, so the strip's height would depend on its content. */
|
|
1207
|
+
@utility scrollbar-none {
|
|
1208
|
+
scrollbar-width: none;
|
|
1209
|
+
-ms-overflow-style: none;
|
|
1209
1210
|
|
|
1210
1211
|
&::-webkit-scrollbar {
|
|
1211
|
-
|
|
1212
|
-
height: 0.5rem;
|
|
1213
|
-
}
|
|
1214
|
-
|
|
1215
|
-
&::-webkit-scrollbar-track {
|
|
1216
|
-
background: transparent;
|
|
1217
|
-
}
|
|
1218
|
-
|
|
1219
|
-
&::-webkit-scrollbar-thumb {
|
|
1220
|
-
border-radius: 9999px;
|
|
1221
|
-
background-color: transparent;
|
|
1222
|
-
}
|
|
1223
|
-
|
|
1224
|
-
&:hover {
|
|
1225
|
-
scrollbar-color: var(--color-border) transparent;
|
|
1226
|
-
}
|
|
1227
|
-
|
|
1228
|
-
&:hover::-webkit-scrollbar-thumb {
|
|
1229
|
-
background-color: var(--color-border);
|
|
1230
|
-
}
|
|
1231
|
-
|
|
1232
|
-
&:hover::-webkit-scrollbar-thumb:hover {
|
|
1233
|
-
background-color: var(--color-muted-foreground);
|
|
1212
|
+
display: none;
|
|
1234
1213
|
}
|
|
1235
1214
|
}
|
package/package.json
CHANGED