@linzjs/lui 21.26.1 → 21.26.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [21.26.2](https://github.com/linz/lui/compare/v21.26.1...v21.26.2) (2024-04-18)
+
+
+### Bug Fixes
+
+* **Splitter:** calculation based on aria-valuenow ([#1111](https://github.com/linz/lui/issues/1111)) ([1b60dad](https://github.com/linz/lui/commit/1b60dad8bfe401d5d6ce30176ef2139e8c5a7626))
+
 ## [21.26.1](https://github.com/linz/lui/compare/v21.26.0...v21.26.1) (2024-04-15)
 
 

package/dist/index.js

@@ -58762,6 +58762,15 @@ var animateSeparator = function (separatorRef, animate) {
     }
 };
 
+var useSetValueNow_static = function (setValueNow, separator) {
+    var _a = React.useState(0), count = _a[0], setCount = _a[1];
+    React.useEffect(function () { return transition(separator).resume(); }, [count]);
+    return React.useCallback(function (val, config) {
+        transition(separator).stop();
+        setValueNow(val, config);
+        setCount(function (p) { return p + 1; });
+    }, [setValueNow]);
+};
 /**
  * Moves separator as per ratio changes. Centers on first render if ratio is undefined.
  */
@@ -58782,8 +58791,7 @@ var useRatioEffect = function (setValueNow, separator, ratio, startAt) {
  * Re-arranges the splitter if the limits or orientation change.
  */
 var useConfigEffect = function (setValueNow, separator) {
-    var _a = React.useState(0), count = _a[0], setCount = _a[1];
-    React.useEffect(function () { return transition(separator).resume(); }, [count]);
+    var setValueNow_static = useSetValueNow_static(setValueNow, separator);
     React.useEffect(function () {
         var callback = function (attr) {
             return function (_a) {
@@ -58800,27 +58808,26 @@ var useConfigEffect = function (setValueNow, separator) {
                 // In such case, the newValueNow is moved along with the delimiter.
                 var newValueNow = !wasInBoundary ? valueNow : newValue;
                 if (wasInBoundary || valueMax < valueNow || valueMin > valueNow) {
-                    transition(separator).stop();
-                    setValueNow(newValueNow, { min: valueMin, max: valueMax });
-                    setCount(function (p) { return p + 1; });
+                    setValueNow_static(newValueNow, { min: valueMin, max: valueMax });
                 }
                 else {
+                    var threshold = 0.01;
                     var dim = values.orientation === 'vertical' ? 'width' : 'height';
-                    var gap = target.getBoundingClientRect()[dim];
+                    var abs = values.orientation === 'vertical' ? 'left' : 'top';
+                    var separatorRect = target.getBoundingClientRect();
+                    var gap = separatorRect[dim];
                     var offset = gap / 2;
                     var splitterEl = target.parentElement;
-                    var primaryEl = splitterEl.childNodes[0];
                     var splitterRect = splitterEl.getBoundingClientRect();
-                    var primaryRect = primaryEl.getBoundingClientRect();
                     var container = splitterRect[dim];
-                    var primary = primaryRect[dim];
-                    var seconday = container - primary - gap;
-                    if (primary === 0 || seconday === 0) {
+                    var primary = Math.max(separatorRect[abs] - splitterRect[abs], 0);
+                    var secondary = Math.max(container - primary - gap, 0);
+                    if (primary < threshold || secondary < threshold) {
                         return;
                     }
                     var newVal = ((primary + offset) / container) * 100;
-                    if (Math.abs(newVal - valueNow) >= 0.01) {
-                        setValueNow(newVal, { min: valueMin, max: valueMax });
+                    if (Math.abs(newVal - valueNow) >= threshold) {
+                        setValueNow_static(newVal, { min: valueMin, max: valueMax });
                     }
                 }
             };
@@ -59124,7 +59131,7 @@ var useBoundary = function (separator, boundaries) {
     }
 };
 
-var canceEvent = function (e) {
+var cancelEvent = function (e) {
     if (e.currentTarget !== e.target) {
         e.preventDefault();
         e.stopPropagation();
@@ -59153,7 +59160,7 @@ var Separator = React.forwardRef(function (_a, forwardRef) {
             }
             (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
         }, className: clsx('Separator', props.className) }),
-        React__default["default"].createElement("span", __assign({}, parts === null || parts === void 0 ? void 0 : parts.container, { className: clsx('Separator-arrows', (_b = parts === null || parts === void 0 ? void 0 : parts.container) === null || _b === void 0 ? void 0 : _b.className), onMouseDown: canceEvent, onTouchStart: canceEvent }),
+        React__default["default"].createElement("span", __assign({}, parts === null || parts === void 0 ? void 0 : parts.container, { className: clsx('Separator-arrows', (_b = parts === null || parts === void 0 ? void 0 : parts.container) === null || _b === void 0 ? void 0 : _b.className), onMouseDown: cancelEvent, onTouchStart: cancelEvent }),
             React__default["default"].createElement(Control, __assign({}, parts === null || parts === void 0 ? void 0 : parts.primary, { side: "primary", onClick: function (e) {
                     var _a, _b;
                     setValueNow(controlClickHandler(e, 'primary'));