@linzjs/lui 21.26.2 → 21.27.0

package/dist/lui.esm.js

@@ -31462,7 +31462,11 @@ var renderSettings = {
     preserveAspectRatio: 'xMidYMid slice'
 };
 var LuiLoadingSpinnerBase = function (props) {
-    return (React__default.createElement("div", { className: "LuiLoadingSpinnerBase", "data-testid": "loading-spinner" },
+    var testId = 'loading-spinner';
+    if (props.dataTestId) {
+        testId += "-".concat(props.dataTestId);
+    }
+    return (React__default.createElement("div", { className: "LuiLoadingSpinnerBase", "data-testid": testId },
         React__default.createElement(LuiLottieLight, { animationData: props.animationData, loop: true, autoplay: autoplay, rendererSettings: renderSettings, style: style })));
 };
 /**
@@ -31480,8 +31484,8 @@ var LuiMiniSpinner = function (props) {
                 preserveAspectRatio: 'xMidYMid slice'
             }, style: { height: props.size, width: props.size } })));
 };
-var LuiLoadingSpinner = function () {
-    return React__default.createElement(LuiLoadingSpinnerBase, { animationData: loaderData });
+var LuiLoadingSpinner = function (props) {
+    return (React__default.createElement(LuiLoadingSpinnerBase, { animationData: loaderData, dataTestId: props.dataTestId }));
 };
 // this function was extracted from chromatic/isChromatic. It was causing TS issues for the consumer
 function isChromatic() {
@@ -58410,7 +58414,7 @@ var LuiPagination = function (_a) {
             React__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}";
@@ -58652,29 +58656,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.
@@ -58718,7 +58699,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'
@@ -58726,22 +58706,40 @@ var animateSeparator = function (separatorRef, animate) {
             splitter.classList.add('resizing');
         }
         else {
-            transition(separatorRef).resume();
             splitter.style.cursor = '';
             splitter.classList.remove('resizing');
         }
     }
 };
 
-var useSetValueNow_static = function (setValueNow, separator) {
-    var _a = useState(0), count = _a[0], setCount = _a[1];
-    useEffect(function () { return transition(separator).resume(); }, [count]);
-    return useCallback(function (val, config) {
-        transition(separator).stop();
-        setValueNow(val, config);
-        setCount(function (p) { return p + 1; });
-    }, [setValueNow]);
+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.
  */
@@ -58750,6 +58748,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;
     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.
@@ -58762,7 +58763,6 @@ var useRatioEffect = function (setValueNow, separator, ratio, startAt) {
  * Re-arranges the splitter if the limits or orientation change.
  */
 var useConfigEffect = function (setValueNow, separator) {
-    var setValueNow_static = useSetValueNow_static(setValueNow, separator);
     useEffect(function () {
         var callback = function (attr) {
             return function (_a) {
@@ -58779,7 +58779,7 @@ 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) {
-                    setValueNow_static(newValueNow, { min: valueMin, max: valueMax });
+                    setValueNow(newValueNow, { min: valueMin, max: valueMax });
                 }
                 else {
                     var threshold = 0.01;
@@ -58798,7 +58798,7 @@ var useConfigEffect = function (setValueNow, separator) {
                     }
                     var newVal = ((primary + offset) / container) * 100;
                     if (Math.abs(newVal - valueNow) >= threshold) {
-                        setValueNow_static(newVal, { min: valueMin, max: valueMax });
+                        setValueNow(newVal, { min: valueMin, max: valueMax });
                     }
                 }
             };
@@ -58828,16 +58828,22 @@ var useConfigEffect = function (setValueNow, separator) {
 var useValueNowEffect = function (setValueNow, separator) {
     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]);
 };
@@ -59126,19 +59132,26 @@ var Separator = forwardRef$1(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) }),
+        }, 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.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.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.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);
                 } })))));