@deadragdoll/reactnu 0.1.73 → 0.1.75

package/dist/components/DragDrop/NuDragDropProvider.d.ts

@@ -1,4 +1,4 @@
-import { PointerEvent, PropsWithChildren } from "react";
+import { PropsWithChildren, ReactNode, RefCallback } from "react";
 export type NuDragDropItem<T = unknown> = {
     data: T;
     id: string;
@@ -16,31 +16,38 @@ export type NuDragDropContext = {
         type: string;
     };
 };
+export type NuDropAction = "copy" | "move";
+export type NuDropResult = {
+    /** Lets a target request whether its source should copy or move after a successful drop. */
+    action?: NuDropAction;
+    /** Identifies the target kind for source-side completion handlers. */
+    targetType?: string;
+};
 export type NuDropTargetOptions = {
     accepts?: (item: NuDragDropItem) => boolean;
-    onDrop: (item: NuDragDropItem, context: NuDragDropContext) => boolean | void;
+    onDragEnter?: (item: NuDragDropItem, canDrop: boolean) => void;
+    onDragLeave?: (item: NuDragDropItem) => void;
+    onDrop: (item: NuDragDropItem, context: NuDragDropContext) => boolean | NuDropResult | void;
     type: string;
 };
-type NuDragDropController = {
-    beginDrag: (item: NuDragDropItem, sourceElement: HTMLElement, sourceType: string) => void;
-    cancelDrag: () => void;
-    dropAt: (clientX: number, clientY: number) => boolean;
-    moveDrag: (clientX: number, clientY: number) => void;
-    registerTarget: (element: HTMLElement, options: NuDropTargetOptions) => () => void;
+export type NuDropTargetState = {
+    canDrop: boolean;
+    isOver: boolean;
+    item: NuDragDropItem | null;
 };
-export declare function NuDragDropProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-export declare function useNuDragDrop(): NuDragDropController;
-export declare function useNuDropTarget(element: HTMLElement | null, options: NuDropTargetOptions | undefined): void;
+export declare function NuDragDropProvider({ children }: PropsWithChildren): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+/** Returns the underlying react-dnd manager for advanced integrations. */
+export declare function useNuDragDrop(): import("dnd-core").DragDropManager;
+export declare function useNuDropTarget(element: HTMLElement | null, options: NuDropTargetOptions | undefined): NuDropTargetState;
 type NuDragSourceOptions = {
     disabled?: boolean;
     getItem: () => NuDragDropItem | false;
-    onDropAccepted?: () => void;
+    onDropAccepted?: (result: NuDropResult) => void;
+    renderPreview?: (item: NuDragDropItem) => ReactNode;
     sourceType: string;
 };
-export declare function useNuDragSource({ disabled, getItem, onDropAccepted, sourceType }: NuDragSourceOptions): {
-    onPointerCancel(event: PointerEvent<HTMLElement>): void;
-    onPointerDown(event: PointerEvent<HTMLElement>): void;
-    onPointerMove(event: PointerEvent<HTMLElement>): void;
-    onPointerUp(event: PointerEvent<HTMLElement>): void;
+export declare function useNuDragSource({ disabled, getItem, onDropAccepted, renderPreview, sourceType }: NuDragSourceOptions): {
+    dragRef: RefCallback<HTMLElement>;
+    isDragging: boolean;
 };
 export {};

package/dist/components/IconGrid/NuIconGrid.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { NuDragDropContext, NuDragDropItem } from "../DragDrop";
+import { NuDragDropContext, NuDragDropItem, NuDropResult } from "../DragDrop";
 import { NuIconContextMenuItems, NuIconArrangeMode, NuIconDropContext, NuIconInfo } from "./IconGrid.types";
 export type NuIconGridProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onDrop"> & {
     /** Filters icons accepted from another IconGrid before `onIconDrop` is called. */
@@ -14,9 +14,13 @@ export type NuIconGridProps = Omit<HTMLAttributes<HTMLDivElement>, "children" |
     onIconDrop?: (icon: NuIconInfo, context: NuIconDropContext) => boolean | void;
     /** Called by the source grid after its icon was transferred to another grid. */
     onIconMoveOut?: (icon: NuIconInfo, context: NuIconDropContext) => void;
-    /** Called after an icon was accepted by a non-IconGrid shared drop target. */
-    onDragOut?: (item: NuDragDropItem<NuIconInfo>) => void;
+    /**
+     * Called after an icon was accepted by a non-IconGrid shared drop target.
+     * Return `false`, or have the target return `{ action: "copy" }`, to keep
+     * the source icon in this grid.
+     */
+    onDragOut?: (item: NuDragDropItem<NuIconInfo>, result: NuDropResult) => boolean | void;
     /** Receives non-icon shared drag items. Return false to reject the drop. */
-    onDrop?: (item: NuDragDropItem, context: NuDragDropContext) => boolean | void;
+    onDrop?: (item: NuDragDropItem, context: NuDragDropContext) => boolean | NuDropResult | void;
 };
-export declare function NuIconGrid({ accepts, acceptsDrop, className, contextMenuItems: contextMenuItemsSource, defaultArrangeMode, dropTarget, onDragOut, onIconDrop, onIconMoveOut, onDrop, onContextMenu, onPointerDown, ...props }: NuIconGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function NuIconGrid(props: NuIconGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListBox/ListBox.d.ts

@@ -1,6 +1,6 @@
-import { ForwardedRef, HTMLAttributes, MouseEvent, RefAttributes } from "react";
+import { ForwardedRef, HTMLAttributes, MouseEvent, ReactNode, RefAttributes } from "react";
 import { ListBoxGroup, ListBoxItem } from "./internals/types";
-import { NuDragDropContext, NuDragDropItem } from "../DragDrop";
+import { NuDragDropContext, NuDragDropItem, NuDropResult } from "../DragDrop";
 export type { ListBoxCategory, ListBoxGroup, ListBoxItem, ListBoxLabel } from "./internals/types";
 export type ListBoxHandle = {
     activateItem: (itemId: string) => void;
@@ -16,6 +16,8 @@ export type ListBoxProps = Omit<HTMLAttributes<HTMLDivElement>, "onDrop" | "onSe
     checkedIds?: string[];
     /** Returns the shared drag item for a row, or false to keep it static. */
     getDragItem?: (item: ListBoxItem, group: ListBoxGroup) => NuDragDropItem | false;
+    /** Renders a compact preview for an item dragged from this list. */
+    renderDragPreview?: (item: ListBoxItem, group: ListBoxGroup) => ReactNode;
     onPopupMenu?: (event: MouseEvent<HTMLDivElement>, item: ListBoxItem, group: ListBoxGroup) => void;
     emptyText?: string;
     onItemCheckChange?: (item: ListBoxItem, group: ListBoxGroup, checked: boolean) => void;
@@ -27,7 +29,7 @@ export type ListBoxProps = Omit<HTMLAttributes<HTMLDivElement>, "onDrop" | "onSe
     uncheckedShape?: "box" | "none";
     onItemSelect?: (item: ListBoxItem, group: ListBoxGroup) => void;
     /** Receives a shared drag item. Return false to reject it. */
-    onDrop?: (item: NuDragDropItem, context: NuDragDropContext) => boolean | void;
+    onDrop?: (item: NuDragDropItem, context: NuDragDropContext) => boolean | NuDropResult | void;
 };
-declare function ListBoxInner({ acceptsDrop, className, data, checkedIds, emptyText, getDragItem, onPopupMenu, onItemCheckChange, onItemDoubleClick, onItemDragOut, onItemSelect, onDrop, rightCheckBox, selectedId, uncheckedShape, ...props }: ListBoxProps, ref: ForwardedRef<ListBoxHandle>): import("react/jsx-runtime").JSX.Element;
+declare function ListBoxInner({ acceptsDrop, className, data, checkedIds, emptyText, getDragItem, onPopupMenu, onItemCheckChange, onItemDoubleClick, onItemDragOut, onItemSelect, onDrop, renderDragPreview, rightCheckBox, selectedId, uncheckedShape, ...props }: ListBoxProps, ref: ForwardedRef<ListBoxHandle>): import("react/jsx-runtime").JSX.Element;
 export declare const ListBox: (props: ListBoxProps & RefAttributes<ListBoxHandle>) => ReturnType<typeof ListBoxInner>;

package/dist/components/ListBox/internals/ListBoxGroupView.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+import { MouseEvent, ReactNode } from "react";
 import { ListBoxGroup, ListBoxItem } from "./types";
 import { NuDragDropItem } from "../../DragDrop";
 type ListBoxGroupViewProps = {
@@ -10,6 +10,7 @@ type ListBoxGroupViewProps = {
     onActivateItem: (item: ListBoxItem, group: ListBoxGroup, itemId: string) => void;
     onDoubleClickItem?: (item: ListBoxItem, group: ListBoxGroup) => void;
     onItemDragOut?: (item: ListBoxItem, group: ListBoxGroup) => void;
+    renderDragPreview?: (item: ListBoxItem, group: ListBoxGroup) => ReactNode;
     onPopupMenuItem?: (event: MouseEvent<HTMLDivElement>, item: ListBoxItem, group: ListBoxGroup, itemId: string) => void;
     onToggleItemCheck: (itemId: string) => void;
     registerItemRef: (itemId: string, node: HTMLDivElement | null) => void;
@@ -18,5 +19,5 @@ type ListBoxGroupViewProps = {
     selectedId?: string;
     uncheckedShape: "box" | "none";
 };
-export declare function ListBoxGroupView({ group, groupIndex, getDragItem, isItemChecked, listboxId, onActivateItem, onDoubleClickItem, onItemDragOut, onPopupMenuItem, onToggleItemCheck, registerItemRef, resolvedActiveId, rightCheckBox, selectedId, uncheckedShape }: ListBoxGroupViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListBoxGroupView({ group, groupIndex, getDragItem, isItemChecked, listboxId, onActivateItem, onDoubleClickItem, onItemDragOut, renderDragPreview, onPopupMenuItem, onToggleItemCheck, registerItemRef, resolvedActiveId, rightCheckBox, selectedId, uncheckedShape }: ListBoxGroupViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ListBox/internals/ListBoxItemView.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+import { MouseEvent, ReactNode } from "react";
 import { NuDragDropItem } from "../../DragDrop";
 import { ListBoxGroup, ListBoxItem } from "./types";
 type ListBoxItemViewProps = {
@@ -14,10 +14,11 @@ type ListBoxItemViewProps = {
     onDragOut?: (item: ListBoxItem, group: ListBoxGroup) => void;
     onPopupMenu?: (event: MouseEvent<HTMLDivElement>, item: ListBoxItem, group: ListBoxGroup, itemId: string) => void;
     onToggleCheck: (itemId: string) => void;
+    renderDragPreview?: (item: ListBoxItem, group: ListBoxGroup) => ReactNode;
     registerItemRef: (itemId: string, node: HTMLDivElement | null) => void;
     rightCheckBox: boolean;
     uncheckedShape: "box" | "none";
 };
-declare function ListBoxItemViewInner({ group, getDragItem, isActive, isChecked, isSelected, item, itemId, onActivate, onPopupMenu, onDoubleClick, onDragOut, onToggleCheck, registerItemRef, rightCheckBox, uncheckedShape }: ListBoxItemViewProps): import("react/jsx-runtime").JSX.Element;
+declare function ListBoxItemViewInner({ group, getDragItem, isActive, isChecked, isSelected, item, itemId, onActivate, onPopupMenu, onDoubleClick, onDragOut, onToggleCheck, renderDragPreview, registerItemRef, rightCheckBox, uncheckedShape }: ListBoxItemViewProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListBoxItemView: import("react").MemoExoticComponent<typeof ListBoxItemViewInner>;
 export {};

package/dist/components/ListView/ListView.d.ts

@@ -1,5 +1,6 @@
-import { ForwardedRef, HTMLAttributes, RefAttributes } from "react";
+import { ForwardedRef, HTMLAttributes, ReactNode, RefAttributes } from "react";
 import { ListViewColumn, ListViewRowBase } from "./internals/types";
+import { NuDragDropContext, NuDragDropItem, NuDropResult } from "../DragDrop";
 export type { ListViewColumn, ListViewRowBase } from "./internals/types";
 export type ListViewHandle = {
     activateRow: (rowId: string) => void;
@@ -9,19 +10,29 @@ export type ListViewHandle = {
     toggleRowCheck: (rowId: string) => void;
 };
 export type ListViewProps<T extends ListViewRowBase> = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    /** Decides whether this list can receive a shared drag item. */
+    acceptsDrop?: (item: NuDragDropItem) => boolean;
     activeRowId?: string;
     checkedIds?: string[];
     columns: ListViewColumn<T>[];
     data: T[];
     defaultActiveRowId?: string;
     emptyText?: string;
+    /** Returns the shared drag item for a row, or false to keep it static. */
+    getDragItem?: (row: T) => NuDragDropItem | false;
     onActiveRowChange?: (row: T) => void;
     onRowCheckChange?: (row: T, checked: boolean) => void;
     onRowDoubleClick?: (row: T) => void;
+    /** Called after this list row was accepted by a different shared drop target. */
+    onRowDragOut?: (row: T) => void;
     onRowSelect?: (row: T) => void;
+    /** Receives a shared drag item. Return false to reject it. */
+    onDrop?: (item: NuDragDropItem, context: NuDragDropContext) => boolean | NuDropResult | void;
+    /** Renders a compact preview for a row dragged from this list. */
+    renderDragPreview?: (row: T) => ReactNode;
     selectedId?: string;
     showCheckBox?: boolean;
     uncheckedShape?: "box" | "none";
 };
-declare function ListViewInner<T extends ListViewRowBase>({ activeRowId: activeRowIdProp, checkedIds, className, columns, data, defaultActiveRowId, emptyText, onActiveRowChange, onRowCheckChange, onRowDoubleClick, onRowSelect, selectedId, showCheckBox, uncheckedShape, ...props }: ListViewProps<T>, ref: ForwardedRef<ListViewHandle>): import("react/jsx-runtime").JSX.Element;
+declare function ListViewInner<T extends ListViewRowBase>({ acceptsDrop, activeRowId: activeRowIdProp, checkedIds, className, columns, data, defaultActiveRowId, emptyText, getDragItem, onActiveRowChange, onRowCheckChange, onRowDoubleClick, onRowDragOut, onRowSelect, onDrop, renderDragPreview, selectedId, showCheckBox, uncheckedShape, ...props }: ListViewProps<T>, ref: ForwardedRef<ListViewHandle>): import("react/jsx-runtime").JSX.Element;
 export declare const ListView: <T extends ListViewRowBase>(props: ListViewProps<T> & RefAttributes<ListViewHandle>) => ReturnType<typeof ListViewInner>;

package/dist/components/ListView/internals/ListViewRow.d.ts

@@ -1,18 +1,23 @@
+import { ReactNode } from "react";
+import { NuDragDropItem } from "../../DragDrop";
 import { ListViewColumn, ListViewRowBase } from "./types";
 type ListViewRowProps<T extends ListViewRowBase> = {
     columns: ListViewColumn<T>[];
     isActive: boolean;
     isChecked: boolean;
     isSelected: boolean;
+    getDragItem?: (row: T) => NuDragDropItem | false;
     onActivate: (rowId: string) => void;
     onDoubleClick?: (row: T) => void;
+    onDragOut?: (row: T) => void;
     onToggleCheck: (rowId: string) => void;
     registerRowRef: (rowId: string, node: HTMLDivElement | null) => void;
+    renderDragPreview?: (row: T) => ReactNode;
     row: T;
     showCheckBox: boolean;
     templateColumns: string;
     uncheckedShape: "box" | "none";
 };
-declare function ListViewRowInner<T extends ListViewRowBase>({ columns, isActive, isChecked, isSelected, onActivate, onDoubleClick, onToggleCheck, registerRowRef, row, showCheckBox, templateColumns, uncheckedShape }: ListViewRowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ListViewRowInner<T extends ListViewRowBase>({ columns, isActive, isChecked, isSelected, getDragItem, onActivate, onDoubleClick, onDragOut, onToggleCheck, registerRowRef, renderDragPreview, row, showCheckBox, templateColumns, uncheckedShape }: ListViewRowProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare const ListViewRow: typeof ListViewRowInner;
 export {};

package/dist/components/TreeListView/TreeListView.d.ts

@@ -1,6 +1,6 @@
-import { ForwardedRef, HTMLAttributes, MouseEvent, RefAttributes } from "react";
+import { ForwardedRef, HTMLAttributes, MouseEvent, ReactNode, RefAttributes } from "react";
 import { TreeListColumn, TreeListCellContext, TreeListGetCellContent, TreeListItemBase } from "./internals/types";
-import { NuDragDropContext, NuDragDropItem } from "../DragDrop";
+import { NuDragDropContext, NuDragDropItem, NuDropResult } from "../DragDrop";
 export type { TreeListCellContext, TreeListColumn, TreeListGetCellContent, TreeListItemBase } from "./internals/types";
 export type TreeListViewHandle = {
     activateItem: (itemId: string) => void;
@@ -16,6 +16,8 @@ export type TreeListViewProps<T extends TreeListItemBase<T>> = Omit<HTMLAttribut
     acceptsDrop?: (item: NuDragDropItem) => boolean;
     activeItemId?: string;
     checkedIds?: string[];
+    /** Persists user-resized column widths in `localStorage` under `reactnu.<key>`. */
+    columnStoreKey?: string;
     onPopupMenu?: (event: MouseEvent<HTMLDivElement>, item: T, context: TreeListCellContext<T>) => void;
     columns: TreeListColumn<T>[];
     data: T[];
@@ -33,11 +35,13 @@ export type TreeListViewProps<T extends TreeListItemBase<T>> = Omit<HTMLAttribut
     onItemDoubleClick?: (item: T) => void;
     /** Called after this tree row was accepted by a different shared drop target. */
     onItemDragOut?: (item: T, context: TreeListCellContext<T>) => void;
+    /** Renders a compact preview for an item dragged from this tree. */
+    renderDragPreview?: (item: T, context: TreeListCellContext<T>) => ReactNode;
     onItemSelect?: (item: T) => void;
     /** Receives a shared drag item. Return false to reject it. */
-    onDrop?: (item: NuDragDropItem, context: NuDragDropContext) => boolean | void;
+    onDrop?: (item: NuDragDropItem, context: NuDragDropContext) => boolean | NuDropResult | void;
     selectedId?: string;
     uncheckedShape?: "box" | "none";
 };
-declare function TreeListViewInner<T extends TreeListItemBase<T>>({ acceptsDrop, activeItemId: activeItemIdProp, checkedIds, className, columns, onPopupMenu, data, dataVersion, defaultActiveItemId, defaultExpandedIds, emptyText, expandedIds, getDragItem, getCellContent, onActiveItemChange, onExpandedIdsChange, onItemCheckChange, onItemDoubleClick, onItemDragOut, onItemSelect, onDrop, selectedId, uncheckedShape, ...props }: TreeListViewProps<T>, ref: ForwardedRef<TreeListViewHandle>): import("react/jsx-runtime").JSX.Element;
+declare function TreeListViewInner<T extends TreeListItemBase<T>>({ acceptsDrop, activeItemId: activeItemIdProp, checkedIds, className, columnStoreKey, columns, onPopupMenu, data, dataVersion, defaultActiveItemId, defaultExpandedIds, emptyText, expandedIds, getDragItem, getCellContent, onActiveItemChange, onExpandedIdsChange, onItemCheckChange, onItemDoubleClick, onItemDragOut, renderDragPreview, onItemSelect, onDrop, selectedId, uncheckedShape, ...props }: TreeListViewProps<T>, ref: ForwardedRef<TreeListViewHandle>): import("react/jsx-runtime").JSX.Element;
 export declare const TreeListView: <T extends TreeListItemBase<T>>(props: TreeListViewProps<T> & RefAttributes<TreeListViewHandle>) => ReturnType<typeof TreeListViewInner>;

package/dist/components/TreeListView/internals/TreeListViewRow.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+import { MouseEvent, ReactNode } from "react";
 import { NuDragDropItem } from "../../DragDrop";
 import { TreeListCellContext, TreeListColumn, TreeListGetCellContent, TreeListItemBase } from "./types";
 type TreeListViewRowProps<T extends TreeListItemBase<T>> = {
@@ -16,6 +16,7 @@ type TreeListViewRowProps<T extends TreeListItemBase<T>> = {
     onActivateItem: (item: T, itemId: string) => void;
     onDoubleClickItem?: (item: T) => void;
     onItemDragOut?: (item: T, context: TreeListCellContext<T>) => void;
+    renderDragPreview?: (item: T, context: TreeListCellContext<T>) => ReactNode;
     onPopupMenuItem?: (event: MouseEvent<HTMLDivElement>, item: T, context: TreeListCellContext<T>) => void;
     onToggleItemCheck?: (item: T, checked: boolean) => void;
     onToggleItemExpanded: (item: T, expanded: boolean) => void;
@@ -28,6 +29,6 @@ type TreeListViewRowProps<T extends TreeListItemBase<T>> = {
     treeId: string;
     uncheckedShape: "box" | "none";
 };
-declare function TreeListViewRowInner<T extends TreeListItemBase<T>>({ activeItemId, checkedIds, columns, depth, expandedIdSet, getCellContent, getDragItem, guideMask, guideOffsets, hasNextSibling, item, onActivateItem, onDoubleClickItem, onItemDragOut, onPopupMenuItem, onToggleItemCheck, onToggleItemExpanded, originOffset, registerItemRef, rowIndexMap, selectedItemId, templateColumns, treeColumnId, treeId, uncheckedShape }: TreeListViewRowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function TreeListViewRowInner<T extends TreeListItemBase<T>>({ activeItemId, checkedIds, columns, depth, expandedIdSet, getCellContent, getDragItem, guideMask, guideOffsets, hasNextSibling, item, onActivateItem, onDoubleClickItem, onItemDragOut, renderDragPreview, onPopupMenuItem, onToggleItemCheck, onToggleItemExpanded, originOffset, registerItemRef, rowIndexMap, selectedItemId, templateColumns, treeColumnId, treeId, uncheckedShape }: TreeListViewRowProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare const TreeListViewRow: typeof TreeListViewRowInner;
 export {};