@vuu-ui/vuu-ui-controls 4.0.0-alpha.8 → 4.0.0-beta.1

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 };

package/src/tabstrip/Tab.css.js

@@ -101,7 +101,7 @@ const css = `
 }
 
 .vuuTab.vuuFocusVisible {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  background: var(--vuuTab-hover-background, var(--salt-navigable-background-hover));
   outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));
   outline-offset: -1px;
   outline-width: 1px;
@@ -121,7 +121,7 @@ const css = `
 
 .vuuTabstrip-draggingTab .vuuTab-selected:before {
   --tab-before-content: "";
-  --tab-before-background: var(--salt-navigable-indicator-color-active);
+  --tab-before-background: var(--salt-navigable-accent-indicator-active);
   --tab-before-height: var(--tab-thumb-height);
   --tab-before-inset: var(--tab-activationIndicator-inset);
   --tab-before-width: var(--tab-activationIndicator-thumb-width);
@@ -140,7 +140,7 @@ const css = `
 }
 
 .vuuTab:hover:not(.vuuTab-closeHover, .vuuTab-selected) {
-  background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));
+  background: var(--vuuTab-hover-background, var(--salt-navigable-background-hover));
 }
 
 

package/src/tabstrip/Tabstrip.css.js

@@ -52,7 +52,7 @@ const css = `
 
 .vuuTabstrip-overflowMenu-open {
   --saltButton-background: var(--salt-actionable-subtle-background-active);
-  --saltButton-text-color: var(--salt-actionable-subtle-text-color-active);
+  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);
 }
 
 .vuuTabstrip-overflowMenu-open .saltButton {
@@ -82,7 +82,7 @@ const css = `
   --tabstrip-display: flex;
   --tabstrip-height: 100%;
   --tabstrip-dragging-display: block;
-  --tabs-tab-background: var(--salt-navigable-primary-background-hover);
+  --tabs-tab-background: var(--salt-navigable-background-hover);
   --tabs-tab-before-content: "";
   --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
   --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);

package/src/tabstrip/Tabstrip.js

@@ -67,7 +67,7 @@ const Tabstrip_Tabstrip = ({ activeTabIndex: activeTabIndexProp, allowAddTab, al
             key: "addButton",
             onClick: onClickAddTab,
             variant: "secondary",
-            tabIndex: -1 === activeTabIndex ? 0 : -1
+            tabIndex: -1
         }) : []), [
         children,
         allowAddTab,