@particle-academy/react-fancy 2.7.1 → 2.8.1
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/index.cjs +285 -33
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +87 -13
- package/dist/index.d.ts +87 -13
- package/dist/index.js +285 -33
- package/dist/index.js.map +1 -1
- package/docs/Kanban.md +98 -27
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -2052,16 +2052,45 @@ declare const MobileMenu: {
|
|
|
2052
2052
|
|
|
2053
2053
|
declare function useMobileMenu(): MobileMenuContextValue;
|
|
2054
2054
|
|
|
2055
|
+
/**
|
|
2056
|
+
* Fired when a card is dropped into a column. `toIndex` is the position
|
|
2057
|
+
* the card should land at within the destination column (0-based;
|
|
2058
|
+
* `toIndex === current count` means append).
|
|
2059
|
+
*
|
|
2060
|
+
* For a same-column reorder, `fromColumn === toColumn` and `toIndex` is
|
|
2061
|
+
* the new position.
|
|
2062
|
+
*/
|
|
2063
|
+
type KanbanCardMoveHandler = (cardId: string, fromColumn: string, toColumn: string, toIndex: number) => void;
|
|
2064
|
+
/**
|
|
2065
|
+
* Fired when a column is dropped at a new position. `toIndex` is the
|
|
2066
|
+
* new position among registered columns (0-based).
|
|
2067
|
+
*/
|
|
2068
|
+
type KanbanColumnMoveHandler = (columnId: string, toIndex: number) => void;
|
|
2055
2069
|
interface KanbanContextValue {
|
|
2056
|
-
onCardMove?: (cardId: string, fromColumn: string, toColumn: string) => void;
|
|
2057
2070
|
draggedCard: string | null;
|
|
2058
2071
|
setDraggedCard: (id: string | null) => void;
|
|
2059
2072
|
dragSource: string | null;
|
|
2060
2073
|
setDragSource: (id: string | null) => void;
|
|
2074
|
+
draggedColumn: string | null;
|
|
2075
|
+
setDraggedColumn: (id: string | null) => void;
|
|
2076
|
+
onCardMove?: KanbanCardMoveHandler;
|
|
2077
|
+
onColumnMove?: KanbanColumnMoveHandler;
|
|
2078
|
+
columnIds: string[];
|
|
2079
|
+
registerColumn: (id: string) => () => void;
|
|
2061
2080
|
}
|
|
2062
2081
|
interface KanbanProps {
|
|
2063
2082
|
children: ReactNode;
|
|
2064
|
-
|
|
2083
|
+
/**
|
|
2084
|
+
* Called when a card is dropped into a column. Receives the destination
|
|
2085
|
+
* index so handlers can support within-column reorder.
|
|
2086
|
+
*/
|
|
2087
|
+
onCardMove?: KanbanCardMoveHandler;
|
|
2088
|
+
/**
|
|
2089
|
+
* Called when a column is dropped at a new position. Only fires if at
|
|
2090
|
+
* least one column inside the board has a `<Kanban.ColumnHandle>` and
|
|
2091
|
+
* a column was actually dragged.
|
|
2092
|
+
*/
|
|
2093
|
+
onColumnMove?: KanbanColumnMoveHandler;
|
|
2065
2094
|
className?: string;
|
|
2066
2095
|
}
|
|
2067
2096
|
interface KanbanColumnProps {
|
|
@@ -2070,25 +2099,39 @@ interface KanbanColumnProps {
|
|
|
2070
2099
|
title?: string;
|
|
2071
2100
|
className?: string;
|
|
2072
2101
|
/**
|
|
2073
|
-
* Skip the column's default visuals (background, padding, min-height,
|
|
2074
|
-
* width)
|
|
2075
|
-
* Drop-target behaviour, drag-over ring, and column id wiring are kept.
|
|
2102
|
+
* Skip the column's default visuals (background, padding, min-height,
|
|
2103
|
+
* fixed width). Drop-target wiring and the drag-over ring stay.
|
|
2076
2104
|
*/
|
|
2077
2105
|
unstyled?: boolean;
|
|
2106
|
+
/**
|
|
2107
|
+
* Soft work-in-progress limit. Shown in the column header (when `title`
|
|
2108
|
+
* is provided) as `count/limit`. Turns red over capacity. Drops are
|
|
2109
|
+
* still accepted — enforce hard via the consumer's `onCardMove`.
|
|
2110
|
+
*/
|
|
2111
|
+
wipLimit?: number;
|
|
2112
|
+
/**
|
|
2113
|
+
* If true, the column renders nothing when it has zero card children.
|
|
2114
|
+
* Useful for filter UIs that want clean collapse instead of empty
|
|
2115
|
+
* placeholders.
|
|
2116
|
+
*/
|
|
2117
|
+
hideWhenEmpty?: boolean;
|
|
2078
2118
|
}
|
|
2079
2119
|
interface KanbanCardProps {
|
|
2080
2120
|
children: ReactNode;
|
|
2081
2121
|
id: string;
|
|
2082
2122
|
className?: string;
|
|
2083
2123
|
/**
|
|
2084
|
-
* Skip the card's default visuals (border, padding, shadow
|
|
2085
|
-
*
|
|
2086
|
-
* wrap their own Card / Surface inside.
|
|
2124
|
+
* Skip the card's default visuals (border, padding, shadow). Drag
|
|
2125
|
+
* handlers and `draggable` stay.
|
|
2087
2126
|
*/
|
|
2088
2127
|
unstyled?: boolean;
|
|
2089
2128
|
}
|
|
2129
|
+
interface KanbanColumnHandleProps {
|
|
2130
|
+
children: ReactNode;
|
|
2131
|
+
className?: string;
|
|
2132
|
+
}
|
|
2090
2133
|
|
|
2091
|
-
declare function KanbanColumn({ children, id, title, className, unstyled, }: KanbanColumnProps): react_jsx_runtime.JSX.Element;
|
|
2134
|
+
declare function KanbanColumn({ children, id, title, className, unstyled, wipLimit, hideWhenEmpty, }: KanbanColumnProps): react_jsx_runtime.JSX.Element | null;
|
|
2092
2135
|
declare namespace KanbanColumn {
|
|
2093
2136
|
var displayName: string;
|
|
2094
2137
|
}
|
|
@@ -2099,13 +2142,44 @@ declare namespace KanbanCard {
|
|
|
2099
2142
|
}
|
|
2100
2143
|
|
|
2101
2144
|
/**
|
|
2102
|
-
*
|
|
2103
|
-
*
|
|
2145
|
+
* Drag handle for column reordering.
|
|
2146
|
+
*
|
|
2147
|
+
* Mount inside a `Kanban.Column` to make that column draggable. The
|
|
2148
|
+
* column's parent `Kanban` listens for the drop and surfaces the new
|
|
2149
|
+
* position via `onColumnMove`. Without a handle, columns are static.
|
|
2150
|
+
*
|
|
2151
|
+
* Typically wrapped around the column header so users grab the title
|
|
2152
|
+
* to reorder; can also be a small grip icon.
|
|
2153
|
+
*/
|
|
2154
|
+
declare function KanbanColumnHandle({ children, className, }: KanbanColumnHandleProps): react_jsx_runtime.JSX.Element;
|
|
2155
|
+
declare namespace KanbanColumnHandle {
|
|
2156
|
+
var displayName: string;
|
|
2157
|
+
}
|
|
2158
|
+
|
|
2159
|
+
/**
|
|
2160
|
+
* Kanban board.
|
|
2161
|
+
*
|
|
2162
|
+
* Compound:
|
|
2163
|
+
* <Kanban onCardMove={...} onColumnMove={...}>
|
|
2164
|
+
* <Kanban.Column id="todo" wipLimit={4}>
|
|
2165
|
+
* <Kanban.ColumnHandle>...header...</Kanban.ColumnHandle> // optional
|
|
2166
|
+
* <Kanban.Card id="...">...</Kanban.Card>
|
|
2167
|
+
* </Kanban.Column>
|
|
2168
|
+
* </Kanban>
|
|
2169
|
+
*
|
|
2170
|
+
* Cards drag between columns AND within a column. Drop position is
|
|
2171
|
+
* computed from mouse Y at hover time and surfaced via the `toIndex`
|
|
2172
|
+
* argument on `onCardMove`.
|
|
2173
|
+
*
|
|
2174
|
+
* Columns drag horizontally to reorder when a `<Kanban.ColumnHandle>`
|
|
2175
|
+
* is mounted inside them. The root computes the drop index from
|
|
2176
|
+
* mouse X and surfaces it via `onColumnMove`.
|
|
2104
2177
|
*/
|
|
2105
|
-
declare function KanbanRoot({ children, onCardMove, className }: KanbanProps): react_jsx_runtime.JSX.Element;
|
|
2178
|
+
declare function KanbanRoot({ children, onCardMove, onColumnMove, className, }: KanbanProps): react_jsx_runtime.JSX.Element;
|
|
2106
2179
|
declare const Kanban: typeof KanbanRoot & {
|
|
2107
2180
|
Column: typeof KanbanColumn;
|
|
2108
2181
|
Card: typeof KanbanCard;
|
|
2182
|
+
ColumnHandle: typeof KanbanColumnHandle;
|
|
2109
2183
|
};
|
|
2110
2184
|
|
|
2111
2185
|
declare function useKanban(): KanbanContextValue;
|
|
@@ -2516,4 +2590,4 @@ declare function useAnimation({ open, enterClass, exitClass, }: UseAnimationOpti
|
|
|
2516
2590
|
|
|
2517
2591
|
declare function useId(prefix?: string): string;
|
|
2518
2592
|
|
|
2519
|
-
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardProps, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
|
2593
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
package/dist/index.d.ts
CHANGED
|
@@ -2052,16 +2052,45 @@ declare const MobileMenu: {
|
|
|
2052
2052
|
|
|
2053
2053
|
declare function useMobileMenu(): MobileMenuContextValue;
|
|
2054
2054
|
|
|
2055
|
+
/**
|
|
2056
|
+
* Fired when a card is dropped into a column. `toIndex` is the position
|
|
2057
|
+
* the card should land at within the destination column (0-based;
|
|
2058
|
+
* `toIndex === current count` means append).
|
|
2059
|
+
*
|
|
2060
|
+
* For a same-column reorder, `fromColumn === toColumn` and `toIndex` is
|
|
2061
|
+
* the new position.
|
|
2062
|
+
*/
|
|
2063
|
+
type KanbanCardMoveHandler = (cardId: string, fromColumn: string, toColumn: string, toIndex: number) => void;
|
|
2064
|
+
/**
|
|
2065
|
+
* Fired when a column is dropped at a new position. `toIndex` is the
|
|
2066
|
+
* new position among registered columns (0-based).
|
|
2067
|
+
*/
|
|
2068
|
+
type KanbanColumnMoveHandler = (columnId: string, toIndex: number) => void;
|
|
2055
2069
|
interface KanbanContextValue {
|
|
2056
|
-
onCardMove?: (cardId: string, fromColumn: string, toColumn: string) => void;
|
|
2057
2070
|
draggedCard: string | null;
|
|
2058
2071
|
setDraggedCard: (id: string | null) => void;
|
|
2059
2072
|
dragSource: string | null;
|
|
2060
2073
|
setDragSource: (id: string | null) => void;
|
|
2074
|
+
draggedColumn: string | null;
|
|
2075
|
+
setDraggedColumn: (id: string | null) => void;
|
|
2076
|
+
onCardMove?: KanbanCardMoveHandler;
|
|
2077
|
+
onColumnMove?: KanbanColumnMoveHandler;
|
|
2078
|
+
columnIds: string[];
|
|
2079
|
+
registerColumn: (id: string) => () => void;
|
|
2061
2080
|
}
|
|
2062
2081
|
interface KanbanProps {
|
|
2063
2082
|
children: ReactNode;
|
|
2064
|
-
|
|
2083
|
+
/**
|
|
2084
|
+
* Called when a card is dropped into a column. Receives the destination
|
|
2085
|
+
* index so handlers can support within-column reorder.
|
|
2086
|
+
*/
|
|
2087
|
+
onCardMove?: KanbanCardMoveHandler;
|
|
2088
|
+
/**
|
|
2089
|
+
* Called when a column is dropped at a new position. Only fires if at
|
|
2090
|
+
* least one column inside the board has a `<Kanban.ColumnHandle>` and
|
|
2091
|
+
* a column was actually dragged.
|
|
2092
|
+
*/
|
|
2093
|
+
onColumnMove?: KanbanColumnMoveHandler;
|
|
2065
2094
|
className?: string;
|
|
2066
2095
|
}
|
|
2067
2096
|
interface KanbanColumnProps {
|
|
@@ -2070,25 +2099,39 @@ interface KanbanColumnProps {
|
|
|
2070
2099
|
title?: string;
|
|
2071
2100
|
className?: string;
|
|
2072
2101
|
/**
|
|
2073
|
-
* Skip the column's default visuals (background, padding, min-height,
|
|
2074
|
-
* width)
|
|
2075
|
-
* Drop-target behaviour, drag-over ring, and column id wiring are kept.
|
|
2102
|
+
* Skip the column's default visuals (background, padding, min-height,
|
|
2103
|
+
* fixed width). Drop-target wiring and the drag-over ring stay.
|
|
2076
2104
|
*/
|
|
2077
2105
|
unstyled?: boolean;
|
|
2106
|
+
/**
|
|
2107
|
+
* Soft work-in-progress limit. Shown in the column header (when `title`
|
|
2108
|
+
* is provided) as `count/limit`. Turns red over capacity. Drops are
|
|
2109
|
+
* still accepted — enforce hard via the consumer's `onCardMove`.
|
|
2110
|
+
*/
|
|
2111
|
+
wipLimit?: number;
|
|
2112
|
+
/**
|
|
2113
|
+
* If true, the column renders nothing when it has zero card children.
|
|
2114
|
+
* Useful for filter UIs that want clean collapse instead of empty
|
|
2115
|
+
* placeholders.
|
|
2116
|
+
*/
|
|
2117
|
+
hideWhenEmpty?: boolean;
|
|
2078
2118
|
}
|
|
2079
2119
|
interface KanbanCardProps {
|
|
2080
2120
|
children: ReactNode;
|
|
2081
2121
|
id: string;
|
|
2082
2122
|
className?: string;
|
|
2083
2123
|
/**
|
|
2084
|
-
* Skip the card's default visuals (border, padding, shadow
|
|
2085
|
-
*
|
|
2086
|
-
* wrap their own Card / Surface inside.
|
|
2124
|
+
* Skip the card's default visuals (border, padding, shadow). Drag
|
|
2125
|
+
* handlers and `draggable` stay.
|
|
2087
2126
|
*/
|
|
2088
2127
|
unstyled?: boolean;
|
|
2089
2128
|
}
|
|
2129
|
+
interface KanbanColumnHandleProps {
|
|
2130
|
+
children: ReactNode;
|
|
2131
|
+
className?: string;
|
|
2132
|
+
}
|
|
2090
2133
|
|
|
2091
|
-
declare function KanbanColumn({ children, id, title, className, unstyled, }: KanbanColumnProps): react_jsx_runtime.JSX.Element;
|
|
2134
|
+
declare function KanbanColumn({ children, id, title, className, unstyled, wipLimit, hideWhenEmpty, }: KanbanColumnProps): react_jsx_runtime.JSX.Element | null;
|
|
2092
2135
|
declare namespace KanbanColumn {
|
|
2093
2136
|
var displayName: string;
|
|
2094
2137
|
}
|
|
@@ -2099,13 +2142,44 @@ declare namespace KanbanCard {
|
|
|
2099
2142
|
}
|
|
2100
2143
|
|
|
2101
2144
|
/**
|
|
2102
|
-
*
|
|
2103
|
-
*
|
|
2145
|
+
* Drag handle for column reordering.
|
|
2146
|
+
*
|
|
2147
|
+
* Mount inside a `Kanban.Column` to make that column draggable. The
|
|
2148
|
+
* column's parent `Kanban` listens for the drop and surfaces the new
|
|
2149
|
+
* position via `onColumnMove`. Without a handle, columns are static.
|
|
2150
|
+
*
|
|
2151
|
+
* Typically wrapped around the column header so users grab the title
|
|
2152
|
+
* to reorder; can also be a small grip icon.
|
|
2153
|
+
*/
|
|
2154
|
+
declare function KanbanColumnHandle({ children, className, }: KanbanColumnHandleProps): react_jsx_runtime.JSX.Element;
|
|
2155
|
+
declare namespace KanbanColumnHandle {
|
|
2156
|
+
var displayName: string;
|
|
2157
|
+
}
|
|
2158
|
+
|
|
2159
|
+
/**
|
|
2160
|
+
* Kanban board.
|
|
2161
|
+
*
|
|
2162
|
+
* Compound:
|
|
2163
|
+
* <Kanban onCardMove={...} onColumnMove={...}>
|
|
2164
|
+
* <Kanban.Column id="todo" wipLimit={4}>
|
|
2165
|
+
* <Kanban.ColumnHandle>...header...</Kanban.ColumnHandle> // optional
|
|
2166
|
+
* <Kanban.Card id="...">...</Kanban.Card>
|
|
2167
|
+
* </Kanban.Column>
|
|
2168
|
+
* </Kanban>
|
|
2169
|
+
*
|
|
2170
|
+
* Cards drag between columns AND within a column. Drop position is
|
|
2171
|
+
* computed from mouse Y at hover time and surfaced via the `toIndex`
|
|
2172
|
+
* argument on `onCardMove`.
|
|
2173
|
+
*
|
|
2174
|
+
* Columns drag horizontally to reorder when a `<Kanban.ColumnHandle>`
|
|
2175
|
+
* is mounted inside them. The root computes the drop index from
|
|
2176
|
+
* mouse X and surfaces it via `onColumnMove`.
|
|
2104
2177
|
*/
|
|
2105
|
-
declare function KanbanRoot({ children, onCardMove, className }: KanbanProps): react_jsx_runtime.JSX.Element;
|
|
2178
|
+
declare function KanbanRoot({ children, onCardMove, onColumnMove, className, }: KanbanProps): react_jsx_runtime.JSX.Element;
|
|
2106
2179
|
declare const Kanban: typeof KanbanRoot & {
|
|
2107
2180
|
Column: typeof KanbanColumn;
|
|
2108
2181
|
Card: typeof KanbanCard;
|
|
2182
|
+
ColumnHandle: typeof KanbanColumnHandle;
|
|
2109
2183
|
};
|
|
2110
2184
|
|
|
2111
2185
|
declare function useKanban(): KanbanContextValue;
|
|
@@ -2516,4 +2590,4 @@ declare function useAnimation({ open, enterClass, exitClass, }: UseAnimationOpti
|
|
|
2516
2590
|
|
|
2517
2591
|
declare function useId(prefix?: string): string;
|
|
2518
2592
|
|
|
2519
|
-
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardProps, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
|
2593
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Canvas, type CanvasContextValue, type CanvasControlsProps, type CanvasEdgeProps, type CanvasMinimapProps, type CanvasNodeProps, type CanvasProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, DatePicker, type DatePickerProps, type DateRange, Diagram, type DiagramContextValue, type DiagramEntityData, type DiagramEntityProps, type DiagramFieldData, type DiagramFieldProps, type DiagramProps, type DiagramRelationData, type DiagramRelationProps, type DiagramSchema, type DiagramToolbarProps, type DiagramType, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, type ExportFormat, Field, type FieldProps, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RelationType, type RenderExtension, type RenderExtensionProps, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, type ViewportState, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|