Socket
Socket
Sign inDemoInstall

@alisowski/react-resizable-panels

Package Overview
Dependencies
5
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.16 to 0.1.17

dist/declarations/src/utils/cursor.d.ts

55

dist/alisowski-react-resizable-panels.browser.cjs.js

@@ -208,5 +208,5 @@ 'use strict';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -311,4 +311,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -327,2 +326,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -336,3 +336,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -554,2 +554,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -561,2 +563,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -1107,3 +1117,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1186,3 +1198,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1230,3 +1242,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1390,7 +1402,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1402,3 +1412,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1423,9 +1433,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1442,3 +1452,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1501,3 +1511,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1557,3 +1567,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1614,3 +1624,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1636,3 +1646,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1642,3 +1653,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1645,0 +1656,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.browser.development.esm.js

@@ -184,5 +184,5 @@ import * as React from 'react';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -287,4 +287,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -303,2 +302,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -312,3 +312,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -534,2 +534,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -541,2 +543,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -1109,3 +1119,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1188,3 +1200,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1232,3 +1244,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1415,7 +1427,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1427,3 +1437,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1448,9 +1458,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1467,3 +1477,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1526,3 +1536,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1582,3 +1592,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1645,3 +1655,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1667,3 +1677,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1673,3 +1684,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1676,0 +1687,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.browser.esm.js

@@ -184,5 +184,5 @@ import * as React from 'react';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -287,4 +287,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -303,2 +302,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -312,3 +312,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -530,2 +530,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -537,2 +539,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -1083,3 +1093,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1162,3 +1174,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1206,3 +1218,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1366,7 +1378,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1378,3 +1388,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1399,9 +1409,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1418,3 +1428,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1477,3 +1487,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1533,3 +1543,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1590,3 +1600,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1612,3 +1622,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1618,3 +1629,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1621,0 +1632,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.cjs.js

@@ -210,5 +210,5 @@ 'use strict';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -313,4 +313,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -329,2 +328,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -338,3 +338,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -556,2 +556,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -563,2 +565,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -1109,3 +1119,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1188,3 +1200,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1232,3 +1244,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1392,7 +1404,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1404,3 +1414,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1425,9 +1435,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1444,3 +1454,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1503,3 +1513,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1559,3 +1569,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1616,3 +1626,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1638,3 +1648,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1644,3 +1655,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1647,0 +1658,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.development.esm.js

@@ -186,5 +186,5 @@ import * as React from 'react';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -289,4 +289,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -305,2 +304,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -314,3 +314,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -536,2 +536,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -543,2 +545,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -1111,3 +1121,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1190,3 +1202,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1234,3 +1246,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1422,7 +1434,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1434,3 +1444,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1455,9 +1465,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1474,3 +1484,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1533,3 +1543,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1589,3 +1599,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1652,3 +1662,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1674,3 +1684,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1680,3 +1691,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1683,0 +1694,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.development.node.cjs.js

@@ -188,5 +188,5 @@ 'use strict';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -291,4 +291,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -307,2 +306,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -316,3 +316,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -430,2 +430,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -437,2 +439,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -997,3 +1007,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1076,3 +1088,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1113,3 +1125,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1233,7 +1245,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1245,3 +1255,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1266,9 +1276,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1285,3 +1295,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1344,3 +1354,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1400,3 +1410,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1463,3 +1473,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1485,3 +1495,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1491,3 +1502,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1494,0 +1505,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.development.node.esm.js

@@ -164,5 +164,5 @@ import * as React from 'react';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -267,4 +267,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -283,2 +282,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -292,3 +292,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -406,2 +406,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -413,2 +415,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -973,3 +983,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1052,3 +1064,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1089,3 +1101,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1209,7 +1221,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1221,3 +1231,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1242,9 +1252,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1261,3 +1271,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1320,3 +1330,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1376,3 +1386,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1439,3 +1449,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1461,3 +1471,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1467,3 +1478,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1470,0 +1481,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.esm.js

