@vuu-ui/vuu-ui-controls 4.0.0-alpha.20 → 4.0.0-alpha.22

package/package.json

@@ -1,30 +1,30 @@
 {
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.22",
   "description": "VUU UI Controls",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
-  "type": "module",
   "scripts": {
     "build:dev": "node ../../scripts/run-build.mjs",
     "build": "node ../../scripts/run-build-rslib.ts",
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.22"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20",
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/icons": "1.16.0",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-layout": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.22",
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/icons": "1.18.3",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
     "tabbable": "^6.0.0"
   },
   "peerDependencies": {
@@ -35,6 +35,7 @@
     "react-dom": "^19.2.3"
   },
   "sideEffects": false,
+  "type": "module",
   "files": [
     "README.md",
     "src",

package/src/drag-drop/Draggable.css.js

@@ -26,14 +26,14 @@ const css = `
 }
 
 .vuuDraggable-dropIndicator {
-  background-color: var(--salt-palette-accent-background);
+  background-color: var(--salt-sentiment-accent-background);
   width: 100%;
   height: 2px;
 }
 
 .vuuDraggable-dropIndicator:before {
   content: "";
-  background-color: var(--salt-palette-accent-background);
+  background-color: var(--salt-sentiment-accent-background);
   border-radius: 3px;
   width: 6px;
   height: 6px;

package/src/expando-input/ExpandoInput.css.js

@@ -31,7 +31,7 @@ const css = `
 }
 
 .vuuExpandoInput-error {
-  border-color: var(--vuu-color-red-50);
+  border-color: var(--salt-color-red-500);
 }
 
 .vuuExpandoInput .saltInput {

package/src/hover-overlay/HoverOverlay.css.js

@@ -0,0 +1,8 @@
+const css = `
+.vuuHoverOverlay-panel {
+  --saltOverlay-borderColor: var(--salt-container-primary-borderColor);
+}
+
+
+`;
+export default css;

package/src/hover-overlay/HoverOverlay.js

@@ -1,11 +1,38 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Overlay, OverlayPanel, OverlayPanelContent, OverlayTrigger } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { containsPoint } from "@vuu-ui/vuu-utils";
 import { useCallback, useEffect, useRef, useState } from "react";
-const HoverOverlay = ({ children, open: openProp = false, onOpenChange, placement = "right", trigger })=>{
+import HoverOverlay from "./HoverOverlay.css";
+const classBase = "vuuHoverOverlay";
+const OPEN_DELAY = 400;
+const CLOSE_DELAY = 300;
+const HoverOverlay_HoverOverlay = ({ children, open: openProp = false, onOpenChange, openOn = "hover", placement = "right", trigger })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-hover-overlay",
+        css: HoverOverlay,
+        window: targetWindow
+    });
     const [open, _setOpen] = useState(openProp);
     const isOpen = useRef(false);
     const showHandle = useRef(void 0);
     const hideHandle = useRef(void 0);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const clearShowTimer = useCallback(()=>{
+        if (showHandle.current) {
+            clearTimeout(showHandle.current);
+            showHandle.current = void 0;
+        }
+    }, []);
+    const clearHideTimer = useCallback(()=>{
+        if (hideHandle.current) {
+            clearTimeout(hideHandle.current);
+            hideHandle.current = void 0;
+        }
+    }, []);
     const setOpen = useCallback((open)=>{
         if (open !== isOpen.current) {
             isOpen.current = open;
@@ -15,78 +42,100 @@ const HoverOverlay = ({ children, open: openProp = false, onOpenChange, placemen
     }, [
         onOpenChange
     ]);
+    const startHideTimer = useCallback(()=>{
+        if (void 0 === hideHandle.current) hideHandle.current = setTimeout(()=>{
+            hideHandle.current = void 0;
+            setOpen(false);
+        }, CLOSE_DELAY);
+    }, [
+        setOpen
+    ]);
     useEffect(()=>{
         if (openProp !== isOpen.current) setOpen(openProp);
     }, [
         openProp,
         setOpen
     ]);
-    const handleOverlayMouseEnter = useCallback(()=>{
-        if (hideHandle.current) {
-            clearTimeout(hideHandle.current);
-            hideHandle.current = void 0;
+    useEffect(()=>()=>{
+            clearShowTimer();
+            clearHideTimer();
+        }, [
+        clearHideTimer,
+        clearShowTimer
+    ]);
+    useEffect(()=>{
+        if (open && "hover" === openOn) {
+            const doc = triggerRef.current?.ownerDocument ?? document;
+            const handlePointerMove = ({ clientX, clientY })=>{
+                if (containsPoint(triggerRef.current, clientX, clientY) || containsPoint(panelRef.current, clientX, clientY)) clearHideTimer();
+                else startHideTimer();
+            };
+            doc.addEventListener("pointermove", handlePointerMove);
+            doc.documentElement.addEventListener("mouseleave", startHideTimer);
+            return ()=>{
+                doc.removeEventListener("pointermove", handlePointerMove);
+                doc.documentElement.removeEventListener("mouseleave", startHideTimer);
+                clearHideTimer();
+            };
         }
-    }, []);
-    const handleOverlayMouseLeave = useCallback(()=>{
-        hideHandle.current = setTimeout(()=>{
-            setOpen(false);
-            hideHandle.current = void 0;
-        }, 300);
     }, [
-        setOpen
+        clearHideTimer,
+        open,
+        openOn,
+        startHideTimer
     ]);
     const handleMouseEnter = useCallback(()=>{
-        showHandle.current = setTimeout(()=>{
-            setOpen(true);
+        if (!isOpen.current && void 0 === showHandle.current) showHandle.current = setTimeout(()=>{
             showHandle.current = void 0;
-        }, 400);
-        if (hideHandle.current) {
-            clearTimeout(hideHandle.current);
-            hideHandle.current = void 0;
-        }
+            setOpen(true);
+        }, OPEN_DELAY);
     }, [
         setOpen
     ]);
     const handleMouseLeave = useCallback(()=>{
-        if (showHandle.current) {
-            clearTimeout(showHandle.current);
-            showHandle.current = void 0;
-        } else if (isOpen.current) hideHandle.current = setTimeout(()=>{
-            setOpen(false);
-            hideHandle.current = void 0;
-        }, 300);
+        clearShowTimer();
     }, [
-        setOpen
+        clearShowTimer
     ]);
     const handleClick = useCallback(()=>{
-        if (showHandle.current) {
-            clearTimeout(showHandle.current);
-            showHandle.current = void 0;
-        } else if (isOpen.current) setOpen(false);
+        clearShowTimer();
+    }, [
+        clearShowTimer
+    ]);
+    const handleOpenChange = useCallback((open)=>{
+        clearShowTimer();
+        clearHideTimer();
+        setOpen(open);
     }, [
+        clearHideTimer,
+        clearShowTimer,
         setOpen
     ]);
+    const triggerProps = "hover" === openOn ? {
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+    } : void 0;
     return /*#__PURE__*/ jsxs(Overlay, {
         placement: placement,
-        onOpenChange: onOpenChange,
+        onOpenChange: handleOpenChange,
         open: open,
         children: [
             /*#__PURE__*/ jsx(OverlayTrigger, {
                 children: /*#__PURE__*/ jsx("div", {
-                    onClick: handleClick,
-                    onMouseEnter: handleMouseEnter,
-                    onMouseLeave: handleMouseLeave,
+                    ...triggerProps,
+                    ref: triggerRef,
                     children: trigger
                 })
             }),
             /*#__PURE__*/ jsx(OverlayPanel, {
+                className: `${classBase}-panel`,
+                ref: panelRef,
                 children: /*#__PURE__*/ jsx(OverlayPanelContent, {
-                    onMouseEnter: handleOverlayMouseEnter,
-                    onMouseLeave: handleOverlayMouseLeave,
                     children: children
                 })
             })
         ]
     });
 };
-export { HoverOverlay };
+export { HoverOverlay_HoverOverlay as HoverOverlay };

package/src/icon-button/ToggleIconButton.css.js

@@ -37,7 +37,7 @@ const css = `
 .vuuTableGroupCell:hover {
   & .vuuToggleIconButton {
     & .vuuIcon:after {
-      --vuu-icon-color: var(--salt-palette-interact-cta-background-hover);
+      --vuu-icon-color: var(--salt-sentiment-accent-background);
     }
   }
 }

package/src/index.js

@@ -14,6 +14,7 @@ export * from "./measured-container/index.js";
 export * from "./overflow-container/index.js";
 export * from "./price-ticker/index.js";
 export * from "./split-button/index.js";
+export * from "./split-pane/index.js";
 export * from "./table-search/index.js";
 export * from "./tabs-next/index.js";
 export * from "./tabstrip/index.js";

package/src/item-picker/ItemPicker.css.js

@@ -35,7 +35,7 @@ const css = `
     }
 
     & .vuuHighlight {
-      color: var(--vuu-color-blue-40);
+      color: var(--salt-color-blue-400);
       text-decoration: underline;
     }
 

package/src/item-picker/useItemPicker.js

@@ -17,7 +17,11 @@ const itemName = (target)=>{
     if (name) return name;
     throw Error("[useItemPicker] item name could not be identified, data-name attribute not found");
 };
-const byItemName = ({ name: n1 }, { name: n2 })=>n1 > n2 ? 1 : n2 > n1 ? -1 : 0;
+const byItemName = (item1, item2)=>{
+    const n1 = item1.label ? item1.label : item1.name;
+    const n2 = item2.label ? item2.label : item2.name;
+    return n1 > n2 ? 1 : n2 > n1 ? -1 : 0;
+};
 const useItemPicker = ({ allItems, selectedItems, maxSelections, onSelectedItemsChange })=>{
     if (maxSelections && selectedItems.length > maxSelections) throw Error(`[useItemPicker] max selections ${maxSelections} exceeded by selected items (that has count ${selectedItems.length})`);
     const [searchPattern, setSearchPattern] = useState("");

package/src/price-ticker/PriceTicker.css.js

@@ -15,15 +15,15 @@ const css = `
 }
 
 .vuuPriceTicker.up1, .vuuPriceTicker.up2 {
-  --vuu-icon-color: var(--vuu-color-green-50);
-  color: var(--vuu-color-green-50);
+  --vuu-icon-color: var(--salt-color-green-500);
+  color: var(--salt-color-green-500);
   animation-duration: 30s;
 }
 
 .vuuPriceTicker.down1, .vuuPriceTicker.down2 {
   --vuu-icon-transform: rotate(180deg);
-  --vuu-icon-color: var(--vuu-color-red-50);
-  color: var(--vuu-color-red-50);
+  --vuu-icon-color: var(--salt-color-red-500);
+  color: var(--salt-color-red-500);
   animation-duration: 30s;
 }
 

package/src/split-pane/SplitPane.css.js

@@ -0,0 +1,82 @@
+const css = `
+.vuuSplitPane {
+  --vuuSplitPane-align: stretch;
+  --vuuSplitPane-direction: row;
+  --vuuSplitPane-gap: 0;
+  --vuuSplitPane-justify: flex-start;
+  --vuuSplitPane-margin: 0;
+  --vuuSplitPane-padding: 0;
+  --vuuSplitPane-splitterSize: 3px;
+  --vuuSplitPane-splitter-background: var(--salt-separable-secondary-borderColor);
+  --vuuSplitPane-splitter-background-active: var(--salt-separable-primary-borderColor);
+  --vuuSplitPane-splitter-grabZone: 4px;
+  align-items: var(--vuuSplitPane-align);
+  box-sizing: border-box;
+  flex-direction: var(--vuuSplitPane-direction);
+  gap: var(--vuuSplitPane-gap);
+  justify-content: var(--vuuSplitPane-justify);
+  margin: var(--vuuSplitPane-margin);
+  min-width: 0;
+  min-height: 0;
+  padding: var(--vuuSplitPane-padding);
+  flex-wrap: nowrap;
+  display: flex;
+  overflow: hidden;
+}
+
+:where(.vuuSplitPane) > :where(:not(.vuuSplitPane-splitter)) {
+  box-sizing: border-box;
+}
+
+:where(.vuuSplitPane-row) > :where(:not(.vuuSplitPane-splitter)) {
+  min-width: 0;
+}
+
+:where(.vuuSplitPane-column) > :where(:not(.vuuSplitPane-splitter)) {
+  min-height: 0;
+}
+
+.vuuSplitPane-splitter {
+  background-color: var(--vuuSplitPane-splitter-background);
+  flex: 0 0 var(--vuuSplitPane-splitterSize);
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+  position: relative;
+}
+
+.vuuSplitPane-splitter:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.vuuSplitPane-row > .vuuSplitPane-splitter {
+  cursor: ew-resize;
+}
+
+.vuuSplitPane-row > .vuuSplitPane-splitter:before {
+  left: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+  right: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+}
+
+.vuuSplitPane-column > .vuuSplitPane-splitter {
+  cursor: ns-resize;
+}
+
+.vuuSplitPane-column > .vuuSplitPane-splitter:before {
+  bottom: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+  top: calc(-1 * var(--vuuSplitPane-splitter-grabZone));
+}
+
+.vuuSplitPane-splitter:hover, .vuuSplitPane-splitter-active {
+  --vuuSplitPane-splitter-background: var(--vuuSplitPane-splitter-background-active);
+}
+
+.vuuSplitPane-splitter:focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+
+`;
+export default css;

package/src/split-pane/SplitPane.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { resolveResponsiveValue, useBreakpoint, useForkRef } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { Children, forwardRef } from "react";
+import { Splitter } from "./Splitter.js";
+import { useSplitPane } from "./useSplitPane.js";
+import SplitPane_0 from "./SplitPane.css";
+const classBase = "vuuSplitPane";
+const parseSpacing = (value)=>"number" == typeof value ? `calc(var(--salt-spacing-100) * ${value})` : value;
+const parseAlignment = (value)=>"start" === value || "end" === value ? `flex-${value}` : value;
+const SplitPane_SplitPane = /*#__PURE__*/ forwardRef(function({ align, children, className, direction = "row", gap = 0, justify, margin = 0, onSplitterMoved, padding = 0, splitterSize, style, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-split-pane",
+        css: SplitPane_0,
+        window: targetWindow
+    });
+    const { matchedBreakpoints } = useBreakpoint();
+    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints) ?? "row";
+    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);
+    const flexMargin = resolveResponsiveValue(margin, matchedBreakpoints);
+    const flexPadding = resolveResponsiveValue(padding, matchedBreakpoints);
+    const panes = Children.toArray(children);
+    if (panes.length > 2) throw Error(`[SplitPane] supports a maximum of two children, ${panes.length} were provided`);
+    const { beginResize, endResize, resize, rootRef, splitterPosition } = useSplitPane({
+        direction: flexDirection,
+        onSplitterMoved,
+        paneCount: panes.length
+    });
+    const splitPaneStyle = {
+        ...style,
+        "--vuuSplitPane-align": parseAlignment(align),
+        "--vuuSplitPane-direction": flexDirection,
+        "--vuuSplitPane-gap": parseSpacing(flexGap),
+        "--vuuSplitPane-justify": parseAlignment(justify),
+        "--vuuSplitPane-margin": parseSpacing(flexMargin),
+        "--vuuSplitPane-padding": parseSpacing(flexPadding),
+        "--vuuSplitPane-splitterSize": void 0 === splitterSize ? void 0 : `${splitterSize}px`
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, `${classBase}-${flexDirection}`, className),
+        ref: useForkRef(rootRef, forwardedRef),
+        style: splitPaneStyle,
+        children: [
+            panes[0],
+            2 === panes.length ? /*#__PURE__*/ jsx(Splitter, {
+                direction: flexDirection,
+                onResize: resize,
+                onResizeEnd: endResize,
+                onResizeStart: beginResize,
+                position: splitterPosition
+            }) : null,
+            panes[1]
+        ]
+    });
+});
+export { SplitPane_SplitPane as SplitPane };

package/src/split-pane/Splitter.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCallback, useRef, useState } from "react";
+const classBase = "vuuSplitPane-splitter";
+const KEYBOARD_STEP = 1;
+const KEYBOARD_STEP_LARGE = 10;
+const Splitter = ({ className, direction, onResize, onResizeEnd, onResizeStart, position, ...htmlAttributes })=>{
+    const startPosRef = useRef(void 0);
+    const [active, setActive] = useState(false);
+    const isColumn = "column" === direction;
+    const getPointerPos = useCallback((e)=>isColumn ? e.clientY : e.clientX, [
+        isColumn
+    ]);
+    const handlePointerDown = useCallback((e)=>{
+        if (0 === e.button && onResizeStart()) {
+            e.preventDefault();
+            e.currentTarget.focus();
+            e.currentTarget.setPointerCapture(e.pointerId);
+            startPosRef.current = getPointerPos(e);
+            setActive(true);
+        }
+    }, [
+        getPointerPos,
+        onResizeStart
+    ]);
+    const handlePointerMove = useCallback((e)=>{
+        if (void 0 !== startPosRef.current) onResize(getPointerPos(e) - startPosRef.current);
+    }, [
+        getPointerPos,
+        onResize
+    ]);
+    const handlePointerEnd = useCallback(()=>{
+        if (void 0 !== startPosRef.current) {
+            startPosRef.current = void 0;
+            setActive(false);
+            onResizeEnd();
+        }
+    }, [
+        onResizeEnd
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        const step = e.shiftKey ? KEYBOARD_STEP_LARGE : KEYBOARD_STEP;
+        const [decrementKey, incrementKey] = isColumn ? [
+            "ArrowUp",
+            "ArrowDown"
+        ] : [
+            "ArrowLeft",
+            "ArrowRight"
+        ];
+        const distance = e.key === decrementKey ? -step : e.key === incrementKey ? step : "Home" === e.key ? -1 / 0 : "End" === e.key ? 1 / 0 : void 0;
+        if (void 0 !== distance && onResizeStart()) {
+            e.preventDefault();
+            onResize(distance);
+            onResizeEnd();
+        }
+    }, [
+        isColumn,
+        onResize,
+        onResizeEnd,
+        onResizeStart
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-label": "Resize",
+        ...htmlAttributes,
+        "aria-orientation": isColumn ? "horizontal" : "vertical",
+        "aria-valuemax": 100,
+        "aria-valuemin": 0,
+        "aria-valuenow": position,
+        className: clsx(classBase, className, {
+            [`${classBase}-active`]: active
+        }),
+        onKeyDown: handleKeyDown,
+        onLostPointerCapture: handlePointerEnd,
+        onPointerCancel: handlePointerEnd,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerEnd,
+        role: "separator",
+        tabIndex: 0
+    });
+};
+export { Splitter };

package/src/split-pane/index.js

@@ -0,0 +1 @@
+export * from "./SplitPane.js";

package/src/split-pane/useSplitPane.js

@@ -0,0 +1,101 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+const parsePx = (value, defaultValue)=>value.endsWith("px") ? parseFloat(value) : defaultValue;
+const measurePane = (el, dimension)=>{
+    const { [dimension]: size } = el.getBoundingClientRect();
+    const style = getComputedStyle(el);
+    return {
+        size,
+        minSize: parsePx(style.getPropertyValue(`min-${dimension}`), 0),
+        maxSize: parsePx(style.getPropertyValue(`max-${dimension}`), 1 / 0)
+    };
+};
+const getPanes = (root)=>{
+    const pane1 = root?.children[0];
+    const pane2 = root?.children[2];
+    if (pane1 && pane2) return [
+        pane1,
+        pane2
+    ];
+};
+const toPercentage = ([size1, size2])=>{
+    const total = size1 + size2;
+    return 0 === total ? 0 : Math.round(size1 / total * 100);
+};
+const useSplitPane = ({ direction, onSplitterMoved, paneCount })=>{
+    const rootRef = useRef(null);
+    const resizeStateRef = useRef(void 0);
+    const [splitterPosition, setSplitterPosition] = useState(void 0);
+    const dimension = "column" === direction ? "height" : "width";
+    const hasSplitter = 2 === paneCount;
+    useLayoutEffect(()=>{
+        const panes = hasSplitter ? getPanes(rootRef.current) : void 0;
+        if (panes) {
+            const [pane1, pane2] = panes;
+            setSplitterPosition(toPercentage([
+                pane1.getBoundingClientRect()[dimension],
+                pane2.getBoundingClientRect()[dimension]
+            ]));
+        }
+    }, [
+        dimension,
+        hasSplitter
+    ]);
+    const beginResize = useCallback(()=>{
+        const panes = getPanes(rootRef.current);
+        if (panes) {
+            const [pane1, pane2] = panes;
+            const measurements = [
+                measurePane(pane1, dimension),
+                measurePane(pane2, dimension)
+            ];
+            resizeStateRef.current = {
+                panes,
+                measurements,
+                sizes: [
+                    measurements[0].size,
+                    measurements[1].size
+                ]
+            };
+            return true;
+        }
+        return false;
+    }, [
+        dimension
+    ]);
+    const resize = useCallback((distance)=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            const { panes: [pane1, pane2], measurements: [m1, m2] } = resizeState;
+            const total = m1.size + m2.size;
+            const lowerBound = Math.max(m1.minSize, total - m2.maxSize);
+            const upperBound = Math.min(m1.maxSize, total - m2.minSize);
+            const size1 = Math.max(lowerBound, Math.min(upperBound, m1.size + distance));
+            const size2 = total - size1;
+            pane1.style.flexBasis = `${size1}px`;
+            pane2.style.flexBasis = `${size2}px`;
+            resizeState.sizes = [
+                size1,
+                size2
+            ];
+        }
+    }, []);
+    const endResize = useCallback(()=>{
+        const resizeState = resizeStateRef.current;
+        if (resizeState) {
+            resizeStateRef.current = void 0;
+            const { measurements, sizes } = resizeState;
+            setSplitterPosition(toPercentage(sizes));
+            if (sizes[0] !== measurements[0].size || sizes[1] !== measurements[1].size) onSplitterMoved?.(sizes);
+        }
+    }, [
+        onSplitterMoved
+    ]);
+    return {
+        beginResize,
+        endResize,
+        resize,
+        rootRef,
+        splitterPosition
+    };
+};
+export { useSplitPane };