@linzjs/lui 21.26.1 → 21.26.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [21.26.3](https://github.com/linz/lui/compare/v21.26.2...v21.26.3) (2024-04-22)
+
+
+### Bug Fixes
+
+* **Splitter:** make transition be triggered manually ([#1112](https://github.com/linz/lui/issues/1112)) ([f07a612](https://github.com/linz/lui/commit/f07a612e9c28d8f88186d3d038b1a3334c7cb065))
+
+## [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/components/Splitter/helpers/transition.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export declare const transition: (separator: RefObject<HTMLDivElement>) => {
+export declare const transition: (props: RefObject<HTMLDivElement> | HTMLDivElement) => {
     stop: () => void;
     resume: () => void;
 };

package/dist/index.js

@@ -58439,7 +58439,7 @@ var LuiPagination = function (_a) {
             React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
 };
 
-var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Separator {\n  background-color: #eaeaea;\n  position: absolute;\n  display: flex;\n  justify-content: space-around;\n  transition-property: background-color;\n  transition-delay: 750ms;\n  transition-duration: 300ms;\n}\n.Separator-arrows {\n  align-self: center;\n  position: relative;\n  opacity: 0;\n  transition-property: opacity;\n  transition-delay: 750ms;\n  transition-duration: 300ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n  background-color: #73c8e1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n  opacity: 1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n  display: inline-block;\n}";
+var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Separator {\n  background-color: #eaeaea;\n  position: absolute;\n  display: flex;\n  justify-content: space-around;\n  transition-property: background-color;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator-arrows {\n  align-self: center;\n  position: relative;\n  opacity: 0;\n  transition-property: opacity;\n  transition-delay: 750ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n  background-color: #73c8e1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n  opacity: 1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n  display: inline-block;\n}";
 styleInject(css_248z$2);
 
 var css_248z$1 = ".Control {\n  transition: opacity 0.2s ease;\n  position: absolute;\n  margin-left: 0 !important;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}";
@@ -58681,29 +58681,6 @@ var getSeparatorPosition = function (separatorRef, drag) {
     return clampSeparator({ value: value });
 };
 
-var transitionFactory = function (attrs, ms) {
-    return attrs.map(function (key) { return "".concat(key, " ").concat(ms, "ms"); }).join(', ');
-};
-var barTransition = function (ms) {
-    return transitionFactory(['left', 'top', 'right', 'bottom'], ms);
-};
-var gridTransition = function (ms) {
-    return transitionFactory(['grid-template-columns', 'grid-template-rows'], ms);
-};
-var transition = function (separator) {
-    var _a;
-    var splitter = (_a = separator.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-    var delay = function (ms) {
-        if (splitter) {
-            separator.current.style.transition = barTransition(ms);
-            splitter.style.transition = gridTransition(ms);
-        }
-    };
-    var stop = function () { return delay(0); };
-    var resume = function () { return delay(300); };
-    return { stop: stop, resume: resume };
-};
-
 /**
  * It captures window events to report a new position.
  * Provides necessary handlers for separator.
@@ -58747,7 +58724,6 @@ var animateSeparator = function (separatorRef, animate) {
     var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
     if (separator && splitter) {
         if (animate === 'clear-transition') {
-            transition(separatorRef).stop();
             splitter.style.cursor =
                 separator.getAttribute('aria-orientation') === 'vertical'
                     ? 'col-resize'
@@ -58755,13 +58731,40 @@ var animateSeparator = function (separatorRef, animate) {
             splitter.classList.add('resizing');
         }
         else {
-            transition(separatorRef).resume();
             splitter.style.cursor = '';
             splitter.classList.remove('resizing');
         }
     }
 };
 
+var transitionFactory = function (attrs, ms) {
+    return attrs.map(function (key) { return "".concat(key, " ").concat(ms, "ms"); }).join(', ');
+};
+var barTransition = function (ms) {
+    return transitionFactory(['left', 'top', 'right', 'bottom'], ms);
+};
+var gridTransition = function (ms) {
+    return transitionFactory(['grid-template-columns', 'grid-template-rows'], ms);
+};
+var transition = function (props) {
+    var _a;
+    var separator = Object.hasOwn(props, 'current')
+        ? props
+        : { current: props };
+    var splitter = (_a = separator.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    var delay = function (ms) {
+        if (splitter) {
+            separator.current.style.transition = barTransition(ms);
+            splitter.style.transition = gridTransition(ms);
+        }
+    };
+    var stop = function () { return delay(0); };
+    var resume = function () {
+        return delay((splitter === null || splitter === void 0 ? void 0 : splitter.classList.contains('resizing')) ? 0 : 300);
+    };
+    return { stop: stop, resume: resume };
+};
+
 /**
  * Moves separator as per ratio changes. Centers on first render if ratio is undefined.
  */
@@ -58770,6 +58773,9 @@ var useRatioEffect = function (setValueNow, separator, ratio, startAt) {
     var _a = getSeparatorAttributes({ ref: separator }), valueMax = _a.valueMax, valueMin = _a.valueMin;
     var isCalculating = valueMax === Infinity || valueMin === -Infinity;
     React.useEffect(function () {
+        if (!firstRun.current && ratio !== undefined && !isCalculating) {
+            transition(separator).resume();
+        }
         if (firstRun.current || ratio !== undefined || isCalculating) {
             firstRun.current = false;
             // If ratio is undefined, setValueNow will place the separator in the middle as a starting point.
@@ -58782,8 +58788,6 @@ 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]);
     React.useEffect(function () {
         var callback = function (attr) {
             return function (_a) {
@@ -58800,26 +58804,25 @@ 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; });
                 }
                 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) {
+                    if (Math.abs(newVal - valueNow) >= threshold) {
                         setValueNow(newVal, { min: valueMin, max: valueMax });
                     }
                 }
@@ -58850,16 +58853,22 @@ var useConfigEffect = function (setValueNow, separator) {
 var useValueNowEffect = function (setValueNow, separator) {
     React.useEffect(function () {
         var observer = new MutationObserver(function (_a) {
-            var target = _a[0].target;
+            var _b = _a[0], target = _b.target, oldValue = _b.oldValue;
             var el = target;
             var splitter = target.parentElement;
             var newValueNow = Number(el.getAttribute('aria-valuenow'));
             if (!splitter.classList.contains('resizing')) {
-                setValueNow(newValueNow);
+                if (Number(oldValue) !== newValueNow) {
+                    transition(separator).resume();
+                    setValueNow(newValueNow);
+                }
             }
         });
         var attributeFilter = ['aria-valuenow'];
-        observer.observe(separator.current, { attributeFilter: attributeFilter });
+        observer.observe(separator.current, {
+            attributeFilter: attributeFilter,
+            attributeOldValue: true
+        });
         return function () { return observer.disconnect(); };
     }, [separator, setValueNow]);
 };
@@ -59124,7 +59133,7 @@ var useBoundary = function (separator, boundaries) {
     }
 };
 
-var canceEvent = function (e) {
+var cancelEvent = function (e) {
     if (e.currentTarget !== e.target) {
         e.preventDefault();
         e.stopPropagation();
@@ -59148,19 +59157,26 @@ var Separator = React.forwardRef(function (_a, forwardRef) {
             var _a;
             var newValueNow = keyDownHandler(e);
             if (values().valueNow !== newValueNow) {
+                transition(separator).resume();
                 setValueNow(newValueNow);
                 e.preventDefault();
             }
             (_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 }),
+        }, className: clsx('Separator', props.className), onTransitionEnd: function (e) {
+            var _a;
+            transition(separator).stop();
+            (_a = props.onTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        } }),
+        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;
+                    transition(separator).resume();
                     setValueNow(controlClickHandler(e, 'primary'));
                     (_b = (_a = parts === null || parts === void 0 ? void 0 : parts.primary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 } })),
             React__default["default"].createElement(Control, __assign({}, parts === null || parts === void 0 ? void 0 : parts.secondary, { side: "secondary", onClick: function (e) {
                     var _a, _b;
+                    transition(separator).resume();
                     setValueNow(controlClickHandler(e, 'secondary'));
                     (_b = (_a = parts === null || parts === void 0 ? void 0 : parts.secondary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 } })))));