@@ -186,5 +186,5 @@ import * as React from 'react';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -289,4 +289,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -305,2 +304,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -314,3 +314,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -532,2 +532,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -539,2 +541,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -1085,3 +1095,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1164,3 +1176,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1208,3 +1220,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1368,7 +1380,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1380,3 +1390,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1401,9 +1411,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1420,3 +1430,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1479,3 +1489,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1535,3 +1545,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1592,3 +1602,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1614,3 +1624,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1620,3 +1631,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1623,0 +1634,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.node.cjs.js

@@ -188,5 +188,5 @@ 'use strict';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -291,4 +291,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -307,2 +306,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -316,3 +316,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -430,2 +430,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -437,2 +439,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -975,3 +985,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1054,3 +1066,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1091,3 +1103,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1183,7 +1195,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1195,3 +1205,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1216,9 +1226,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1235,3 +1245,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1294,3 +1304,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1350,3 +1360,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1407,3 +1417,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1429,3 +1439,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1435,3 +1446,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1438,0 +1449,0 @@ initialDragStateRef.current = null;

55

dist/alisowski-react-resizable-panels.node.esm.js

@@ -164,5 +164,5 @@ import * as React from 'react';

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const {
sizes: initialSizes
let {
sizes: initialSizes,
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN
} = initialDragState || {};

@@ -267,4 +267,3 @@

}
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) {
const groupPixels = getAvailableGroupSizePixels(groupId);
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) {
sizes.forEach((size, index) => {

@@ -283,2 +282,3 @@ const panelRef = panelsArray[index];

} = panelRef.current;
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN;
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

@@ -292,3 +292,3 @@ if (lastNotifiedSize !== size) {

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize));
}

@@ -406,2 +406,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize);

}
/** Converts pixel value to percentage */
function normalizePixelValue(units, groupSizePixels, value) {

@@ -413,2 +415,10 @@ if (units === "pixels") {

}
/** Converts percentage to pixel value */
function normalizePercentageValue(units, groupSizePixels, value) {
if (units === "pixels") {
value = value / 100 * groupSizePixels;
}
return value;
}
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) {

@@ -951,3 +961,5 @@ let {

tagName: Type = "div",
units = "percentages"
units = "percentages",
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle,
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle
}) {

@@ -1030,3 +1042,3 @@ const groupId = useUniqueId(idFromProps);

setSizes(nextSizes);
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1067,3 +1079,3 @@ }

const panelsArray = panelsMapToSortedArray(panels);
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1159,7 +1171,5 @@ }, [sizes]);

let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId);
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -1171,3 +1181,3 @@

}
const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = movement / size * 100;

@@ -1192,9 +1202,9 @@

if (isHorizontal) {
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max");
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max");
} else {
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max");
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max");
}
} else {
// Reset the cursor style to the the normal resize cursor.
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical");
}

@@ -1211,3 +1221,3 @@ }

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1270,3 +1280,3 @@ prevDeltaRef.current = delta;

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1326,3 +1336,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1383,3 +1393,3 @@ }, []);

// Trigger user callbacks after updating state, so that user code can override the sizes.
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap);
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current);
}

@@ -1405,3 +1415,4 @@ }, []);

dragOffset: getDragOffset(event, id, direction),
sizes: committedValuesRef.current.sizes
sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId)
};

@@ -1411,3 +1422,3 @@ }

