@window-splitter/react 0.8.0

package/dist/commonjs/ReactWindowSplitter.stories.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { PanelGroupHandle, PanelHandle } from "@window-splitter/interface";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare function Simple({ handle }: {
+    handle?: React.Ref<PanelGroupHandle>;
+}): React.JSX.Element;
+export declare function Autosave({ handle }: {
+    handle?: React.Ref<PanelGroupHandle>;
+}): React.JSX.Element;
+export declare function AutosaveCollapsible({ handle, onCollapseChange, }: {
+    handle?: React.Ref<PanelGroupHandle>;
+    onCollapseChange?: (c: boolean) => void;
+}): React.JSX.Element;
+export declare function DynamicConstraints({ handle, }: {
+    handle?: React.Ref<PanelGroupHandle>;
+}): React.JSX.Element;
+export declare function SimpleMin(): React.JSX.Element;
+export declare function SimpleMinMax(): React.JSX.Element;
+export declare function SimpleConstraints(): React.JSX.Element;
+export declare function HorizontalLayout(): React.JSX.Element;
+export declare function VerticalLayout({ handle, }: {
+    handle?: React.Ref<PanelGroupHandle>;
+}): React.JSX.Element;
+export declare function VerticalLayout2({ handle, }: {
+    handle?: React.Ref<PanelGroupHandle>;
+}): React.JSX.Element;
+export declare function NestedGroups(): React.JSX.Element;
+export declare function WithOverflow(): React.JSX.Element;
+export declare function Collapsible({ leftPanelHandle, rightPanelHandle, handle, }: {
+    leftPanelHandle?: React.Ref<PanelHandle>;
+    handle?: React.Ref<PanelGroupHandle>;
+    rightPanelHandle?: React.Ref<PanelHandle>;
+}): React.JSX.Element;
+export declare function CustomCollapseAnimation(): React.JSX.Element;
+export declare function ImperativePanel(): React.JSX.Element;
+export declare function ConditionalPanel({ handle, }: {
+    handle?: React.Ref<PanelGroupHandle>;
+}): React.JSX.Element;
+export declare function ConditionalPanelComplex(): React.JSX.Element;
+export declare function WithDefaultWidth(): React.JSX.Element;
+export declare function StaticAtRest({ handle, }: {
+    handle?: React.Ref<PanelGroupHandle>;
+}): React.JSX.Element;
+//# sourceMappingURL=ReactWindowSplitter.stories.d.ts.map

package/dist/commonjs/ReactWindowSplitter.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactWindowSplitter.stories.d.ts","sourceRoot":"","sources":["../../src/ReactWindowSplitter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAUvC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;;;;AAE3E,wBAEE;AA+CF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,qBAQ1E;AAED,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,qBAQ5E;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,gBAA8B,GAC/B,EAAE;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,qBAgBA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,GACP,EAAE;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC,qBA6BA;AAED,wBAAgB,SAAS,sBAgBxB;AAED,wBAAgB,YAAY,sBAgB3B;AAED,wBAAgB,iBAAiB,sBAYhC;AAED,wBAAgB,gBAAgB,sBAc/B;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,GACP,EAAE;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC,qBAkBA;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,GACP,EAAE;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC,qBAqBA;AAED,wBAAgB,YAAY,sBA6B3B;AAED,wBAAgB,YAAY,sBAoG3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,gBAAgB,EAChB,MAAM,GACP,EAAE;IACD,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3C,qBAwCA;AAED,wBAAgB,uBAAuB,sBAuCtC;AAED,wBAAgB,eAAe,sBA2G9B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,GACP,EAAE;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC,qBA8BA;AAED,wBAAgB,uBAAuB,sBA4CtC;AAED,wBAAgB,gBAAgB,sBAc/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,GACP,EAAE;IACD,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACtC,qBAYA"}

package/dist/commonjs/ReactWindowSplitter.stories.js

