react-resizable-panels 0.0.3 → 0.0.5

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -0
  3. package/dist/react-resizable-panels.d.ts +3 -2
  4. package/dist/react-resizable-panels.d.ts.map +1 -1
  5. package/dist/react-resizable-panels.js +14 -8
  6. package/dist/react-resizable-panels.js.map +1 -1
  7. package/dist/react-resizable-panels.module.js +14 -8
  8. package/dist/react-resizable-panels.module.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/Panel.tsx +4 -1
  11. package/src/PanelGroup.tsx +11 -6
  12. package/src/types.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.0.5
4
+ * TypeScript props type fix
5
+
6
+ ## 0.0.4
7
+ * [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.
8
+
3
9
  ## 0.0.3
4
10
  * [#3](https://github.com/bvaughn/react-resizable-panels/issues/3): `Panel`s can be conditionally rendered within a group. `PanelGroup` will persist separate layouts for each combination of visible panels.
5
11
 
package/README.md CHANGED
@@ -39,6 +39,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
39
39
  | `defaultSize` | `?number` | Initial size of panel (relative to other panels within the group)
40
40
  | `id` | `string` | Panel id (must be unique within the current group)
41
41
  | `minSize` | `?number` | Minum allowable size of panel (0.0 - 1.0)
42
+ | `order` | `?number` | Order of panel within group; required for groups with conditionally rendered panels
42
43
 
43
44
  ### `PanelResizeHandle`
44
45
  | prop | type | description
package/dist/react-resizable-panels.d.ts CHANGED
@@ -1,15 +1,16 @@
1
1
  import { ReactNode } from "react";
2
2
  type Direction = "horizontal" | "vertical";
3
- export function Panel({ children, className, defaultSize, id, minSize, }: {
3
+ export function Panel({ children, className, defaultSize, id, minSize, order, }: {
4
4
  children?: ReactNode;
5
5
  className?: string;
6
6
  defaultSize?: number;
7
7
  id: string;
8
8
  minSize?: number;
9
+ order?: number | null;
9
10
  }): JSX.Element;
10
11
  type Props = {
11
12
  autoSaveId?: string;
12
- children?: ReactNode[];
13
+ children?: ReactNode;
13
14
  className?: string;
14
15
  direction: Direction;
15
16
  height: number;
package/dist/react-resizable-panels.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AEOlD,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,GACd,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,eAuCA;AC5CD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,eA8LP;AC7ND,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,UAAU,EACV,WAAW,GACZ,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB,eAoEA","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/PanelGroup.tsx","packages/react-resizable-panels/src/src/PanelResizeHandle.tsx","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map","sourceRoot":"../../../"}
1
+ {"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AEOlD,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eAwCA;AC/CD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,eA8LP;AC7ND,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,UAAU,EACV,WAAW,GACZ,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB,eAoEA","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/PanelGroup.tsx","packages/react-resizable-panels/src/src/PanelResizeHandle.tsx","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map","sourceRoot":"../../../"}
package/dist/react-resizable-panels.js CHANGED
@@ -14,7 +14,7 @@ $parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$expo
14
14
  const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext)(null);
15
15
 
16
16
 
17
- function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1 }) {
17
+ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1 , order: order = null }) {
18
18
  const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
19
19
  if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
20
20
  if (minSize > defaultSize) {
@@ -26,7 +26,8 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
26
26
  const panel = {
27
27
  defaultSize: defaultSize,
28
28
  id: id,
29
- minSize: minSize
29
+ minSize: minSize,
30
+ order: order
30
31
  };
31
32
  registerPanel(id, panel);
32
33
  return ()=>{
@@ -36,6 +37,7 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
36
37
  defaultSize,
37
38
  id,
38
39
  minSize,
40
+ order,
39
41
  registerPanel,
40
42
  unregisterPanel
41
43
  ]);
@@ -46,7 +48,7 @@ function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null ,
46
48
  children: children
47
49
  }, void 0, false, {
48
50
  fileName: "packages/react-resizable-panels/src/Panel.tsx",
49
- lineNumber: 55,
51
+ lineNumber: 58,
50
52
  columnNumber: 5
51
53
  }, this);
52
54
  }
@@ -92,7 +94,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
92
94
  } catch (error) {}
