@linzjs/lui 21.23.0 → 21.23.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [21.23.1](https://github.com/linz/lui/compare/v21.23.0...v21.23.1) (2024-02-22)
+
+
+### Bug Fixes
+
+* **Splitter:** stop flashing behavior ([#1074](https://github.com/linz/lui/issues/1074)) ([3ebae79](https://github.com/linz/lui/commit/3ebae794183327d144d0d6c8d8985f3bb3326fdf))
+
 # [21.23.0](https://github.com/linz/lui/compare/v21.22.0...v21.23.0) (2024-02-21)
 
 

package/dist/components/Splitter/helpers/useValueSeparator.d.ts

@@ -2,6 +2,8 @@ import { RefObject } from 'react';
 /**
  * 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.
  */
 export declare const useValueSeparator: ({ separator, ratio, onResized, boundaries: { min, max }, }: {
     ratio?: number | undefined;

package/dist/components/Splitter/helpers/useValueSeparatorEffects.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+/**
+ * Calls setValueNow when the separator attributes change.
+ */
+export declare const useValueSeparatorEffects: (setValueNow: (val?: number) => void, separator: RefObject<HTMLDivElement>, ratio?: number) => void;

package/dist/index.js

@@ -58680,25 +58680,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 = React.useRef();
-    var setValueNow = React.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 = React.useRef(true);
     React.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) {
     React.useEffect(function () {
         var callback = function () {
             var value = getSeparatorAttributes({ ref: separator }).valueNow;
@@ -58711,6 +58709,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) {
     React.useEffect(function () {
         var observer = new MutationObserver(function (_a) {
             var target = _a[0].target;
@@ -58725,6 +58728,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 = React.useRef(null);
+    var setValueNow = React.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) {