stopDragging: () => {
resetGlobalCursorStyle();
resetGlobalCursorStyle$1();
setActiveHandleId(null);

@@ -1414,0 +1425,0 @@ initialDragStateRef.current = null;

4

dist/declarations/src/PanelGroup.d.ts
import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js";
import { Direction, PanelData, PanelGroupOnLayout, PanelGroupStorage, Units } from "./types.js";
import { resetGlobalCursorStyle as resetGlobalCursorStyleDefault, setGlobalCursorStyle as setGlobalCursorStyleDefault } from "./utils/cursor.js";
export type CommittedValues = {

@@ -15,2 +16,3 @@ direction: Direction;

sizes: number[];
groupSizePixels: number;
};

@@ -29,2 +31,4 @@ export type PanelGroupProps = {

units?: Units;
setGlobalCursorStyle?: typeof setGlobalCursorStyleDefault;
resetGlobalCursorStyle?: typeof resetGlobalCursorStyleDefault;
};

@@ -31,0 +35,0 @@ export type ImperativePanelGroupHandle = {

5

dist/declarations/src/utils/group.d.ts
import { CommittedValues, InitialDragState } from "../PanelGroup.js";
import { PanelData, ResizeEvent, Units } from "../types.js";
export declare function adjustByDelta(event: ResizeEvent | null, committedValues: CommittedValues, idBefore: string, idAfter: string, deltaPixels: number, prevSizes: number[], panelSizeBeforeCollapse: Map<string, number>, initialDragState: InitialDragState | null): number[];
export declare function callPanelCallbacks(units: Units, groupId: string, panelsArray: PanelData[], sizes: number[], panelIdToLastNotifiedSizeMap: Record<string, number>): void;
export declare function callPanelCallbacks(units: Units, panelsArray: PanelData[], sizes: number[], panelIdToLastNotifiedSizeMap: Record<string, number>, initialDragState: InitialDragState | null): void;
export declare function calculateDefaultLayout({ groupId, panels, units, }: {

@@ -21,3 +21,6 @@ groupId: string;

export declare function panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[];
/** Converts pixel value to percentage */
export declare function normalizePixelValue(units: Units, groupSizePixels: number, value: number): number;
/** Converts percentage to pixel value */
export declare function normalizePercentageValue(units: Units, groupSizePixels: number, value: number): number;
export declare function safeResizePanel(units: Units, groupSizePixels: number, panel: PanelData, prevSize: number, nextSize: number, event?: ResizeEvent | null): number;

@@ -24,0 +27,0 @@ export declare function validatePanelProps(units: Units, panelData: PanelData): void;

2

package.json
{
"name": "@alisowski/react-resizable-panels",
"version": "0.1.16",
"version": "0.1.17",
"publishConfig": {

@@ -5,0 +5,0 @@ "access": "public"

1

src/Panel.ts

@@ -24,3 +24,2 @@ import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect";

} from "./types";
import { getAvailableGroupSizePixels } from "./utils/group";

@@ -27,0 +26,0 @@ export type PanelProps = {

42

src/PanelGroup.ts

@@ -37,3 +37,6 @@ import { isBrowser } from "#is-browser";

} from "./utils/coordinates";
import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor";
import {
resetGlobalCursorStyle as resetGlobalCursorStyleDefault,
setGlobalCursorStyle as setGlobalCursorStyleDefault,
} from "./utils/cursor";
import debounce from "./utils/debounce";

@@ -123,2 +126,3 @@ import {

sizes: number[];
groupSizePixels: number;
};

@@ -138,2 +142,4 @@

units?: Units;
setGlobalCursorStyle?: typeof setGlobalCursorStyleDefault;
resetGlobalCursorStyle?: typeof resetGlobalCursorStyleDefault;
};

@@ -160,2 +166,4 @@

units = "percentages",
setGlobalCursorStyle = setGlobalCursorStyleDefault,
resetGlobalCursorStyle = resetGlobalCursorStyleDefault,
}: PanelGroupProps & {

@@ -257,6 +265,6 @@ forwardedRef: ForwardedRef<ImperativePanelGroupHandle>;

units,
groupId,
panelsArray,
nextSizes,
panelIdToLastNotifiedSizeMap
panelIdToLastNotifiedSizeMap,
initialDragStateRef.current
);

@@ -308,6 +316,6 @@ }

units,
groupId,
panelsArray,
sizes,
panelIdToLastNotifiedSizeMap
panelIdToLastNotifiedSizeMap,
initialDragStateRef.current
);

@@ -548,8 +556,7 @@ }

);
if (movement === 0) {
if (movement === 0 || !initialDragStateRef.current) {
return;
}
const groupElement = getPanelGroup(groupId)!;
const rect = groupElement.getBoundingClientRect();
const isHorizontal = direction === "horizontal";

@@ -562,3 +569,3 @@

const size = isHorizontal ? rect.width : rect.height;
const size = initialDragStateRef.current?.groupSizePixels;
const delta = (movement / size) * 100;

@@ -619,6 +626,6 @@

units,
groupId,
panelsArray,
nextSizes,
panelIdToLastNotifiedSizeMap
panelIdToLastNotifiedSizeMap,
initialDragStateRef.current
);

