@scalewing/react 1.33.0 → 1.33.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.33.1
+
+### Patch Changes
+
+- 2a52f01: `Split` no longer widens the page in a narrow container. The split is now at most its container's width less the split minimum (`max-width: calc(100% - var(--sw-split-min))`), so the next column keeps 14rem and the start pane shrinks below its 22rem default instead of running past the container. Before, at 390 px the pane kept 22rem, the next column got no width and its words pushed the page out sideways (the gallery measured 481 px; found by Teisoro F-011). The drag and keyboard range follows the same room: the pane's maximum is the container less the handle and the next column's minimum (as before), and when that room is under the minimum the range narrows to it, so a gesture starts from the width on screen, a move to the end never collapses or jumps the pane, and one step to the start collapses it. The pane keeps the width the reader chose (a collapse never overwrites it) and shows it held to the container's range, so a pane expanded after the container widens shows at least its minimum. The separator's `aria-valuenow` reports the width that shows (100 when the container leaves no range) and follows container resizes. No API, class or token changes.
+
 ## 1.33.0
 
 ### Minor Changes

package/dist/components/Split.js

@@ -1,21 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { spacingScale } from '@scalewing/tokens';
-import { useCallback, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { useCallback, useId, useRef, useState, } from 'react';
 import { cx } from '../class-names.js';
-import { applySplitDrag, applySplitKey, cssLengthToPx, effectiveSplitMax, readSplitMetrics, splitPercent, } from '../split-size.js';
-function metricsFrom(node) {
-    const styles = getComputedStyle(node);
-    const remPx = cssLengthToPx(getComputedStyle(document.documentElement).fontSize) || 16;
-    return readSplitMetrics((name) => styles.getPropertyValue(name), remPx);
-}
+import { applySplitDrag, applySplitKey, clampSplitSize, splitPercent, } from '../split-size.js';
+import { useSplitRange } from './use-split-range.js';
 export function Split({ children, className, collapsed: collapsedProp, label, onCollapsedChange, ...rest }) {
     const paneId = useId();
     const splitRef = useRef(null);
     const handleRef = useRef(null);
     const dragRef = useRef(null);
     const [width, setWidth] = useState(null);
-    const [range, setRange] = useState(null);
     const [collapsedUncontrolled, setCollapsedUncontrolled] = useState(false);
     const collapsed = collapsedProp ?? collapsedUncontrolled;
     const setCollapsed = useCallback((next) => {
@@ -24,38 +19,25 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
             setCollapsedUncontrolled(next);
         }
     }, [collapsedProp, onCollapsedChange]);
-    useLayoutEffect(() => {
-        const node = splitRef.current;
-        if (!node) {
-            return;
-        }
-        const measured = metricsFrom(node);
-        setRange({ min: measured.min, max: measured.max });
-        setWidth((current) => current ?? measured.defaultWidth);
-    }, []);
-    function dragMetrics() {
-        const split = splitRef.current;
-        const handle = handleRef.current;
-        if (!split) {
-            return { min: 0, max: 0, step: 16, defaultWidth: 0 };
-        }
-        const measured = metricsFrom(split);
-        const parentWidth = split.parentElement?.getBoundingClientRect().width ?? 0;
-        const handleWidth = handle?.getBoundingClientRect().width ?? 0;
-        return {
-            ...measured,
-            max: effectiveSplitMax(measured.max, parentWidth, handleWidth, measured.min),
-        };
-    }
-    function currentSnapshot() {
-        const measured = dragMetrics();
+    const { range, measure } = useSplitRange(splitRef, handleRef);
+    /**
+     * `width` is the reader's chosen width; what shows is it held to the range
+     * the container leaves, so an expansion never shows a pane under its
+     * minimum or past the room, and a gesture starts from what shows.
+     */
+    function currentSnapshot(metrics) {
         return {
             collapsed,
-            width: width ?? measured.defaultWidth,
+            width: clampSplitSize(width ?? metrics.defaultWidth, metrics.min, metrics.max),
         };
     }
-    function applySnapshot(next) {
-        setWidth(next.width);
+    function applySnapshot(next, start) {
+        // Only a gesture that moves the pane chooses a width: a collapse, or a
+        // move held at the end of a narrow container's range, keeps the chosen
+        // one, so it shows again when the container widens.
+        if (!next.collapsed && next.width !== start.width) {
+            setWidth(next.width);
+        }
         if (next.collapsed !== collapsed) {
             setCollapsed(next.collapsed);
         }
@@ -67,11 +49,12 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
         event.preventDefault();
         event.currentTarget.focus();
         event.currentTarget.setPointerCapture?.(event.pointerId);
+        const metrics = measure();
         dragRef.current = {
             pointerId: event.pointerId,
             startX: event.clientX,
-            snapshot: currentSnapshot(),
-            metrics: dragMetrics(),
+            snapshot: currentSnapshot(metrics),
+            metrics,
             moved: false,
         };
     }
@@ -84,7 +67,7 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
         if (Math.abs(delta) >= spacingScale[1]) {
             drag.moved = true;
         }
-        applySnapshot(applySplitDrag(drag.snapshot, delta, drag.metrics));
+        applySnapshot(applySplitDrag(drag.snapshot, delta, drag.metrics), drag.snapshot);
     }
     function endDrag(event) {
         const drag = dragRef.current;
@@ -101,17 +84,21 @@ export function Split({ children, className, collapsed: collapsedProp, label, on
         if (!splitRef.current) {
             return;
         }
-        const next = applySplitKey(event.key, currentSnapshot(), dragMetrics());
+        const metrics = measure();
+        const start = currentSnapshot(metrics);
+        const next = applySplitKey(event.key, start, metrics);
         if (!next) {
             return;
         }
         event.preventDefault();
-        applySnapshot(next);
+        applySnapshot(next, start);
     }
-    const valueNow = collapsed
+    // What shows: the chosen width held to the container's range.
+    const shownWidth = range
+        ? clampSplitSize(width ?? range.defaultWidth, range.min, range.max)
+        : null;
+    const valueNow = collapsed || !range || shownWidth === null
         ? 0
-        : range && width !== null
-            ? splitPercent(width, range.min, range.max)
-            : 0;
-    return (_jsxs("div", { ...rest, ref: splitRef, className: cx('sw-split', className), "data-collapsed": collapsed ? '' : undefined, children: [_jsx("div", { className: "sw-split-pane", id: paneId, "aria-hidden": collapsed || undefined, style: width === null ? undefined : { width: `${width}px` }, children: children }), _jsx("div", { ref: handleRef, "aria-controls": paneId, "aria-label": collapsed ? `Show ${label}` : `Resize ${label}`, "aria-orientation": "vertical", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": valueNow, className: "sw-split-handle", onKeyDown: onKeyDown, onPointerCancel: endDrag, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, role: "separator", tabIndex: 0, children: _jsx("span", { "aria-hidden": "true", className: "sw-split-grip" }) })] }));
+        : splitPercent(shownWidth, range.min, range.max);
+    return (_jsxs("div", { ...rest, ref: splitRef, className: cx('sw-split', className), "data-collapsed": collapsed ? '' : undefined, children: [_jsx("div", { className: "sw-split-pane", id: paneId, "aria-hidden": collapsed || undefined, style: shownWidth === null ? undefined : { width: `${shownWidth}px` }, children: children }), _jsx("div", { ref: handleRef, "aria-controls": paneId, "aria-label": collapsed ? `Show ${label}` : `Resize ${label}`, "aria-orientation": "vertical", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": valueNow, className: "sw-split-handle", onKeyDown: onKeyDown, onPointerCancel: endDrag, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, role: "separator", tabIndex: 0, children: _jsx("span", { "aria-hidden": "true", className: "sw-split-grip" }) })] }));
 }

package/dist/components/use-split-range.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+import { type SplitMetrics } from '../split-size.js';
+export type SplitRange = Pick<SplitMetrics, 'min' | 'max'> & {
+    defaultWidth: number;
+};
+/**
+ * The range a Split's pane can take in its container, measured on layout and
+ * whenever the container resizes, and `measure` for a gesture, which also
+ * brings the shown range up to date. An unchanged range keeps its state, so
+ * a resize that changes nothing does not render again.
+ */
+export declare function useSplitRange(splitRef: RefObject<HTMLDivElement | null>, handleRef: RefObject<HTMLDivElement | null>): {
+    range: SplitRange | null;
+    measure: () => SplitMetrics & {
+        defaultWidth: number;
+    };
+};

package/dist/components/use-split-range.js

@@ -0,0 +1,49 @@
+'use client';
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { containerContentWidth, splitTokenMetrics } from '../split-measure.js';
+import { effectiveSplitRange } from '../split-size.js';
+function sameRange(a, b) {
+    return (a !== null &&
+        a.min === b.min &&
+        a.max === b.max &&
+        a.defaultWidth === b.defaultWidth);
+}
+/**
+ * The range a Split's pane can take in its container, measured on layout and
+ * whenever the container resizes, and `measure` for a gesture, which also
+ * brings the shown range up to date. An unchanged range keeps its state, so
+ * a resize that changes nothing does not render again.
+ */
+export function useSplitRange(splitRef, handleRef) {
+    const [range, setRange] = useState(null);
+    const measure = useCallback(() => {
+        const split = splitRef.current;
+        if (!split) {
+            return { min: 0, max: 0, step: 16, defaultWidth: 0 };
+        }
+        const tokens = splitTokenMetrics(split);
+        const handleWidth = handleRef.current?.getBoundingClientRect().width ?? 0;
+        const measured = {
+            ...tokens,
+            ...effectiveSplitRange(tokens, containerContentWidth(split), handleWidth),
+        };
+        const next = {
+            min: measured.min,
+            max: measured.max,
+            defaultWidth: measured.defaultWidth,
+        };
+        setRange((current) => (sameRange(current, next) ? current : next));
+        return measured;
+    }, [splitRef, handleRef]);
+    useLayoutEffect(() => {
+        const parent = splitRef.current?.parentElement;
+        measure();
+        if (!parent || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, [measure, splitRef]);
+    return { range, measure };
+}

package/dist/css/css-split.js

@@ -6,6 +6,7 @@ export function cssSplitClasses() {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
+  max-width: calc(100% - var(--sw-split-min));
   min-width: 0;
 }
 

package/dist/split-measure.d.ts

@@ -0,0 +1,7 @@
+import { type SplitMetrics } from './split-size.js';
+/** The container's content width, which the split's percentage cap uses. */
+export declare function containerContentWidth(node: HTMLElement): number;
+/** The split's token range, step and default width, in px. */
+export declare function splitTokenMetrics(node: HTMLElement): SplitMetrics & {
+    defaultWidth: number;
+};

package/dist/split-measure.js

@@ -0,0 +1,21 @@
+// DOM reads for Split: the split's token metrics from its computed custom
+// properties, and its container's content width (what the stylesheet's
+// percentage cap resolves against). The range math stays pure in
+// `split-size.ts`.
+import { cssLengthToPx, readSplitMetrics, } from './split-size.js';
+/** The container's content width, which the split's percentage cap uses. */
+export function containerContentWidth(node) {
+    const parent = node.parentElement;
+    if (!parent) {
+        return 0;
+    }
+    const styles = getComputedStyle(parent);
+    const padding = cssLengthToPx(styles.paddingLeft) + cssLengthToPx(styles.paddingRight);
+    return Math.max(0, parent.clientWidth - padding);
+}
+/** The split's token range, step and default width, in px. */
+export function splitTokenMetrics(node) {
+    const styles = getComputedStyle(node);
+    const remPx = cssLengthToPx(getComputedStyle(document.documentElement).fontSize) || 16;
+    return readSplitMetrics((name) => styles.getPropertyValue(name), remPx);
+}

package/dist/split-size.d.ts

@@ -12,7 +12,21 @@ export declare function readSplitMetrics(read: (name: string) => string, remPx?:
     defaultWidth: number;
 };
 export declare function clampSplitSize(size: number, min: number, max: number): number;
+/**
+ * The pane's place between its minimum and maximum as 0–100. When the
+ * container leaves no range (min equals max), the pane is as wide as it can
+ * be: 100.
+ */
 export declare function splitPercent(width: number, min: number, max: number): number;
-export declare function effectiveSplitMax(tokenMax: number, parentWidth: number, handleWidth: number, min: number): number;
+/**
+ * The range a pane can take in its container. The stylesheet keeps the split
+ * at most its container less the split minimum, so the next column keeps that
+ * minimum and the pane gets the room left after the handle. In a narrow
+ * container that room is under the token minimum, so the range narrows to it:
+ * a pane never grows past what shows, and only a move narrower than the room
+ * collapses it. A container that is not laid out (zero width) keeps the
+ * token range.
+ */
+export declare function effectiveSplitRange(tokens: Pick<SplitMetrics, 'min' | 'max'>, containerWidth: number, handleWidth: number): Pick<SplitMetrics, 'min' | 'max'>;
 export declare function applySplitDrag(start: SplitSnapshot, deltaX: number, metrics: SplitMetrics): SplitSnapshot;
 export declare function applySplitKey(key: string, start: SplitSnapshot, metrics: SplitMetrics): SplitSnapshot | null;

package/dist/split-size.js

@@ -23,21 +23,33 @@ export function readSplitMetrics(read, remPx = 16) {
 export function clampSplitSize(size, min, max) {
     return Math.min(max, Math.max(min, size));
 }
+/**
+ * The pane's place between its minimum and maximum as 0–100. When the
+ * container leaves no range (min equals max), the pane is as wide as it can
+ * be: 100.
+ */
 export function splitPercent(width, min, max) {
     if (max <= min) {
-        return 0;
+        return 100;
     }
     return Math.round(((clampSplitSize(width, min, max) - min) / (max - min)) * 100);
 }
-export function effectiveSplitMax(tokenMax, parentWidth, handleWidth, min) {
-    if (parentWidth <= 0) {
-        return tokenMax;
+/**
+ * The range a pane can take in its container. The stylesheet keeps the split
+ * at most its container less the split minimum, so the next column keeps that
+ * minimum and the pane gets the room left after the handle. In a narrow
+ * container that room is under the token minimum, so the range narrows to it:
+ * a pane never grows past what shows, and only a move narrower than the room
+ * collapses it. A container that is not laid out (zero width) keeps the
+ * token range.
+ */
+export function effectiveSplitRange(tokens, containerWidth, handleWidth) {
+    if (containerWidth <= 0) {
+        return { min: tokens.min, max: tokens.max };
     }
-    const room = parentWidth - handleWidth - min;
-    if (room < min) {
-        return min;
-    }
-    return Math.min(tokenMax, room);
+    const room = Math.max(0, containerWidth - handleWidth - tokens.min);
+    const max = Math.min(tokens.max, room);
+    return { min: Math.min(tokens.min, max), max };
 }
 export function applySplitDrag(start, deltaX, metrics) {
     if (start.collapsed) {

package/dist/styles.css

@@ -5321,6 +5321,7 @@ body {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
+  max-width: calc(100% - var(--sw-split-min));
   min-width: 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",