@snapgridjs/react 0.3.0 → 0.5.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/README.md +1 -1
- package/dist/index.cjs +63 -583
- package/dist/index.d.cts +14 -162
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +14 -162
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +58 -578
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -7
package/dist/index.d.cts
CHANGED
|
@@ -1,153 +1,9 @@
|
|
|
1
|
+
import { DragConfig, DragConfig as DragConfig$1, DragSourceInfo, DropConfig, DropConfig as DropConfig$1, GridController, GridDropData, GridEventCallback, GridEventCallback as GridEventCallback$1, RESIZE_HANDLE_ATTR, ResizeConfig, ResizeConfig as ResizeConfig$1 } from "@snapgridjs/dnd";
|
|
1
2
|
import { CSSProperties, ReactNode } from "react";
|
|
2
|
-
import {
|
|
3
|
-
import { DragDropManager, Feedback, KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
|
|
4
|
-
import { BreakpointCols, BreakpointCols as BreakpointCols$1, Breakpoints, Breakpoints as Breakpoints$1, CompactType, Compactor, Compactor as Compactor$1, DragSession, GridConfig, GridConfig as GridConfig$1, Layout, Layout as Layout$1, LayoutItem, LayoutItem as LayoutItem$1, PositionParams, PositionParams as PositionParams$1, ResizeHandleAxis, ResizeHandleAxis as ResizeHandleAxis$1, ResponsiveLayouts, ResponsiveLayouts as ResponsiveLayouts$1, getCompactor, horizontalCompactor, noCompactor, verticalCompactor } from "@snapgridjs/core";
|
|
3
|
+
import { BreakpointCols, BreakpointCols as BreakpointCols$1, Breakpoints, Breakpoints as Breakpoints$1, CompactType, Compactor, Compactor as Compactor$1, GridConfig, GridConfig as GridConfig$1, Layout, Layout as Layout$1, LayoutItem, LayoutItem as LayoutItem$1, PositionParams, ResizeHandleAxis, ResizeHandleAxis as ResizeHandleAxis$1, ResponsiveLayouts, ResponsiveLayouts as ResponsiveLayouts$1, getCompactor, horizontalCompactor, noCompactor, verticalCompactor } from "@snapgridjs/core";
|
|
5
4
|
import { DragOverlay, useDraggable, useDroppable } from "@dnd-kit/react";
|
|
5
|
+
import { Feedback, KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
|
|
6
6
|
|
|
7
|
-
//#region src/controller/GridController.d.ts
|
|
8
|
-
/**
|
|
9
|
-
* Per-grid configuration the container host writes to the controller each render
|
|
10
|
-
* (during render, so items that resolve this controller by `group` read fresh
|
|
11
|
-
* config on the same pass). Replaces the fields the old GridContext exposed.
|
|
12
|
-
*/
|
|
13
|
-
interface GridControllerConfig {
|
|
14
|
-
positionParams: PositionParams$1;
|
|
15
|
-
gridConfig: GridConfig$1;
|
|
16
|
-
width: number;
|
|
17
|
-
autoSize: boolean;
|
|
18
|
-
itemSensors: Sensors;
|
|
19
|
-
itemModifiers: Modifiers;
|
|
20
|
-
isItemDraggable: (id: string) => boolean;
|
|
21
|
-
isItemResizable: (id: string) => boolean;
|
|
22
|
-
resizeHandlesFor: (id: string) => readonly ResizeHandleAxis$1[];
|
|
23
|
-
/** Report the container element (used to map a pointer to a cell on receive). */
|
|
24
|
-
setContainerElement: (element: Element | null) => void;
|
|
25
|
-
}
|
|
26
|
-
interface ItemSnapshot {
|
|
27
|
-
item: LayoutItem$1 | undefined;
|
|
28
|
-
isDragging: boolean;
|
|
29
|
-
hidden: boolean;
|
|
30
|
-
}
|
|
31
|
-
interface ResizeSnapshot {
|
|
32
|
-
isResizing: boolean;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Live per-grid drag/resize state as a plain observable: the provider writes
|
|
36
|
-
* (`setSession`/`setKeyboard`/`setCommitted`), hooks subscribe to just their own
|
|
37
|
-
* slice via `useSyncExternalStore`. Value-cached snapshots mean a drag re-renders
|
|
38
|
-
* only the tiles whose slice changed, not the whole subtree (the old
|
|
39
|
-
* context-value model re-rendered every tile every frame).
|
|
40
|
-
*/
|
|
41
|
-
declare class GridController {
|
|
42
|
-
#private;
|
|
43
|
-
id: string;
|
|
44
|
-
config: GridControllerConfig | null;
|
|
45
|
-
/** The dnd-kit manager this grid is registered with (set by useInstance). */
|
|
46
|
-
manager: DragDropManager | undefined;
|
|
47
|
-
constructor(id: string, committed?: Layout$1, manager?: DragDropManager);
|
|
48
|
-
/** Replace the per-grid config (called by the container host during render). */
|
|
49
|
-
setConfig(config: GridControllerConfig): void;
|
|
50
|
-
/**
|
|
51
|
-
* Re-point this grid's id. The container host syncs it (during render, before
|
|
52
|
-
* the droppable/group read it) when the controlled `id` prop changes, so the
|
|
53
|
-
* returned `group`, the droppable id, and the registry key never drift apart.
|
|
54
|
-
*/
|
|
55
|
-
setId(id: string): void;
|
|
56
|
-
register: () => void;
|
|
57
|
-
subscribe: (listener: () => void) => (() => void);
|
|
58
|
-
/**
|
|
59
|
-
* Sync the committed layout from the controlled `layout` prop. Called during
|
|
60
|
-
* the provider's render, so it must NOT notify — emitting here would update
|
|
61
|
-
* subscribed GridItems mid-render (a React "setState while rendering" error).
|
|
62
|
-
* No notify is needed: a `layout` prop change already re-renders the whole
|
|
63
|
-
* provider subtree, so every GridItem re-reads its snapshot on that pass.
|
|
64
|
-
*/
|
|
65
|
-
setCommitted(layout: Layout$1): void;
|
|
66
|
-
setSession(next: DragSession | null): void;
|
|
67
|
-
getSession(): DragSession | null;
|
|
68
|
-
/** Record whether the active drag is keyboard-driven (drives `hidden`). */
|
|
69
|
-
setKeyboard(value: boolean): void;
|
|
70
|
-
itemSnapshot: (id: string) => ItemSnapshot;
|
|
71
|
-
placeholderSnapshot: () => LayoutItem$1 | null;
|
|
72
|
-
resizeSnapshot: (itemId: string) => ResizeSnapshot;
|
|
73
|
-
renderedSnapshot: () => Layout$1;
|
|
74
|
-
/** A stable index for `id` (see {@link GridController.#indexById}). */
|
|
75
|
-
itemIndex(id: string): number;
|
|
76
|
-
}
|
|
77
|
-
//#endregion
|
|
78
|
-
//#region src/types.d.ts
|
|
79
|
-
/**
|
|
80
|
-
* Drag behaviour configuration (mirrors react-grid-layout v2's `dragConfig`).
|
|
81
|
-
* The interaction itself is driven by dnd-kit.
|
|
82
|
-
*/
|
|
83
|
-
interface DragConfig {
|
|
84
|
-
/** Whether items can be dragged. @default true */
|
|
85
|
-
enabled?: boolean;
|
|
86
|
-
/** Keep the dragged item within the grid container bounds. @default false */
|
|
87
|
-
bounded?: boolean;
|
|
88
|
-
/** CSS selector for a drag handle inside each item. */
|
|
89
|
-
handle?: string;
|
|
90
|
-
/** CSS selector for regions that should cancel a drag. */
|
|
91
|
-
cancel?: string;
|
|
92
|
-
/** Pixels the pointer must move before a drag starts. @default 3 */
|
|
93
|
-
threshold?: number;
|
|
94
|
-
/**
|
|
95
|
-
* snapgrid extra: snap the dragged tile itself to grid cells while dragging.
|
|
96
|
-
* When `false` (the default, matching react-grid-layout) the tile follows the
|
|
97
|
-
* pointer smoothly and only the placeholder snaps.
|
|
98
|
-
*/
|
|
99
|
-
snapToGrid?: boolean;
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Resize behaviour configuration (mirrors react-grid-layout v2's `resizeConfig`).
|
|
103
|
-
*/
|
|
104
|
-
interface ResizeConfig {
|
|
105
|
-
/** Whether items can be resized. @default true */
|
|
106
|
-
enabled?: boolean;
|
|
107
|
-
/** Which handles to show on each item (item-level `resizeHandles` overrides). @default ['se'] */
|
|
108
|
-
handles?: ResizeHandleAxis$1[];
|
|
109
|
-
}
|
|
110
|
-
/** Minimal source shape passed to a {@link DropConfig.accept} predicate. */
|
|
111
|
-
interface DragSourceInfo {
|
|
112
|
-
id: string | number;
|
|
113
|
-
type?: unknown;
|
|
114
|
-
data?: unknown;
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Accept arbitrary (non-grid) dnd-kit draggables dropped into the grid. The
|
|
118
|
-
* external draggable should carry `data.snapGridDrop = { i?, w?, h? }` to control
|
|
119
|
-
* the inserted item's id/size; otherwise `defaultItem` is used. On drop the grid
|
|
120
|
-
* fires `onDrop(layout, item, event)` rather than `onLayoutChange`.
|
|
121
|
-
*
|
|
122
|
-
* Requires the grid and the external draggable to share one provider
|
|
123
|
-
* (e.g. both inside a `<SnapGridGroup>`).
|
|
124
|
-
*/
|
|
125
|
-
interface DropConfig {
|
|
126
|
-
/** Accept external draggables. @default false */
|
|
127
|
-
enabled?: boolean;
|
|
128
|
-
/** Default size for a dropped item when the source omits `snapGridDrop`. @default { w: 1, h: 1 } */
|
|
129
|
-
defaultItem?: {
|
|
130
|
-
w: number;
|
|
131
|
-
h: number;
|
|
132
|
-
};
|
|
133
|
-
/** Restrict which external sources are accepted. @default accept any non-grid draggable */
|
|
134
|
-
accept?: (source: DragSourceInfo) => boolean;
|
|
135
|
-
}
|
|
136
|
-
/** The `data.snapGridDrop` payload an external draggable carries to drop into a grid. */
|
|
137
|
-
interface GridDropData {
|
|
138
|
-
/** Id for the inserted item (a unique one is generated if omitted). */
|
|
139
|
-
i?: string;
|
|
140
|
-
/** Width in grid units. */
|
|
141
|
-
w?: number;
|
|
142
|
-
/** Height in grid units. */
|
|
143
|
-
h?: number;
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* react-grid-layout-compatible lifecycle callback.
|
|
147
|
-
* `(layout, oldItem, newItem, placeholder, event, node)`
|
|
148
|
-
*/
|
|
149
|
-
type GridEventCallback = (layout: Layout$1, oldItem: LayoutItem$1 | null, newItem: LayoutItem$1 | null, placeholder: LayoutItem$1 | null, event: Event | null, node: HTMLElement | null) => void;
|
|
150
|
-
//#endregion
|
|
151
7
|
//#region src/hooks/useGridController.d.ts
|
|
152
8
|
/** Options the grid host ({@link useGridContainer}) feeds the controller. */
|
|
153
9
|
interface UseGridControllerOptions {
|
|
@@ -159,19 +15,19 @@ interface UseGridControllerOptions {
|
|
|
159
15
|
layout: Layout$1;
|
|
160
16
|
onLayoutChange?: (layout: Layout$1) => void;
|
|
161
17
|
gridConfig?: Partial<GridConfig$1>;
|
|
162
|
-
dragConfig?: DragConfig;
|
|
163
|
-
resizeConfig?: ResizeConfig;
|
|
164
|
-
dropConfig?: DropConfig;
|
|
18
|
+
dragConfig?: DragConfig$1;
|
|
19
|
+
resizeConfig?: ResizeConfig$1;
|
|
20
|
+
dropConfig?: DropConfig$1;
|
|
165
21
|
compactor?: Compactor$1;
|
|
166
22
|
isDraggable?: boolean;
|
|
167
23
|
isResizable?: boolean;
|
|
168
24
|
autoSize?: boolean;
|
|
169
|
-
onDragStart?: GridEventCallback;
|
|
170
|
-
onDrag?: GridEventCallback;
|
|
171
|
-
onDragStop?: GridEventCallback;
|
|
172
|
-
onResizeStart?: GridEventCallback;
|
|
173
|
-
onResize?: GridEventCallback;
|
|
174
|
-
onResizeStop?: GridEventCallback;
|
|
25
|
+
onDragStart?: GridEventCallback$1;
|
|
26
|
+
onDrag?: GridEventCallback$1;
|
|
27
|
+
onDragStop?: GridEventCallback$1;
|
|
28
|
+
onResizeStart?: GridEventCallback$1;
|
|
29
|
+
onResize?: GridEventCallback$1;
|
|
30
|
+
onResizeStop?: GridEventCallback$1;
|
|
175
31
|
onDrop?: (layout: Layout$1, item: LayoutItem$1, event: Event | null) => void;
|
|
176
32
|
}
|
|
177
33
|
//#endregion
|
|
@@ -250,10 +106,6 @@ interface GridPlaceholderInfo {
|
|
|
250
106
|
*/
|
|
251
107
|
declare function useGridPlaceholder(group: string): GridPlaceholderInfo | null;
|
|
252
108
|
//#endregion
|
|
253
|
-
//#region src/hooks/dndShared.d.ts
|
|
254
|
-
/** Marker attribute placed on resize-handle elements. */
|
|
255
|
-
declare const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
|
|
256
|
-
//#endregion
|
|
257
109
|
//#region src/hooks/useGridResizeHandle.d.ts
|
|
258
110
|
interface UseGridResizeHandleResult {
|
|
259
111
|
/** Attach to your resize-handle element. */
|
|
@@ -359,8 +211,8 @@ interface ResponsiveGridLayoutProps {
|
|
|
359
211
|
margin?: [number, number];
|
|
360
212
|
containerPadding?: [number, number] | null;
|
|
361
213
|
compactor?: Compactor$1;
|
|
362
|
-
dragConfig?: DragConfig;
|
|
363
|
-
resizeConfig?: ResizeConfig;
|
|
214
|
+
dragConfig?: DragConfig$1;
|
|
215
|
+
resizeConfig?: ResizeConfig$1;
|
|
364
216
|
isDraggable?: boolean;
|
|
365
217
|
isResizable?: boolean;
|
|
366
218
|
autoSize?: boolean;
|
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/hooks/useGridController.ts","../src/hooks/useGridContainer.ts","../src/hooks/useGridItem.ts","../src/hooks/useGridPlaceholder.ts","../src/hooks/useGridResizeHandle.ts","../src/hooks/useResponsiveLayout.ts","../src/components/GridLayout.tsx","../src/components/ResponsiveGridLayout.tsx","../src/components/GridItem.tsx","../src/components/GridPlaceholder.tsx","../src/hooks/useContainerWidth.ts"],"mappings":"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"}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,153 +1,9 @@
|
|
|
1
1
|
import { DragOverlay, useDraggable, useDroppable } from "@dnd-kit/react";
|
|
2
|
-
import { BreakpointCols, BreakpointCols as BreakpointCols$1, Breakpoints, Breakpoints as Breakpoints$1, CompactType, Compactor, Compactor as Compactor$1,
|
|
2
|
+
import { BreakpointCols, BreakpointCols as BreakpointCols$1, Breakpoints, Breakpoints as Breakpoints$1, CompactType, Compactor, Compactor as Compactor$1, GridConfig, GridConfig as GridConfig$1, Layout, Layout as Layout$1, LayoutItem, LayoutItem as LayoutItem$1, PositionParams, ResizeHandleAxis, ResizeHandleAxis as ResizeHandleAxis$1, ResponsiveLayouts, ResponsiveLayouts as ResponsiveLayouts$1, getCompactor, horizontalCompactor, noCompactor, verticalCompactor } from "@snapgridjs/core";
|
|
3
|
+
import { DragConfig, DragConfig as DragConfig$1, DragSourceInfo, DropConfig, DropConfig as DropConfig$1, GridController, GridDropData, GridEventCallback, GridEventCallback as GridEventCallback$1, RESIZE_HANDLE_ATTR, ResizeConfig, ResizeConfig as ResizeConfig$1 } from "@snapgridjs/dnd";
|
|
3
4
|
import { CSSProperties, ReactNode } from "react";
|
|
4
|
-
import {
|
|
5
|
-
import { DragDropManager, Feedback, Feedback as Feedback$1, KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
|
|
5
|
+
import { Feedback, KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
|
|
6
6
|
|
|
7
|
-
//#region src/controller/GridController.d.ts
|
|
8
|
-
/**
|
|
9
|
-
* Per-grid configuration the container host writes to the controller each render
|
|
10
|
-
* (during render, so items that resolve this controller by `group` read fresh
|
|
11
|
-
* config on the same pass). Replaces the fields the old GridContext exposed.
|
|
12
|
-
*/
|
|
13
|
-
interface GridControllerConfig {
|
|
14
|
-
positionParams: PositionParams$1;
|
|
15
|
-
gridConfig: GridConfig$1;
|
|
16
|
-
width: number;
|
|
17
|
-
autoSize: boolean;
|
|
18
|
-
itemSensors: Sensors;
|
|
19
|
-
itemModifiers: Modifiers;
|
|
20
|
-
isItemDraggable: (id: string) => boolean;
|
|
21
|
-
isItemResizable: (id: string) => boolean;
|
|
22
|
-
resizeHandlesFor: (id: string) => readonly ResizeHandleAxis$1[];
|
|
23
|
-
/** Report the container element (used to map a pointer to a cell on receive). */
|
|
24
|
-
setContainerElement: (element: Element | null) => void;
|
|
25
|
-
}
|
|
26
|
-
interface ItemSnapshot {
|
|
27
|
-
item: LayoutItem$1 | undefined;
|
|
28
|
-
isDragging: boolean;
|
|
29
|
-
hidden: boolean;
|
|
30
|
-
}
|
|
31
|
-
interface ResizeSnapshot {
|
|
32
|
-
isResizing: boolean;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Live per-grid drag/resize state as a plain observable: the provider writes
|
|
36
|
-
* (`setSession`/`setKeyboard`/`setCommitted`), hooks subscribe to just their own
|
|
37
|
-
* slice via `useSyncExternalStore`. Value-cached snapshots mean a drag re-renders
|
|
38
|
-
* only the tiles whose slice changed, not the whole subtree (the old
|
|
39
|
-
* context-value model re-rendered every tile every frame).
|
|
40
|
-
*/
|
|
41
|
-
declare class GridController {
|
|
42
|
-
#private;
|
|
43
|
-
id: string;
|
|
44
|
-
config: GridControllerConfig | null;
|
|
45
|
-
/** The dnd-kit manager this grid is registered with (set by useInstance). */
|
|
46
|
-
manager: DragDropManager | undefined;
|
|
47
|
-
constructor(id: string, committed?: Layout$1, manager?: DragDropManager);
|
|
48
|
-
/** Replace the per-grid config (called by the container host during render). */
|
|
49
|
-
setConfig(config: GridControllerConfig): void;
|
|
50
|
-
/**
|
|
51
|
-
* Re-point this grid's id. The container host syncs it (during render, before
|
|
52
|
-
* the droppable/group read it) when the controlled `id` prop changes, so the
|
|
53
|
-
* returned `group`, the droppable id, and the registry key never drift apart.
|
|
54
|
-
*/
|
|
55
|
-
setId(id: string): void;
|
|
56
|
-
register: () => void;
|
|
57
|
-
subscribe: (listener: () => void) => (() => void);
|
|
58
|
-
/**
|
|
59
|
-
* Sync the committed layout from the controlled `layout` prop. Called during
|
|
60
|
-
* the provider's render, so it must NOT notify — emitting here would update
|
|
61
|
-
* subscribed GridItems mid-render (a React "setState while rendering" error).
|
|
62
|
-
* No notify is needed: a `layout` prop change already re-renders the whole
|
|
63
|
-
* provider subtree, so every GridItem re-reads its snapshot on that pass.
|
|
64
|
-
*/
|
|
65
|
-
setCommitted(layout: Layout$1): void;
|
|
66
|
-
setSession(next: DragSession | null): void;
|
|
67
|
-
getSession(): DragSession | null;
|
|
68
|
-
/** Record whether the active drag is keyboard-driven (drives `hidden`). */
|
|
69
|
-
setKeyboard(value: boolean): void;
|
|
70
|
-
itemSnapshot: (id: string) => ItemSnapshot;
|
|
71
|
-
placeholderSnapshot: () => LayoutItem$1 | null;
|
|
72
|
-
resizeSnapshot: (itemId: string) => ResizeSnapshot;
|
|
73
|
-
renderedSnapshot: () => Layout$1;
|
|
74
|
-
/** A stable index for `id` (see {@link GridController.#indexById}). */
|
|
75
|
-
itemIndex(id: string): number;
|
|
76
|
-
}
|
|
77
|
-
//#endregion
|
|
78
|
-
//#region src/types.d.ts
|
|
79
|
-
/**
|
|
80
|
-
* Drag behaviour configuration (mirrors react-grid-layout v2's `dragConfig`).
|
|
81
|
-
* The interaction itself is driven by dnd-kit.
|
|
82
|
-
*/
|
|
83
|
-
interface DragConfig {
|
|
84
|
-
/** Whether items can be dragged. @default true */
|
|
85
|
-
enabled?: boolean;
|
|
86
|
-
/** Keep the dragged item within the grid container bounds. @default false */
|
|
87
|
-
bounded?: boolean;
|
|
88
|
-
/** CSS selector for a drag handle inside each item. */
|
|
89
|
-
handle?: string;
|
|
90
|
-
/** CSS selector for regions that should cancel a drag. */
|
|
91
|
-
cancel?: string;
|
|
92
|
-
/** Pixels the pointer must move before a drag starts. @default 3 */
|
|
93
|
-
threshold?: number;
|
|
94
|
-
/**
|
|
95
|
-
* snapgrid extra: snap the dragged tile itself to grid cells while dragging.
|
|
96
|
-
* When `false` (the default, matching react-grid-layout) the tile follows the
|
|
97
|
-
* pointer smoothly and only the placeholder snaps.
|
|
98
|
-
*/
|
|
99
|
-
snapToGrid?: boolean;
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Resize behaviour configuration (mirrors react-grid-layout v2's `resizeConfig`).
|
|
103
|
-
*/
|
|
104
|
-
interface ResizeConfig {
|
|
105
|
-
/** Whether items can be resized. @default true */
|
|
106
|
-
enabled?: boolean;
|
|
107
|
-
/** Which handles to show on each item (item-level `resizeHandles` overrides). @default ['se'] */
|
|
108
|
-
handles?: ResizeHandleAxis$1[];
|
|
109
|
-
}
|
|
110
|
-
/** Minimal source shape passed to a {@link DropConfig.accept} predicate. */
|
|
111
|
-
interface DragSourceInfo {
|
|
112
|
-
id: string | number;
|
|
113
|
-
type?: unknown;
|
|
114
|
-
data?: unknown;
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Accept arbitrary (non-grid) dnd-kit draggables dropped into the grid. The
|
|
118
|
-
* external draggable should carry `data.snapGridDrop = { i?, w?, h? }` to control
|
|
119
|
-
* the inserted item's id/size; otherwise `defaultItem` is used. On drop the grid
|
|
120
|
-
* fires `onDrop(layout, item, event)` rather than `onLayoutChange`.
|
|
121
|
-
*
|
|
122
|
-
* Requires the grid and the external draggable to share one provider
|
|
123
|
-
* (e.g. both inside a `<SnapGridGroup>`).
|
|
124
|
-
*/
|
|
125
|
-
interface DropConfig {
|
|
126
|
-
/** Accept external draggables. @default false */
|
|
127
|
-
enabled?: boolean;
|
|
128
|
-
/** Default size for a dropped item when the source omits `snapGridDrop`. @default { w: 1, h: 1 } */
|
|
129
|
-
defaultItem?: {
|
|
130
|
-
w: number;
|
|
131
|
-
h: number;
|
|
132
|
-
};
|
|
133
|
-
/** Restrict which external sources are accepted. @default accept any non-grid draggable */
|
|
134
|
-
accept?: (source: DragSourceInfo) => boolean;
|
|
135
|
-
}
|
|
136
|
-
/** The `data.snapGridDrop` payload an external draggable carries to drop into a grid. */
|
|
137
|
-
interface GridDropData {
|
|
138
|
-
/** Id for the inserted item (a unique one is generated if omitted). */
|
|
139
|
-
i?: string;
|
|
140
|
-
/** Width in grid units. */
|
|
141
|
-
w?: number;
|
|
142
|
-
/** Height in grid units. */
|
|
143
|
-
h?: number;
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* react-grid-layout-compatible lifecycle callback.
|
|
147
|
-
* `(layout, oldItem, newItem, placeholder, event, node)`
|
|
148
|
-
*/
|
|
149
|
-
type GridEventCallback = (layout: Layout$1, oldItem: LayoutItem$1 | null, newItem: LayoutItem$1 | null, placeholder: LayoutItem$1 | null, event: Event | null, node: HTMLElement | null) => void;
|
|
150
|
-
//#endregion
|
|
151
7
|
//#region src/hooks/useGridController.d.ts
|
|
152
8
|
/** Options the grid host ({@link useGridContainer}) feeds the controller. */
|
|
153
9
|
interface UseGridControllerOptions {
|
|
@@ -159,19 +15,19 @@ interface UseGridControllerOptions {
|
|
|
159
15
|
layout: Layout$1;
|
|
160
16
|
onLayoutChange?: (layout: Layout$1) => void;
|
|
161
17
|
gridConfig?: Partial<GridConfig$1>;
|
|
162
|
-
dragConfig?: DragConfig;
|
|
163
|
-
resizeConfig?: ResizeConfig;
|
|
164
|
-
dropConfig?: DropConfig;
|
|
18
|
+
dragConfig?: DragConfig$1;
|
|
19
|
+
resizeConfig?: ResizeConfig$1;
|
|
20
|
+
dropConfig?: DropConfig$1;
|
|
165
21
|
compactor?: Compactor$1;
|
|
166
22
|
isDraggable?: boolean;
|
|
167
23
|
isResizable?: boolean;
|
|
168
24
|
autoSize?: boolean;
|
|
169
|
-
onDragStart?: GridEventCallback;
|
|
170
|
-
onDrag?: GridEventCallback;
|
|
171
|
-
onDragStop?: GridEventCallback;
|
|
172
|
-
onResizeStart?: GridEventCallback;
|
|
173
|
-
onResize?: GridEventCallback;
|
|
174
|
-
onResizeStop?: GridEventCallback;
|
|
25
|
+
onDragStart?: GridEventCallback$1;
|
|
26
|
+
onDrag?: GridEventCallback$1;
|
|
27
|
+
onDragStop?: GridEventCallback$1;
|
|
28
|
+
onResizeStart?: GridEventCallback$1;
|
|
29
|
+
onResize?: GridEventCallback$1;
|
|
30
|
+
onResizeStop?: GridEventCallback$1;
|
|
175
31
|
onDrop?: (layout: Layout$1, item: LayoutItem$1, event: Event | null) => void;
|
|
176
32
|
}
|
|
177
33
|
//#endregion
|
|
@@ -250,10 +106,6 @@ interface GridPlaceholderInfo {
|
|
|
250
106
|
*/
|
|
251
107
|
declare function useGridPlaceholder(group: string): GridPlaceholderInfo | null;
|
|
252
108
|
//#endregion
|
|
253
|
-
//#region src/hooks/dndShared.d.ts
|
|
254
|
-
/** Marker attribute placed on resize-handle elements. */
|
|
255
|
-
declare const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
|
|
256
|
-
//#endregion
|
|
257
109
|
//#region src/hooks/useGridResizeHandle.d.ts
|
|
258
110
|
interface UseGridResizeHandleResult {
|
|
259
111
|
/** Attach to your resize-handle element. */
|
|
@@ -359,8 +211,8 @@ interface ResponsiveGridLayoutProps {
|
|
|
359
211
|
margin?: [number, number];
|
|
360
212
|
containerPadding?: [number, number] | null;
|
|
361
213
|
compactor?: Compactor$1;
|
|
362
|
-
dragConfig?: DragConfig;
|
|
363
|
-
resizeConfig?: ResizeConfig;
|
|
214
|
+
dragConfig?: DragConfig$1;
|
|
215
|
+
resizeConfig?: ResizeConfig$1;
|
|
364
216
|
isDraggable?: boolean;
|
|
365
217
|
isResizable?: boolean;
|
|
366
218
|
autoSize?: boolean;
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/hooks/useGridController.ts","../src/hooks/useGridContainer.ts","../src/hooks/useGridItem.ts","../src/hooks/useGridPlaceholder.ts","../src/hooks/useGridResizeHandle.ts","../src/hooks/useResponsiveLayout.ts","../src/components/GridLayout.tsx","../src/components/ResponsiveGridLayout.tsx","../src/components/GridItem.tsx","../src/components/GridPlaceholder.tsx","../src/hooks/useContainerWidth.ts"],"mappings":";;;;;;;;UAkCiB,wBAAA;;EAEf,EAAA;;EAEA,KAAA;EAJuC;EAMvC,MAAA,EAAQ,QAAA;EACR,cAAA,IAAkB,MAAA,EAAQ,QAAA;EAC1B,UAAA,GAAa,OAAA,CAAQ,YAAA;EACrB,UAAA,GAAa,YAAA;EACb,YAAA,GAAe,cAAA;EACf,UAAA,GAAa,YAAA;EACb,SAAA,GAAY,WAAA;EACZ,WAAA;EACA,WAAA;EACA,QAAA;EACA,WAAA,GAAc,mBAAA;EACd,MAAA,GAAS,mBAAA;EACT,UAAA,GAAa,mBAAA;EACb,aAAA,GAAgB,mBAAA;EAChB,QAAA,GAAW,mBAAA;EACX,YAAA,GAAe,mBAAA;EACf,MAAA,IAAU,MAAA,EAAQ,QAAA,EAAQ,IAAA,EAAM,YAAA,EAAY,KAAA,EAAO,KAAA;AAAA;;;UC7CpC,kBAAA;;EAEf,GAAA,GAAM,OAAA,EAAS,OAAA;;EAEf,KAAA,EAAO,aAAa;EDmBmB;ECjBvC,kBAAA;AAAA;AAAA,UAGe,sBAAA;EDsBM;ECpBrB,cAAA,EAAgB,kBAAA;EDqBH;ECnBb,YAAA;EDqBa;ECnBb,KAAA;EDwBc;ECtBd,UAAA,EAAY,cAAc;AAAA;;;;;;;iBAgBZ,gBAAA,CAAiB,IAAA,EAAM,wBAAA,GAA2B,sBAAsB;;;UCjBvE,iBAAA;;EAEf,GAAA,GAAM,OAAA,EAAS,OAAA;;;AFKjB;;;EECE,SAAA,GAAY,OAAA,EAAS,OAAA;EFMK;EEJ1B,KAAA,EAAO,aAAA;EFKM;EEHb,UAAA;EFKe;EEHf,IAAA,EAAM,YAAA;AAAA;;;;;;;;;;;;;;;;iBAkBQ,WAAA,CAAY,EAAA,UAAY,KAAA,WAAgB,iBAAiB;;;UCvDxD,mBAAA;;EAEf,IAAA,EAAM,YAAA;;EAEN,KAAA,EAAO,aAAa;AAAA;;;;;;iBAQN,kBAAA,CAAmB,KAAA,WAAgB,mBAAmB;;;UCVrD,yBAAA;;EAEf,GAAA,GAAM,OAAA,EAAS,OAAA;;EAEf,WAAA;IAAA,CAAgB,kBAAkB;EAAA;;EAElC,UAAA;AAAA;;;;;;;iBASc,mBAAA,CACd,MAAA,UACA,MAAA,EAAQ,kBAAA,EACR,KAAA,WACC,yBAAyB;;;;cCXf,mBAAA,EAAqB,aAA6D;AAAA,cAClF,uBAAA,EAAyB,gBAAyD;AAAA,UAE9E,0BAAA;;EAEf,KAAA;ELee;EKbf,OAAA,EAAS,mBAAA;;EAET,WAAA,GAAc,aAAA;ELkBY;EKhB1B,IAAA,GAAO,gBAAA;ELiBM;EKfb,SAAA,GAAY,WAAA;ELiBG;EKff,cAAA,IAAkB,MAAA,EAAQ,QAAA,EAAQ,OAAA,EAAS,mBAAA;ELiB/B;EKfZ,kBAAA,IAAsB,UAAA,UAAoB,IAAA;AAAA;AAAA,UAG3B,yBAAA;ELmBC;EKjBhB,UAAA;ELmBe;EKjBf,IAAA;ELkBgC;EKhBhC,MAAA,EAAQ,QAAA;ELgBgD;EKdxD,cAAA,GAAiB,MAAA,EAAQ,QAAM;AAAA;;;;;;iBAQjB,mBAAA,CACd,OAAA,EAAS,0BAAA,GACR,yBAAyB;;;UCtCX,eAAA,SAAwB,wBAAA;EACvC,QAAA,EAAU,SAAA;;EAEV,SAAA;;EAEA,KAAA,GAAQ,aAAA;AAAA;;;;;;;;;;;iBA4CM,UAAA,CAAW,KAAA,EAAO,eAAA,GAAkB,KAAA,CAAM,GAAA,CAAI,OAAO;;;;;;;iBAiBrD,aAAA,CAAA;EAAgB;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAc,KAAA,CAAM,GAAA,CAAI,OAAA;;;UCpE/D,yBAAA;;EAEf,KAAA;;EAEA,OAAA,EAAS,mBAAA;EPkB8B;EOhBvC,cAAA,IAAkB,MAAA,EAAQ,QAAA,EAAQ,OAAA,EAAS,mBAAA;EPsBnC;EOpBR,kBAAA,IAAsB,UAAA,UAAoB,IAAA;EPsBrB;EOpBrB,WAAA,GAAc,aAAA;EPqBD;EOnBb,IAAA,GAAO,gBAAA;EACP,SAAA;EACA,MAAA;EACA,gBAAA;EACA,SAAA,GAAY,WAAA;EACZ,UAAA,GAAa,YAAA;EACb,YAAA,GAAe,cAAA;EACf,WAAA;EACA,WAAA;EACA,QAAA;EACA,SAAA;EACA,KAAA,GAAQ,aAAA;EACR,QAAA,EAAU,SAAA;AAAA;;;;;;;iBASI,oBAAA,CAAqB,KAAA,EAAO,yBAAA,GAA4B,KAAA,CAAM,GAAA,CAAI,OAAO;;;UCvCxE,aAAA;;EAEf,EAAA;;EAEA,KAAA;EACA,QAAA,EAAU,SAAA;ERuBK;EQrBf,SAAA;;EAEA,KAAA,GAAQ,aAAa;AAAA;;;;;;;;;;;;iBAgEd,YAAA,CAAA;EAAe,EAAA;EAAI,KAAA;EAAO,QAAA;EAAU,SAAA;EAAW;AAAA,GAAS,aAAA,+BAAa,GAAA,CAAA,OAAA;AAAA,cAqBjE,QAAA,kBAAQ,mBAAA,QAAA,YAAA;;;UChGJ,oBAAA;;EAEf,KAAA;;EAEA,SAAA;;EAEA,KAAA,GAAQ,aAAa;AAAA;;;;;;iBAiBP,eAAA,CAAA;EAAkB,KAAA;EAAO,SAAA;EAAW;AAAA,GAAS,oBAAA,+BAAoB,GAAA,CAAA,OAAA;;;UCnBhE,wBAAA;;EAEf,YAAY;AAAA;AAAA,UAGG,uBAAA;;EAEf,KAAA;EVmBe;EUjBf,OAAA;;EAEA,YAAA,GAAe,OAAA,EAAS,WAAW;AAAA;;;;;iBAOrB,iBAAA,CAAkB,OAAA,GAAS,wBAAA,GAAgC,uBAAuB"}
|