@sguisse/react-grid-layout 2.2.3-sguisse.3
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 +125 -0
- package/css/styles.css +120 -0
- package/dist/ResponsiveGridLayout-B_6TXsWM.d.ts +80 -0
- package/dist/ResponsiveGridLayout-Bin5MBC3.d.mts +80 -0
- package/dist/calculate-CoBSgofg.d.mts +196 -0
- package/dist/calculate-K0IBpu53.d.ts +196 -0
- package/dist/chunk-7BT7XXIT.js +74 -0
- package/dist/chunk-G3PAJYGP.mjs +72 -0
- package/dist/chunk-ITLZ7N2R.mjs +456 -0
- package/dist/chunk-J4LTYI7L.js +485 -0
- package/dist/chunk-KKV4ZCG4.mjs +583 -0
- package/dist/chunk-LQOPWRJR.js +623 -0
- package/dist/chunk-O3KX3VYW.mjs +1 -0
- package/dist/chunk-STBCV65G.js +3159 -0
- package/dist/chunk-UZL6BMXQ.mjs +3146 -0
- package/dist/chunk-ZJHF4QM5.js +2 -0
- package/dist/core.d.mts +160 -0
- package/dist/core.d.ts +160 -0
- package/dist/core.js +268 -0
- package/dist/core.mjs +3 -0
- package/dist/extras.d.mts +208 -0
- package/dist/extras.d.ts +208 -0
- package/dist/extras.js +388 -0
- package/dist/extras.mjs +380 -0
- package/dist/index.d.mts +7 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.js +152 -0
- package/dist/index.mjs +5 -0
- package/dist/legacy.d.mts +163 -0
- package/dist/legacy.d.ts +163 -0
- package/dist/legacy.js +331 -0
- package/dist/legacy.mjs +319 -0
- package/dist/position-BeP60S5h.d.ts +316 -0
- package/dist/position-CeG3Nr4z.d.mts +316 -0
- package/dist/react.d.mts +214 -0
- package/dist/react.d.ts +214 -0
- package/dist/react.js +94 -0
- package/dist/react.mjs +5 -0
- package/dist/responsive-D4zBXLkH.d.ts +145 -0
- package/dist/responsive-DQi_9rBi.d.mts +145 -0
- package/dist/types-Dbg8jAWj.d.mts +458 -0
- package/dist/types-Dbg8jAWj.d.ts +458 -0
- package/index-dev.js +23 -0
- package/index.js +8 -0
- package/package.json +238 -0
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import React__default, { ReactElement, CSSProperties, RefObject } from 'react';
|
|
2
|
+
import { p as PositionStrategy, D as DroppingPosition, R as ResizeHandleAxis, f as LayoutConstraint, d as LayoutItem, L as Layout, G as GridDragEvent, c as GridResizeEvent, b as Compactor, a as Breakpoints, B as Breakpoint, e as ResponsiveLayouts } from './types-Dbg8jAWj.js';
|
|
3
|
+
export { C as CompactType, E as EventCallback, P as Position } from './types-Dbg8jAWj.js';
|
|
4
|
+
export { G as GridLayout, a as GridLayoutProps, R as ResponsiveGridLayout, b as ResponsiveGridLayoutProps } from './ResponsiveGridLayout-B_6TXsWM.js';
|
|
5
|
+
export { b as bottom, c as cloneLayout, a as cloneLayoutItem, g as getCompactor, d as getLayoutItem, h as horizontalCompactor, n as noCompactor, s as setTopLeft, e as setTransform, f as verticalCompactor } from './position-BeP60S5h.js';
|
|
6
|
+
export { c as calcGridItemPosition, a as calcWH, b as calcXY } from './calculate-K0IBpu53.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* GridItem component
|
|
10
|
+
*
|
|
11
|
+
* Workspace migration version: removes direct react-draggable/react-resizable
|
|
12
|
+
* coupling and preserves the existing grid math/callback contracts with native
|
|
13
|
+
* pointer-driven drag and resize interactions.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: Data) => void;
|
|
17
|
+
type ResizeHandle = ReactElement | ((resizeHandleAxis: ResizeHandleAxis, ref: React__default.Ref<HTMLElement>) => ReactElement);
|
|
18
|
+
interface GridItemProps {
|
|
19
|
+
children: ReactElement;
|
|
20
|
+
cols: number;
|
|
21
|
+
containerWidth: number;
|
|
22
|
+
margin: readonly [number, number];
|
|
23
|
+
containerPadding: readonly [number, number];
|
|
24
|
+
rowHeight: number;
|
|
25
|
+
maxRows: number;
|
|
26
|
+
isDraggable: boolean;
|
|
27
|
+
isResizable: boolean;
|
|
28
|
+
isBounded: boolean;
|
|
29
|
+
static?: boolean;
|
|
30
|
+
useCSSTransforms?: boolean;
|
|
31
|
+
usePercentages?: boolean;
|
|
32
|
+
transformScale?: number;
|
|
33
|
+
positionStrategy?: PositionStrategy;
|
|
34
|
+
dragThreshold?: number;
|
|
35
|
+
droppingPosition?: DroppingPosition;
|
|
36
|
+
enableSortable?: boolean;
|
|
37
|
+
className?: string;
|
|
38
|
+
style?: CSSProperties;
|
|
39
|
+
handle?: string;
|
|
40
|
+
cancel?: string;
|
|
41
|
+
x: number;
|
|
42
|
+
y: number;
|
|
43
|
+
w: number;
|
|
44
|
+
h: number;
|
|
45
|
+
minW?: number;
|
|
46
|
+
maxW?: number;
|
|
47
|
+
minH?: number;
|
|
48
|
+
maxH?: number;
|
|
49
|
+
i: string;
|
|
50
|
+
resizeHandles?: ResizeHandleAxis[];
|
|
51
|
+
resizeHandle?: ResizeHandle;
|
|
52
|
+
constraints?: LayoutConstraint[];
|
|
53
|
+
layoutItem?: LayoutItem;
|
|
54
|
+
layout?: Layout;
|
|
55
|
+
onDragStart?: GridItemCallback<GridDragEvent>;
|
|
56
|
+
onDrag?: GridItemCallback<GridDragEvent>;
|
|
57
|
+
onDragStop?: GridItemCallback<GridDragEvent>;
|
|
58
|
+
onResizeStart?: GridItemCallback<GridResizeEvent>;
|
|
59
|
+
onResize?: GridItemCallback<GridResizeEvent>;
|
|
60
|
+
onResizeStop?: GridItemCallback<GridResizeEvent>;
|
|
61
|
+
onResizeCancel?: (itemId: string) => void;
|
|
62
|
+
/**
|
|
63
|
+
* When true, this item is currently the dnd-kit drag source (tracked by our
|
|
64
|
+
* own React state via dragOverlayId). We use this — not dnd-kit's own
|
|
65
|
+
* `isSortableDragSource` — to apply `visibility:hidden`, because dnd-kit's
|
|
66
|
+
* reset is asynchronous and may lag behind our state update, leaving the
|
|
67
|
+
* element invisible and un-clickable after the drag completes.
|
|
68
|
+
*/
|
|
69
|
+
isDndKitDragSource?: boolean;
|
|
70
|
+
}
|
|
71
|
+
declare function GridItem(props: GridItemProps): ReactElement;
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* useContainerWidth hook
|
|
75
|
+
*
|
|
76
|
+
* Observes container width using ResizeObserver and provides
|
|
77
|
+
* reactive width updates for responsive layouts.
|
|
78
|
+
*/
|
|
79
|
+
|
|
80
|
+
interface UseContainerWidthOptions {
|
|
81
|
+
/**
|
|
82
|
+
* If true, delays initial render until width is measured.
|
|
83
|
+
* Useful for SSR or when you need accurate initial measurements.
|
|
84
|
+
*/
|
|
85
|
+
measureBeforeMount?: boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Initial width to use before measurement.
|
|
88
|
+
* Defaults to 1280.
|
|
89
|
+
*/
|
|
90
|
+
initialWidth?: number;
|
|
91
|
+
}
|
|
92
|
+
interface UseContainerWidthResult {
|
|
93
|
+
/**
|
|
94
|
+
* Current container width in pixels.
|
|
95
|
+
*/
|
|
96
|
+
width: number;
|
|
97
|
+
/**
|
|
98
|
+
* Whether the container has been measured at least once.
|
|
99
|
+
*/
|
|
100
|
+
mounted: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Ref to attach to the container element.
|
|
103
|
+
*/
|
|
104
|
+
containerRef: RefObject<HTMLDivElement | null>;
|
|
105
|
+
/**
|
|
106
|
+
* Manually trigger a width measurement.
|
|
107
|
+
* Useful when the container size might change without a resize event.
|
|
108
|
+
*/
|
|
109
|
+
measureWidth: () => void;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Hook to observe and track container width.
|
|
113
|
+
*
|
|
114
|
+
* Replaces the WidthProvider HOC with a more composable approach.
|
|
115
|
+
*
|
|
116
|
+
* @example
|
|
117
|
+
* ```tsx
|
|
118
|
+
* function MyGrid() {
|
|
119
|
+
* const { width, containerRef, mounted } = useContainerWidth();
|
|
120
|
+
*
|
|
121
|
+
* return (
|
|
122
|
+
* <div ref={containerRef}>
|
|
123
|
+
* {mounted && <GridLayout width={width} {...props} />}
|
|
124
|
+
* </div>
|
|
125
|
+
* );
|
|
126
|
+
* }
|
|
127
|
+
* ```
|
|
128
|
+
*/ declare function useContainerWidth(options?: UseContainerWidthOptions): UseContainerWidthResult;
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* useGridLayout hook
|
|
132
|
+
*
|
|
133
|
+
* Core hook for managing grid layout state, including drag, resize, and drop operations.
|
|
134
|
+
* This extracts the state management logic from ReactGridLayout into a reusable hook.
|
|
135
|
+
*/
|
|
136
|
+
|
|
137
|
+
interface DragState {
|
|
138
|
+
activeDrag: LayoutItem | null;
|
|
139
|
+
oldDragItem: LayoutItem | null;
|
|
140
|
+
oldLayout: Layout | null;
|
|
141
|
+
}
|
|
142
|
+
interface ResizeState {
|
|
143
|
+
resizing: boolean;
|
|
144
|
+
oldResizeItem: LayoutItem | null;
|
|
145
|
+
oldLayout: Layout | null;
|
|
146
|
+
}
|
|
147
|
+
interface DropState {
|
|
148
|
+
droppingDOMNode: React.ReactElement | null;
|
|
149
|
+
droppingPosition: DroppingPosition | null;
|
|
150
|
+
}
|
|
151
|
+
interface UseGridLayoutOptions {
|
|
152
|
+
layout: Layout;
|
|
153
|
+
cols: number;
|
|
154
|
+
preventCollision?: boolean;
|
|
155
|
+
onLayoutChange?: (layout: Layout) => void;
|
|
156
|
+
compactor?: Compactor;
|
|
157
|
+
droppingItemId?: string;
|
|
158
|
+
}
|
|
159
|
+
interface UseGridLayoutResult {
|
|
160
|
+
layout: Layout;
|
|
161
|
+
setLayout: (layout: Layout) => void;
|
|
162
|
+
dragState: DragState;
|
|
163
|
+
resizeState: ResizeState;
|
|
164
|
+
dropState: DropState;
|
|
165
|
+
onDragStart: (itemId: string, x: number, y: number) => LayoutItem | null;
|
|
166
|
+
onDrag: (itemId: string, x: number, y: number) => void;
|
|
167
|
+
onDragStop: (itemId: string, x: number, y: number) => void;
|
|
168
|
+
cancelDrag: () => void;
|
|
169
|
+
onResizeStart: (itemId: string) => LayoutItem | null;
|
|
170
|
+
onResize: (itemId: string, w: number, h: number, x?: number, y?: number) => void;
|
|
171
|
+
onResizeStop: (itemId: string, w: number, h: number, x?: number, y?: number) => void;
|
|
172
|
+
cancelResize: () => void;
|
|
173
|
+
onDropDragOver: (droppingItem: LayoutItem, position: DroppingPosition) => void;
|
|
174
|
+
onDropDragLeave: () => void;
|
|
175
|
+
onDrop: (droppingItem: LayoutItem) => void;
|
|
176
|
+
containerHeight: number;
|
|
177
|
+
isInteracting: boolean;
|
|
178
|
+
compactor: Compactor;
|
|
179
|
+
}
|
|
180
|
+
declare function useGridLayout(options: UseGridLayoutOptions): UseGridLayoutResult;
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* useResponsiveLayout hook
|
|
184
|
+
*
|
|
185
|
+
* Manages responsive breakpoints and layout generation for different screen sizes.
|
|
186
|
+
* Extracts state management from ResponsiveReactGridLayout into a reusable hook.
|
|
187
|
+
*/
|
|
188
|
+
|
|
189
|
+
type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
|
|
190
|
+
declare const DEFAULT_BREAKPOINTS: Breakpoints<DefaultBreakpoints>;
|
|
191
|
+
declare const DEFAULT_COLS: Breakpoints<DefaultBreakpoints>;
|
|
192
|
+
interface UseResponsiveLayoutOptions<B extends Breakpoint = DefaultBreakpoints> {
|
|
193
|
+
width: number;
|
|
194
|
+
breakpoint?: B;
|
|
195
|
+
breakpoints?: Breakpoints<B>;
|
|
196
|
+
cols?: Breakpoints<B>;
|
|
197
|
+
layouts?: ResponsiveLayouts<B>;
|
|
198
|
+
compactor?: Compactor;
|
|
199
|
+
onBreakpointChange?: (newBreakpoint: B, cols: number) => void;
|
|
200
|
+
onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;
|
|
201
|
+
onWidthChange?: (width: number, margin: readonly [number, number], cols: number, containerPadding: readonly [number, number] | null) => void;
|
|
202
|
+
}
|
|
203
|
+
interface UseResponsiveLayoutResult<B extends Breakpoint = DefaultBreakpoints> {
|
|
204
|
+
layout: Layout;
|
|
205
|
+
layouts: ResponsiveLayouts<B>;
|
|
206
|
+
breakpoint: B;
|
|
207
|
+
cols: number;
|
|
208
|
+
setLayoutForBreakpoint: (breakpoint: B, layout: Layout) => void;
|
|
209
|
+
setLayouts: (layouts: ResponsiveLayouts<B>) => void;
|
|
210
|
+
sortedBreakpoints: B[];
|
|
211
|
+
}
|
|
212
|
+
declare function useResponsiveLayout<B extends Breakpoint = DefaultBreakpoints>(options: UseResponsiveLayoutOptions<B>): UseResponsiveLayoutResult<B>;
|
|
213
|
+
|
|
214
|
+
export { Breakpoint, Breakpoints, Compactor, DEFAULT_BREAKPOINTS, DEFAULT_COLS, type DefaultBreakpoints, type DragState, type DropState, DroppingPosition, GridDragEvent, GridItem, type GridItemCallback, type GridItemProps, GridResizeEvent, Layout, LayoutItem, type ResizeHandle, ResizeHandleAxis, type ResizeState, ResponsiveLayouts, type UseContainerWidthOptions, type UseContainerWidthResult, type UseGridLayoutOptions, type UseGridLayoutResult, type UseResponsiveLayoutOptions, type UseResponsiveLayoutResult, useContainerWidth, useGridLayout, useResponsiveLayout };
|
package/dist/react.js
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk7BT7XXIT_js = require('./chunk-7BT7XXIT.js');
|
|
4
|
+
require('./chunk-ZJHF4QM5.js');
|
|
5
|
+
var chunkSTBCV65G_js = require('./chunk-STBCV65G.js');
|
|
6
|
+
var chunkLQOPWRJR_js = require('./chunk-LQOPWRJR.js');
|
|
7
|
+
var chunkJ4LTYI7L_js = require('./chunk-J4LTYI7L.js');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "useContainerWidth", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () { return chunk7BT7XXIT_js.useContainerWidth; }
|
|
14
|
+
});
|
|
15
|
+
Object.defineProperty(exports, "DEFAULT_BREAKPOINTS", {
|
|
16
|
+
enumerable: true,
|
|
17
|
+
get: function () { return chunkSTBCV65G_js.DEFAULT_BREAKPOINTS; }
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, "DEFAULT_COLS", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () { return chunkSTBCV65G_js.DEFAULT_COLS; }
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "GridItem", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () { return chunkSTBCV65G_js.GridItem; }
|
|
26
|
+
});
|
|
27
|
+
Object.defineProperty(exports, "GridLayout", {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () { return chunkSTBCV65G_js.GridLayout; }
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "ResponsiveGridLayout", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () { return chunkSTBCV65G_js.ResponsiveGridLayout; }
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(exports, "useGridLayout", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
get: function () { return chunkSTBCV65G_js.useGridLayout; }
|
|
38
|
+
});
|
|
39
|
+
Object.defineProperty(exports, "useResponsiveLayout", {
|
|
40
|
+
enumerable: true,
|
|
41
|
+
get: function () { return chunkSTBCV65G_js.useResponsiveLayout; }
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(exports, "getCompactor", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () { return chunkLQOPWRJR_js.getCompactor; }
|
|
46
|
+
});
|
|
47
|
+
Object.defineProperty(exports, "horizontalCompactor", {
|
|
48
|
+
enumerable: true,
|
|
49
|
+
get: function () { return chunkLQOPWRJR_js.horizontalCompactor; }
|
|
50
|
+
});
|
|
51
|
+
Object.defineProperty(exports, "noCompactor", {
|
|
52
|
+
enumerable: true,
|
|
53
|
+
get: function () { return chunkLQOPWRJR_js.noCompactor; }
|
|
54
|
+
});
|
|
55
|
+
Object.defineProperty(exports, "setTopLeft", {
|
|
56
|
+
enumerable: true,
|
|
57
|
+
get: function () { return chunkLQOPWRJR_js.setTopLeft; }
|
|
58
|
+
});
|
|
59
|
+
Object.defineProperty(exports, "setTransform", {
|
|
60
|
+
enumerable: true,
|
|
61
|
+
get: function () { return chunkLQOPWRJR_js.setTransform; }
|
|
62
|
+
});
|
|
63
|
+
Object.defineProperty(exports, "verticalCompactor", {
|
|
64
|
+
enumerable: true,
|
|
65
|
+
get: function () { return chunkLQOPWRJR_js.verticalCompactor; }
|
|
66
|
+
});
|
|
67
|
+
Object.defineProperty(exports, "bottom", {
|
|
68
|
+
enumerable: true,
|
|
69
|
+
get: function () { return chunkJ4LTYI7L_js.bottom; }
|
|
70
|
+
});
|
|
71
|
+
Object.defineProperty(exports, "calcGridItemPosition", {
|
|
72
|
+
enumerable: true,
|
|
73
|
+
get: function () { return chunkJ4LTYI7L_js.calcGridItemPosition; }
|
|
74
|
+
});
|
|
75
|
+
Object.defineProperty(exports, "calcWH", {
|
|
76
|
+
enumerable: true,
|
|
77
|
+
get: function () { return chunkJ4LTYI7L_js.calcWH; }
|
|
78
|
+
});
|
|
79
|
+
Object.defineProperty(exports, "calcXY", {
|
|
80
|
+
enumerable: true,
|
|
81
|
+
get: function () { return chunkJ4LTYI7L_js.calcXY; }
|
|
82
|
+
});
|
|
83
|
+
Object.defineProperty(exports, "cloneLayout", {
|
|
84
|
+
enumerable: true,
|
|
85
|
+
get: function () { return chunkJ4LTYI7L_js.cloneLayout; }
|
|
86
|
+
});
|
|
87
|
+
Object.defineProperty(exports, "cloneLayoutItem", {
|
|
88
|
+
enumerable: true,
|
|
89
|
+
get: function () { return chunkJ4LTYI7L_js.cloneLayoutItem; }
|
|
90
|
+
});
|
|
91
|
+
Object.defineProperty(exports, "getLayoutItem", {
|
|
92
|
+
enumerable: true,
|
|
93
|
+
get: function () { return chunkJ4LTYI7L_js.getLayoutItem; }
|
|
94
|
+
});
|
package/dist/react.mjs
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { useContainerWidth } from './chunk-G3PAJYGP.mjs';
|
|
2
|
+
import './chunk-O3KX3VYW.mjs';
|
|
3
|
+
export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, GridItem, GridLayout, ResponsiveGridLayout, useGridLayout, useResponsiveLayout } from './chunk-UZL6BMXQ.mjs';
|
|
4
|
+
export { getCompactor, horizontalCompactor, noCompactor, setTopLeft, setTransform, verticalCompactor } from './chunk-KKV4ZCG4.mjs';
|
|
5
|
+
export { bottom, calcGridItemPosition, calcWH, calcXY, cloneLayout, cloneLayoutItem, getLayoutItem } from './chunk-ITLZ7N2R.mjs';
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { d as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, e as ResponsiveLayouts, a as Breakpoints, b as Compactor } from './types-Dbg8jAWj.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Collision detection utilities for grid layouts.
|
|
5
|
+
*
|
|
6
|
+
* These functions determine if and where layout items overlap.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Check if two layout items collide (overlap).
|
|
11
|
+
*
|
|
12
|
+
* Two items collide if their bounding boxes overlap and they are
|
|
13
|
+
* not the same item.
|
|
14
|
+
*
|
|
15
|
+
* @param l1 - First layout item
|
|
16
|
+
* @param l2 - Second layout item
|
|
17
|
+
* @returns true if the items collide
|
|
18
|
+
*/
|
|
19
|
+
declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Find the first item in the layout that collides with the given item.
|
|
22
|
+
*
|
|
23
|
+
* @param layout - Layout to search
|
|
24
|
+
* @param layoutItem - Item to check for collisions
|
|
25
|
+
* @returns The first colliding item, or undefined if none
|
|
26
|
+
*/
|
|
27
|
+
declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* Find all items in the layout that collide with the given item.
|
|
30
|
+
*
|
|
31
|
+
* @param layout - Layout to search
|
|
32
|
+
* @param layoutItem - Item to check for collisions
|
|
33
|
+
* @returns Array of all colliding items (may be empty)
|
|
34
|
+
*/
|
|
35
|
+
declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Sorting utilities for grid layouts.
|
|
39
|
+
*
|
|
40
|
+
* These functions sort layout items for compaction and iteration.
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Sort layout items based on the compaction type.
|
|
45
|
+
*
|
|
46
|
+
* - Vertical compaction: sort by row (y) then column (x)
|
|
47
|
+
* - Horizontal compaction: sort by column (x) then row (y)
|
|
48
|
+
* - No compaction (null): return original order
|
|
49
|
+
*
|
|
50
|
+
* Does not modify the original layout.
|
|
51
|
+
*
|
|
52
|
+
* @param layout - Layout to sort
|
|
53
|
+
* @param compactType - Type of compaction
|
|
54
|
+
* @returns Sorted layout
|
|
55
|
+
*/
|
|
56
|
+
declare function sortLayoutItems(layout: Layout, compactType: CompactType): LayoutItem[];
|
|
57
|
+
/**
|
|
58
|
+
* Sort layout items by row ascending, then column ascending.
|
|
59
|
+
*
|
|
60
|
+
* Items are ordered from top-left to bottom-right, row by row.
|
|
61
|
+
* This is the natural reading order for vertical compaction.
|
|
62
|
+
*
|
|
63
|
+
* Does not modify the original layout.
|
|
64
|
+
*
|
|
65
|
+
* @param layout - Layout to sort
|
|
66
|
+
* @returns Sorted array of layout items
|
|
67
|
+
*/
|
|
68
|
+
declare function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[];
|
|
69
|
+
/**
|
|
70
|
+
* Sort layout items by column ascending, then row ascending.
|
|
71
|
+
*
|
|
72
|
+
* Items are ordered from top-left to bottom-right, column by column.
|
|
73
|
+
* This is the natural order for horizontal compaction.
|
|
74
|
+
*
|
|
75
|
+
* Does not modify the original layout.
|
|
76
|
+
*
|
|
77
|
+
* @param layout - Layout to sort
|
|
78
|
+
* @returns Sorted array of layout items
|
|
79
|
+
*/
|
|
80
|
+
declare function sortLayoutItemsByColRow(layout: Layout): LayoutItem[];
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Responsive layout utilities.
|
|
84
|
+
*
|
|
85
|
+
* Functions for handling responsive breakpoints and layout generation.
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Sort breakpoints by width (ascending).
|
|
90
|
+
*
|
|
91
|
+
* Returns an array of breakpoint names sorted from smallest to largest.
|
|
92
|
+
* E.g., ['xxs', 'xs', 'sm', 'md', 'lg']
|
|
93
|
+
*
|
|
94
|
+
* @param breakpoints - Map of breakpoint names to widths
|
|
95
|
+
* @returns Sorted array of breakpoint names
|
|
96
|
+
*/
|
|
97
|
+
declare function sortBreakpoints<B extends Breakpoint>(breakpoints: Breakpoints<B>): B[];
|
|
98
|
+
/**
|
|
99
|
+
* Get the active breakpoint for a given width.
|
|
100
|
+
*
|
|
101
|
+
* Returns the highest breakpoint that is valid for the width (width > breakpoint).
|
|
102
|
+
*
|
|
103
|
+
* @param breakpoints - Map of breakpoint names to widths
|
|
104
|
+
* @param width - Container width in pixels
|
|
105
|
+
* @returns Active breakpoint name
|
|
106
|
+
*/
|
|
107
|
+
declare function getBreakpointFromWidth<B extends Breakpoint>(breakpoints: Breakpoints<B>, width: number): B;
|
|
108
|
+
/**
|
|
109
|
+
* Get the column count for a breakpoint.
|
|
110
|
+
*
|
|
111
|
+
* @param breakpoint - Breakpoint name
|
|
112
|
+
* @param cols - Map of breakpoint names to column counts
|
|
113
|
+
* @returns Number of columns for the breakpoint
|
|
114
|
+
* @throws Error if breakpoint is not defined in cols
|
|
115
|
+
*/
|
|
116
|
+
declare function getColsFromBreakpoint<B extends Breakpoint>(breakpoint: B, cols: Breakpoints<B>): number;
|
|
117
|
+
/**
|
|
118
|
+
* Find or generate a layout for a breakpoint.
|
|
119
|
+
*
|
|
120
|
+
* If a layout exists for the breakpoint, returns a clone.
|
|
121
|
+
* Otherwise, generates a new layout from the nearest larger breakpoint.
|
|
122
|
+
*
|
|
123
|
+
* @param layouts - Existing layouts by breakpoint
|
|
124
|
+
* @param breakpoints - Breakpoint definitions
|
|
125
|
+
* @param breakpoint - Target breakpoint
|
|
126
|
+
* @param lastBreakpoint - Previous breakpoint (for fallback)
|
|
127
|
+
* @param cols - Column count for the target breakpoint
|
|
128
|
+
* @param compactTypeOrCompactor - Compaction type string (legacy) or Compactor object
|
|
129
|
+
* @returns Layout for the breakpoint
|
|
130
|
+
*/
|
|
131
|
+
declare function findOrGenerateResponsiveLayout<B extends Breakpoint>(layouts: ResponsiveLayouts<B>, breakpoints: Breakpoints<B>, breakpoint: B, lastBreakpoint: B, cols: number, compactTypeOrCompactor: CompactType | Compactor): Layout;
|
|
132
|
+
type IndentationValue<B extends Breakpoint> = readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
|
|
133
|
+
/**
|
|
134
|
+
* Get margin or padding value for a breakpoint.
|
|
135
|
+
*
|
|
136
|
+
* Supports both fixed values ([x, y]) and breakpoint-specific values
|
|
137
|
+
* ({ lg: [x, y], md: [x, y], ... }).
|
|
138
|
+
*
|
|
139
|
+
* @param value - Fixed value or breakpoint-specific map
|
|
140
|
+
* @param breakpoint - Current breakpoint
|
|
141
|
+
* @returns Margin/padding tuple [x, y]
|
|
142
|
+
*/
|
|
143
|
+
declare function getIndentationValue<B extends Breakpoint>(value: IndentationValue<B>, breakpoint: B): readonly [number, number];
|
|
144
|
+
|
|
145
|
+
export { getBreakpointFromWidth as a, getColsFromBreakpoint as b, collides as c, getFirstCollision as d, sortLayoutItemsByColRow as e, findOrGenerateResponsiveLayout as f, getAllCollisions as g, sortLayoutItemsByRowCol as h, getIndentationValue as i, sortBreakpoints as j, sortLayoutItems as s };
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { d as LayoutItem, L as Layout, C as CompactType, B as Breakpoint, e as ResponsiveLayouts, a as Breakpoints, b as Compactor } from './types-Dbg8jAWj.mjs';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Collision detection utilities for grid layouts.
|
|
5
|
+
*
|
|
6
|
+
* These functions determine if and where layout items overlap.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Check if two layout items collide (overlap).
|
|
11
|
+
*
|
|
12
|
+
* Two items collide if their bounding boxes overlap and they are
|
|
13
|
+
* not the same item.
|
|
14
|
+
*
|
|
15
|
+
* @param l1 - First layout item
|
|
16
|
+
* @param l2 - Second layout item
|
|
17
|
+
* @returns true if the items collide
|
|
18
|
+
*/
|
|
19
|
+
declare function collides(l1: LayoutItem, l2: LayoutItem): boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Find the first item in the layout that collides with the given item.
|
|
22
|
+
*
|
|
23
|
+
* @param layout - Layout to search
|
|
24
|
+
* @param layoutItem - Item to check for collisions
|
|
25
|
+
* @returns The first colliding item, or undefined if none
|
|
26
|
+
*/
|
|
27
|
+
declare function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* Find all items in the layout that collide with the given item.
|
|
30
|
+
*
|
|
31
|
+
* @param layout - Layout to search
|
|
32
|
+
* @param layoutItem - Item to check for collisions
|
|
33
|
+
* @returns Array of all colliding items (may be empty)
|
|
34
|
+
*/
|
|
35
|
+
declare function getAllCollisions(layout: Layout, layoutItem: LayoutItem): LayoutItem[];
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Sorting utilities for grid layouts.
|
|
39
|
+
*
|
|
40
|
+
* These functions sort layout items for compaction and iteration.
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Sort layout items based on the compaction type.
|
|
45
|
+
*
|
|
46
|
+
* - Vertical compaction: sort by row (y) then column (x)
|
|
47
|
+
* - Horizontal compaction: sort by column (x) then row (y)
|
|
48
|
+
* - No compaction (null): return original order
|
|
49
|
+
*
|
|
50
|
+
* Does not modify the original layout.
|
|
51
|
+
*
|
|
52
|
+
* @param layout - Layout to sort
|
|
53
|
+
* @param compactType - Type of compaction
|
|
54
|
+
* @returns Sorted layout
|
|
55
|
+
*/
|
|
56
|
+
declare function sortLayoutItems(layout: Layout, compactType: CompactType): LayoutItem[];
|
|
57
|
+
/**
|
|
58
|
+
* Sort layout items by row ascending, then column ascending.
|
|
59
|
+
*
|
|
60
|
+
* Items are ordered from top-left to bottom-right, row by row.
|
|
61
|
+
* This is the natural reading order for vertical compaction.
|
|
62
|
+
*
|
|
63
|
+
* Does not modify the original layout.
|
|
64
|
+
*
|
|
65
|
+
* @param layout - Layout to sort
|
|
66
|
+
* @returns Sorted array of layout items
|
|
67
|
+
*/
|
|
68
|
+
declare function sortLayoutItemsByRowCol(layout: Layout): LayoutItem[];
|
|
69
|
+
/**
|
|
70
|
+
* Sort layout items by column ascending, then row ascending.
|
|
71
|
+
*
|
|
72
|
+
* Items are ordered from top-left to bottom-right, column by column.
|
|
73
|
+
* This is the natural order for horizontal compaction.
|
|
74
|
+
*
|
|
75
|
+
* Does not modify the original layout.
|
|
76
|
+
*
|
|
77
|
+
* @param layout - Layout to sort
|
|
78
|
+
* @returns Sorted array of layout items
|
|
79
|
+
*/
|
|
80
|
+
declare function sortLayoutItemsByColRow(layout: Layout): LayoutItem[];
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Responsive layout utilities.
|
|
84
|
+
*
|
|
85
|
+
* Functions for handling responsive breakpoints and layout generation.
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Sort breakpoints by width (ascending).
|
|
90
|
+
*
|
|
91
|
+
* Returns an array of breakpoint names sorted from smallest to largest.
|
|
92
|
+
* E.g., ['xxs', 'xs', 'sm', 'md', 'lg']
|
|
93
|
+
*
|
|
94
|
+
* @param breakpoints - Map of breakpoint names to widths
|
|
95
|
+
* @returns Sorted array of breakpoint names
|
|
96
|
+
*/
|
|
97
|
+
declare function sortBreakpoints<B extends Breakpoint>(breakpoints: Breakpoints<B>): B[];
|
|
98
|
+
/**
|
|
99
|
+
* Get the active breakpoint for a given width.
|
|
100
|
+
*
|
|
101
|
+
* Returns the highest breakpoint that is valid for the width (width > breakpoint).
|
|
102
|
+
*
|
|
103
|
+
* @param breakpoints - Map of breakpoint names to widths
|
|
104
|
+
* @param width - Container width in pixels
|
|
105
|
+
* @returns Active breakpoint name
|
|
106
|
+
*/
|
|
107
|
+
declare function getBreakpointFromWidth<B extends Breakpoint>(breakpoints: Breakpoints<B>, width: number): B;
|
|
108
|
+
/**
|
|
109
|
+
* Get the column count for a breakpoint.
|
|
110
|
+
*
|
|
111
|
+
* @param breakpoint - Breakpoint name
|
|
112
|
+
* @param cols - Map of breakpoint names to column counts
|
|
113
|
+
* @returns Number of columns for the breakpoint
|
|
114
|
+
* @throws Error if breakpoint is not defined in cols
|
|
115
|
+
*/
|
|
116
|
+
declare function getColsFromBreakpoint<B extends Breakpoint>(breakpoint: B, cols: Breakpoints<B>): number;
|
|
117
|
+
/**
|
|
118
|
+
* Find or generate a layout for a breakpoint.
|
|
119
|
+
*
|
|
120
|
+
* If a layout exists for the breakpoint, returns a clone.
|
|
121
|
+
* Otherwise, generates a new layout from the nearest larger breakpoint.
|
|
122
|
+
*
|
|
123
|
+
* @param layouts - Existing layouts by breakpoint
|
|
124
|
+
* @param breakpoints - Breakpoint definitions
|
|
125
|
+
* @param breakpoint - Target breakpoint
|
|
126
|
+
* @param lastBreakpoint - Previous breakpoint (for fallback)
|
|
127
|
+
* @param cols - Column count for the target breakpoint
|
|
128
|
+
* @param compactTypeOrCompactor - Compaction type string (legacy) or Compactor object
|
|
129
|
+
* @returns Layout for the breakpoint
|
|
130
|
+
*/
|
|
131
|
+
declare function findOrGenerateResponsiveLayout<B extends Breakpoint>(layouts: ResponsiveLayouts<B>, breakpoints: Breakpoints<B>, breakpoint: B, lastBreakpoint: B, cols: number, compactTypeOrCompactor: CompactType | Compactor): Layout;
|
|
132
|
+
type IndentationValue<B extends Breakpoint> = readonly [number, number] | Partial<Record<B, readonly [number, number]>>;
|
|
133
|
+
/**
|
|
134
|
+
* Get margin or padding value for a breakpoint.
|
|
135
|
+
*
|
|
136
|
+
* Supports both fixed values ([x, y]) and breakpoint-specific values
|
|
137
|
+
* ({ lg: [x, y], md: [x, y], ... }).
|
|
138
|
+
*
|
|
139
|
+
* @param value - Fixed value or breakpoint-specific map
|
|
140
|
+
* @param breakpoint - Current breakpoint
|
|
141
|
+
* @returns Margin/padding tuple [x, y]
|
|
142
|
+
*/
|
|
143
|
+
declare function getIndentationValue<B extends Breakpoint>(value: IndentationValue<B>, breakpoint: B): readonly [number, number];
|
|
144
|
+
|
|
145
|
+
export { getBreakpointFromWidth as a, getColsFromBreakpoint as b, collides as c, getFirstCollision as d, sortLayoutItemsByColRow as e, findOrGenerateResponsiveLayout as f, getAllCollisions as g, sortLayoutItemsByRowCol as h, getIndentationValue as i, sortBreakpoints as j, sortLayoutItems as s };
|