@stll/ui 0.38.0 → 0.39.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.
@@ -27,11 +27,7 @@ export type KanbanSubgroupCellContext<TRow> = {
27
27
  /** Number of rows in this lane/column intersection, including zero. */
28
28
  count: number;
29
29
  laneValue: string | null;
30
- /**
31
- * The band this cell's column belongs to, or `null` outside any band. Lets
32
- * a host that drives its own drag-and-drop (see `dragOverBandId` on the
33
- * board) map a cell's droppable id back to the band it should report.
34
- */
30
+ /** The band this cell's column belongs to, or `null` outside any band. */
35
31
  band: KanbanColumnBand | null;
36
32
  };
37
33
  export type KanbanSubgroupBandHeaderContext = {
@@ -114,27 +110,6 @@ export type KanbanSubgroupBoardProps<TRow> = {
114
110
  formatCount?: ((count: number) => ReactNode) | undefined;
115
111
  footer?: ReactNode;
116
112
  className?: string | undefined;
117
- /**
118
- * The band whose folded slot (or, for a peeked band, whose open part) the
119
- * host's own drag is currently over, or `null` when it is over neither.
120
- * Omit (`undefined`) when the host does not drive drags itself — the
121
- * board's native `dragover`/`dragenter`/`dragleave` listeners already feed
122
- * the peek controller in that case. A host drives its own drag when it
123
- * builds the drop targets itself (for example a `KanbanSortableBoard`,
124
- * whose `onDragOver` reports the active `over` droppable); it maps that
125
- * droppable back to a band id — a folded cell's context and an open
126
- * cell's context (see `KanbanSubgroupCellContext.band`) both carry the
127
- * band — and passes it here. The controller treats "over the band" as
128
- * entering the open band when it is already peeked, and as hovering its
129
- * folded slot otherwise; leaving it is reported the same way.
130
- */
131
- dragOverBandId?: string | null | undefined;
132
- /**
133
- * Whether the host's own drag (see `dragOverBandId`) is in progress.
134
- * Flipping to `false` ends any peek immediately, mirroring the native
135
- * `dragend`/`drop` listeners the board installs for its own drags.
136
- */
137
- isDragging?: boolean | undefined;
138
113
  } & KanbanSubgroupCollapseControl;
139
114
  /**
140
115
  * Reusable swimlane layout over the canonical two-axis Kanban matrix.
@@ -153,5 +128,5 @@ export type KanbanSubgroupBoardProps<TRow> = {
153
128
  * in every state; the caption line never grows past its own height, so a
154
129
  * folded band costs no vertical space.
155
130
  */
156
- export declare const KanbanSubgroupBoard: <TRow>({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
131
+ export declare const KanbanSubgroupBoard: <TRow>({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
157
132
  //#endregion
@@ -42,7 +42,7 @@ const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0)
42
42
  * in every state; the caption line never grows past its own height, so a
43
43
  * folded band costs no vertical space.
44
44
  */
45
- const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
45
+ const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
46
46
  const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
47
47
  const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
48
48
  const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
@@ -69,30 +69,6 @@ const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLane
69
69
  window.removeEventListener("drop", end);
70
70
  };
71
71
  }, [peek]);
72
- const previousDragOverBandId = useRef(null);
73
- useEffect(() => {
74
- if (dragOverBandId === void 0 || dragOverBandId === previousDragOverBandId.current) return;
75
- const previous = previousDragOverBandId.current;
76
- previousDragOverBandId.current = dragOverBandId;
77
- if (previous !== null) {
78
- if (peekingBandId === previous) peek.openDragLeave(previous);
79
- else peek.slotDragLeave(previous);
80
- }
81
- if (dragOverBandId !== null) {
82
- if (peekingBandId === dragOverBandId) peek.openDragEnter(dragOverBandId);
83
- else peek.slotDragOver(dragOverBandId);
84
- }
85
- }, [
86
- dragOverBandId,
87
- peek,
88
- peekingBandId
89
- ]);
90
- useEffect(() => {
91
- if (isDragging === false) {
92
- previousDragOverBandId.current = null;
93
- peek.dragEnded();
94
- }
95
- }, [isDragging, peek]);
96
72
  const { cellsByLaneValue, countByColumnValue, ungroupedCells } = useMemo(() => {
97
73
  const laneCells = /* @__PURE__ */ new Map();
98
74
  const columnCounts = /* @__PURE__ */ new Map();
@@ -1,8 +1,5 @@
1
1
  import { OptionColor } from "../lib/option-color.js";
2
- import { UseKanbanDropTargetOptions } from "./sortable-interactions.js";
3
2
  import { Key, ReactNode, RefObject } from "react";
4
- import { UniqueIdentifier } from "@dnd-kit/core";
5
- import { SortableContextProps, SortingStrategy } from "@dnd-kit/sortable";
6
3
  //#region src/kanban/virtual-cell.d.ts
7
4
  export declare const KANBAN_VIRTUAL_CELL_PAGINATION: {
8
5
  readonly NONE: "none";
@@ -17,25 +14,11 @@ export type KanbanVirtualCellPagination = {
17
14
  pageKey: string | number;
18
15
  onRequestMore: () => void;
19
16
  };
20
- /**
21
- * Makes a virtual cell the canonical sortable context for its rendered rows.
22
- *
23
- * `getRowKey` remains responsible for React and virtualizer identity. A
24
- * separate sortable identifier avoids narrowing an existing React key contract
25
- * merely to support dnd-kit consumers.
26
- */
27
- export type KanbanVirtualCellSortableContext<TRow> = {
28
- dropTarget: Omit<UseKanbanDropTargetOptions, "itemIds" | "navigation">;
29
- getRowId: (row: TRow) => UniqueIdentifier;
30
- disabled?: SortableContextProps["disabled"] | undefined;
31
- strategy?: SortingStrategy | undefined;
32
- };
33
17
  export type KanbanVirtualCellProps<TRow> = {
34
18
  rows: readonly TRow[];
35
19
  getRowKey: (row: TRow) => Key;
36
20
  renderRow: (row: TRow) => ReactNode;
37
21
  pagination: KanbanVirtualCellPagination;
38
- sortable?: KanbanVirtualCellSortableContext<TRow> | undefined;
39
22
  containerRef?: RefObject<HTMLDivElement | null> | undefined;
40
23
  active?: boolean | undefined;
41
24
  backgroundColor?: string | undefined;
@@ -71,5 +54,5 @@ export type KanbanVirtualCellProps<TRow> = {
71
54
  className?: string | undefined;
72
55
  };
73
56
  /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
74
- export declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, accent, footer, footerPlacement, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
57
+ export declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, containerRef, active, backgroundColor, accent, footer, footerPlacement, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
75
58
  //#endregion
@@ -1,12 +1,9 @@
1
1
  import { cn } from "../lib/utils.js";
2
2
  import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_CLASS, resolveKanbanCardStickyTop } from "./sticky-lane.js";
3
- import { useKanbanDropTarget } from "./sortable-interactions.js";
4
3
  import { resolveOptionColor } from "../lib/option-color.js";
5
4
  import { jsx, jsxs } from "react/jsx-runtime";
6
- import { useId, useLayoutEffect, useRef, useState } from "react";
7
- import { useDndContext } from "@dnd-kit/core";
8
- import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
9
- import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
5
+ import { useLayoutEffect, useRef, useState } from "react";
6
+ import { useVirtualizer } from "@tanstack/react-virtual";
10
7
  //#region src/kanban/virtual-cell.tsx
11
8
  const DEFAULT_ESTIMATE_SIZE_PX = 128;
12
9
  const DEFAULT_OVERSCAN = 8;
@@ -29,26 +26,15 @@ const KANBAN_CELL_SURFACE_CLASS = "bg-muted/20";
29
26
  /** A caller's own surface (an explicit colour, or the accent wash), published
30
27
  * so a pinned action can repaint that one instead. */
31
28
  const KANBAN_CELL_SURFACE_VAR = "--kanban-cell-surface";
32
- const retainActiveSortableIndex = (range, activeIndex) => {
33
- const indexes = defaultRangeExtractor(range);
34
- if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
35
- indexes.push(activeIndex);
36
- indexes.sort((left, right) => left - right);
37
- return indexes;
38
- };
39
29
  const KANBAN_VIRTUAL_CELL_PAGINATION = {
40
30
  NONE: "none",
41
31
  CURSOR: "cursor"
42
32
  };
43
33
  /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
44
- const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, accent, footer, footerPlacement = "end", estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
34
+ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, containerRef, active = false, backgroundColor, accent, footer, footerPlacement = "end", estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
45
35
  const internalRef = useRef(null);
46
- const fallbackDropTargetId = useId();
47
36
  const scrollRef = internalRef;
48
37
  const requestedPageKeyRef = useRef(null);
49
- const itemIds = sortable ? rows.map(sortable.getRowId) : [];
50
- const { active: activeDrag } = useDndContext();
51
- const activeSortableIndex = activeDrag === null ? -1 : itemIds.indexOf(activeDrag.id);
52
38
  const virtualizer = useVirtualizer({
53
39
  count: rows.length,
54
40
  estimateSize: () => estimateSize,
@@ -57,25 +43,7 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
57
43
  return row === void 0 ? index : getRowKey(row);
58
44
  },
59
45
  getScrollElement: () => scrollRef.current,
60
- overscan,
61
- rangeExtractor: (range) => retainActiveSortableIndex(range, activeSortableIndex)
62
- });
63
- const requestScroll = ({ itemId }) => {
64
- const index = itemIds.indexOf(itemId);
65
- if (index !== -1) virtualizer.scrollToIndex(index, { align: "auto" });
66
- };
67
- const dropTarget = useKanbanDropTarget({
68
- disabled: sortable?.dropTarget.disabled ?? sortable === void 0,
69
- id: sortable?.dropTarget.id ?? fallbackDropTargetId,
70
- itemIds,
71
- navigation: sortable === void 0 ? { type: "static" } : {
72
- requestScroll,
73
- type: "virtual"
74
- },
75
- position: sortable?.dropTarget.position ?? {
76
- column: -1,
77
- lane: -1
78
- }
46
+ overscan
79
47
  });
80
48
  const handleScroll = ({ currentTarget }) => {
81
49
  if (pagination.type !== "cursor" || !pagination.hasMore || pagination.loading) return;
@@ -87,7 +55,6 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
87
55
  const setScrollElement = (element) => {
88
56
  internalRef.current = element;
89
57
  if (containerRef) containerRef.current = element;
90
- dropTarget.setNodeRef(element);
91
58
  };
92
59
  const accentVariants = accent === void 0 ? void 0 : resolveOptionColor(accent);
93
60
  const accentBackground = accentVariants === void 0 ? void 0 : `color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${active ? KANBAN_CELL_ACCENT_ACTIVE_ALPHA : KANBAN_CELL_ACCENT_RESTING_ALPHA}%, var(--background))`;
@@ -127,9 +94,8 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
127
94
  children: footer
128
95
  })
129
96
  }) : null;