@@ -711,6 +718,6 @@ }

units,
groupId,
panelsArray,
nextSizes,
panelIdToLastNotifiedSizeMap
panelIdToLastNotifiedSizeMap,
initialDragStateRef.current
);

@@ -793,6 +800,6 @@ }

units,
groupId,
panelsArray,
nextSizes,
panelIdToLastNotifiedSizeMap
panelIdToLastNotifiedSizeMap,
initialDragStateRef.current
);

@@ -892,6 +899,6 @@ }

units,
groupId,
panelsArray,
nextSizes,
panelIdToLastNotifiedSizeMap
panelIdToLastNotifiedSizeMap,
initialDragStateRef.current
);

@@ -925,2 +932,3 @@ }

sizes: committedValuesRef.current.sizes,
groupSizePixels: getAvailableGroupSizePixels(groupId),
};

@@ -927,0 +935,0 @@ }

38

src/utils/group.ts

@@ -28,6 +28,9 @@ import { isDevelopment } from "#is-development";

let fullDelta = Math.abs(deltaPixels);
const groupSizePixels =
units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN;
const { sizes: initialSizes } = initialDragState || {};
let {
sizes: initialSizes,
groupSizePixels = units === "pixels"
? getAvailableGroupSizePixels(groupId)
: NaN,
} = initialDragState || {};

@@ -177,9 +180,7 @@ // If we're resizing by mouse or touch, use the initial sizes as a base.

units: Units,
groupId: string,
panelsArray: PanelData[],
sizes: number[],
panelIdToLastNotifiedSizeMap: Record<string, number>
panelIdToLastNotifiedSizeMap: Record<string, number>,
initialDragState: InitialDragState | null
) {
const groupPixels = getAvailableGroupSizePixels(groupId);
sizes.forEach((size, index) => {

@@ -194,2 +195,6 @@ const panelRef = panelsArray[index];

const { callbacksRef, collapsedSize, collapsible, id } = panelRef.current;
const groupPixels =
initialDragState?.groupSizePixels ?? units === "pixels"
? getAvailableGroupSizePixels(id)
: NaN;

@@ -203,3 +208,6 @@ const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id];

if (onResize) {
onResize(size, lastNotifiedSize);
onResize(
normalizePercentageValue(units, groupPixels, size),
normalizePercentageValue(units, groupPixels, lastNotifiedSize)
);
}

@@ -517,2 +525,3 @@

/** Converts pixel value to percentage */
export function normalizePixelValue(

@@ -530,2 +539,15 @@ units: Units,

/** Converts percentage to pixel value */
export function normalizePercentageValue(
units: Units,
groupSizePixels: number,
value: number
) {
if (units === "pixels") {
value = (value / 100) * groupSizePixels;
}
return value;
}
export function safeResizePanel(

@@ -532,0 +554,0 @@ units: Units,

dist/alisowski-react-resizable-panels.browser.development.cjs.js

Sorry, the diff of this file is too big to display

dist/alisowski-react-resizable-panels.development.cjs.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc