@snapgridjs/react 0.1.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/LICENSE +21 -0
- package/README.md +66 -0
- package/dist/index.cjs +1067 -0
- package/dist/index.d.cts +390 -0
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +390 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +999 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +78 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
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";
|
|
2
|
+
import { CSSProperties, ReactNode } from "react";
|
|
3
|
+
import { Feedback, KeyboardSensor, PointerSensor } from "@dnd-kit/dom";
|
|
4
|
+
import { useDraggable, useDroppable } from "@dnd-kit/react";
|
|
5
|
+
|
|
6
|
+
//#region src/types.d.ts
|
|
7
|
+
/**
|
|
8
|
+
* Drag behaviour configuration (mirrors react-grid-layout v2's `dragConfig`).
|
|
9
|
+
* The interaction itself is driven by dnd-kit.
|
|
10
|
+
*/
|
|
11
|
+
interface DragConfig {
|
|
12
|
+
/** Whether items can be dragged. @default true */
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
/** Keep the dragged item within the grid container bounds. @default false */
|
|
15
|
+
bounded?: boolean;
|
|
16
|
+
/** CSS selector for a drag handle inside each item. */
|
|
17
|
+
handle?: string;
|
|
18
|
+
/** CSS selector for regions that should cancel a drag. */
|
|
19
|
+
cancel?: string;
|
|
20
|
+
/** Pixels the pointer must move before a drag starts. @default 3 */
|
|
21
|
+
threshold?: number;
|
|
22
|
+
/**
|
|
23
|
+
* snapgrid extra: snap the dragged tile itself to grid cells while dragging.
|
|
24
|
+
* When `false` (the default, matching react-grid-layout) the tile follows the
|
|
25
|
+
* pointer smoothly and only the placeholder snaps.
|
|
26
|
+
*/
|
|
27
|
+
snapToGrid?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Resize behaviour configuration (mirrors react-grid-layout v2's `resizeConfig`).
|
|
31
|
+
*/
|
|
32
|
+
interface ResizeConfig {
|
|
33
|
+
/** Whether items can be resized. @default true */
|
|
34
|
+
enabled?: boolean;
|
|
35
|
+
/** Which handles to show on each item (item-level `resizeHandles` overrides). @default ['se'] */
|
|
36
|
+
handles?: ResizeHandleAxis$1[];
|
|
37
|
+
}
|
|
38
|
+
/** Minimal source shape passed to a {@link DropConfig.accept} predicate. */
|
|
39
|
+
interface DragSourceInfo {
|
|
40
|
+
id: string | number;
|
|
41
|
+
type?: unknown;
|
|
42
|
+
data?: unknown;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Accept arbitrary (non-grid) dnd-kit draggables dropped into the grid. The
|
|
46
|
+
* external draggable should carry `data.snapGridDrop = { i?, w?, h? }` to control
|
|
47
|
+
* the inserted item's id/size; otherwise `defaultItem` is used. On drop the grid
|
|
48
|
+
* fires `onDrop(layout, item, event)` rather than `onLayoutChange`.
|
|
49
|
+
*
|
|
50
|
+
* Requires the grid and the external draggable to share one provider
|
|
51
|
+
* (e.g. both inside a `<SnapGridGroup>`).
|
|
52
|
+
*/
|
|
53
|
+
interface DropConfig {
|
|
54
|
+
/** Accept external draggables. @default false */
|
|
55
|
+
enabled?: boolean;
|
|
56
|
+
/** Default size for a dropped item when the source omits `snapGridDrop`. @default { w: 1, h: 1 } */
|
|
57
|
+
defaultItem?: {
|
|
58
|
+
w: number;
|
|
59
|
+
h: number;
|
|
60
|
+
};
|
|
61
|
+
/** Restrict which external sources are accepted. @default accept any non-grid draggable */
|
|
62
|
+
accept?: (source: DragSourceInfo) => boolean;
|
|
63
|
+
}
|
|
64
|
+
/** The `data.snapGridDrop` payload an external draggable carries to drop into a grid. */
|
|
65
|
+
interface GridDropData {
|
|
66
|
+
/** Id for the inserted item (a unique one is generated if omitted). */
|
|
67
|
+
i?: string;
|
|
68
|
+
/** Width in grid units. */
|
|
69
|
+
w?: number;
|
|
70
|
+
/** Height in grid units. */
|
|
71
|
+
h?: number;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* react-grid-layout-compatible lifecycle callback.
|
|
75
|
+
* `(layout, oldItem, newItem, placeholder, event, node)`
|
|
76
|
+
*/
|
|
77
|
+
type GridEventCallback = (layout: Layout$1, oldItem: LayoutItem$1 | null, newItem: LayoutItem$1 | null, placeholder: LayoutItem$1 | null, event: Event | null, node: HTMLElement | null) => void;
|
|
78
|
+
//#endregion
|
|
79
|
+
//#region src/SnapGridProvider.d.ts
|
|
80
|
+
interface SnapGridProviderProps {
|
|
81
|
+
children: ReactNode;
|
|
82
|
+
/** Container width in pixels (e.g. from {@link useContainerWidth}). */
|
|
83
|
+
width: number;
|
|
84
|
+
/** Controlled layout. Never mutated. */
|
|
85
|
+
layout: Layout$1;
|
|
86
|
+
/** Called with the next layout after a drag/resize commits (incl. cross-grid add/remove). */
|
|
87
|
+
onLayoutChange?: (layout: Layout$1) => void;
|
|
88
|
+
gridConfig?: Partial<GridConfig$1>;
|
|
89
|
+
dragConfig?: DragConfig;
|
|
90
|
+
resizeConfig?: ResizeConfig;
|
|
91
|
+
/** Accept external (non-grid) dnd-kit draggables dropped into this grid. */
|
|
92
|
+
dropConfig?: DropConfig;
|
|
93
|
+
compactor?: Compactor$1;
|
|
94
|
+
/** Grid-level draggable toggle (item-level `isDraggable`/`static` override). @default true */
|
|
95
|
+
isDraggable?: boolean;
|
|
96
|
+
/** Grid-level resizable toggle (item-level `isResizable`/`static` override). @default true */
|
|
97
|
+
isResizable?: boolean;
|
|
98
|
+
/** Grow container height to fit content. @default true */
|
|
99
|
+
autoSize?: boolean;
|
|
100
|
+
/** Stable id for the grid's droppable surface (auto-generated if omitted). */
|
|
101
|
+
id?: string;
|
|
102
|
+
onDragStart?: GridEventCallback;
|
|
103
|
+
onDrag?: GridEventCallback;
|
|
104
|
+
onDragStop?: GridEventCallback;
|
|
105
|
+
onResizeStart?: GridEventCallback;
|
|
106
|
+
onResize?: GridEventCallback;
|
|
107
|
+
onResizeStop?: GridEventCallback;
|
|
108
|
+
/** Called when an external draggable is dropped into the grid: the next layout, the new item, and the event. */
|
|
109
|
+
onDrop?: (layout: Layout$1, item: LayoutItem$1, event: Event | null) => void;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Headless provider for a grid. Standalone grids get their own isolated dnd-kit
|
|
113
|
+
* provider; grids inside a {@link SnapGridGroup} share that group's provider and
|
|
114
|
+
* registry so tiles can be dragged between them. Owns this grid's drag/resize
|
|
115
|
+
* session; the consumer owns all markup/styling.
|
|
116
|
+
*/
|
|
117
|
+
declare function SnapGridProvider(props: SnapGridProviderProps): React.JSX.Element;
|
|
118
|
+
//#endregion
|
|
119
|
+
//#region src/SnapGridGroup.d.ts
|
|
120
|
+
interface SnapGridGroupProps {
|
|
121
|
+
children: ReactNode;
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* Wrap multiple grids to let tiles be dragged **between** them. Provides one
|
|
125
|
+
* shared dnd-kit `DragDropProvider` and a registry so each grid can tell which
|
|
126
|
+
* grid the pointer is over.
|
|
127
|
+
*
|
|
128
|
+
* Item ids must be unique across all grids in a group (they share one manager).
|
|
129
|
+
*/
|
|
130
|
+
declare function SnapGridGroup({
|
|
131
|
+
children
|
|
132
|
+
}: SnapGridGroupProps): React.JSX.Element;
|
|
133
|
+
//#endregion
|
|
134
|
+
//#region src/hooks/useGridContainer.d.ts
|
|
135
|
+
interface GridContainerProps {
|
|
136
|
+
/** Attach to your container element. */
|
|
137
|
+
ref: (element: Element | null) => void;
|
|
138
|
+
/** Positioning style (relative + width + auto-sized height). Spread onto your element. */
|
|
139
|
+
style: CSSProperties;
|
|
140
|
+
/** Present while a compatible draggable is over the grid. */
|
|
141
|
+
"data-drop-target"?: true;
|
|
142
|
+
}
|
|
143
|
+
interface UseGridContainerResult {
|
|
144
|
+
/** Spread onto your container element. */
|
|
145
|
+
containerProps: GridContainerProps;
|
|
146
|
+
/** True while a compatible draggable is over the grid. */
|
|
147
|
+
isDropTarget: boolean;
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* Headless hook for the grid container. Registers the droppable surface (the
|
|
151
|
+
* seam for cross-grid drops) and returns props (ref + sizing style) to spread
|
|
152
|
+
* onto your own container element.
|
|
153
|
+
*/
|
|
154
|
+
declare function useGridContainer(): UseGridContainerResult;
|
|
155
|
+
//#endregion
|
|
156
|
+
//#region src/hooks/useGridItem.d.ts
|
|
157
|
+
interface UseGridItemResult {
|
|
158
|
+
/** Attach to the element that represents this grid item. */
|
|
159
|
+
ref: (element: Element | null) => void;
|
|
160
|
+
/** Positioning style to spread onto your element (left/top/size). */
|
|
161
|
+
style: CSSProperties;
|
|
162
|
+
/** True while this item is the active drag source. */
|
|
163
|
+
isDragging: boolean;
|
|
164
|
+
/** The item's current (possibly reflowed) layout entry. */
|
|
165
|
+
item: LayoutItem$1 | undefined;
|
|
166
|
+
}
|
|
167
|
+
/**
|
|
168
|
+
* Headless hook for a single grid item. Returns a ref, a positioning `style`,
|
|
169
|
+
* and drag state — spread them onto whatever element you render. You own the
|
|
170
|
+
* tag, className, content, and any cosmetic styling.
|
|
171
|
+
*/
|
|
172
|
+
declare function useGridItem(id: string): UseGridItemResult;
|
|
173
|
+
//#endregion
|
|
174
|
+
//#region src/hooks/useGridPlaceholder.d.ts
|
|
175
|
+
interface GridPlaceholderInfo {
|
|
176
|
+
/** The layout entry marking where the dragged item will land. */
|
|
177
|
+
item: LayoutItem$1;
|
|
178
|
+
/** Positioning style (left/top/size) to spread onto your placeholder element. */
|
|
179
|
+
style: CSSProperties;
|
|
180
|
+
}
|
|
181
|
+
/**
|
|
182
|
+
* Headless hook returning where the drag placeholder should be rendered, or
|
|
183
|
+
* `null` when no drag is in progress. You render the element however you like.
|
|
184
|
+
*/
|
|
185
|
+
declare function useGridPlaceholder(): GridPlaceholderInfo | null;
|
|
186
|
+
//#endregion
|
|
187
|
+
//#region src/hooks/dndShared.d.ts
|
|
188
|
+
/** Marker attribute placed on resize-handle elements. */
|
|
189
|
+
declare const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
|
|
190
|
+
//#endregion
|
|
191
|
+
//#region src/hooks/useGridResizeHandle.d.ts
|
|
192
|
+
interface UseGridResizeHandleResult {
|
|
193
|
+
/** Attach to your resize-handle element. */
|
|
194
|
+
ref: (element: Element | null) => void;
|
|
195
|
+
/** Spread onto the handle element so item drags ignore pointer-downs on it. */
|
|
196
|
+
handleProps: {
|
|
197
|
+
[RESIZE_HANDLE_ATTR]: true;
|
|
198
|
+
};
|
|
199
|
+
/** True while this item is actively being resized. */
|
|
200
|
+
isResizing: boolean;
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* Headless hook for a single resize handle. Model a handle as its own draggable;
|
|
204
|
+
* dragging it resizes the item from the given edge/corner. Position and style
|
|
205
|
+
* the handle however you like — spread `ref` and `handleProps` onto it.
|
|
206
|
+
*/
|
|
207
|
+
declare function useGridResizeHandle(itemId: string, handle: ResizeHandleAxis$1): UseGridResizeHandleResult;
|
|
208
|
+
//#endregion
|
|
209
|
+
//#region src/hooks/useGridDragOverlay.d.ts
|
|
210
|
+
interface GridDragOverlay$1 {
|
|
211
|
+
/** The item being dragged from this grid. */
|
|
212
|
+
item: LayoutItem$1;
|
|
213
|
+
/** Fixed-position style for the floating preview; render it in a body portal. */
|
|
214
|
+
style: CSSProperties;
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Headless hook for the floating drag preview. Returns `null` unless this grid
|
|
218
|
+
* is the source of an in-progress drag. Render the returned `item` with `style`
|
|
219
|
+
* in a portal at `document.body` so it can float across grids unclipped (see
|
|
220
|
+
* {@link GridDragOverlay} for the convenience component).
|
|
221
|
+
*/
|
|
222
|
+
declare function useGridDragOverlay(): GridDragOverlay$1 | null;
|
|
223
|
+
//#endregion
|
|
224
|
+
//#region src/hooks/useResponsiveLayout.d.ts
|
|
225
|
+
/** react-grid-layout's default breakpoints (px) and column counts. */
|
|
226
|
+
declare const DEFAULT_BREAKPOINTS: Breakpoints$1;
|
|
227
|
+
declare const DEFAULT_BREAKPOINT_COLS: BreakpointCols$1;
|
|
228
|
+
interface UseResponsiveLayoutOptions {
|
|
229
|
+
/** Current container width in pixels. */
|
|
230
|
+
width: number;
|
|
231
|
+
/** Controlled per-breakpoint layouts. Missing breakpoints are generated from the nearest one. */
|
|
232
|
+
layouts: ResponsiveLayouts$1;
|
|
233
|
+
/** Breakpoint → min width (px). @default lg/md/sm/xs/xxs */
|
|
234
|
+
breakpoints?: Breakpoints$1;
|
|
235
|
+
/** Breakpoint → column count. @default 12/10/6/4/2 */
|
|
236
|
+
cols?: BreakpointCols$1;
|
|
237
|
+
/** Compaction strategy used when generating a missing breakpoint's layout. */
|
|
238
|
+
compactor?: Compactor$1;
|
|
239
|
+
/** Called when a layout commits: the active layout and the updated map. */
|
|
240
|
+
onLayoutChange?: (layout: Layout$1, layouts: ResponsiveLayouts$1) => void;
|
|
241
|
+
/** Called when the active breakpoint changes. */
|
|
242
|
+
onBreakpointChange?: (breakpoint: string, cols: number) => void;
|
|
243
|
+
}
|
|
244
|
+
interface UseResponsiveLayoutResult {
|
|
245
|
+
/** The active breakpoint name. */
|
|
246
|
+
breakpoint: string;
|
|
247
|
+
/** Column count for the active breakpoint. */
|
|
248
|
+
cols: number;
|
|
249
|
+
/** The resolved layout for the active breakpoint (generated if absent). */
|
|
250
|
+
layout: Layout$1;
|
|
251
|
+
/** Pass to the grid's `onLayoutChange`; updates the active breakpoint's layout. */
|
|
252
|
+
onLayoutChange: (layout: Layout$1) => void;
|
|
253
|
+
}
|
|
254
|
+
/**
|
|
255
|
+
* Headless responsive layout engine: resolves the active breakpoint and its
|
|
256
|
+
* column count/layout from the container width, generating a layout for the
|
|
257
|
+
* active breakpoint from the nearest one when missing.
|
|
258
|
+
*/
|
|
259
|
+
declare function useResponsiveLayout(options: UseResponsiveLayoutOptions): UseResponsiveLayoutResult;
|
|
260
|
+
//#endregion
|
|
261
|
+
//#region src/GridLayout.d.ts
|
|
262
|
+
interface GridLayoutProps extends SnapGridProviderProps {
|
|
263
|
+
/** Appended to the default `snapgrid` class on the surface. */
|
|
264
|
+
className?: string;
|
|
265
|
+
/** Merged over (and able to override) the surface's positioning style. */
|
|
266
|
+
style?: CSSProperties;
|
|
267
|
+
}
|
|
268
|
+
/**
|
|
269
|
+
* Drop-in grid component: a controlled, react-grid-layout v2-compatible layout
|
|
270
|
+
* backed by dnd-kit. A thin shell over {@link SnapGridProvider} and the headless
|
|
271
|
+
* hooks — children are keyed by their layout item's `i`. For full control over
|
|
272
|
+
* markup/styling, use the provider + hooks directly.
|
|
273
|
+
*/
|
|
274
|
+
declare function GridLayout(props: GridLayoutProps): React.JSX.Element;
|
|
275
|
+
//#endregion
|
|
276
|
+
//#region src/ResponsiveGridLayout.d.ts
|
|
277
|
+
interface ResponsiveGridLayoutProps {
|
|
278
|
+
/** Container width in pixels (e.g. from {@link useContainerWidth}). */
|
|
279
|
+
width: number;
|
|
280
|
+
/** Controlled per-breakpoint layouts. Children are keyed by item `i`. */
|
|
281
|
+
layouts: ResponsiveLayouts$1;
|
|
282
|
+
/** Called when a layout commits: the active layout and the updated map. */
|
|
283
|
+
onLayoutChange?: (layout: Layout$1, layouts: ResponsiveLayouts$1) => void;
|
|
284
|
+
/** Called when the active breakpoint changes. */
|
|
285
|
+
onBreakpointChange?: (breakpoint: string, cols: number) => void;
|
|
286
|
+
/** Breakpoint → min width (px). @default lg/md/sm/xs/xxs */
|
|
287
|
+
breakpoints?: Breakpoints$1;
|
|
288
|
+
/** Breakpoint → column count. @default 12/10/6/4/2 */
|
|
289
|
+
cols?: BreakpointCols$1;
|
|
290
|
+
rowHeight?: number;
|
|
291
|
+
margin?: [number, number];
|
|
292
|
+
containerPadding?: [number, number] | null;
|
|
293
|
+
compactor?: Compactor$1;
|
|
294
|
+
dragConfig?: DragConfig;
|
|
295
|
+
resizeConfig?: ResizeConfig;
|
|
296
|
+
isDraggable?: boolean;
|
|
297
|
+
isResizable?: boolean;
|
|
298
|
+
autoSize?: boolean;
|
|
299
|
+
className?: string;
|
|
300
|
+
style?: CSSProperties;
|
|
301
|
+
children: ReactNode;
|
|
302
|
+
}
|
|
303
|
+
/**
|
|
304
|
+
* A responsive grid: switches column count and layout by breakpoint as `width`
|
|
305
|
+
* changes, generating a breakpoint's layout from the nearest one when absent.
|
|
306
|
+
* A thin wrapper over {@link useResponsiveLayout} + {@link GridLayout}; mirrors
|
|
307
|
+
* react-grid-layout v2's `ResponsiveGridLayout`.
|
|
308
|
+
*/
|
|
309
|
+
declare function ResponsiveGridLayout(props: ResponsiveGridLayoutProps): React.JSX.Element;
|
|
310
|
+
//#endregion
|
|
311
|
+
//#region src/GridItem.d.ts
|
|
312
|
+
interface GridItemProps {
|
|
313
|
+
/** Matches the layout item's `i`. */
|
|
314
|
+
id: string;
|
|
315
|
+
children: ReactNode;
|
|
316
|
+
/** Appended to the default `snapgrid-item` class. */
|
|
317
|
+
className?: string;
|
|
318
|
+
/** Merged over (and able to override) the positioning style. */
|
|
319
|
+
style?: CSSProperties;
|
|
320
|
+
}
|
|
321
|
+
/**
|
|
322
|
+
* Convenience wrapper over {@link useGridItem}: an absolutely-positioned `<div>`
|
|
323
|
+
* with stable hooks (`.snapgrid-item`, `data-grid-id`, `data-dragging`) and the
|
|
324
|
+
* configured resize handles. For full control, use the hooks directly.
|
|
325
|
+
*/
|
|
326
|
+
declare function GridItem({
|
|
327
|
+
id,
|
|
328
|
+
children,
|
|
329
|
+
className,
|
|
330
|
+
style
|
|
331
|
+
}: GridItemProps): import("react/jsx-runtime").JSX.Element;
|
|
332
|
+
//#endregion
|
|
333
|
+
//#region src/GridPlaceholder.d.ts
|
|
334
|
+
interface GridPlaceholderProps {
|
|
335
|
+
/** Appended to the default `snapgrid-placeholder` class. */
|
|
336
|
+
className?: string;
|
|
337
|
+
/** Merged over (and able to override) the default look. */
|
|
338
|
+
style?: CSSProperties;
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* Convenience placeholder rendered from {@link useGridPlaceholder}. Renders
|
|
342
|
+
* nothing when no drag is active. For a custom placeholder, call the hook
|
|
343
|
+
* directly and render your own element with the returned `style`.
|
|
344
|
+
*/
|
|
345
|
+
declare function GridPlaceholder({
|
|
346
|
+
className,
|
|
347
|
+
style
|
|
348
|
+
}: GridPlaceholderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
349
|
+
//#endregion
|
|
350
|
+
//#region src/GridDragOverlay.d.ts
|
|
351
|
+
interface GridDragOverlayProps {
|
|
352
|
+
/** Render the floating preview for the dragged item. */
|
|
353
|
+
children: (item: LayoutItem$1) => ReactNode;
|
|
354
|
+
/** Appended to the default `snapgrid-overlay` class on the portal element. */
|
|
355
|
+
className?: string;
|
|
356
|
+
/** Merged over the positioning style. */
|
|
357
|
+
style?: CSSProperties;
|
|
358
|
+
}
|
|
359
|
+
/**
|
|
360
|
+
* Renders the floating drag preview in a portal at `document.body` — so it
|
|
361
|
+
* follows the pointer across grids without being clipped by any container.
|
|
362
|
+
* Renders nothing when this grid isn't the drag source.
|
|
363
|
+
*/
|
|
364
|
+
declare function GridDragOverlay({
|
|
365
|
+
children,
|
|
366
|
+
className,
|
|
367
|
+
style
|
|
368
|
+
}: GridDragOverlayProps): import("react").ReactPortal | null;
|
|
369
|
+
//#endregion
|
|
370
|
+
//#region src/hooks/useContainerWidth.d.ts
|
|
371
|
+
interface UseContainerWidthOptions {
|
|
372
|
+
/** Width to use until the element has been measured. @default 1280 */
|
|
373
|
+
initialWidth?: number;
|
|
374
|
+
}
|
|
375
|
+
interface UseContainerWidthResult {
|
|
376
|
+
/** Measured container width in pixels (or `initialWidth` before mount). */
|
|
377
|
+
width: number;
|
|
378
|
+
/** Whether the element has been measured at least once. */
|
|
379
|
+
mounted: boolean;
|
|
380
|
+
/** Attach to the element whose width should drive the grid. */
|
|
381
|
+
containerRef: (element: HTMLElement | null) => void;
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* Measure a container's width with a `ResizeObserver`. Replaces react-grid-layout's
|
|
385
|
+
* `WidthProvider` HOC with a hook, mirroring RGL v2's `useContainerWidth`.
|
|
386
|
+
*/
|
|
387
|
+
declare function useContainerWidth(options?: UseContainerWidthOptions): UseContainerWidthResult;
|
|
388
|
+
//#endregion
|
|
389
|
+
export { type BreakpointCols, type Breakpoints, type CompactType, type Compactor, DEFAULT_BREAKPOINTS, DEFAULT_BREAKPOINT_COLS, type DragConfig, type DragSourceInfo, type DropConfig, Feedback, type GridConfig, type GridContainerProps, GridDragOverlay, type GridDragOverlay$1 as GridDragOverlayInfo, type GridDragOverlayProps, type GridDropData, type GridEventCallback, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GridPlaceholder, type GridPlaceholderInfo, type GridPlaceholderProps, KeyboardSensor, type Layout, type LayoutItem, PointerSensor, type PositionParams, type ResizeConfig, type ResizeHandleAxis, ResponsiveGridLayout, type ResponsiveGridLayoutProps, type ResponsiveLayouts, SnapGridGroup, type SnapGridGroupProps, SnapGridProvider, type SnapGridProviderProps, type UseContainerWidthOptions, type UseContainerWidthResult, type UseGridContainerResult, type UseGridItemResult, type UseGridResizeHandleResult, type UseResponsiveLayoutOptions, type UseResponsiveLayoutResult, getCompactor, horizontalCompactor, noCompactor, useContainerWidth, useDraggable, useDroppable, useGridContainer, useGridDragOverlay, useGridItem, useGridPlaceholder, useGridResizeHandle, useResponsiveLayout, verticalCompactor };
|
|
390
|
+
//# sourceMappingURL=index.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/SnapGridProvider.tsx","../src/SnapGridGroup.tsx","../src/hooks/useGridContainer.ts","../src/hooks/useGridItem.ts","../src/hooks/useGridPlaceholder.ts","../src/hooks/dndShared.ts","../src/hooks/useGridResizeHandle.ts","../src/hooks/useGridDragOverlay.ts","../src/hooks/useResponsiveLayout.ts","../src/GridLayout.tsx","../src/ResponsiveGridLayout.tsx","../src/GridItem.tsx","../src/GridPlaceholder.tsx","../src/GridDragOverlay.tsx","../src/hooks/useContainerWidth.ts"],"mappings":"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"}
|