@linzjs/lui 21.23.0 → 21.23.1

package/dist/lui.esm.js

@@ -58651,25 +58651,23 @@ var animateSeparator = function (separatorRef, animate) {
 };
 
 /**
- * Ensures valueNow is set to a valid value within its allowed boundaries.
- * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ * Moves separator as per ratio changes. Centers on first render if ratio is undefined.
  */
-var useValueSeparator = function (_a) {
-    var separator = _a.separator, ratio = _a.ratio, onResized = _a.onResized, _b = _a.boundaries, min = _b.min, max = _b.max;
-    var prev = useRef();
-    var setValueNow = useCallback(function (val) {
-        var valueNow = getSeparatorAttributes({ ref: separator }).valueNow;
-        var value = val !== null && val !== void 0 ? val : (valueNow || min + (max - min) / 2);
-        var newValue = clampSeparator({ value: value, max: max, min: min });
-        resize(separator, newValue);
-        if (prev.current !== newValue) {
-            prev.current = newValue;
-            onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
-        }
-    }, [onResized, min, max, prev]);
+var useRatioEffect = function (setValueNow, ratio) {
+    var firstRun = useRef(true);
     useEffect(function () {
-        setValueNow(ratio);
-    }, [setValueNow, ratio]);
+        if (firstRun.current || ratio !== undefined) {
+            firstRun.current = false;
+            // If ratio is undefined, setValueNow will place the separator in the middle as a starting point.
+            // Whatever value is `the middle` will be determined by setValueNow
+            setValueNow(ratio);
+        }
+    }, [setValueNow, ratio, firstRun]);
+};
+/**
+ * Re-arranges the splitter if the limits or orientation change.
+ */
+var useConfigEffect = function (setValueNow, separator) {
     useEffect(function () {
         var callback = function () {
             var value = getSeparatorAttributes({ ref: separator }).valueNow;
@@ -58682,6 +58680,11 @@ var useValueSeparator = function (_a) {
         });
         return function () { return observer.disconnect(); };
     }, [separator, setValueNow]);
+};
+/**
+ * Broadcasts changes if separator aria-valuenow was altered.
+ */
+var useValueNowEffect = function (setValueNow, separator) {
     useEffect(function () {
         var observer = new MutationObserver(function (_a) {
             var target = _a[0].target;
@@ -58696,6 +58699,36 @@ var useValueSeparator = function (_a) {
         observer.observe(separator.current, { attributeFilter: attributeFilter });
         return function () { return observer.disconnect(); };
     }, [separator, setValueNow]);
+};
+/**
+ * Calls setValueNow when the separator attributes change.
+ */
+var useValueSeparatorEffects = function (setValueNow, separator, ratio) {
+    useRatioEffect(setValueNow, ratio);
+    useConfigEffect(setValueNow, separator);
+    useValueNowEffect(setValueNow, separator);
+};
+
+/**
+ * Ensures valueNow is set to a valid value within its allowed boundaries.
+ * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ * It's possible that multiple events trigger setValueNow simultaneosly with the same value.
+ * This multiple calls are expected, and setValueNow will resize only once.
+ */
+var useValueSeparator = function (_a) {
+    var separator = _a.separator, ratio = _a.ratio, onResized = _a.onResized, _b = _a.boundaries, min = _b.min, max = _b.max;
+    var prev = useRef(null);
+    var setValueNow = useCallback(function (val) {
+        var valueNow = getSeparatorAttributes({ ref: separator }).valueNow;
+        var value = val !== null && val !== void 0 ? val : (valueNow || min + (max - min) / 2);
+        var newValue = clampSeparator({ value: value, max: max, min: min });
+        resize(separator, newValue);
+        if (prev.current !== newValue) {
+            prev.current = newValue;
+            onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
+        }
+    }, [onResized, min, max, prev]);
+    useValueSeparatorEffects(setValueNow, separator, ratio);
     return { setValueNow: setValueNow };
 };
 var resize = function (separator, value) {