130
- const content = /* @__PURE__ */ jsxs("div", {
97
+ return /* @__PURE__ */ jsxs("div", {
131
98
  className: cn(KANBAN_CELL_SURFACE_CLASS, "min-h-20 rounded-xl p-2", rows.length === 0 ? "overflow-visible" : "max-h-[min(60vh,40rem)] overflow-y-auto overscroll-y-contain", active && accentVariants === void 0 && "bg-primary/5 ring-primary/50 ring-2", className),
132
- "data-kanban-cell": sortable?.dropTarget.id,
133
99
  "data-kanban-cell-accent": accentVariants === void 0 ? void 0 : "true",
134
100
  onScroll: handleScroll,
135
101
  ref: setScrollElement,
@@ -161,14 +127,6 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
161
127
  footerPlacement === "end" ? footer : null
162
128
  ]
163
129
  });
164
- if (sortable === void 0) return content;
165
- return /* @__PURE__ */ jsx(SortableContext, {
166
- ...sortable.disabled === void 0 ? {} : { disabled: sortable.disabled },
167
- id: sortable.dropTarget.id,
168
- items: itemIds,
169
- strategy: sortable.strategy ?? verticalListSortingStrategy,
170
- children: content
171
- });
172
130
  };
173
131
  //#endregion
174
132
  export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell };
@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
5
5
  readonly lg: "lg";
6
6
  }>;
7
7
  type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
8
- declare const CONTROL_SIZES: readonly ("default" | "sm" | "lg")[];
8
+ declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
9
9
  //#endregion
10
10
  export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stll/ui",
3
- "version": "0.38.0",
3
+ "version": "0.39.0",
4
4
  "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
5
5
  "keywords": [
6
6
  "base-ui",
@@ -105,6 +105,10 @@
105
105
  "types": "./dist/lib/control-size.d.ts",
106
106
  "import": "./dist/lib/control-size.js"
107
107
  },
108
+ "./copy-button": {
109
+ "types": "./dist/components/copy-button.d.ts",
110
+ "import": "./dist/components/copy-button.js"
111
+ },
108
112
  "./calendar": {
109
113
  "types": "./dist/calendar/index.d.ts",
110
114
  "import": "./dist/calendar/index.js"
@@ -645,8 +649,6 @@
645
649
  "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
646
650
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
647
651
  "@base-ui/react": "1.8.0",
648
- "@dnd-kit/core": "^6.3.1",
649
- "@dnd-kit/sortable": "^10.0.0",
650
652
  "@playwright/test": "^1.63.0",
651
653
  "@stll/typescript-config": "0.0.0",
652
654
  "@tailwindcss/vite": "4.3.3",
@@ -664,8 +666,6 @@
664
666
  "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
665
667
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
666
668
  "@base-ui/react": "^1.7.0",
667
- "@dnd-kit/core": "^6.3.1",
668
- "@dnd-kit/sortable": "^10.0.0",
669
669
  "@tanstack/react-virtual": "^3.14.13",
670
670
  "react": ">=19",
671
671
  "react-dom": ">=19",
@@ -1,38 +0,0 @@
1
- import { ClientRect } from "@dnd-kit/core";
2
- //#region src/kanban/sortable-edge.d.ts
3
- export declare const KANBAN_HORIZONTAL_EDGES: {
4
- readonly before: "before";
5
- readonly after: "after";
6
- };
7
- export type KanbanHorizontalEdge = (typeof KANBAN_HORIZONTAL_EDGES)[keyof typeof KANBAN_HORIZONTAL_EDGES];
8
- export declare const KANBAN_DIRECTIONS: {
9
- readonly ltr: "ltr";
10
- readonly rtl: "rtl";
11
- };
12
- export type KanbanDirection = (typeof KANBAN_DIRECTIONS)[keyof typeof KANBAN_DIRECTIONS];
13
- type KanbanPointerHorizontalEdgeOptions = {
14
- input: "pointer";
15
- /** The drag's current viewport x coordinate for mouse or touch input. */
16
- currentClientX: number;
17
- overRect: ClientRect;
18
- /** Maps physical mouse and touch positions to the board's logical order. */
19
- direction?: KanbanDirection | undefined;
20
- };
21
- type KanbanKeyboardHorizontalEdgeOptions = {
22
- input: "keyboard";
23
- /** The source item's position in logical board order. */
24
- sourceIndex: number;
25
- /** The target item's position in logical board order. */
26
- targetIndex: number;
27
- };
28
- export type KanbanHorizontalEdgeOptions = KanbanPointerHorizontalEdgeOptions | KanbanKeyboardHorizontalEdgeOptions;
29
- /**
30
- * Resolves a horizontal insertion edge without consulting application data.
31
- *
32
- * Mouse and touch callers pass their current viewport coordinate. Keyboard
33
- * callers pass source and target indices, making every logical move
34
- * unambiguous. This deliberately avoids drag deltas, which include scroll
35
- * reconciliation and are not viewport coordinates.
36
- */
37
- export declare const getKanbanHorizontalEdge: ({ ...options }: KanbanHorizontalEdgeOptions) => KanbanHorizontalEdge;
38
- //#endregion
@@ -1,27 +0,0 @@
1
- //#region src/kanban/sortable-edge.ts
2
- const KANBAN_HORIZONTAL_EDGES = {
3
- before: "before",
4
- after: "after"
5
- };
6
- const KANBAN_DIRECTIONS = {
7
- ltr: "ltr",
8
- rtl: "rtl"
9
- };
10
- /**
11
- * Resolves a horizontal insertion edge without consulting application data.
12
- *
13
- * Mouse and touch callers pass their current viewport coordinate. Keyboard
14
- * callers pass source and target indices, making every logical move
15
- * unambiguous. This deliberately avoids drag deltas, which include scroll
16
- * reconciliation and are not viewport coordinates.
17
- */
18
- const getKanbanHorizontalEdge = ({ ...options }) => {
19
- if (options.input === "keyboard") return options.sourceIndex < options.targetIndex ? KANBAN_HORIZONTAL_EDGES.after : KANBAN_HORIZONTAL_EDGES.before;
20
- const { currentClientX, direction = KANBAN_DIRECTIONS.ltr, overRect } = options;
21
- const physicalEdge = currentClientX < getRectCenterX(overRect) ? KANBAN_HORIZONTAL_EDGES.before : KANBAN_HORIZONTAL_EDGES.after;
22
- if (direction === KANBAN_DIRECTIONS.rtl) return physicalEdge === KANBAN_HORIZONTAL_EDGES.before ? KANBAN_HORIZONTAL_EDGES.after : KANBAN_HORIZONTAL_EDGES.before;
23
- return physicalEdge;
24
- };
25
- const getRectCenterX = ({ left, width }) => left + width / 2;
26
- //#endregion
27
- export { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge };
@@ -1,151 +0,0 @@
1
- import { Button } from "../components/button.js";
2
- import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
3
- import * as React$1 from "react";
4
- import { AutoScrollActivator, AutoScrollOptions, CollisionDetection, DndContextProps, DragCancelEvent, DragEndEvent, DragOverEvent, DragOverlayProps, DragStartEvent, KeyboardCoordinateGetter, UniqueIdentifier } from "@dnd-kit/core";
5
- import { SortableContextProps, useSortable } from "@dnd-kit/sortable";
6
- //#region src/kanban/sortable-interactions.d.ts
7
- export declare const KANBAN_MOUSE_ACTIVATION_DISTANCE = 8;
8
- /** Above sticky board chrome, below app-level floating surfaces. */
9
- export declare const KANBAN_DRAG_OVERLAY_Z_INDEX = 75;
10
- export declare const KANBAN_BOARD_AUTO_SCROLL_OPTIONS: {
11
- readonly acceleration: 10;
12
- readonly activator: AutoScrollActivator.Pointer;
13
- readonly threshold: {
14
- readonly x: 0.15;
15
- readonly y: 0.15;
16
- };
17
- };
18
- export declare const KANBAN_SORTABLE_ACTIVATION_MODES: {
19
- readonly CARD: "card";
20
- readonly HANDLE: "handle";
21
- readonly ITEM: "item";
22
- };
23
- export declare const KANBAN_TOUCH_ACTIVATION_CONSTRAINT: {
24
- readonly delay: 150;
25
- readonly tolerance: 8;
26
- };
27
- export type KanbanDragCancelEvent = DragCancelEvent;
28
- export type KanbanDragEndEvent = DragEndEvent;
29
- export type KanbanDragOverEvent = DragOverEvent;
30
- export type KanbanDragStartEvent = DragStartEvent;
31
- export type KanbanSortableBoardProps = {
32
- children: React$1.ReactNode;
33
- onDragEnd: (event: KanbanDragEndEvent) => void;
34
- /** Minimum pointer movement before a mouse drag activates. */
35
- mouseActivationDistance?: number | undefined;
36
- collisionDetection?: CollisionDetection | undefined;
37
- keyboardCoordinates?: KeyboardCoordinateGetter | undefined;
38
- autoScroll?: boolean | AutoScrollOptions | undefined;
39
- /** Replaces the default mouse, touch, and keyboard sensors when supplied. */
40
- sensors?: DndContextProps["sensors"] | undefined;
41
- /** Overrides dnd-kit's screen-reader announcements when supplied. */
42
- accessibility?: DndContextProps["accessibility"] | undefined;
43
- /**
44
- * Fires on drag start and on every drag end or cancel; a board over a
45
- * `KanbanSubgroupBoard` combines the two into that board's `isDragging`
46
- * (`true` here, `false` on `onDragEnd`/`onDragCancel`).
47
- */
48
- onDragStart?: ((event: KanbanDragStartEvent) => void) | undefined;
49
- /**
50
- * Fires whenever dnd-kit's collision detection changes the drop target
51
- * the drag is over, `event.over` included when it becomes none. A board
52
- * over a `KanbanSubgroupBoard` maps `event.over?.id ?? null` to a band id
53
- * (via `KanbanSubgroupCellContext.band`, or a droppable registered for a
54
- * folded band's slot) to drive that board's `dragOverBandId`.
55
- */
56
- onDragOver?: ((event: KanbanDragOverEvent) => void) | undefined;
57
- onDragCancel?: ((event: KanbanDragCancelEvent) => void) | undefined;
58
- /** Called once mounted child drop targets can safely receive input. */
59
- onInteractionReady?: (() => void) | undefined;
60
- /** Rendered in document.body while an item is active. */
61
- overlay?: ((activeId: UniqueIdentifier | null) => React$1.ReactNode) | undefined;
62
- overlayProps?: Omit<DragOverlayProps, "children"> | undefined;
63
- };
64
- export type UseKanbanDropTargetOptions = {
65
- disabled?: boolean | undefined;
66
- id: string;
67
- itemIds: readonly UniqueIdentifier[];
68
- navigation: KanbanCellVirtualNavigation;
69
- position: KanbanSortableCellPosition;
70
- };
71
- /**
72
- * Register a board-level drop target such as an empty cell or terminal lane.
73
- *
74
- * Board consumers should not need to couple their presentation code to the
75
- * underlying drag-and-drop library just to receive an item from a sortable
76
- * context.
77
- */
78
- export declare const useKanbanDropTarget: ({ disabled, id, itemIds, navigation, position }: UseKanbanDropTargetOptions) => {
79
- isOver: boolean;
80
- setNodeRef: (element: HTMLElement | null) => void;
81
- };
82
- /**
83
- * Input-complete drag context for sortable boards.
84
- *
85
- * The consumer owns identifiers and the result of a drop; this component owns
86
- * the sensor activation rules, keyboard navigation, auto-scroll configuration,
87
- * and overlay lifecycle shared by sortable board UIs.
88
- */
89
- export declare const KanbanSortableBoard: ({ children, onDragEnd, mouseActivationDistance, collisionDetection, keyboardCoordinates, autoScroll, sensors, accessibility, onDragStart, onDragOver, onDragCancel, onInteractionReady, overlay, overlayProps }: KanbanSortableBoardProps) => React$1.JSX.Element;
90
- export declare const useKanbanSortableSensors: (keyboardCoordinates?: KeyboardCoordinateGetter, mouseActivationDistance?: number) => import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
91
- export type KanbanSortableListProps = SortableContextProps & React$1.ComponentProps<"div">;
92
- /** A vertical card list that preserves native vertical touch scrolling. */
93
- export declare const KanbanSortableList: ({ className, children, id, items, strategy, disabled, ...props }: KanbanSortableListProps) => React$1.JSX.Element;
94
- export type KanbanSortableColumnsProps = SortableContextProps & React$1.ComponentProps<"div">;
95
- /** A horizontal column list that keeps the board pan gesture available. */
96
- export declare const KanbanSortableColumns: ({ className, children, id, items, strategy, disabled, ...props }: KanbanSortableColumnsProps) => React$1.JSX.Element;
97
- export type KanbanSortableBindings = Pick<ReturnType<typeof useSortable>, "attributes" | "listeners" | "setActivatorNodeRef">;
98
- export type KanbanSortableActivationMode = {
99
- type: "card";
100
- } | {
101
- type: "handle";
102
- } | {
103
- type: "item";
104
- };
105
- export type UseKanbanSortableOptions = {
106
- activation: KanbanSortableActivationMode;
107
- id: UniqueIdentifier;
108
- disabled?: boolean | undefined;
109
- };
110
- type KanbanSortableActivator = {
111
- bindings: KanbanSortableBindings;
112
- type: typeof KANBAN_SORTABLE_ACTIVATION_MODES.HANDLE;
113
- } | {
114
- bindings: KanbanSortableBindings;
115
- type: typeof KANBAN_SORTABLE_ACTIVATION_MODES.CARD;
116
- } | {
117
- attributes: ReturnType<typeof useSortable>["attributes"];
118
- listeners: ReturnType<typeof useSortable>["listeners"];
119
- type: typeof KANBAN_SORTABLE_ACTIVATION_MODES.ITEM;
120
- };
121
- /**
122
- * Connect a sortable item and its separate drag handle without making the
123
- * item's content a touch-none activation surface.
124
- */
125
- export declare const useKanbanSortable: ({ activation, id, disabled }: UseKanbanSortableOptions) => {
126
- activator: KanbanSortableActivator;
127
- isDragging: boolean;
128
- setNodeRef: (element: HTMLElement | null) => void;
129
- style: {
130
- touchAction: string | undefined;
131
- transform: string | undefined;
132
- transition: string | undefined;
133
- };
134
- };
135
- export type KanbanDragHandleProps = {
136
- bindings: KanbanSortableBindings;
137
- label: string;
138
- } & Omit<React$1.ComponentProps<typeof Button>, "aria-label" | "children" | "ref" | "tooltip" | "type">;
139
- /**
140
- * A 44px keyboard-accessible drag activator. The handle is the only board
141
- * surface that disables touch panning, leaving cards and scroll regions free
142
- * for ordinary scrolling.
143
- */
144
- export declare const KanbanDragHandle: ({ bindings, label, className, ...props }: KanbanDragHandleProps) => React$1.JSX.Element;
145
- export type KanbanCardDragSurfaceProps = {
146
- bindings: KanbanSortableBindings;
147
- } & Omit<React$1.ComponentProps<"div">, "ref">;
148
- /** A whole-card drag activator that preserves descendant controls and scrolling. */
149
- export declare const KanbanCardDragSurface: ({ bindings, className, ...props }: KanbanCardDragSurfaceProps) => React$1.JSX.Element;
150
- //#endregion
151
- export { KANBAN_BOARD_COLLISION_DETECTION, type KanbanCellVirtualNavigation, type KanbanSortableCellPosition, type KanbanVirtualScrollRequest, kanbanKeyboardCoordinates };