@linzjs/lui 21.26.0 → 21.26.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Bug Fixes
+
+* **Splitter:** issue min/max @ 0px ([#1110](https://github.com/linz/lui/issues/1110)) ([500778b](https://github.com/linz/lui/commit/500778b07eeefdbf2a193819733a2541a3deb302))
+
 # [21.26.0](https://github.com/linz/lui/compare/v21.25.0...v21.26.0) (2024-04-11)
 
 

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,20 +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 offset = target.getBoundingClientRect()[dim] / 2;
-                    var splitter = target.parentElement;
-                    var primary = splitter.childNodes[0];
-                    var splitterRect = splitter.getBoundingClientRect();
-                    var primaryRect = primary.getBoundingClientRect();
-                    var newVal = ((primaryRect[dim] + offset) / splitterRect[dim]) * 100;
-                    if (Math.abs(newVal - valueNow) >= 0.01) {
-                        setValueNow(newVal, { min: valueMin, max: valueMax });
+                    var abs = values.orientation === 'vertical' ? 'left' : 'top';
+                    var separatorRect = target.getBoundingClientRect();
+                    var gap = separatorRect[dim];
+                    var offset = gap / 2;
+                    var splitterEl = target.parentElement;
+                    var splitterRect = splitterEl.getBoundingClientRect();
+                    var container = splitterRect[dim];
+                    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) >= threshold) {
+                        setValueNow_static(newVal, { min: valueMin, max: valueMax });
                     }
                 }
             };
@@ -58880,25 +58894,29 @@ var getGridTemplate = function (separator) {
     var dimension = orientation === 'horizontal' ? 'height' : 'width';
     var seperatorAbsolutePx = (rect[dimension] / 100) * valueNow;
     var offset = gap / 2;
+    var clamp = function (val, type) {
+        return "clamp(".concat(offset, "px, ").concat(val).concat(type, ", calc(100% - ").concat(offset, "px))");
+    };
     if (boundary === 'keep-primary') {
+        var grid = Math.max(seperatorAbsolutePx - offset, 0);
         return {
-            grid: "".concat(seperatorAbsolutePx - offset, "px 1fr"),
-            primary: "".concat(seperatorAbsolutePx, "px"),
+            grid: "".concat(grid, "px 1fr"),
+            primary: clamp(seperatorAbsolutePx, 'px'),
             secondary: ''
         };
     }
     if (boundary === 'keep-secondary') {
+        var grid = Math.max(rect[dimension] - seperatorAbsolutePx - offset, 0);
         return {
-            grid: "1fr ".concat(rect[dimension] - seperatorAbsolutePx - offset, "px"),
+            grid: "1fr ".concat(grid, "px"),
             primary: '',
-            secondary: "".concat(rect[dimension] - seperatorAbsolutePx, "px")
+            secondary: clamp(rect[dimension] - seperatorAbsolutePx, 'px')
         };
     }
-    var primary = "clamp(".concat(offset, "px, ").concat(valueNow, "%, calc(100% - ").concat(offset, "px))");
     return {
         grid: "min(calc(".concat(valueNow, "% - ").concat(gap / 2, "px), calc(100% - ").concat(gap, "px)) 1fr"),
-        primary: primary,
-        secondary: "calc(100% - ".concat(primary, ")")
+        primary: clamp(valueNow, '%'),
+        secondary: "calc(100% - ".concat(clamp(valueNow, '%'), ")")
     };
 };
 
@@ -59113,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();
@@ -59142,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'));