datocms-react-ui 2.0.13 → 2.0.15

package/dist/esm/SplitView/index.js

@@ -0,0 +1,176 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import classNames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { SplitViewPane } from './SplitViewPane';
+import { SplitViewSash } from './SplitViewSash';
+import s from './styles.module.css.json';
+export var SplitView = function (_a) {
+    var children = _a.children, propSizes = _a.sizes, _b = _a.allowResize, allowResize = _b === void 0 ? true : _b, _c = _a.split, split = _c === void 0 ? 'vertical' : _c, _d = _a.resizerSize, resizerSize = _d === void 0 ? 10 : _d, _e = _a.performanceMode, performanceMode = _e === void 0 ? false : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onDragStart, onDragStart = _g === void 0 ? function () { return null; } : _g, _h = _a.onDragEnd, onDragEnd = _h === void 0 ? function () { return null; } : _h, sashAction = _a.sashAction;
+    var axis = useRef({ x: 0, y: 0 });
+    var wrapper = useRef(null);
+    var cacheSizes = useRef({ sizes: [], sashPosSizes: [] });
+    var _j = useState(undefined), wrapperRect = _j[0], setWrapperRect = _j[1];
+    var _k = useState(false), isDragging = _k[0], setDragging = _k[1];
+    useEffect(function () {
+        var resizeObserver = new ResizeObserver(function () {
+            if (wrapper === null || wrapper === void 0 ? void 0 : wrapper.current) {
+                setWrapperRect(wrapper.current.getBoundingClientRect());
+            }
+        });
+        resizeObserver.observe(wrapper.current);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    var _l = useMemo(function () { return ({
+        sizeName: split === 'vertical' ? 'width' : 'height',
+        splitPos: split === 'vertical' ? 'left' : 'top',
+        splitAxis: split === 'vertical' ? 'x' : 'y',
+    }); }, [split]), sizeName = _l.sizeName, splitPos = _l.splitPos, splitAxis = _l.splitAxis;
+    var wrapSize = wrapperRect ? wrapperRect[sizeName] : 0;
+    // Get limit sizes via children
+    var paneLimitSizes = useMemo(function () {
+        return children.map(function (childNode) {
+            var limits = [0, Infinity];
+            if (childNode.type === SplitViewPane) {
+                var _a = childNode.props, minSize = _a.minSize, maxSize = _a.maxSize;
+                limits[0] = assertSize(minSize, wrapSize, 0);
+                limits[1] = assertSize(maxSize, wrapSize);
+            }
+            return limits;
+        });
+    }, [children, wrapSize]);
+    var sizes = useMemo(function () {
+        var count = 0;
+        var curSum = 0;
+        var res = children.map(function (_child, index) {
+            var size = clampSize(assertSize(propSizes[index], wrapSize), paneLimitSizes[index]);
+            if (size === Infinity) {
+                count = count + 1;
+            }
+            else {
+                curSum = curSum + size;
+            }
+            return size;
+        });
+        // resize or illegal size input,recalculate pane sizes
+        if (curSum > wrapSize || (!count && curSum < wrapSize)) {
+            var cacheNum_1 = (curSum - wrapSize) / curSum;
+            return res.map(function (size) {
+                return size === Infinity ? 0 : size - size * cacheNum_1;
+            });
+        }
+        if (count > 0) {
+            var average_1 = (wrapSize - curSum) / count;
+            return res.map(function (size) {
+                return size === Infinity ? average_1 : size;
+            });
+        }
+        return res;
+    }, [
+        JSON.stringify(propSizes),
+        JSON.stringify(paneLimitSizes),
+        children.length,
+        wrapSize,
+    ]);
+    var sashPosSizes = useMemo(function () { return sizes.reduce(function (a, b) { return __spreadArray(__spreadArray([], a, true), [a[a.length - 1] + b], false); }, [0]); }, [JSON.stringify(sizes)]);
+    var handleMouseDown = useCallback(function (x, y) {
+        var _a, _b;
+        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(s['SplitView--disable-select']);
+        axis.current = { x: x, y: y };
+        cacheSizes.current = { sizes: sizes, sashPosSizes: sashPosSizes };
+        setDragging(true);
+        onDragStart();
+    }, [onDragStart, sizes, sashPosSizes]);
+    var handleMouseUp = useCallback(function () {
+        var _a, _b;
+        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(s['SplitView--disable-select']);
+        setDragging(false);
+        onDragEnd();
+    }, [onDragEnd]);
+    var handleMouseMove = useCallback(function (x, y, i) {
+        var curAxis = { x: x, y: y };
+        var distanceX = curAxis[splitAxis] - axis.current[splitAxis];
+        var leftBorder = -Math.min(sizes[i] - paneLimitSizes[i][0], paneLimitSizes[i + 1][1] - sizes[i + 1]);
+        var rightBorder = Math.min(sizes[i + 1] - paneLimitSizes[i + 1][0], paneLimitSizes[i][1] - sizes[i]);
+        if (distanceX < leftBorder) {
+            distanceX = leftBorder;
+        }
+        if (distanceX > rightBorder) {
+            distanceX = rightBorder;
+        }
+        var nextSizes = __spreadArray([], sizes, true);
+        nextSizes[i] += distanceX;
+        nextSizes[i + 1] -= distanceX;
+        onChange(nextSizes);
+    }, [paneLimitSizes, onChange]);
+    var paneFollow = !(performanceMode && isDragging);
+    var paneSizes = paneFollow ? sizes : cacheSizes.current.sizes;
+    var panePoses = paneFollow ? sashPosSizes : cacheSizes.current.sashPosSizes;
+    return (React.createElement("div", { className: classNames(s.SplitView, split === 'vertical' && s['SplitView--vertical'], split === 'horizontal' && s['SplitView--horizontal'], isDragging && s['SplitView--dragging']), ref: wrapper },
+        children.map(function (childNode, childIndex) {
+            var _a;
+            var isPane = childNode.type === SplitViewPane;
+            var paneProps = isPane ? childNode.props : {};
+            return (React.createElement(SplitViewPane
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            , { 
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                key: childIndex, style: __assign(__assign({}, paneProps.style), (_a = {}, _a[sizeName] = paneSizes[childIndex], _a[splitPos] = panePoses[childIndex], _a)) }, isPane ? paneProps.children : childNode));
+        }),
+        sashPosSizes.slice(1, -1).map(function (posSize, index) {
+            var _a;
+            return (React.createElement(SplitViewSash
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            , { 
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                key: index, allowResize: allowResize, split: split, style: (_a = {},
+                    _a[sizeName] = resizerSize,
+                    _a[splitPos] = posSize - resizerSize / 2,
+                    _a), onMouseDown: handleMouseDown, onMouseMove: function (x, y) { return handleMouseMove(x, y, index); }, onMouseUp: handleMouseUp, action: sashAction }));
+        })));
+};
+/**
+ * Convert size to absolute number or Infinity
+ * SplitPane allows sizes in string and number, but the state sizes only support number,
+ * so convert string and number to number in here
+ * 'auto' -> divide the remaining space equally
+ * 'xxxpx' -> xxx
+ * 'xxx%' -> wrapper.size * xxx/100
+ *  xxx -> xxx
+ */
+function assertSize(size, sum, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = Infinity; }
+    if (typeof size === 'undefined')
+        return defaultValue;
+    if (typeof size === 'number')
+        return size;
+    if (size.endsWith('%'))
+        return sum * (+size.replace('%', '') / 100);
+    if (size.endsWith('px'))
+        return +size.replace('px', '');
+    return defaultValue;
+}
+function clampSize(size, minMax) {
+    return Math.max(minMax[0], Math.min(minMax[1], size));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/SplitView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SplitView/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAc,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAgBzC,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAWT;QAVf,QAAQ,cAAA,EACD,SAAS,WAAA,EAChB,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,aAAkB,EAAlB,KAAK,mBAAG,UAAU,KAAA,EAClB,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,gBAAqB,EAArB,QAAQ,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EACrB,mBAAwB,EAAxB,WAAW,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EACxB,iBAAsB,EAAtB,SAAS,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EACtB,UAAU,gBAAA;IAEV,IAAM,IAAI,GAAG,MAAM,CAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAC3C,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,IAAM,UAAU,GAAG,MAAM,CAAc,EAAE,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAClE,IAAA,KAAgC,QAAQ,CAC5C,SAAS,CACV,EAFM,WAAW,QAAA,EAAE,cAAc,QAEjC,CAAC;IACI,IAAA,KAA4B,QAAQ,CAAU,KAAK,CAAC,EAAnD,UAAU,QAAA,EAAE,WAAW,QAA4B,CAAC;IAE3D,SAAS,CAAC;QACR,IAAM,cAAc,GAAG,IAAI,cAAc,CAAC;YACxC,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAAE;gBACpB,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC;aACzD;QACH,CAAC,CAAC,CAAC;QACH,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAQ,CAAC,CAAC;QACzC,OAAO;YACL,cAAc,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAED,IAAA,KAAoC,OAAO,CAK/C,cAAM,OAAA,CAAC;QACL,QAAQ,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;QACnD,QAAQ,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;QAC/C,SAAS,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;KAC5C,CAAC,EAJI,CAIJ,EACF,CAAC,KAAK,CAAC,CACR,EAXO,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAWpC,CAAC;IAEF,IAAM,QAAQ,GAAW,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjE,+BAA+B;IAC/B,IAAM,cAAc,GAAG,OAAO,CAC5B;QACE,OAAA,QAAQ,CAAC,GAAG,CAAC,UAAC,SAAS;YACrB,IAAM,MAAM,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;YAC7B,IAAI,SAAS,CAAC,IAAI,KAAK,aAAa,EAAE;gBAC9B,IAAA,KAAuB,SAAS,CAAC,KAA2B,EAA1D,OAAO,aAAA,EAAE,OAAO,aAA0C,CAAC;gBACnE,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;gBAC7C,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;aAC3C;YACD,OAAO,MAA0B,CAAC;QACpC,CAAC,CAAC;IARF,CAQE,EACJ,CAAC,QAAQ,EAAE,QAAQ,CAAC,CACrB,CAAC;IAEF,IAAM,KAAK,GAAG,OAAO,CAAC;QACpB,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,IAAI,MAAM,GAAG,CAAC,CAAC;QAEf,IAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK;YACrC,IAAM,IAAI,GAAG,SAAS,CACpB,UAAU,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,EACtC,cAAc,CAAC,KAAK,CAAC,CACtB,CAAC;YACF,IAAI,IAAI,KAAK,QAAQ,EAAE;gBACrB,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;aACnB;iBAAM;gBACL,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;aACxB;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,sDAAsD;QACtD,IAAI,MAAM,GAAG,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,GAAG,QAAQ,CAAC,EAAE;YACtD,IAAM,UAAQ,GAAG,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,MAAM,CAAC;YAC9C,OAAO,GAAG,CAAC,GAAG,CAAC,UAAC,IAAI;gBAClB,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,GAAG,UAAQ,CAAC;YACxD,CAAC,CAAC,CAAC;SACJ;QAED,IAAI,KAAK,GAAG,CAAC,EAAE;YACb,IAAM,SAAO,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC;YAC5C,OAAO,GAAG,CAAC,GAAG,CAAC,UAAC,IAAI;gBAClB,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAO,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5C,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,GAAG,CAAC;IACb,CAAC,EAAE;QACD,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC;QAC9B,QAAQ,CAAC,MAAM;QACf,QAAQ;KACT,CAAC,CAAC;IAEH,IAAM,YAAY,GAAG,OAAO,CAC1B,cAAM,OAAA,KAAK,CAAC,MAAM,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,uCAAI,CAAC,UAAE,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,WAA1B,CAA2B,EAAE,CAAC,CAAC,CAAC,CAAC,EAAxD,CAAwD,EAC9D,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACxB,CAAC;IAEF,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,CAAS,EAAE,CAAS;;QACnB,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,SAAS,0CAAE,GAAG,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC;QACxB,UAAU,CAAC,OAAO,GAAG,EAAE,KAAK,OAAA,EAAE,YAAY,cAAA,EAAE,CAAC;QAC7C,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC;IAChB,CAAC,EACD,CAAC,WAAW,EAAE,KAAK,EAAE,YAAY,CAAC,CACnC,CAAC;IAEF,IAAM,aAAa,GAAG,WAAW,CAAC;;QAChC,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,SAAS,0CAAE,MAAM,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC;QAClE,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,CAAS,EAAE,CAAS,EAAE,CAAS;QAC9B,IAAM,OAAO,GAAG,EAAE,CAAC,GAAA,EAAE,CAAC,GAAA,EAAE,CAAC;QACzB,IAAI,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAE7D,IAAM,UAAU,GAAG,CAAC,IAAI,CAAC,GAAG,CAC1B,KAAK,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CACxC,CAAC;QACF,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAC1B,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EACvC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAChC,CAAC;QAEF,IAAI,SAAS,GAAG,UAAU,EAAE;YAC1B,SAAS,GAAG,UAAU,CAAC;SACxB;QACD,IAAI,SAAS,GAAG,WAAW,EAAE;YAC3B,SAAS,GAAG,WAAW,CAAC;SACzB;QAED,IAAM,SAAS,qBAAO,KAAK,OAAC,CAAC;QAC7B,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;QAC1B,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC;QAE9B,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAC;IAEF,IAAM,UAAU,GAAG,CAAC,CAAC,eAAe,IAAI,UAAU,CAAC,CAAC;IACpD,IAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC;IAChE,IAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC;IAE9E,OAAO,CACL,6BACE,SAAS,EAAE,UAAU,CACnB,CAAC,CAAC,SAAS,EACX,KAAK,KAAK,UAAU,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAChD,KAAK,KAAK,YAAY,IAAI,CAAC,CAAC,uBAAuB,CAAC,EACpD,UAAU,IAAI,CAAC,CAAC,qBAAqB,CAAC,CACvC,EACD,GAAG,EAAE,OAAO;QAEX,QAAQ,CAAC,GAAG,CAAC,UAAC,SAAS,EAAE,UAAU;;YAClC,IAAM,MAAM,GAAG,SAAS,CAAC,IAAI,KAAK,aAAa,CAAC;YAChD,IAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YAEhD,OAAO,CACL,oBAAC,aAAa;YACZ,8DAA8D;;gBAA9D,8DAA8D;gBAC9D,GAAG,EAAE,UAAU,EACf,KAAK,wBACA,SAAS,CAAC,KAAK,gBACjB,QAAQ,IAAG,SAAS,CAAC,UAAU,CAAC,KAChC,QAAQ,IAAG,SAAS,CAAC,UAAU,CAAC,UAGlC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAC1B,CACjB,CAAC;QACJ,CAAC,CAAC;QACD,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK;;YAAK,OAAA,CACjD,oBAAC,aAAa;YACZ,8DAA8D;;gBAA9D,8DAA8D;gBAC9D,GAAG,EAAE,KAAK,EACV,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,KAAK;oBACH,GAAC,QAAQ,IAAG,WAAW;oBACvB,GAAC,QAAQ,IAAG,OAAO,GAAG,WAAW,GAAG,CAAC;yBAEvC,WAAW,EAAE,eAAe,EAC5B,WAAW,EAAE,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,EAA5B,CAA4B,EACnD,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,UAAU,GAClB,CACH;QAfkD,CAelD,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,SAAS,UAAU,CACjB,IAAiC,EACjC,GAAW,EACX,YAAuB;IAAvB,6BAAA,EAAA,uBAAuB;IAEvB,IAAI,OAAO,IAAI,KAAK,WAAW;QAAE,OAAO,YAAY,CAAC;IACrD,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC1C,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC;IACpE,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACxD,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,SAAS,SAAS,CAAC,IAAY,EAAE,MAAwB;IACvD,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACxD,CAAC"}

package/dist/esm/SplitView/styles.module.css.json

@@ -0,0 +1 @@
+{ "SplitView": "_SplitView_1oi17_1", "SplitView--dragging": "_SplitView--dragging_1oi17_8", "SplitView--vertical": "_SplitView--vertical_1oi17_8", "SplitView--horizontal": "_SplitView--horizontal_1oi17_12", "SplitView--disable-select": "_SplitView--disable-select_1oi17_16", "SplitViewPane": "_SplitViewPane_1oi17_20" }

package/dist/esm/SplitView/types.d.ts

@@ -0,0 +1,8 @@
+export declare type IAxis = {
+    x: number;
+    y: number;
+};
+export declare type ICacheSizes = {
+    sizes: (string | number)[];
+    sashPosSizes: (string | number)[];
+};

package/dist/esm/SplitView/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/SplitView/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/SplitView/types.ts"],"names":[],"mappings":""}

package/dist/esm/VerticalSplit/index.d.ts

@@ -0,0 +1,238 @@
+import React from 'react';
+export declare type VerticalSplitProps = {
+    mode?: 'overlay' | 'split';
+    minSize?: number | string;
+    maxSize?: number | string;
+    size?: number | string;
+    primaryPane: 'left' | 'right';
+    isSecondaryCollapsed?: boolean;
+    allowResize?: boolean;
+    children: [React.ReactNode, React.ReactNode];
+    onDragFinished?: (newSize: number) => void;
+    onSecondaryToggle?: (secondaryExpanded: boolean) => void;
+};
+/**
+ * @example Resizable, left primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="left" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Resizable, right primary panel
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <div style={{ height: 500, position: 'relative' }}>
+ *     <VerticalSplit primaryPane="right" size="25%" minSize={220}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Secondary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Sidebar
+ *         </div>
+ *       </div>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *         <Toolbar>
+ *           <ToolbarStack stackSize="l">
+ *             <ToolbarTitle>Primary</ToolbarTitle>
+ *           </ToolbarStack>
+ *         </Toolbar>
+ *         <div
+ *           style={{
+ *             flex: '1',
+ *             display: 'flex',
+ *             justifyContent: 'center',
+ *             alignItems: 'center',
+ *             height: '150px',
+ *           }}
+ *         >
+ *           Main content
+ *         </div>
+ *       </div>
+ *     </VerticalSplit>
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Collapsible
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ *
+ * @example Overlay mode
+ *
+ * ```js
+ *   <Canvas ctx={ctx}>
+ *    <div style={{ height: 500, position: 'relative' }}>
+ *      <StateManager initial={true}>
+ *        {(isCollapsed, setCollapsed) => (
+ *          <VerticalSplit
+ *            mode="overlay"
+ *            primaryPane="left"
+ *            size="25%"
+ *            minSize={220}
+ *            isSecondaryCollapsed={isCollapsed}
+ *            onSecondaryToggle={setCollapsed}
+ *          >
+ *            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Primary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Main content
+ *              </div>
+ *            </div>
+ *            <div
+ *              style={{
+ *                display: 'flex',
+ *                flexDirection: 'column',
+ *                height: '100%',
+ *                borderLeft: '1px solid var(--border-color)',
+ *              }}
+ *            >
+ *              <Toolbar>
+ *                <ToolbarStack stackSize="l">
+ *                  <ToolbarTitle>Secondary</ToolbarTitle>
+ *                </ToolbarStack>
+ *              </Toolbar>
+ *              <div
+ *                style={{
+ *                  flex: '1',
+ *                  display: 'flex',
+ *                  justifyContent: 'center',
+ *                  alignItems: 'center',
+ *                  height: '150px',
+ *                }}
+ *              >
+ *                Sidebar
+ *              </div>
+ *            </div>
+ *          </VerticalSplit>
+ *        )}
+ *      </StateManager>
+ *    </div>
+ *  </Canvas>;
+ * ```
+ */
+export declare function VerticalSplit({ mode, minSize, maxSize, size, primaryPane, children, allowResize, onDragFinished, onSecondaryToggle, isSecondaryCollapsed, }: VerticalSplitProps): JSX.Element;