93
95
  if (defaultSizes != null) setSizes(defaultSizes);
94
96
  else {
95
- const panelsArray = Array.from(panels.values());
97
+ const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
96
98
  const totalWeight = panelsArray.reduce((weight, panel)=>{
97
99
  return weight + panel.defaultSize;
98
100
  }, 0);
@@ -196,7 +198,7 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
196
198
  }
197
199
  function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
198
200
  if (delta === 0) return prevSizes;
199
- const panelsArray = Array.from(panels.values());
201
+ const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
200
202
  const nextSizes = prevSizes.concat();
201
203
  let deltaApplied = 0;
202
204
  // A resizing panel affects the panels before or after it.
@@ -233,11 +235,12 @@ function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, p
233
235
  return nextSizes;
234
236
  }
235
237
  function $d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels) {
236
- const panelIds = Array.from(panels.keys()).sort();
238
+ const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
239
+ const panelIds = panelsArray.map((panel)=>panel.id);
237
240
  return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
238
241
  }
239
242
  function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width) {
240
- const panelsArray = Array.from(panels.values());
243
+ const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
241
244
  let index = panelsArray.findIndex((panel)=>panel.id === id);
242
245
  if (index < 0) return 0;
243
246
  let scaledOffset = 0;
@@ -250,12 +253,15 @@ function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, w
250
253
  function $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width) {
251
254
  const totalSize = direction === "horizontal" ? width : height;
252
255
  if (panels.size === 1) return totalSize;
253
- const panelsArray = Array.from(panels.values());
256
+ const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
254
257
  const index = panelsArray.findIndex((panel)=>panel.id === id);
255
258
  const size = sizes[index];
256
259
  if (size == null) return 0;
257
260
  return Math.round(size * totalSize);
258
261
  }
262
+ function $d428eaeef644efb2$var$panelsMapToSortedArray(panels) {
263
+ return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
264
+ }
259
265
 
260
266
 
261
267
 
package/dist/react-resizable-panels.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;\n unregisterPanel: (id: string) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(\n createLocalStorageKey(autoSaveId, panels)\n );\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray: PanelData[] = Array.from(panels.values());\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n if (autoSaveId) {\n if (sizes.length === 0 || sizes.length !== panels.size) {\n return;\n }\n\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(\n createLocalStorageKey(autoSaveId, panels),\n JSON.stringify(sizes)\n );\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (idBefore: string, idAfter: string) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n // TODO [issues/5] Add to Map\n },\n []\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray: PanelData[] = Array.from(panels.values());\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction createLocalStorageKey(\n autoSaveId: string,\n panels: Map<string, PanelData>\n): string {\n const panelIds = Array.from(panels.keys()).sort();\n\n return `PanelGroup:sizes:${autoSaveId}${panelIds.join(\"|\")}`;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray: PanelData[] = Array.from(panels.values());\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray: PanelData[] = Array.from(panels.values());\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: string;\n panelBefore: string;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(\n null\n );\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map","sourceRoot":"../../../"}
1
+ {"mappings":";;;;;;;;;;ACAA;;ACAA;AAIO,MAAM,4CAAoB,CAAA,GAAA,0BAAY,EAMnC,IAAI;;;ADHC,kDAAe,YAC5B,WAAW,IAAI,cACf,YAAY,kBACZ,cAAc,UACd,GAAE,WACF,UAAU,aACV,QAAQ,IAAI,GAQb,EAAE;IACD,MAAM,UAAU,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAgB;IAC3C,IAAI,YAAY,IAAI,EAClB,MAAM,MACJ,CAAC,+DAA+D,CAAC,EACjE;IAGJ,IAAI,UAAU,aAAa;QACzB,QAAQ,KAAK,CACX,CAAC,cAAc,EAAE,QAAQ,oCAAoC,EAAE,YAAY,CAAC;QAG9E,cAAc;IAChB,CAAC;IAED,MAAM,iBAAE,cAAa,iBAAE,cAAa,mBAAE,gBAAe,EAAE,GAAG;IAE1D,CAAA,GAAA,4BAAe,AAAD,EAAE,IAAM;QACpB,MAAM,QAAQ;yBACZ;gBACA;qBACA;mBACA;QACF;QAEA,cAAc,IAAI;QAElB,OAAO,IAAM;YACX,gBAAgB;QAClB;IACF,GAAG;QAAC;QAAa;QAAI;QAAS;QAAO;QAAe;KAAgB;IAEpE,MAAM,QAAQ,cAAc;IAE5B,qBACE,sCAAC;QAAI,WAAW;QAAW,OAAO;kBAC/B;;;;;;AAGP;;AD7DA;AGAA;;;AAuBA,MAAM,kCAAY;AAMH,kDAAoB,cACjC,WAAU,YACV,WAAW,IAAI,cACf,YAAY,gBACZ,UAAS,UACT,OAAM,SACN,MAAK,EACC,EAAE;IACR,MAAM,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAA0B,IAAI;IAEjE,2DAA2D;IAC3D,MAAM,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,qBAAO,EAAY,EAAE;IAE/C,0FAA0F;IAC1F,MAAM,qBAAqB,CAAA,GAAA,mBAAK,EAM7B;mBACD;gBACA;gBACA;eACA;eACA;IACF;IACA,CAAA,GAAA,4BAAe,AAAD,EAAE,IAAM;QACpB,mBAAmB,OAAO,CAAC,SAAS,GAAG;QACvC,mBAAmB,OAAO,CAAC,MAAM,GAAG;QACpC,mBAAmB,OAAO,CAAC,MAAM,GAAG;QACpC,mBAAmB,OAAO,CAAC,KAAK,GAAG;QACnC,mBAAmB,OAAO,CAAC,KAAK,GAAG;IACrC;IAEA,8CAA8C;IAC9C,sDAAsD;IACtD,qFAAqF;IACrF,CAAA,GAAA,4BAAe,AAAD,EAAE,IAAM;QACpB,MAAM,QAAQ,mBAAmB,OAAO,CAAC,KAAK;QAC9C,IAAI,MAAM,MAAM,KAAK,OAAO,IAAI,EAC9B;QAGF,gBAAgB;QAChB,2CAA2C;QAE3C,mEAAmE;QACnE,kEAAkE;QAClE,IAAI,eAAqC;QACzC,IAAI,YACF,IAAI;YACF,MAAM,QAAQ,aAAa,OAAO,CAChC,4CAAsB,YAAY;YAEpC,IAAI,OACF,eAAe,KAAK,KAAK,CAAC;QAE9B,EAAE,OAAO,OAAO,CAAC;QAGnB,IAAI,gBAAgB,IAAI,EACtB,SAAS;aACJ;YACL,MAAM,cAAc,6CAAuB;YAC3C,MAAM,cAAc,YAAY,MAAM,CAAC,CAAC,QAAQ,QAAU;gBACxD,OAAO,SAAS,MAAM,WAAW;YACnC,GAAG;YAEH,SAAS,YAAY,GAAG,CAAC,CAAC,QAAU,MAAM,WAAW,GAAG;QAC1D,CAAC;IACH,GAAG;QAAC;QAAY;KAAO;IAEvB,CAAA,GAAA,sBAAS,AAAD,EAAE,IAAM;QACd,IAAI,YAAY;YACd,IAAI,MAAM,MAAM,KAAK,KAAK,MAAM,MAAM,KAAK,OAAO,IAAI,EACpD;YAGF,gGAAgG;YAChG,aAAa,OAAO,CAClB,4CAAsB,YAAY,SAClC,KAAK,SAAS,CAAC;QAEnB,CAAC;IACH,GAAG;QAAC;QAAY;QAAQ;KAAM;IAE9B,MAAM,gBAAgB,CAAA,GAAA,wBAAW,AAAD,EAC9B,CAAC,KAA8B;QAC7B,MAAM,UAAE,OAAM,EAAE,GAAG,mBAAmB,OAAO;QAE7C,MAAM,SAAS,gCAAU,QAAQ,IAAI,WAAW,OAAO,QAAQ;QAC/D,MAAM,OAAO,8BAAQ,QAAQ,IAAI,WAAW,OAAO,QAAQ;QAE3D,IAAI,cAAc,cAChB,OAAO;YACL,QAAQ;YACR,UAAU;YACV,MAAM;YACN,KAAK;YACL,OAAO;QACT;aAEA,OAAO;YACL,QAAQ;YACR,UAAU;YACV,MAAM;YACN,KAAK;YACL,OAAO;QACT;IAEJ,GACA;QAAC;QAAW;QAAQ;QAAO;KAAM;IAGnC,MAAM,gBAAgB,CAAA,GAAA,wBAAW,AAAD,EAAE,CAAC,IAAY,QAAqB;QAClE,UAAU,CAAC,aAAe;YACxB,IAAI,WAAW,GAAG,CAAC,KACjB,OAAO;YAGT,MAAM,aAAa,IAAI,IAAI;YAC3B,WAAW,GAAG,CAAC,IAAI;YAEnB,OAAO;QACT;IACF,GAAG,EAAE;IAEL,MAAM,uBAAuB,CAAA,GAAA,wBAAW,AAAD,EACrC,CAAC,UAAkB,UAAoB;QACrC,OAAO,CAAC,QAAsB;YAC5B,MAAM,cAAc;YAEpB,MAAM,aACJ,UAAS,UACT,OAAM,UACN,OAAM,EACN,OAAO,UAAS,SAChB,MAAK,EACN,GAAG,mBAAmB,OAAO;YAE9B,MAAM,eAAe,cAAc;YACnC,MAAM,WAAW,eAAe,MAAM,SAAS,GAAG,MAAM,SAAS;YACjE,MAAM,QAAQ,eAAe,WAAW,QAAQ,WAAW,MAAM;YAEjE,MAAM,YAAY,oCAChB,QACA,UACA,SACA,OACA;YAEF,IAAI,cAAc,WAChB,SAAS;QAEb;IAEA,6BAA6B;IAC/B,GACA,EAAE;IAGJ,MAAM,kBAAkB,CAAA,GAAA,wBAAW,AAAD,EAAE,CAAC,KAAe;QAClD,UAAU,CAAC,aAAe;YACxB,IAAI,CAAC,WAAW,GAAG,CAAC,KAClB,OAAO;YAGT,MAAM,aAAa,IAAI,IAAI;YAC3B,WAAW,MAAM,CAAC;YAElB,OAAO;QACT;IACF,GAAG,EAAE;IAEL,MAAM,UAAU,CAAA,GAAA,oBAAO,AAAD,EACpB,IAAO,CAAA;uBACL;2BACA;2BACA;kCACA;6BACA;QACF,CAAA,GACA;QACE;QACA;QACA;QACA;QACA;KACD;IAGH,qBACE,sCAAC,CAAA,GAAA,yCAAgB,EAAE,QAAQ;QAAC,OAAO;kBACjC,cAAA,sCAAC;YAAI,WAAW;sBAAY;;;;;;;;;;;AAGlC;AAEA,SAAS,oCACP,MAA8B,EAC9B,QAAgB,EAChB,OAAe,EACf,KAAa,EACb,SAAmB,EACT;IACV,IAAI,UAAU,GACZ,OAAO;IAGT,MAAM,cAAc,6CAAuB;IAE3C,MAAM,YAAY,UAAU,MAAM;IAElC,IAAI,eAAe;IAEnB,0DAA0D;IAC1D,EAAE;IACF,8GAA8G;IAC9G,wGAAwG;IACxG,EAAE;IACF,mFAAmF;IACnF,4GAA4G;IAC5G,IAAI,UAAU,QAAQ,IAAI,WAAW,OAAO;IAC5C,IAAI,QAAQ,YAAY,SAAS,CAAC,CAAC,QAAU,MAAM,EAAE,KAAK;IAC1D,MAAO,IAAI,CAAE;QACX,MAAM,QAAQ,WAAW,CAAC,MAAM;QAChC,MAAM,WAAW,SAAS,CAAC,MAAM;QACjC,MAAM,WAAW,KAAK,GAAG,CAAC,WAAW,KAAK,GAAG,CAAC,QAAQ,MAAM,OAAO;QACnE,IAAI,aAAa,UAAU;YACzB,gBAAgB,WAAW;YAE3B,SAAS,CAAC,MAAM,GAAG;YAEnB,IAAI,aAAa,WAAW,CAAC,oCAAc,MAAM,WAAW,CAAC,kCAC3D,KAAM;QAEV,CAAC;QAED,IAAI,QAAQ,GAAG;YACb,IAAI,EAAE,QAAQ,GACZ,KAAM;QAEV,OAAO;YACL,IAAI,EAAE,SAAS,YAAY,MAAM,EAC/B,KAAM;QAEV,CAAC;IACH;IAEA,mFAAmF;IACnF,kEAAkE;IAClE,IAAI,iBAAiB,GACnB,OAAO;IAGT,8GAA8G;IAC9G,UAAU,QAAQ,IAAI,UAAU,QAAQ;IACxC,QAAQ,YAAY,SAAS,CAAC,CAAC,QAAU,MAAM,EAAE,KAAK;IACtD,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG;IAEtC,OAAO;AACT;AAEA,SAAS,4CACP,UAAkB,EAClB,MAA8B,EACtB;IACR,MAAM,cAAc,6CAAuB;IAC3C,MAAM,WAAW,YAAY,GAAG,CAAC,CAAC,QAAU,MAAM,EAAE;IAEpD,OAAO,CAAC,iBAAiB,EAAE,WAAW,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC;AAC9D;AAEA,SAAS,gCACP,MAA8B,EAC9B,EAAU,EACV,SAAoB,EACpB,KAAe,EACf,MAAc,EACd,KAAa,EACL;IACR,MAAM,cAAc,6CAAuB;IAE3C,IAAI,QAAQ,YAAY,SAAS,CAAC,CAAC,QAAU,MAAM,EAAE,KAAK;IAC1D,IAAI,QAAQ,GACV,OAAO;IAGT,IAAI,eAAe;IAEnB,IAAK,QAAQ,QAAQ,GAAG,SAAS,GAAG,QAAS;QAC3C,MAAM,QAAQ,WAAW,CAAC,MAAM;QAChC,gBAAgB,8BAAQ,QAAQ,MAAM,EAAE,EAAE,WAAW,OAAO,QAAQ;IACtE;IAEA,OAAO,KAAK,KAAK,CAAC;AACpB;AAEA,SAAS,8BACP,MAA8B,EAC9B,EAAU,EACV,SAAoB,EACpB,KAAe,EACf,MAAc,EACd,KAAa,EACL;IACR,MAAM,YAAY,cAAc,eAAe,QAAQ,MAAM;IAE7D,IAAI,OAAO,IAAI,KAAK,GAClB,OAAO;IAGT,MAAM,cAAc,6CAAuB;IAE3C,MAAM,QAAQ,YAAY,SAAS,CAAC,CAAC,QAAU,MAAM,EAAE,KAAK;IAC5D,MAAM,OAAO,KAAK,CAAC,MAAM;IACzB,IAAI,QAAQ,IAAI,EACd,OAAO;IAGT,OAAO,KAAK,KAAK,CAAC,OAAO;AAC3B;AAEA,SAAS,6CAAuB,MAA8B,EAAe;IAC3E,OAAO,MAAM,IAAI,CAAC,OAAO,MAAM,IAAI,IAAI,CAAC,CAAC,GAAG,IAAM,EAAE,KAAK,GAAG,EAAE,KAAK;AACrE;;;ACnWA;;;AAKe,kDAA2B,YACxC,WAAW,IAAI,cACf,YAAY,eACZ,WAAW,KAAK,eAChB,WAAU,eACV,YAAW,EAOZ,EAAE;IACD,MAAM,UAAU,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAgB;IAC3C,IAAI,YAAY,IAAI,EAClB,MAAM,MACJ,CAAC,2EAA2E,CAAC,EAC7E;IAGJ,MAAM,aAAE,UAAS,wBAAE,qBAAoB,EAAE,GAAG;IAE5C,MAAM,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,qBAAO,EAC/C,IAAI;IAEN,MAAM,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,qBAAO,EAAE,KAAK;IAElD,CAAA,GAAA,sBAAS,AAAD,EAAE,IAAM;QACd,IAAI,UACF,iBAAiB,IAAI;aAErB,iBAAiB,IAAM,qBAAqB,aAAa;IAE7D,GAAG;QAAC;QAAU;QAAY;QAAa;KAAqB;IAE5D,CAAA,GAAA,sBAAS,AAAD,EAAE,IAAM;QACd,IAAI,YAAY,iBAAiB,IAAI,IAAI,CAAC,YACxC;QAGF,SAAS,IAAI,CAAC,KAAK,CAAC,MAAM,GACxB,cAAc,eAAe,cAAc,WAAW;QAExD,MAAM,eAAe,CAAC,IAAkB;YACtC,cAAc,KAAK;QACrB;QAEA,MAAM,cAAc,CAAC,QAAsB;YACzC,cAAc;QAChB;QAEA,MAAM,YAAY,CAAC,IAAkB;YACnC,cAAc,KAAK;QACrB;QAEA,SAAS,IAAI,CAAC,gBAAgB,CAAC,cAAc;QAC7C,SAAS,IAAI,CAAC,gBAAgB,CAAC,aAAa;QAC5C,SAAS,IAAI,CAAC,gBAAgB,CAAC,WAAW;QAE1C,OAAO,IAAM;YACX,SAAS,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG;YAE7B,SAAS,IAAI,CAAC,mBAAmB,CAAC,cAAc;YAChD,SAAS,IAAI,CAAC,mBAAmB,CAAC,aAAa;YAC/C,SAAS,IAAI,CAAC,mBAAmB,CAAC,WAAW;QAC/C;IACF,GAAG;QAAC;QAAW;QAAU;QAAY;KAAc;IAEnD,qBACE,sCAAC;QACC,WAAW;QACX,aAAa,IAAM,cAAc,IAAI;QACrC,WAAW,IAAM,cAAc,KAAK;QACpC,OAAO;YACL,QAAQ,cAAc,eAAe,cAAc,WAAW;QAChE;kBAEC;;;;;;AAGP;;","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number | null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;\n unregisterPanel: (id: string) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(\n createLocalStorageKey(autoSaveId, panels)\n );\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n if (autoSaveId) {\n if (sizes.length === 0 || sizes.length !== panels.size) {\n return;\n }\n\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(\n createLocalStorageKey(autoSaveId, panels),\n JSON.stringify(sizes)\n );\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (idBefore: string, idAfter: string) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n // TODO [issues/5] Add to Map\n },\n []\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction createLocalStorageKey(\n autoSaveId: string,\n panels: Map<string, PanelData>\n): string {\n const panelsArray = panelsMapToSortedArray(panels);\n const panelIds = panelsArray.map((panel) => panel.id);\n\n return `PanelGroup:sizes:${autoSaveId}${panelIds.join(\"|\")}`;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n\nfunction panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: string;\n panelBefore: string;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(\n null\n );\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map","sourceRoot":"../../../"}
package/dist/react-resizable-panels.module.js CHANGED
@@ -7,7 +7,7 @@ import {useContext as $fpI56$useContext, useLayoutEffect as $fpI56$useLayoutEffe
7
7
  const $f922724f4bad4884$export$7d8c6d083caec74a = (0, $fpI56$createContext)(null);
8
8
 
9
9
 
10
- function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1 }) {
10
+ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1 , order: order = null }) {
11
11
  const context = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
12
12
  if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
13
13
  if (minSize > defaultSize) {
@@ -19,7 +19,8 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
19
19
  const panel = {
20
20
  defaultSize: defaultSize,
21
21
  id: id,
22
- minSize: minSize
22
+ minSize: minSize,
23
+ order: order
23
24
  };
24
25
  registerPanel(id, panel);
25
26
  return ()=>{
@@ -29,6 +30,7 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
29
30
  defaultSize,
30
31
  id,
31
32
  minSize,
33
+ order,
32
34
  registerPanel,
33
35
  unregisterPanel
34
36
  ]);
@@ -39,7 +41,7 @@ function $ad28bce87b00c2be$export$2e2bcd8739ae039({ children: children = null ,
39
41
  children: children
40
42
  }, void 0, false, {
41
43
  fileName: "packages/react-resizable-panels/src/Panel.tsx",
42
- lineNumber: 55,
44
+ lineNumber: 58,
43
45
  columnNumber: 5
44
46
  }, this);
45
47
  }
@@ -85,7 +87,7 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
85
87
  } catch (error) {}
86
88
  if (defaultSizes != null) setSizes(defaultSizes);
87
89
  else {
88
- const panelsArray = Array.from(panels.values());
90
+ const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
89
91
  const totalWeight = panelsArray.reduce((weight, panel)=>{
90
92
  return weight + panel.defaultSize;
91
93
  }, 0);
@@ -189,7 +191,7 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
189
191
  }
190
192
  function $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
191
193
  if (delta === 0) return prevSizes;
192
- const panelsArray = Array.from(panels.values());
194
+ const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
193
195
  const nextSizes = prevSizes.concat();
194
196
  let deltaApplied = 0;
195
197
  // A resizing panel affects the panels before or after it.
@@ -226,11 +228,12 @@ function $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, p
226
228
  return nextSizes;
227
229
  }
228
230
  function $c44ee3356398c8a1$var$createLocalStorageKey(autoSaveId, panels) {
229
- const panelIds = Array.from(panels.keys()).sort();
231
+ const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
232
+ const panelIds = panelsArray.map((panel)=>panel.id);
230
233
  return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
231
234
  }
232
235
  function $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, width) {
233
- const panelsArray = Array.from(panels.values());
236
+ const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
234
237
  let index = panelsArray.findIndex((panel)=>panel.id === id);
235
238
  if (index < 0) return 0;
236
239
  let scaledOffset = 0;
@@ -243,12 +246,15 @@ function $c44ee3356398c8a1$var$getOffset(panels, id, direction, sizes, height, w
243
246
  function $c44ee3356398c8a1$var$getSize(panels, id, direction, sizes, height, width) {
244
247
  const totalSize = direction === "horizontal" ? width : height;
245
248
  if (panels.size === 1) return totalSize;
246
- const panelsArray = Array.from(panels.values());
249
+ const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
247
250
  const index = panelsArray.findIndex((panel)=>panel.id === id);
248
251
  const size = sizes[index];
249
252
  if (size == null) return 0;
250
253
  return Math.round(size * totalSize);
251
254
  }
255
+ function $c44ee3356398c8a1$var$panelsMapToSortedArray(panels) {
256
+ return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
257
+ }
252
258
 
253
259
 
254
260
 
package/dist/react-resizable-panels.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;\n unregisterPanel: (id: string) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(\n createLocalStorageKey(autoSaveId, panels)\n );\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray: PanelData[] = Array.from(panels.values());\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n if (autoSaveId) {\n if (sizes.length === 0 || sizes.length !== panels.size) {\n return;\n }\n\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(\n createLocalStorageKey(autoSaveId, panels),\n JSON.stringify(sizes)\n );\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (idBefore: string, idAfter: string) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n // TODO [issues/5] Add to Map\n },\n []\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray: PanelData[] = Array.from(panels.values());\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction createLocalStorageKey(\n autoSaveId: string,\n panels: Map<string, PanelData>\n): string {\n const panelIds = Array.from(panels.keys()).sort();\n\n return `PanelGroup:sizes:${autoSaveId}${panelIds.join(\"|\")}`;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray: PanelData[] = Array.from(panels.values());\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray: PanelData[] = Array.from(panels.values());\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: string;\n panelBefore: string;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(\n null\n );\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.module.js.map","sourceRoot":"../../../"}
1
+ {"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number | null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;\n unregisterPanel: (id: string) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(\n createLocalStorageKey(autoSaveId, panels)\n );\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n if (autoSaveId) {\n if (sizes.length === 0 || sizes.length !== panels.size) {\n return;\n }\n\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(\n createLocalStorageKey(autoSaveId, panels),\n JSON.stringify(sizes)\n );\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (idBefore: string, idAfter: string) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n // TODO [issues/5] Add to Map\n },\n []\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction createLocalStorageKey(\n autoSaveId: string,\n panels: Map<string, PanelData>\n): string {\n const panelsArray = panelsMapToSortedArray(panels);\n const panelIds = panelsArray.map((panel) => panel.id);\n\n return `PanelGroup:sizes:${autoSaveId}${panelIds.join(\"|\")}`;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n\nfunction panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: string;\n panelBefore: string;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(\n null\n );\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.module.js.map","sourceRoot":"../../../"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-resizable-panels",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "React components for resizable panel groups/layouts",
5
5
  "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
6
6
  "license": "MIT",
package/src/Panel.tsx CHANGED
@@ -11,12 +11,14 @@ export default function Panel({
11
11
  defaultSize = 0.1,
12
12
  id,
13
13
  minSize = 0.1,
14
+ order = null,
14
15
  }: {
15
16
  children?: ReactNode;
16
17
  className?: string;
17
18
  defaultSize?: number;
18
19
  id: string;
19
20
  minSize?: number;
21
+ order?: number | null;
20
22
  }) {
21
23
  const context = useContext(PanelGroupContext);
22
24
  if (context === null) {
@@ -40,6 +42,7 @@ export default function Panel({
40
42
  defaultSize,
41
43
  id,
42
44
  minSize,
45
+ order,
43
46
  };
44
47
 
45
48
  registerPanel(id, panel);
@@ -47,7 +50,7 @@ export default function Panel({
47
50
  return () => {
48
51
  unregisterPanel(id);
49
52
  };
50
- }, [defaultSize, id, minSize, registerPanel, unregisterPanel]);
53
+ }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);
51
54
 
52
55
  const style = getPanelStyle(id);
53
56
 
package/src/PanelGroup.tsx CHANGED
@@ -14,7 +14,7 @@ import { Direction, PanelData } from "./types";
14
14
 
15
15
  type Props = {
16
16
  autoSaveId?: string;
17
- children?: ReactNode[];
17
+ children?: ReactNode;
18
18
  className?: string;
19
19
  direction: Direction;
20
20
  height: number;
@@ -91,7 +91,7 @@ export default function PanelGroup({
91
91
  if (defaultSizes != null) {
92
92
  setSizes(defaultSizes);
93
93
  } else {
94
- const panelsArray: PanelData[] = Array.from(panels.values());
94
+ const panelsArray = panelsMapToSortedArray(panels);
95
95
  const totalWeight = panelsArray.reduce((weight, panel) => {
96
96
  return weight + panel.defaultSize;
97
97
  }, 0);
@@ -237,7 +237,7 @@ function adjustByDelta(
237
237
  return prevSizes;
238
238
  }
239
239
 
240
- const panelsArray: PanelData[] = Array.from(panels.values());
240
+ const panelsArray = panelsMapToSortedArray(panels);
241
241
 
242
242
  const nextSizes = prevSizes.concat();
243
243
 
@@ -295,7 +295,8 @@ function createLocalStorageKey(
295
295
  autoSaveId: string,
296
296
  panels: Map<string, PanelData>
297
297
  ): string {
298
- const panelIds = Array.from(panels.keys()).sort();
298
+ const panelsArray = panelsMapToSortedArray(panels);
299
+ const panelIds = panelsArray.map((panel) => panel.id);
299
300
 
300
301
  return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
301
302
  }
@@ -308,7 +309,7 @@ function getOffset(
308
309
  height: number,
309
310
  width: number
310
311
  ): number {
311
- const panelsArray: PanelData[] = Array.from(panels.values());
312
+ const panelsArray = panelsMapToSortedArray(panels);
312
313
 
313
314
  let index = panelsArray.findIndex((panel) => panel.id === id);
314
315
  if (index < 0) {
@@ -339,7 +340,7 @@ function getSize(
339
340
  return totalSize;
340
341
  }
341
342
 
342
- const panelsArray: PanelData[] = Array.from(panels.values());
343
+ const panelsArray = panelsMapToSortedArray(panels);
343
344
 
344
345
  const index = panelsArray.findIndex((panel) => panel.id === id);
345
346
  const size = sizes[index];
@@ -349,3 +350,7 @@ function getSize(
349
350
 
350
351
  return Math.round(size * totalSize);
351
352
  }
353
+
354
+ function panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {
355
+ return Array.from(panels.values()).sort((a, b) => a.order - b.order);
356
+ }
package/src/types.ts CHANGED
@@ -4,6 +4,7 @@ export type PanelData = {
4
4
  defaultSize: number;
5
5
  id: string;
6
6
  minSize: number;
7
+ order: number | null;
7
8
  };
8
9
 
9
10
  export type ResizeHandler = (event: MouseEvent) => void;