@particle-academy/react-fancy 1.9.0 → 2.0.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/index.cjs +217 -26
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +19 -2
- package/dist/index.d.ts +19 -2
- package/dist/index.js +217 -26
- package/dist/index.js.map +1 -1
- package/docs/TreeNav.md +78 -0
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -2076,6 +2076,13 @@ interface TreeNodeData {
|
|
|
2076
2076
|
/** Whether the node is disabled */
|
|
2077
2077
|
disabled?: boolean;
|
|
2078
2078
|
}
|
|
2079
|
+
/** Where the dragged node will land relative to the drop target */
|
|
2080
|
+
type DropPosition = "before" | "after" | "inside";
|
|
2081
|
+
interface DragState {
|
|
2082
|
+
draggedNodeId: string | null;
|
|
2083
|
+
dropTargetId: string | null;
|
|
2084
|
+
dropPosition: DropPosition | null;
|
|
2085
|
+
}
|
|
2079
2086
|
interface TreeNavProps {
|
|
2080
2087
|
/** Tree data */
|
|
2081
2088
|
nodes: TreeNodeData[];
|
|
@@ -2085,6 +2092,10 @@ interface TreeNavProps {
|
|
|
2085
2092
|
onSelect?: (id: string, node: TreeNodeData) => void;
|
|
2086
2093
|
/** Callback when a node is right-clicked */
|
|
2087
2094
|
onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
|
|
2095
|
+
/** Enable drag-and-drop reordering (default: false) */
|
|
2096
|
+
draggable?: boolean;
|
|
2097
|
+
/** Callback when a node is moved via drag and drop */
|
|
2098
|
+
onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
|
|
2088
2099
|
/** Controlled expanded node IDs */
|
|
2089
2100
|
expandedIds?: string[];
|
|
2090
2101
|
/** Default expanded node IDs (uncontrolled) */
|
|
@@ -2108,6 +2119,12 @@ interface TreeNavContextValue {
|
|
|
2108
2119
|
toggle: (id: string) => void;
|
|
2109
2120
|
indentSize: number;
|
|
2110
2121
|
showIcons: boolean;
|
|
2122
|
+
draggable: boolean;
|
|
2123
|
+
dragState: DragState;
|
|
2124
|
+
setDragState: (state: DragState) => void;
|
|
2125
|
+
onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
|
|
2126
|
+
nodes: TreeNodeData[];
|
|
2127
|
+
expandNode: (id: string) => void;
|
|
2111
2128
|
}
|
|
2112
2129
|
interface TreeNodeProps {
|
|
2113
2130
|
node: TreeNodeData;
|
|
@@ -2120,7 +2137,7 @@ declare namespace TreeNode {
|
|
|
2120
2137
|
var displayName: string;
|
|
2121
2138
|
}
|
|
2122
2139
|
|
|
2123
|
-
declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
|
|
2140
|
+
declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
|
|
2124
2141
|
declare namespace TreeNavRoot {
|
|
2125
2142
|
var displayName: string;
|
|
2126
2143
|
}
|
|
@@ -2196,4 +2213,4 @@ declare function find(char: string): {
|
|
|
2196
2213
|
category: string;
|
|
2197
2214
|
} | undefined;
|
|
2198
2215
|
|
|
2199
|
-
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, 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, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, 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, 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, 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, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, resolve, search, useAccordion, 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 };
|
|
2216
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, 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_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, 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, 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, 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, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, resolve, search, useAccordion, 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
|
@@ -2076,6 +2076,13 @@ interface TreeNodeData {
|
|
|
2076
2076
|
/** Whether the node is disabled */
|
|
2077
2077
|
disabled?: boolean;
|
|
2078
2078
|
}
|
|
2079
|
+
/** Where the dragged node will land relative to the drop target */
|
|
2080
|
+
type DropPosition = "before" | "after" | "inside";
|
|
2081
|
+
interface DragState {
|
|
2082
|
+
draggedNodeId: string | null;
|
|
2083
|
+
dropTargetId: string | null;
|
|
2084
|
+
dropPosition: DropPosition | null;
|
|
2085
|
+
}
|
|
2079
2086
|
interface TreeNavProps {
|
|
2080
2087
|
/** Tree data */
|
|
2081
2088
|
nodes: TreeNodeData[];
|
|
@@ -2085,6 +2092,10 @@ interface TreeNavProps {
|
|
|
2085
2092
|
onSelect?: (id: string, node: TreeNodeData) => void;
|
|
2086
2093
|
/** Callback when a node is right-clicked */
|
|
2087
2094
|
onNodeContextMenu?: (e: React.MouseEvent, node: TreeNodeData) => void;
|
|
2095
|
+
/** Enable drag-and-drop reordering (default: false) */
|
|
2096
|
+
draggable?: boolean;
|
|
2097
|
+
/** Callback when a node is moved via drag and drop */
|
|
2098
|
+
onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
|
|
2088
2099
|
/** Controlled expanded node IDs */
|
|
2089
2100
|
expandedIds?: string[];
|
|
2090
2101
|
/** Default expanded node IDs (uncontrolled) */
|
|
@@ -2108,6 +2119,12 @@ interface TreeNavContextValue {
|
|
|
2108
2119
|
toggle: (id: string) => void;
|
|
2109
2120
|
indentSize: number;
|
|
2110
2121
|
showIcons: boolean;
|
|
2122
|
+
draggable: boolean;
|
|
2123
|
+
dragState: DragState;
|
|
2124
|
+
setDragState: (state: DragState) => void;
|
|
2125
|
+
onNodeMove?: (sourceId: string, targetId: string, position: DropPosition) => void;
|
|
2126
|
+
nodes: TreeNodeData[];
|
|
2127
|
+
expandNode: (id: string) => void;
|
|
2111
2128
|
}
|
|
2112
2129
|
interface TreeNodeProps {
|
|
2113
2130
|
node: TreeNodeData;
|
|
@@ -2120,7 +2137,7 @@ declare namespace TreeNode {
|
|
|
2120
2137
|
var displayName: string;
|
|
2121
2138
|
}
|
|
2122
2139
|
|
|
2123
|
-
declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
|
|
2140
|
+
declare function TreeNavRoot({ nodes, selectedId, onSelect, onNodeContextMenu, draggable, onNodeMove, expandedIds: controlledExpanded, defaultExpandedIds, onExpandedChange, defaultExpandAll, indentSize, showIcons, className, }: TreeNavProps): react_jsx_runtime.JSX.Element;
|
|
2124
2141
|
declare namespace TreeNavRoot {
|
|
2125
2142
|
var displayName: string;
|
|
2126
2143
|
}
|
|
@@ -2196,4 +2213,4 @@ declare function find(char: string): {
|
|
|
2196
2213
|
category: string;
|
|
2197
2214
|
} | undefined;
|
|
2198
2215
|
|
|
2199
|
-
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, 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, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, 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, 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, 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, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, resolve, search, useAccordion, 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 };
|
|
2216
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, 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_DATA, EMOJI_ENTRIES, type EdgeAnchor, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorToolbarProps, Emoji, 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, 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, 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, cn, configureIcons, find, registerExtension, registerExtensions, registerIconSet, resolve, search, useAccordion, 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.js
CHANGED
|
@@ -10254,12 +10254,67 @@ function ChevronIcon({ open }) {
|
|
|
10254
10254
|
}
|
|
10255
10255
|
);
|
|
10256
10256
|
}
|
|
10257
|
+
function isDescendantOf(nodes, ancestorId, targetId) {
|
|
10258
|
+
function findNode(haystack, id) {
|
|
10259
|
+
for (const n of haystack) {
|
|
10260
|
+
if (n.id === id) return n;
|
|
10261
|
+
if (n.children) {
|
|
10262
|
+
const found = findNode(n.children, id);
|
|
10263
|
+
if (found) return found;
|
|
10264
|
+
}
|
|
10265
|
+
}
|
|
10266
|
+
return void 0;
|
|
10267
|
+
}
|
|
10268
|
+
function hasDescendant(node, id) {
|
|
10269
|
+
if (!node.children) return false;
|
|
10270
|
+
for (const child of node.children) {
|
|
10271
|
+
if (child.id === id) return true;
|
|
10272
|
+
if (hasDescendant(child, id)) return true;
|
|
10273
|
+
}
|
|
10274
|
+
return false;
|
|
10275
|
+
}
|
|
10276
|
+
const ancestor = findNode(nodes, ancestorId);
|
|
10277
|
+
return ancestor ? hasDescendant(ancestor, targetId) : false;
|
|
10278
|
+
}
|
|
10279
|
+
function computeDropPosition(e, isFolder) {
|
|
10280
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
10281
|
+
const offsetY = e.clientY - rect.top;
|
|
10282
|
+
const third = rect.height / 3;
|
|
10283
|
+
if (offsetY < third) return "before";
|
|
10284
|
+
if (offsetY > third * 2) return "after";
|
|
10285
|
+
return isFolder ? "inside" : "after";
|
|
10286
|
+
}
|
|
10257
10287
|
function TreeNode({ node, depth }) {
|
|
10258
|
-
const {
|
|
10288
|
+
const {
|
|
10289
|
+
selectedId,
|
|
10290
|
+
onSelect,
|
|
10291
|
+
onNodeContextMenu,
|
|
10292
|
+
expandedIds,
|
|
10293
|
+
toggle,
|
|
10294
|
+
indentSize,
|
|
10295
|
+
showIcons,
|
|
10296
|
+
draggable,
|
|
10297
|
+
dragState,
|
|
10298
|
+
setDragState,
|
|
10299
|
+
onNodeMove,
|
|
10300
|
+
nodes,
|
|
10301
|
+
expandNode
|
|
10302
|
+
} = useTreeNav();
|
|
10259
10303
|
const isFolder = node.type === "folder" || node.children && node.children.length > 0;
|
|
10260
10304
|
const isExpanded = expandedIds.includes(node.id);
|
|
10261
10305
|
const isSelected = selectedId === node.id;
|
|
10262
10306
|
const paddingLeft = depth * indentSize + 4;
|
|
10307
|
+
const isDragging = dragState.draggedNodeId === node.id;
|
|
10308
|
+
const isDropTarget = dragState.dropTargetId === node.id;
|
|
10309
|
+
const dropPosition = isDropTarget ? dragState.dropPosition : null;
|
|
10310
|
+
const autoExpandTimer = useRef(null);
|
|
10311
|
+
const clearAutoExpand = useCallback(() => {
|
|
10312
|
+
if (autoExpandTimer.current) {
|
|
10313
|
+
clearTimeout(autoExpandTimer.current);
|
|
10314
|
+
autoExpandTimer.current = null;
|
|
10315
|
+
}
|
|
10316
|
+
}, []);
|
|
10317
|
+
useEffect(() => clearAutoExpand, [clearAutoExpand]);
|
|
10263
10318
|
const handleClick = () => {
|
|
10264
10319
|
if (node.disabled) return;
|
|
10265
10320
|
if (isFolder) {
|
|
@@ -10273,30 +10328,116 @@ function TreeNode({ node, depth }) {
|
|
|
10273
10328
|
onNodeContextMenu(e, node);
|
|
10274
10329
|
}
|
|
10275
10330
|
};
|
|
10276
|
-
|
|
10277
|
-
|
|
10278
|
-
|
|
10279
|
-
|
|
10280
|
-
|
|
10281
|
-
|
|
10282
|
-
|
|
10283
|
-
|
|
10284
|
-
|
|
10285
|
-
|
|
10286
|
-
|
|
10287
|
-
|
|
10288
|
-
|
|
10289
|
-
|
|
10290
|
-
|
|
10291
|
-
|
|
10292
|
-
|
|
10293
|
-
|
|
10294
|
-
|
|
10295
|
-
|
|
10331
|
+
const handleDragStart = useCallback((e) => {
|
|
10332
|
+
e.dataTransfer.setData("text/plain", node.id);
|
|
10333
|
+
e.dataTransfer.effectAllowed = "move";
|
|
10334
|
+
requestAnimationFrame(() => {
|
|
10335
|
+
setDragState({ draggedNodeId: node.id, dropTargetId: null, dropPosition: null });
|
|
10336
|
+
});
|
|
10337
|
+
}, [node.id, setDragState]);
|
|
10338
|
+
const handleDragEnd = useCallback(() => {
|
|
10339
|
+
clearAutoExpand();
|
|
10340
|
+
setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
|
|
10341
|
+
}, [clearAutoExpand, setDragState]);
|
|
10342
|
+
const handleDragOver = useCallback((e) => {
|
|
10343
|
+
if (!dragState.draggedNodeId) return;
|
|
10344
|
+
const sourceId = dragState.draggedNodeId;
|
|
10345
|
+
if (sourceId === node.id) return;
|
|
10346
|
+
if (isDescendantOf(nodes, sourceId, node.id)) return;
|
|
10347
|
+
e.preventDefault();
|
|
10348
|
+
e.stopPropagation();
|
|
10349
|
+
e.dataTransfer.dropEffect = "move";
|
|
10350
|
+
const position = computeDropPosition(e, !!isFolder);
|
|
10351
|
+
if (isFolder && !isExpanded && position === "inside") {
|
|
10352
|
+
if (!autoExpandTimer.current) {
|
|
10353
|
+
autoExpandTimer.current = setTimeout(() => {
|
|
10354
|
+
expandNode(node.id);
|
|
10355
|
+
autoExpandTimer.current = null;
|
|
10356
|
+
}, 500);
|
|
10296
10357
|
}
|
|
10297
|
-
|
|
10298
|
-
|
|
10299
|
-
|
|
10358
|
+
} else {
|
|
10359
|
+
clearAutoExpand();
|
|
10360
|
+
}
|
|
10361
|
+
if (dragState.dropTargetId !== node.id || dragState.dropPosition !== position) {
|
|
10362
|
+
setDragState({ draggedNodeId: sourceId, dropTargetId: node.id, dropPosition: position });
|
|
10363
|
+
}
|
|
10364
|
+
}, [dragState, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
|
|
10365
|
+
const handleDragLeave = useCallback((e) => {
|
|
10366
|
+
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
10367
|
+
clearAutoExpand();
|
|
10368
|
+
if (dragState.dropTargetId === node.id) {
|
|
10369
|
+
setDragState({ ...dragState, dropTargetId: null, dropPosition: null });
|
|
10370
|
+
}
|
|
10371
|
+
}
|
|
10372
|
+
}, [dragState, node.id, setDragState, clearAutoExpand]);
|
|
10373
|
+
const handleDrop = useCallback((e) => {
|
|
10374
|
+
e.preventDefault();
|
|
10375
|
+
e.stopPropagation();
|
|
10376
|
+
clearAutoExpand();
|
|
10377
|
+
const sourceId = dragState.draggedNodeId;
|
|
10378
|
+
const position = dragState.dropPosition;
|
|
10379
|
+
if (!sourceId || !position) return;
|
|
10380
|
+
if (sourceId === node.id) return;
|
|
10381
|
+
if (isDescendantOf(nodes, sourceId, node.id)) return;
|
|
10382
|
+
onNodeMove?.(sourceId, node.id, position);
|
|
10383
|
+
setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
|
|
10384
|
+
}, [dragState, node.id, nodes, onNodeMove, setDragState, clearAutoExpand]);
|
|
10385
|
+
const canDrag = draggable && !node.disabled;
|
|
10386
|
+
return /* @__PURE__ */ jsxs(
|
|
10387
|
+
"div",
|
|
10388
|
+
{
|
|
10389
|
+
"data-react-fancy-tree-node": "",
|
|
10390
|
+
onDragOver: draggable ? handleDragOver : void 0,
|
|
10391
|
+
onDragLeave: draggable ? handleDragLeave : void 0,
|
|
10392
|
+
onDrop: draggable ? handleDrop : void 0,
|
|
10393
|
+
children: [
|
|
10394
|
+
isDropTarget && dropPosition === "before" && /* @__PURE__ */ jsx(
|
|
10395
|
+
"div",
|
|
10396
|
+
{
|
|
10397
|
+
"data-react-fancy-tree-drop-indicator": "before",
|
|
10398
|
+
className: "pointer-events-none h-0.5 rounded-full bg-blue-500",
|
|
10399
|
+
style: { marginLeft: paddingLeft }
|
|
10400
|
+
}
|
|
10401
|
+
),
|
|
10402
|
+
/* @__PURE__ */ jsxs(
|
|
10403
|
+
"button",
|
|
10404
|
+
{
|
|
10405
|
+
type: "button",
|
|
10406
|
+
draggable: canDrag,
|
|
10407
|
+
onDragStart: canDrag ? handleDragStart : void 0,
|
|
10408
|
+
onDragEnd: canDrag ? handleDragEnd : void 0,
|
|
10409
|
+
onClick: handleClick,
|
|
10410
|
+
onContextMenu: handleContextMenu,
|
|
10411
|
+
disabled: node.disabled,
|
|
10412
|
+
className: cn(
|
|
10413
|
+
"flex w-full items-center gap-1 rounded-md py-0.5 text-left text-[13px] transition-colors",
|
|
10414
|
+
isSelected ? "bg-blue-500/15 text-blue-600 dark:text-blue-400" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800",
|
|
10415
|
+
node.disabled && "pointer-events-none opacity-40",
|
|
10416
|
+
isDragging && "opacity-50",
|
|
10417
|
+
canDrag && "cursor-grab active:cursor-grabbing",
|
|
10418
|
+
isDropTarget && dropPosition === "inside" && "bg-blue-500/10 ring-1 ring-blue-500/30 ring-inset"
|
|
10419
|
+
),
|
|
10420
|
+
style: { paddingLeft },
|
|
10421
|
+
children: [
|
|
10422
|
+
isFolder && /* @__PURE__ */ jsx(ChevronIcon, { open: isExpanded }),
|
|
10423
|
+
!isFolder && /* @__PURE__ */ jsx("span", { className: "w-3.5 shrink-0" }),
|
|
10424
|
+
showIcons && (node.icon ?? (isFolder ? /* @__PURE__ */ jsx(FolderIcon, { open: isExpanded }) : /* @__PURE__ */ jsx(FileIcon, { ext: node.ext ?? node.label.split(".").pop() }))),
|
|
10425
|
+
/* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
|
|
10426
|
+
]
|
|
10427
|
+
}
|
|
10428
|
+
),
|
|
10429
|
+
isDropTarget && dropPosition === "after" && /* @__PURE__ */ jsx(
|
|
10430
|
+
"div",
|
|
10431
|
+
{
|
|
10432
|
+
"data-react-fancy-tree-drop-indicator": "after",
|
|
10433
|
+
className: "pointer-events-none h-0.5 rounded-full bg-blue-500",
|
|
10434
|
+
style: { marginLeft: paddingLeft }
|
|
10435
|
+
}
|
|
10436
|
+
),
|
|
10437
|
+
isFolder && isExpanded && node.children && /* @__PURE__ */ jsx("div", { "data-react-fancy-tree-node-children": "", children: node.children.map((child) => /* @__PURE__ */ jsx(TreeNode, { node: child, depth: depth + 1 }, child.id)) })
|
|
10438
|
+
]
|
|
10439
|
+
}
|
|
10440
|
+
);
|
|
10300
10441
|
}
|
|
10301
10442
|
TreeNode.displayName = "TreeNode";
|
|
10302
10443
|
function collectFolderIds(nodes) {
|
|
@@ -10309,11 +10450,18 @@ function collectFolderIds(nodes) {
|
|
|
10309
10450
|
}
|
|
10310
10451
|
return ids;
|
|
10311
10452
|
}
|
|
10453
|
+
var EMPTY_DRAG_STATE = {
|
|
10454
|
+
draggedNodeId: null,
|
|
10455
|
+
dropTargetId: null,
|
|
10456
|
+
dropPosition: null
|
|
10457
|
+
};
|
|
10312
10458
|
function TreeNavRoot({
|
|
10313
10459
|
nodes,
|
|
10314
10460
|
selectedId,
|
|
10315
10461
|
onSelect,
|
|
10316
10462
|
onNodeContextMenu,
|
|
10463
|
+
draggable = false,
|
|
10464
|
+
onNodeMove,
|
|
10317
10465
|
expandedIds: controlledExpanded,
|
|
10318
10466
|
defaultExpandedIds,
|
|
10319
10467
|
onExpandedChange,
|
|
@@ -10339,15 +10487,58 @@ function TreeNavRoot({
|
|
|
10339
10487
|
},
|
|
10340
10488
|
[expandedIds, isControlled, onExpandedChange]
|
|
10341
10489
|
);
|
|
10490
|
+
const expandNode = useCallback(
|
|
10491
|
+
(id) => {
|
|
10492
|
+
if (expandedIds.includes(id)) return;
|
|
10493
|
+
const next = [...expandedIds, id];
|
|
10494
|
+
if (!isControlled) {
|
|
10495
|
+
setInternalExpanded(next);
|
|
10496
|
+
}
|
|
10497
|
+
onExpandedChange?.(next);
|
|
10498
|
+
},
|
|
10499
|
+
[expandedIds, isControlled, onExpandedChange]
|
|
10500
|
+
);
|
|
10501
|
+
const [dragState, setDragState] = useState(EMPTY_DRAG_STATE);
|
|
10502
|
+
const handleDragEnd = useCallback(() => {
|
|
10503
|
+
setDragState(EMPTY_DRAG_STATE);
|
|
10504
|
+
}, []);
|
|
10342
10505
|
const ctx = useMemo(
|
|
10343
|
-
() => ({
|
|
10344
|
-
|
|
10506
|
+
() => ({
|
|
10507
|
+
selectedId,
|
|
10508
|
+
onSelect,
|
|
10509
|
+
onNodeContextMenu,
|
|
10510
|
+
expandedIds,
|
|
10511
|
+
toggle,
|
|
10512
|
+
indentSize,
|
|
10513
|
+
showIcons,
|
|
10514
|
+
draggable,
|
|
10515
|
+
dragState,
|
|
10516
|
+
setDragState,
|
|
10517
|
+
onNodeMove,
|
|
10518
|
+
nodes,
|
|
10519
|
+
expandNode
|
|
10520
|
+
}),
|
|
10521
|
+
[
|
|
10522
|
+
selectedId,
|
|
10523
|
+
onSelect,
|
|
10524
|
+
onNodeContextMenu,
|
|
10525
|
+
expandedIds,
|
|
10526
|
+
toggle,
|
|
10527
|
+
indentSize,
|
|
10528
|
+
showIcons,
|
|
10529
|
+
draggable,
|
|
10530
|
+
dragState,
|
|
10531
|
+
onNodeMove,
|
|
10532
|
+
nodes,
|
|
10533
|
+
expandNode
|
|
10534
|
+
]
|
|
10345
10535
|
);
|
|
10346
10536
|
return /* @__PURE__ */ jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
|
|
10347
10537
|
"nav",
|
|
10348
10538
|
{
|
|
10349
10539
|
"data-react-fancy-tree-nav": "",
|
|
10350
10540
|
className: cn("flex flex-col gap-0.5 py-1 text-sm", className),
|
|
10541
|
+
onDragEnd: draggable ? handleDragEnd : void 0,
|
|
10351
10542
|
children: nodes.map((node) => /* @__PURE__ */ jsx(TreeNode, { node, depth: 0 }, node.id))
|
|
10352
10543
|
}
|
|
10353
10544
|
) });
|