@@ -0,0 +1,330 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Simple = Simple;
+exports.Autosave = Autosave;
+exports.AutosaveCollapsible = AutosaveCollapsible;
+exports.DynamicConstraints = DynamicConstraints;
+exports.SimpleMin = SimpleMin;
+exports.SimpleMinMax = SimpleMinMax;
+exports.SimpleConstraints = SimpleConstraints;
+exports.HorizontalLayout = HorizontalLayout;
+exports.VerticalLayout = VerticalLayout;
+exports.VerticalLayout2 = VerticalLayout2;
+exports.NestedGroups = NestedGroups;
+exports.WithOverflow = WithOverflow;
+exports.Collapsible = Collapsible;
+exports.CustomCollapseAnimation = CustomCollapseAnimation;
+exports.ImperativePanel = ImperativePanel;
+exports.ConditionalPanel = ConditionalPanel;
+exports.ConditionalPanelComplex = ConditionalPanelComplex;
+exports.WithDefaultWidth = WithDefaultWidth;
+exports.StaticAtRest = StaticAtRest;
+const react_1 = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+const ReactWindowSplitter_js_1 = require("./ReactWindowSplitter.js");
+exports.default = {
+    title: "Components/React",
+};
+function StyledPanelGroup(props) {
+    return (react_1.default.createElement(ReactWindowSplitter_js_1.PanelGroup, { ...props, style: {
+            border: "1px solid rgba(0, 0, 0, 0.3)",
+            background: "rgba(0, 0, 0, 0.1)",
+            borderRadius: 12,
+            boxSizing: "border-box",
+            ...props.style,
+        } }));
+}
+function StyledPanel({ children, ...props }) {
+    return (react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { style: {
+            overflow: "hidden",
+        }, ...props },
+        react_1.default.createElement("div", { style: {
+                height: "100%",
+                width: "100%",
+                padding: 20,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden",
+                boxSizing: "border-box",
+            } }, children)));
+}
+function StyledResizer(props) {
+    return react_1.default.createElement(ReactWindowSplitter_js_1.PanelResizer, { size: "10px", style: { background: "red" }, ...props });
+}
+function Simple({ handle }) {
+    return (react_1.default.createElement(StyledPanelGroup, { handle: handle, style: { height: 200 } },
+        react_1.default.createElement(StyledPanel, null, "Panel 1"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" }, "Panel 2")));
+}
+function Autosave({ handle }) {
+    return (react_1.default.createElement(StyledPanelGroup, { handle: handle, autosaveId: "autosave-example" },
+        react_1.default.createElement(StyledPanel, { id: "1" }, "Panel 1"),
+        react_1.default.createElement(StyledResizer, { id: "resizer" }),
+        react_1.default.createElement(StyledPanel, { id: "2" }, "Panel 2")));
+}
+function AutosaveCollapsible({ handle, onCollapseChange = console.log, }) {
+    return (react_1.default.createElement(StyledPanelGroup, { handle: handle, autosaveId: "autosave-example-2" },
+        react_1.default.createElement(StyledPanel, { id: "1", collapsible: true, collapsedSize: "100px", min: "140px", onCollapseChange: onCollapseChange }, "Collapsible"),
+        react_1.default.createElement(StyledResizer, { id: "resizer" }),
+        react_1.default.createElement(StyledPanel, { id: "2" }, "Panel 2")));
+}
+function DynamicConstraints({ handle, }) {
+    const [customOn, setCustomOn] = react_1.default.useState(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledPanelGroup, { handle: handle },
+            react_1.default.createElement(StyledPanel, { default: "100px", ...(customOn ? { min: "200px" } : { min: "100px" }) },
+                react_1.default.createElement("div", null, "Panel 1")),
+            react_1.default.createElement(StyledResizer, null),
+            react_1.default.createElement(StyledPanel, { min: "100px" },
+                react_1.default.createElement("div", null, "Panel 2")),
+            react_1.default.createElement(StyledResizer, null),
+            react_1.default.createElement(StyledPanel, { ...(customOn ? { min: "100px" } : { min: "400px" }), ...(customOn ? { max: "300px" } : { max: "700px" }) },
+                react_1.default.createElement("div", null, "Panel 3"))),
+        react_1.default.createElement("button", { type: "button", onClick: () => setCustomOn(!customOn) }, "Toggle Custom")));
+}
+function SimpleMin() {
+    return (react_1.default.createElement(StyledPanelGroup, null,
+        react_1.default.createElement(StyledPanel, { min: "100px" },
+            react_1.default.createElement("div", null, "Panel 1")),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" },
+            react_1.default.createElement("div", null, "Panel 2")),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" },
+            react_1.default.createElement("div", null, "Panel 3"))));
+}
+function SimpleMinMax() {
+    return (react_1.default.createElement(StyledPanelGroup, null,
+        react_1.default.createElement(StyledPanel, { min: "100px", max: "200px" },
+            react_1.default.createElement("div", null, "Panel 1")),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" },
+            react_1.default.createElement("div", null, "Panel 2")),
+        react_1.default.createElement(StyledResizer, { size: "20px" }),
+        react_1.default.createElement(StyledPanel, { min: "100px" },
+            react_1.default.createElement("div", null, "Panel 3"))));
+}
+function SimpleConstraints() {
+    return (react_1.default.createElement(StyledPanelGroup, null,
+        react_1.default.createElement(StyledPanel, { min: "100px", max: "50%" },
+            react_1.default.createElement("div", null, "Panel 1")),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, null,
+            react_1.default.createElement("div", null, "Panel 2"))));
+}
+function HorizontalLayout() {
+    return (react_1.default.createElement(StyledPanelGroup, { orientation: "horizontal" },
+        react_1.default.createElement(StyledPanel, { default: "30%", min: "20%" }, "left"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "20%" }, "middle"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { default: "30%", min: "20%" }, "right")));
+}
+function VerticalLayout({ handle, }) {
+    return (react_1.default.createElement(StyledPanelGroup, { handle: handle, orientation: "vertical", style: { height: 322 } },
+        react_1.default.createElement(StyledPanel, { default: "30%", min: "20%" }, "top"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "20%" }, "middle"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { default: "30%", min: "20%" }, "bottom")));
+}
+function VerticalLayout2({ handle, }) {
+    return (react_1.default.createElement(StyledPanelGroup, { handle: handle, orientation: "vertical", style: { height: "calc(100vh - 100px)" } },
+        react_1.default.createElement(StyledPanel, { default: "200px", min: "200px" }, "top"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "200px", collapsedSize: "60px", defaultCollapsed: true, collapsible: true }, "middle")));
+}
+function NestedGroups() {
+    return (react_1.default.createElement(ReactWindowSplitter_js_1.PanelGroup, { orientation: "horizontal", style: {
+            border: "1px solid rgba(0, 0, 0, 0.3)",
+            borderRadius: 12,
+            height: 400,
+        } },
+        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "10%" }, "left"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "10%" },
+            react_1.default.createElement(ReactWindowSplitter_js_1.PanelGroup, { orientation: "vertical" },
+                react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "10%" }, "top"),
+                react_1.default.createElement(StyledResizer, null),
+                react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "10%" },
+                    react_1.default.createElement(ReactWindowSplitter_js_1.PanelGroup, { orientation: "horizontal" },
+                        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "20%" }, "left"),
+                        react_1.default.createElement(StyledResizer, null),
+                        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "20%" }, "right"))))),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "10%" }, "right")));
+}
+function WithOverflow() {
+    return (react_1.default.createElement(StyledPanelGroup, { style: { height: 400 } },
+        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "200px" },
+            react_1.default.createElement("div", { style: {
+                    overflow: "auto",
+                    padding: 40,
+                    height: "100%",
+                    boxSizing: "border-box",
+                } },
+                react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."))),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { min: "200px" },
+            react_1.default.createElement("div", { style: {
+                    overflow: "auto",
+                    padding: 40,
+                    height: "100%",
+                    boxSizing: "border-box",
+                } },
+                react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl."),
+                react_1.default.createElement("p", null, "Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.")))));
+}
+function Collapsible({ leftPanelHandle, rightPanelHandle, handle, }) {
+    const [collapsed, setCollapsed] = react_1.default.useState(true);
+    return (react_1.default.createElement(StyledPanelGroup, { handle: handle },
+        react_1.default.createElement(StyledPanel, { handle: leftPanelHandle, min: "100px", collapsible: true, collapsedSize: "60px", style: { border: "10px solid green", boxSizing: "border-box" }, onCollapseChange: (isCollapsed) => {
+                console.log("COLLAPSE PASSIVE", isCollapsed);
+            } },
+            react_1.default.createElement("div", null, "1")),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" },
+            react_1.default.createElement("div", null, "2")),
+        react_1.default.createElement(StyledResizer, { id: "resizer-2" }),
+        react_1.default.createElement(StyledPanel, { handle: rightPanelHandle, min: "100px", collapsible: true, collapsedSize: "60px", defaultCollapsed: true, collapseAnimation: { easing: "bounce", duration: 1000 }, style: { border: "10px solid blue", boxSizing: "border-box" }, collapsed: collapsed, onCollapseChange: (isCollapsed) => {
+                console.log("COLLAPSE CONTROLLED", isCollapsed);
+                setCollapsed(isCollapsed);
+            } },
+            react_1.default.createElement("div", null, "3"))));
+}
+function CustomCollapseAnimation() {
+    const springFn = (0, react_1.useMemo)(() => {
+        return (0, framer_motion_1.spring)({
+            keyframes: [0, 1],
+            velocity: 1,
+            stiffness: 100,
+            damping: 10,
+            mass: 1.0,
+        });
+    }, []);
+    return (react_1.default.createElement(StyledPanelGroup, null,
+        react_1.default.createElement(StyledPanel, { min: "100px", collapsible: true, collapsedSize: "60px", style: { border: "10px solid green", boxSizing: "border-box" } }, "1"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" }, "2"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { style: { border: "10px solid blue", boxSizing: "border-box" }, min: "100px", collapsible: true, collapsedSize: "60px", defaultCollapsed: true, collapseAnimation: {
+                easing: (t) => springFn.next(t * 1000).value,
+                duration: 1000,
+            } }, "3")));
+}
+function ImperativePanel() {
+    const groupRef = react_1.default.useRef(null);
+    const panelRef = react_1.default.useRef(null);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(StyledPanelGroup, { handle: groupRef },
+            react_1.default.createElement(StyledPanel, { handle: panelRef, min: "100px", collapsible: true, collapsedSize: "60px" }, "1"),
+            react_1.default.createElement(StyledResizer, null),
+            react_1.default.createElement(StyledPanel, { min: "100px" }, "2"),
+            react_1.default.createElement(StyledResizer, null),
+            react_1.default.createElement(StyledPanel, { min: "100px", collapsible: true, collapsedSize: "60px", defaultCollapsed: true }, "3")),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("button", { type: "button", onClick: () => alert(`Sizes: ${groupRef.current?.getPixelSizes()}`) }, "Get pixel sizes"),
+            react_1.default.createElement("button", { type: "button", onClick: () => alert(`Sizes: ${groupRef.current?.getPercentageSizes()}`) }, "Get percent sizes"),
+            react_1.default.createElement("button", { type: "button", onClick: () => groupRef.current?.setSizes([
+                    "200px",
+                    "10px",
+                    "50%",
+                    "10px",
+                    "150px",
+                ]) }, "Override sizes")),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("button", { type: "button", onClick: () => panelRef.current?.collapse() }, "Collapse"),
+            react_1.default.createElement("button", { type: "button", onClick: () => alert(`Collapsed: ${panelRef.current?.isCollapsed()}`) }, "Is Collapsed?"),
+            react_1.default.createElement("button", { type: "button", onClick: () => panelRef.current?.expand() }, "Expand"),
+            react_1.default.createElement("button", { type: "button", onClick: () => alert(`Expanded: ${panelRef.current?.isExpanded()}`) }, "Is Expanded?"),
+            react_1.default.createElement("button", { type: "button", onClick: () => alert(`Id: ${panelRef.current?.getId()}`) }, "Get Id"),
+            react_1.default.createElement("button", { type: "button", onClick: () => alert(`Size: ${panelRef.current?.getPixelSize()}`) }, "Get Pixel Size"),
+            react_1.default.createElement("button", { type: "button", onClick: () => alert(`Percentage: ${panelRef.current?.getPercentageSize()}`) }, "Get Percentage Size"),
+            react_1.default.createElement("button", { type: "button", onClick: () => panelRef.current?.setSize("30px") }, "Set size to 100px"),
+            react_1.default.createElement("button", { type: "button", onClick: () => panelRef.current?.setSize("50%") }, "Set size to 50%"))));
+}
+function ConditionalPanel({ handle, }) {
+    const [isExpanded, setIsExpanded] = react_1.default.useState(false);
+    return (react_1.default.createElement(react_1.default.StrictMode, null,
+        react_1.default.createElement(StyledPanelGroup, { handle: handle },
+            react_1.default.createElement(StyledPanel, { id: "panel-1", min: "100px", collapsible: true, collapsedSize: "60px" },
+                react_1.default.createElement("div", null, "1")),
+            react_1.default.createElement(StyledResizer, { id: "handle-1" }),
+            react_1.default.createElement(StyledPanel, { id: "panel-2", min: "100px" },
+                react_1.default.createElement("div", null, "2")),
+            isExpanded && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(StyledResizer, { id: "handle-2" }),
+                react_1.default.createElement(StyledPanel, { id: "panel-3", min: "100px" },
+                    "3",
+                    react_1.default.createElement("button", { type: "button", onClick: () => setIsExpanded(false) }, "Close"))))),
+        react_1.default.createElement("button", { type: "button", onClick: () => setIsExpanded(true) }, "Expand")));
+}
+function ConditionalPanelComplex() {
+    const [isExpanded, setIsExpanded] = react_1.default.useState(false);
+    return (react_1.default.createElement(react_1.default.StrictMode, null,
+        react_1.default.createElement(StyledPanelGroup, null,
+            react_1.default.createElement(StyledPanel, { id: "panel-1", min: "100px", collapsible: true, collapsedSize: "60px" },
+                react_1.default.createElement("div", null, "1")),
+            react_1.default.createElement(StyledResizer, { id: "handle-1" }),
+            react_1.default.createElement(StyledPanel, { id: "panel-2", min: "100px" },
+                react_1.default.createElement("div", null, "2")),
+            react_1.default.createElement(StyledResizer, { id: "handle-2" }),
+            react_1.default.createElement(StyledPanel, { id: "panel-3", min: "100px" },
+                react_1.default.createElement("div", null, "3")),
+            isExpanded && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(StyledResizer, { id: "handle-3" }),
+                react_1.default.createElement(StyledPanel, { id: "panel-4", min: "100px" },
+                    "expanded",
+                    react_1.default.createElement("button", { type: "button", onClick: () => setIsExpanded(false) }, "Close")))),
+            react_1.default.createElement(StyledResizer, { id: "handle-4" }),
+            react_1.default.createElement(StyledPanel, { min: "200px", collapsible: true, collapsedSize: "60px", defaultCollapsed: true, id: "panel-5" },
+                react_1.default.createElement("div", null, "4"))),
+        react_1.default.createElement("button", { type: "button", onClick: () => setIsExpanded(true) }, "Expand")));
+}
+function WithDefaultWidth() {
+    return (react_1.default.createElement(ReactWindowSplitter_js_1.PanelGroup, { style: { height: "400px" } },
+        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { style: { backgroundColor: "#333366" } }),
+        react_1.default.createElement(ReactWindowSplitter_js_1.PanelResizer, { size: "3px" }),
+        react_1.default.createElement(ReactWindowSplitter_js_1.Panel, { default: "100px", min: "100px", max: "400px", style: { backgroundColor: "#ff3366" } })));
+}
+function StaticAtRest({ handle, }) {
+    return (react_1.default.createElement(StyledPanelGroup, { handle: handle, style: { height: 200 } },
+        react_1.default.createElement(StyledPanel, { min: "100px", max: "300px", isStaticAtRest: true }, "Panel 1"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" }, "Panel 2"),
+        react_1.default.createElement(StyledResizer, null),
+        react_1.default.createElement(StyledPanel, { min: "100px" }, "Panel 3")));
+}
+//# sourceMappingURL=ReactWindowSplitter.stories.js.map

package/dist/commonjs/ReactWindowSplitter.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactWindowSplitter.stories.js","sourceRoot":"","sources":["../../src/ReactWindowSplitter.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport { spring } from \"framer-motion\";\nimport {\n  PanelGroup,\n  PanelGroupProps,\n  Panel,\n  PanelProps,\n  PanelResizer,\n  PanelResizerProps,\n} from \"./ReactWindowSplitter.js\";\nimport { PanelGroupHandle, PanelHandle } from \"@window-splitter/interface\";\n\nexport default {\n  title: \"Components/React\",\n};\n\nfunction StyledPanelGroup(props: PanelGroupProps) {\n  return (\n    <PanelGroup\n      {...props}\n      style={{\n        border: \"1px solid rgba(0, 0, 0, 0.3)\",\n        background: \"rgba(0, 0, 0, 0.1)\",\n        borderRadius: 12,\n        boxSizing: \"border-box\",\n        ...props.style,\n      }}\n    />\n  );\n}\n\nfunction StyledPanel({ children, ...props }: PanelProps) {\n  return (\n    <Panel\n      style={{\n        overflow: \"hidden\",\n      }}\n      {...props}\n    >\n      <div\n        style={{\n          height: \"100%\",\n          width: \"100%\",\n          padding: 20,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          overflow: \"hidden\",\n          boxSizing: \"border-box\",\n        }}\n      >\n        {children}\n      </div>\n    </Panel>\n  );\n}\n\nfunction StyledResizer(props: PanelResizerProps) {\n  return <PanelResizer size=\"10px\" style={{ background: \"red\" }} {...props} />;\n}\n\nexport function Simple({ handle }: { handle?: React.Ref<PanelGroupHandle> }) {\n  return (\n    <StyledPanelGroup handle={handle} style={{ height: 200 }}>\n      <StyledPanel>Panel 1</StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">Panel 2</StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function Autosave({ handle }: { handle?: React.Ref<PanelGroupHandle> }) {\n  return (\n    <StyledPanelGroup handle={handle} autosaveId=\"autosave-example\">\n      <StyledPanel id=\"1\">Panel 1</StyledPanel>\n      <StyledResizer id=\"resizer\" />\n      <StyledPanel id=\"2\">Panel 2</StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function AutosaveCollapsible({\n  handle,\n  onCollapseChange = console.log,\n}: {\n  handle?: React.Ref<PanelGroupHandle>;\n  onCollapseChange?: (c: boolean) => void;\n}) {\n  return (\n    <StyledPanelGroup handle={handle} autosaveId=\"autosave-example-2\">\n      <StyledPanel\n        id=\"1\"\n        collapsible\n        collapsedSize=\"100px\"\n        min=\"140px\"\n        onCollapseChange={onCollapseChange}\n      >\n        Collapsible\n      </StyledPanel>\n      <StyledResizer id=\"resizer\" />\n      <StyledPanel id=\"2\">Panel 2</StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function DynamicConstraints({\n  handle,\n}: {\n  handle?: React.Ref<PanelGroupHandle>;\n}) {\n  const [customOn, setCustomOn] = React.useState(false);\n\n  return (\n    <>\n      <StyledPanelGroup handle={handle}>\n        <StyledPanel\n          default=\"100px\"\n          {...(customOn ? { min: \"200px\" } : { min: \"100px\" })}\n        >\n          <div>Panel 1</div>\n        </StyledPanel>\n        <StyledResizer />\n        <StyledPanel min=\"100px\">\n          <div>Panel 2</div>\n        </StyledPanel>\n        <StyledResizer />\n        <StyledPanel\n          {...(customOn ? { min: \"100px\" } : { min: \"400px\" })}\n          {...(customOn ? { max: \"300px\" } : { max: \"700px\" })}\n        >\n          <div>Panel 3</div>\n        </StyledPanel>\n      </StyledPanelGroup>\n      <button type=\"button\" onClick={() => setCustomOn(!customOn)}>\n        Toggle Custom\n      </button>\n    </>\n  );\n}\n\nexport function SimpleMin() {\n  return (\n    <StyledPanelGroup>\n      <StyledPanel min=\"100px\">\n        <div>Panel 1</div>\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">\n        <div>Panel 2</div>\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">\n        <div>Panel 3</div>\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function SimpleMinMax() {\n  return (\n    <StyledPanelGroup>\n      <StyledPanel min=\"100px\" max=\"200px\">\n        <div>Panel 1</div>\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">\n        <div>Panel 2</div>\n      </StyledPanel>\n      <StyledResizer size=\"20px\" />\n      <StyledPanel min=\"100px\">\n        <div>Panel 3</div>\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function SimpleConstraints() {\n  return (\n    <StyledPanelGroup>\n      <StyledPanel min=\"100px\" max=\"50%\">\n        <div>Panel 1</div>\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel>\n        <div>Panel 2</div>\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function HorizontalLayout() {\n  return (\n    <StyledPanelGroup orientation=\"horizontal\">\n      <StyledPanel default=\"30%\" min=\"20%\">\n        left\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"20%\">middle</StyledPanel>\n      <StyledResizer />\n      <StyledPanel default=\"30%\" min=\"20%\">\n        right\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function VerticalLayout({\n  handle,\n}: {\n  handle?: React.Ref<PanelGroupHandle>;\n}) {\n  return (\n    <StyledPanelGroup\n      handle={handle}\n      orientation=\"vertical\"\n      style={{ height: 322 }}\n    >\n      <StyledPanel default=\"30%\" min=\"20%\">\n        top\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"20%\">middle</StyledPanel>\n      <StyledResizer />\n      <StyledPanel default=\"30%\" min=\"20%\">\n        bottom\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function VerticalLayout2({\n  handle,\n}: {\n  handle?: React.Ref<PanelGroupHandle>;\n}) {\n  return (\n    <StyledPanelGroup\n      handle={handle}\n      orientation=\"vertical\"\n      style={{ height: \"calc(100vh - 100px)\" }}\n    >\n      <StyledPanel default=\"200px\" min=\"200px\">\n        top\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel\n        min=\"200px\"\n        collapsedSize=\"60px\"\n        defaultCollapsed\n        collapsible\n      >\n        middle\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function NestedGroups() {\n  return (\n    <PanelGroup\n      orientation=\"horizontal\"\n      style={{\n        border: \"1px solid rgba(0, 0, 0, 0.3)\",\n        borderRadius: 12,\n        height: 400,\n      }}\n    >\n      <Panel min=\"10%\">left</Panel>\n      <StyledResizer />\n      <Panel min=\"10%\">\n        <PanelGroup orientation=\"vertical\">\n          <Panel min=\"10%\">top</Panel>\n          <StyledResizer />\n          <Panel min=\"10%\">\n            <PanelGroup orientation=\"horizontal\">\n              <Panel min=\"20%\">left</Panel>\n              <StyledResizer />\n              <Panel min=\"20%\">right</Panel>\n            </PanelGroup>\n          </Panel>\n        </PanelGroup>\n      </Panel>\n      <StyledResizer />\n      <Panel min=\"10%\">right</Panel>\n    </PanelGroup>\n  );\n}\n\nexport function WithOverflow() {\n  return (\n    <StyledPanelGroup style={{ height: 400 }}>\n      <Panel min=\"200px\">\n        <div\n          style={{\n            overflow: \"auto\",\n            padding: 40,\n            height: \"100%\",\n            boxSizing: \"border-box\",\n          }}\n        >\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec\n            euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu\n            tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n        </div>\n      </Panel>\n      <StyledResizer />\n      <Panel min=\"200px\">\n        <div\n          style={{\n            overflow: \"auto\",\n            padding: 40,\n            height: \"100%\",\n            boxSizing: \"border-box\",\n          }}\n        >\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec\n            euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi, eu\n            tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n          <p>\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl. Sed euismod, nisl eget ultricies\n            ultrices, nunc nisi aliquam nisi, eu tincidunt nisl nisl eu nisl.\n            Sed euismod, nisl eget ultricies ultrices, nunc nisi aliquam nisi,\n            eu tincidunt nisl nisl eu nisl.\n          </p>\n        </div>\n      </Panel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function Collapsible({\n  leftPanelHandle,\n  rightPanelHandle,\n  handle,\n}: {\n  leftPanelHandle?: React.Ref<PanelHandle>;\n  handle?: React.Ref<PanelGroupHandle>;\n  rightPanelHandle?: React.Ref<PanelHandle>;\n}) {\n  const [collapsed, setCollapsed] = React.useState(true);\n\n  return (\n    <StyledPanelGroup handle={handle}>\n      <StyledPanel\n        handle={leftPanelHandle}\n        min=\"100px\"\n        collapsible\n        collapsedSize=\"60px\"\n        style={{ border: \"10px solid green\", boxSizing: \"border-box\" }}\n        onCollapseChange={(isCollapsed) => {\n          console.log(\"COLLAPSE PASSIVE\", isCollapsed);\n        }}\n      >\n        <div>1</div>\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">\n        <div>2</div>\n      </StyledPanel>\n      <StyledResizer id=\"resizer-2\" />\n      <StyledPanel\n        handle={rightPanelHandle}\n        min=\"100px\"\n        collapsible\n        collapsedSize=\"60px\"\n        defaultCollapsed\n        collapseAnimation={{ easing: \"bounce\", duration: 1000 }}\n        style={{ border: \"10px solid blue\", boxSizing: \"border-box\" }}\n        collapsed={collapsed}\n        onCollapseChange={(isCollapsed) => {\n          console.log(\"COLLAPSE CONTROLLED\", isCollapsed);\n          setCollapsed(isCollapsed);\n        }}\n      >\n        <div>3</div>\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function CustomCollapseAnimation() {\n  const springFn = useMemo(() => {\n    return spring({\n      keyframes: [0, 1],\n      velocity: 1,\n      stiffness: 100,\n      damping: 10,\n      mass: 1.0,\n    });\n  }, []);\n\n  return (\n    <StyledPanelGroup>\n      <StyledPanel\n        min=\"100px\"\n        collapsible\n        collapsedSize=\"60px\"\n        style={{ border: \"10px solid green\", boxSizing: \"border-box\" }}\n      >\n        1\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">2</StyledPanel>\n      <StyledResizer />\n      <StyledPanel\n        style={{ border: \"10px solid blue\", boxSizing: \"border-box\" }}\n        min=\"100px\"\n        collapsible\n        collapsedSize=\"60px\"\n        defaultCollapsed\n        collapseAnimation={{\n          easing: (t) => springFn.next(t * 1000).value,\n          duration: 1000,\n        }}\n      >\n        3\n      </StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n\nexport function ImperativePanel() {\n  const groupRef = React.useRef<PanelGroupHandle>(null);\n  const panelRef = React.useRef<PanelHandle>(null);\n\n  return (\n    <>\n      <StyledPanelGroup handle={groupRef}>\n        <StyledPanel\n          handle={panelRef}\n          min=\"100px\"\n          collapsible\n          collapsedSize=\"60px\"\n        >\n          1\n        </StyledPanel>\n        <StyledResizer />\n        <StyledPanel min=\"100px\">2</StyledPanel>\n        <StyledResizer />\n        <StyledPanel\n          min=\"100px\"\n          collapsible\n          collapsedSize=\"60px\"\n          defaultCollapsed\n        >\n          3\n        </StyledPanel>\n      </StyledPanelGroup>\n\n      <div>\n        <button\n          type=\"button\"\n          onClick={() => alert(`Sizes: ${groupRef.current?.getPixelSizes()}`)}\n        >\n          Get pixel sizes\n        </button>\n        <button\n          type=\"button\"\n          onClick={() =>\n            alert(`Sizes: ${groupRef.current?.getPercentageSizes()}`)\n          }\n        >\n          Get percent sizes\n        </button>\n        <button\n          type=\"button\"\n          onClick={() =>\n            groupRef.current?.setSizes([\n              \"200px\",\n              \"10px\",\n              \"50%\",\n              \"10px\",\n              \"150px\",\n            ])\n          }\n        >\n          Override sizes\n        </button>\n      </div>\n\n      <div>\n        <button type=\"button\" onClick={() => panelRef.current?.collapse()}>\n          Collapse\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => alert(`Collapsed: ${panelRef.current?.isCollapsed()}`)}\n        >\n          Is Collapsed?\n        </button>\n        <button type=\"button\" onClick={() => panelRef.current?.expand()}>\n          Expand\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => alert(`Expanded: ${panelRef.current?.isExpanded()}`)}\n        >\n          Is Expanded?\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => alert(`Id: ${panelRef.current?.getId()}`)}\n        >\n          Get Id\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => alert(`Size: ${panelRef.current?.getPixelSize()}`)}\n        >\n          Get Pixel Size\n        </button>\n        <button\n          type=\"button\"\n          onClick={() =>\n            alert(`Percentage: ${panelRef.current?.getPercentageSize()}`)\n          }\n        >\n          Get Percentage Size\n        </button>\n        <button type=\"button\" onClick={() => panelRef.current?.setSize(\"30px\")}>\n          Set size to 100px\n        </button>\n        <button type=\"button\" onClick={() => panelRef.current?.setSize(\"50%\")}>\n          Set size to 50%\n        </button>\n      </div>\n    </>\n  );\n}\n\nexport function ConditionalPanel({\n  handle,\n}: {\n  handle?: React.Ref<PanelGroupHandle>;\n}) {\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  return (\n    <React.StrictMode>\n      <StyledPanelGroup handle={handle}>\n        <StyledPanel id=\"panel-1\" min=\"100px\" collapsible collapsedSize=\"60px\">\n          <div>1</div>\n        </StyledPanel>\n        <StyledResizer id=\"handle-1\" />\n        <StyledPanel id=\"panel-2\" min=\"100px\">\n          <div>2</div>\n        </StyledPanel>\n        {isExpanded && (\n          <>\n            <StyledResizer id=\"handle-2\" />\n            <StyledPanel id=\"panel-3\" min=\"100px\">\n              3\n              <button type=\"button\" onClick={() => setIsExpanded(false)}>\n                Close\n              </button>\n            </StyledPanel>\n          </>\n        )}\n      </StyledPanelGroup>\n      <button type=\"button\" onClick={() => setIsExpanded(true)}>\n        Expand\n      </button>\n    </React.StrictMode>\n  );\n}\n\nexport function ConditionalPanelComplex() {\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  return (\n    <React.StrictMode>\n      <StyledPanelGroup>\n        <StyledPanel id=\"panel-1\" min=\"100px\" collapsible collapsedSize=\"60px\">\n          <div>1</div>\n        </StyledPanel>\n        <StyledResizer id=\"handle-1\" />\n        <StyledPanel id=\"panel-2\" min=\"100px\">\n          <div>2</div>\n        </StyledPanel>\n        <StyledResizer id=\"handle-2\" />\n        <StyledPanel id=\"panel-3\" min=\"100px\">\n          <div>3</div>\n        </StyledPanel>\n        {isExpanded && (\n          <>\n            <StyledResizer id=\"handle-3\" />\n            <StyledPanel id=\"panel-4\" min=\"100px\">\n              expanded\n              <button type=\"button\" onClick={() => setIsExpanded(false)}>\n                Close\n              </button>\n            </StyledPanel>\n          </>\n        )}\n        <StyledResizer id=\"handle-4\" />\n        <StyledPanel\n          min=\"200px\"\n          collapsible\n          collapsedSize=\"60px\"\n          defaultCollapsed\n          id=\"panel-5\"\n        >\n          <div>4</div>\n        </StyledPanel>\n      </StyledPanelGroup>\n      <button type=\"button\" onClick={() => setIsExpanded(true)}>\n        Expand\n      </button>\n    </React.StrictMode>\n  );\n}\n\nexport function WithDefaultWidth() {\n  return (\n    <PanelGroup style={{ height: \"400px\" }}>\n      <Panel style={{ backgroundColor: \"#333366\" }} />\n      <PanelResizer size=\"3px\" />\n      {/* I expected the right panel to be 100px wide */}\n      <Panel\n        default=\"100px\"\n        min=\"100px\"\n        max=\"400px\"\n        style={{ backgroundColor: \"#ff3366\" }}\n      />\n    </PanelGroup>\n  );\n}\n\nexport function StaticAtRest({\n  handle,\n}: {\n  handle?: React.Ref<PanelGroupHandle>;\n}) {\n  return (\n    <StyledPanelGroup handle={handle} style={{ height: 200 }}>\n      <StyledPanel min=\"100px\" max=\"300px\" isStaticAtRest>\n        Panel 1\n      </StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">Panel 2</StyledPanel>\n      <StyledResizer />\n      <StyledPanel min=\"100px\">Panel 3</StyledPanel>\n    </StyledPanelGroup>\n  );\n}\n"]}

package/dist/commonjs/ReactWindowSplitter.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReactWindowSplitter.test.d.ts.map

package/dist/commonjs/ReactWindowSplitter.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactWindowSplitter.test.d.ts","sourceRoot":"","sources":["../../src/ReactWindowSplitter.test.tsx"],"names":[],"mappings":""}