@linzjs/lui 21.24.5-0 → 21.25.0

package/dist/lui.esm.js

@@ -58421,56 +58421,6 @@ var useForkRef = function (forwardedRef) {
     return forwardedRef || localRef;
 };
 
-var attrBoundary = 'data-boundary';
-var dataBoundary = function (_a) {
-    var min = _a.min, max = _a.max;
-    if (typeof min === 'undefined' && typeof max !== 'undefined') {
-        if (typeof max === 'string') {
-            return parseInt(max) < 0 ? 'keep-secondary' : 'keep-primary';
-        }
-    }
-    if (typeof max === 'undefined' && typeof min !== 'undefined') {
-        if (typeof min === 'string') {
-            return parseInt(min) < 0 ? 'keep-secondary' : 'keep-primary';
-        }
-    }
-    if (typeof max === 'string' && typeof min === 'string') {
-        if (parseInt(max) > 0 && parseInt(min) > 0) {
-            return 'keep-primary';
-        }
-        if (parseInt(max) < 0 && parseInt(min) < 0) {
-            return 'keep-secondary';
-        }
-    }
-    return 'keep-both';
-};
-/**
- * Given boundaries passed as prop, it defines how the grid column/row template will be arranged.
- * and whether the separator will be positioned using right or left absolute values (top or bottom for horizontal).
- * It will use a data- attribute to store this prop derived information for later processing.
- */
-var setDataBoundary = function (props) {
-    var _a;
-    return (_a = {},
-        _a[attrBoundary] = dataBoundary(props),
-        _a);
-};
-/**
- * Util to get what grid arrangement needs to be used to avoid jumps/flashes.
- * The return value is derived from the Splitter props, and stored in a data- attribute.
- */
-var getDataBoundary = function (separator) {
-    var boundaryType = separator === null || separator === void 0 ? void 0 : separator.getAttribute(attrBoundary);
-    switch (boundaryType) {
-        case 'keep-primary':
-        case 'keep-secondary':
-        case 'keep-both':
-            return boundaryType;
-        default:
-            return undefined;
-    }
-};
-
 /**
  * Given a ref/element if finds the Separator and returns the most useful attributes
  */
@@ -58486,8 +58436,7 @@ var getValues = function (el) {
         valueMin: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemin')),
         valueMax: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemax')),
         orientation: parseOrientation(el === null || el === void 0 ? void 0 : el.getAttribute('aria-orientation')),
-        thickness: getSeparatorThickness(el),
-        boundary: getDataBoundary(el)
+        thickness: getSeparatorThickness(el)
     };
 };
 var parseValue = function (val) {
@@ -58565,9 +58514,6 @@ var Control = forwardRef$1(function (props, forwardRef) {
     useEffect(function () {
         var callback = function () {
             var control = ref.current;
-            if (!control) {
-                return;
-            }
             var _a = getButtonProps(ref, side), hide = _a.hide, offset = _a.offset, orientation = _a.orientation;
             var vertical = orientation === 'vertical';
             control.style.left = vertical ? "".concat(offset, "px") : '50%';
@@ -58580,14 +58526,7 @@ var Control = forwardRef$1(function (props, forwardRef) {
         var separator = ref.current.closest('[role="separator"]');
         callback();
         var observer = new MutationObserver(callback);
-        observer.observe(separator, {
-            attributeFilter: [
-                'aria-valuenow',
-                'aria-valuemin',
-                'aria-valuemax',
-                'aria-orientation',
-            ]
-        });
+        observer.observe(separator, { attributeFilter: ['aria-valuenow'] });
         return function () { return observer.disconnect(); };
     }, [ref, side]);
     return (React__default.createElement(LuiButton, __assign({ ref: ref, level: "primary", type: "button" }, rest, { style: __assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), { width: squareButtonSide, height: squareButtonSide, borderRadius: '50%' }), className: clsx('Control', 'lui-button-icon-only', 'lui-box-shadow', rest === null || rest === void 0 ? void 0 : rest.className) }), (rest === null || rest === void 0 ? void 0 : rest.children) || React__default.createElement(ControlIcon, { parent: ref, side: side })));
@@ -58652,29 +58591,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 +58634,8 @@ 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();
+            separator.style.transition = '';
+            splitter.style.transition = '';
             splitter.style.cursor =
                 separator.getAttribute('aria-orientation') === 'vertical'
                     ? 'col-resize'
@@ -58726,7 +58643,9 @@ var animateSeparator = function (separatorRef, animate) {
             splitter.classList.add('resizing');
         }
         else {
-            transition(separatorRef).resume();
+            separator.style.transition = 'left 300ms, top 300ms';
+            splitter.style.transition =
+                'grid-template-columns 300ms, grid-template-rows 300ms';
             splitter.style.cursor = '';
             splitter.classList.remove('resizing');
         }
@@ -58736,65 +58655,33 @@ var animateSeparator = function (separatorRef, animate) {
 /**
  * Moves separator as per ratio changes. Centers on first render if ratio is undefined.
  */
-var useRatioEffect = function (setValueNow, separator, ratio, startAt) {
+var useRatioEffect = function (setValueNow, ratio) {
     var firstRun = useRef(true);
-    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) {
+        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 !== null && ratio !== void 0 ? ratio : startAt);
+            setValueNow(ratio);
         }
-    }, [setValueNow, ratio, firstRun, startAt]);
+    }, [setValueNow, ratio, firstRun]);
 };
 /**
  * Re-arranges the splitter if the limits or orientation change.
  */
 var useConfigEffect = function (setValueNow, separator) {
-    var _a = useState(0), count = _a[0], setCount = _a[1];
-    useEffect(function () { return transition(separator).resume(); }, [count]);
     useEffect(function () {
-        var callback = function (attr) {
-            return function (_a) {
-                var record = _a[0];
-                var target = record.target;
-                var values = getSeparatorAttributes({ separator: target });
-                var oldValue = Number(record.oldValue);
-                var valueMax = values.valueMax, valueMin = values.valueMin, valueNow = values.valueNow;
-                var newValue = attr === 'min' ? valueMin : valueMax;
-                // Determine if separator was collapsed/expanded fully
-                var wasInBoundary = oldValue === valueNow;
-                // To remain collapsed/expanded, it is necessary to call setValueNow with the latest boundaries.
-                // The useBoundaries hook haven't yet reflected the change, and it would cause an unwanted flash.
-                // 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; });
-                }
-            };
+        var callback = function () {
+            var value = getSeparatorAttributes({ ref: separator }).valueNow;
+            setValueNow(value);
         };
-        var config = function (attr) { return ({
-            attributeFilter: ["aria-value".concat(attr)],
-            attributeOldValue: true
-        }); };
-        var minObserver = new MutationObserver(callback('min'));
-        var maxObserver = new MutationObserver(callback('max'));
-        var orientationObserver = new MutationObserver(function () { return setValueNow(); });
-        minObserver.observe(separator.current, config('min'));
-        maxObserver.observe(separator.current, config('max'));
-        orientationObserver.observe(separator.current, {
-            attributeFilter: ['aria-orientation']
+        callback();
+        var observer = new MutationObserver(callback);
+        observer.observe(separator.current, {
+            attributeFilter: ['aria-orientation', 'aria-valuemin', 'aria-valuemax']
         });
-        return function () {
-            minObserver.disconnect();
-            maxObserver.disconnect();
-            orientationObserver.disconnect();
-        };
-    }, [separator]);
+        return function () { return observer.disconnect(); };
+    }, [separator, setValueNow]);
 };
 /**
  * Broadcasts changes if separator aria-valuenow was altered.
@@ -58818,49 +58705,12 @@ var useValueNowEffect = function (setValueNow, separator) {
 /**
  * Calls setValueNow when the separator attributes change.
  */
-var useValueSeparatorEffects = function (setValueNow, separator, ratio, startAt) {
-    useRatioEffect(setValueNow, separator, ratio, startAt);
+var useValueSeparatorEffects = function (setValueNow, separator, ratio) {
+    useRatioEffect(setValueNow, ratio);
     useConfigEffect(setValueNow, separator);
     useValueNowEffect(setValueNow, separator);
 };
 
-/**
- * It will calculate the best grid arrangement, based on the min/max props passed to the Splitter.
- * All grid options work. The preference `1fr XXpx` over `(width - XXpx) 1fr` depends on the type of boundary
- * to avoid calculation of position when the window is being resized while trying to retain the collapsed state
- * on a min/max value fixed in pixels (e.g. 200px). Such calculation adds unnecessary lagging on the separator
- * to catch up. This function aims to avoid such lagging during resizing.
- * primary relates to top/left
- * secondary relates to right/bottom
- */
-var getGridTemplate = function (separator) {
-    var _a = getSeparatorAttributes({ separator: separator }), valueNow = _a.valueNow, gap = _a.thickness, boundary = _a.boundary, orientation = _a.orientation;
-    var rect = separator.parentElement.getBoundingClientRect();
-    var dimension = orientation === 'horizontal' ? 'height' : 'width';
-    var seperatorAbsolutePx = (rect[dimension] / 100) * valueNow;
-    var offset = gap / 2;
-    if (boundary === 'keep-primary') {
-        return {
-            grid: "".concat(seperatorAbsolutePx - offset, "px 1fr"),
-            primary: "".concat(seperatorAbsolutePx, "px"),
-            secondary: ''
-        };
-    }
-    if (boundary === 'keep-secondary') {
-        return {
-            grid: "1fr ".concat(rect[dimension] - seperatorAbsolutePx - offset, "px"),
-            primary: '',
-            secondary: "".concat(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, ")")
-    };
-};
-
 /**
  * Ensures valueNow is set to a valid value within its allowed boundaries.
  * If boundaries and/or initialRatio are not specified, they will be defaulted.
@@ -58868,24 +58718,19 @@ var getGridTemplate = function (separator) {
  * 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, minProp = _b.min, maxProp = _b.max, startAt = _a.startAt;
+    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, config) {
-        var _a, _b;
+    var setValueNow = useCallback(function (val) {
         var valueNow = getSeparatorAttributes({ ref: separator }).valueNow;
-        // Prioritize min/max from callback, they are updated before the boundaries prop.
-        var min = (_a = config === null || config === void 0 ? void 0 : config.min) !== null && _a !== void 0 ? _a : minProp;
-        var max = (_b = config === null || config === void 0 ? void 0 : config.max) !== null && _b !== void 0 ? _b : maxProp;
         var value = val !== null && val !== void 0 ? val : (valueNow || min + (max - min) / 2);
         var newValue = clampSeparator({ value: value, max: max, min: min });
-        var isCalculating = min === -Infinity || max === Infinity;
         resize(separator, newValue);
-        if (prev.current !== newValue && !isCalculating) {
+        if (prev.current !== newValue) {
             prev.current = newValue;
             onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
         }
-    }, [onResized, minProp, maxProp, prev]);
-    useValueSeparatorEffects(setValueNow, separator, ratio, startAt);
+    }, [onResized, min, max, prev]);
+    useValueSeparatorEffects(setValueNow, separator, ratio);
     return { setValueNow: setValueNow };
 };
 var resize = function (separator, value) {
@@ -58901,8 +58746,12 @@ var resize = function (separator, value) {
         separator.current.setAttribute('aria-valuenow', newValue);
     }
     var panels = (_a = separator.current.parentElement.childNodes.length) !== null && _a !== void 0 ? _a : 0;
-    var _d = getGridTemplate(separator.current), grid = _d.grid, primary = _d.primary, secondary = _d.secondary;
-    var gridTemplate = panels === 1 ? '1fr' : grid;
+    var valueNow = Number(separator.current.getAttribute('aria-valuenow'));
+    var offset = gap / 2;
+    var absolute = "clamp(".concat(offset, "px, ").concat(valueNow, "%, calc(100% - ").concat(offset, "px))");
+    var gridTemplate = panels === 1
+        ? '1fr'
+        : "min(calc(".concat(valueNow, "% - ").concat(gap / 2, "px), calc(100% - ").concat(gap, "px)) 1fr");
     var splitter = (_b = separator.current) === null || _b === void 0 ? void 0 : _b.parentElement;
     if (splitter) {
         splitter.style.opacity = '1';
@@ -58910,29 +58759,25 @@ var resize = function (separator, value) {
             splitter.style.columnGap = "".concat(gap, "px");
             splitter.style.gridTemplateColumns = gridTemplate;
             separator.current.style.width = "".concat(gap, "px");
-            separator.current.style.left = primary;
-            separator.current.style.right = secondary;
+            separator.current.style.left = absolute;
             separator.current.style.height = '100%';
-            separator.current.style.transform = "translateX(".concat(primary && '-', "50%)");
+            separator.current.style.transform = 'translateX(-50%)';
             separator.current.style.cursor = 'col-resize';
             splitter.style.rowGap = '';
             splitter.style.gridTemplateRows = '';
             separator.current.style.top = '';
-            separator.current.style.bottom = '';
         }
         else {
             splitter.style.rowGap = "".concat(gap, "px");
             splitter.style.gridTemplateRows = gridTemplate;
             separator.current.style.height = "".concat(gap, "px");
-            separator.current.style.top = primary;
-            separator.current.style.bottom = secondary;
+            separator.current.style.top = absolute;
             separator.current.style.width = '100%';
-            separator.current.style.transform = "translateY(".concat(primary && '-', "50%)");
+            separator.current.style.transform = 'translateY(-50%)';
             separator.current.style.cursor = 'row-resize';
             splitter.style.columnGap = '';
             splitter.style.gridTemplateColumns = '';
             separator.current.style.left = '';
-            separator.current.style.right = '';
         }
     }
 };
@@ -59016,62 +58861,6 @@ var getNewValueNow = function (_a, valueNow, pixelUnit) {
     return valueNow;
 };
 
-var isPxProps = function (_a) {
-    var min = _a.min, max = _a.max;
-    var isPercentage = typeof max === 'number' || typeof min === 'number';
-    var isNull = min === undefined && max === undefined;
-    return !isPercentage && !isNull;
-};
-/**
- * Maps min and max values if they are provided in 'XXXpx' format.
- */
-var useBoundary = function (separator, boundaries) {
-    var _a = useState({ min: -Infinity, max: Infinity }), mapped = _a[0], setMapped = _a[1];
-    var isPx = isPxProps(boundaries);
-    var min = boundaries.min, max = boundaries.max;
-    useEffect(function () {
-        var _a;
-        var element = (_a = separator === null || separator === void 0 ? void 0 : separator.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        var shouldMap = element && isPx;
-        var observer = new ResizeObserver(function (_a) {
-            var rect = _a[0].contentRect;
-            var _b = getSeparatorAttributes({
-                ref: separator
-            }), thickness = _b.thickness, orientation = _b.orientation;
-            var halfThickness = thickness / 2;
-            var length = orientation === 'vertical' ? rect.width : rect.height;
-            var parse = function (boundary) {
-                if (typeof boundary === 'number') {
-                    return boundary;
-                }
-                var boundaryAsNumber = parseFloat(boundary);
-                var offset = boundaryAsNumber > 0
-                    ? boundaryAsNumber + halfThickness
-                    : length - Math.abs(boundaryAsNumber) - halfThickness;
-                return (offset / length) * 100;
-            };
-            setMapped({ min: parse(min !== null && min !== void 0 ? min : 0), max: parse(max !== null && max !== void 0 ? max : 100) });
-        });
-        if (shouldMap) {
-            observer.observe(element);
-        }
-        return function () {
-            if (shouldMap) {
-                observer.disconnect();
-            }
-        };
-    }, [separator, max, min, isPx]);
-    if (isPx) {
-        return mapped;
-    }
-    else {
-        return {
-            min: Math.max(Number(min !== null && min !== void 0 ? min : 0), 0),
-            max: Math.min(Number(max !== null && max !== void 0 ? max : 100), 100)
-        };
-    }
-};
-
 var canceEvent = function (e) {
     if (e.currentTarget !== e.target) {
         e.preventDefault();
@@ -59080,19 +58869,21 @@ var canceEvent = function (e) {
 };
 var Separator = forwardRef$1(function (_a, forwardRef) {
     var _b;
-    var parts = _a.parts, ratio = _a.ratio, onResized = _a.onResized, min = _a.min, max = _a.max, startAt = _a.startAt, props = __rest(_a, ["parts", "ratio", "onResized", "min", "max", "startAt"]);
+    var parts = _a.parts, ratio = _a.ratio, onResized = _a.onResized, props = __rest(_a, ["parts", "ratio", "onResized"]);
     var separator = useForkRef(forwardRef);
-    var boundaries = useBoundary(separator, { min: min, max: max });
+    var boundaries = {
+        min: props['aria-valuemin'],
+        max: props['aria-valuemax']
+    };
     var setValueNow = useValueSeparator({
         ratio: ratio,
         separator: separator,
         onResized: onResized,
-        boundaries: boundaries,
-        startAt: startAt
+        boundaries: boundaries
     }).setValueNow;
     useShowSeparator(separator);
     var values = function () { return getSeparatorAttributes({ ref: separator }); };
-    return (React__default.createElement("div", __assign({ ref: separator, "aria-valuemin": boundaries.min, "aria-valuemax": boundaries.max }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
+    return (React__default.createElement("div", __assign({ ref: separator }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
             var _a;
             var newValueNow = keyDownHandler(e);
             if (values().valueNow !== newValueNow) {
@@ -59142,31 +58933,12 @@ styleInject(css_248z);
  */
 var Splitter = forwardRef$1(function (props, ref) {
     if (props === void 0) { props = {}; }
-    var parts = props.parts, ratio = props.ratio, onResized = props.onResized, min = props.min, max = props.max, children = props.children, _a = props.orientation, orientation = _a === void 0 ? 'vertical' : _a, startAt = props.startAt, rest = __rest(props, ["parts", "ratio", "onResized", "min", "max", "children", "orientation", "startAt"]);
+    var parts = props.parts, ratio = props.ratio, onResized = props.onResized, min = props.min, max = props.max, children = props.children, _a = props.orientation, orientation = _a === void 0 ? 'vertical' : _a, rest = __rest(props, ["parts", "ratio", "onResized", "min", "max", "children", "orientation"]);
     return (React__default.createElement("div", __assign({ ref: ref }, rest, { className: clsx('Splitter', rest === null || rest === void 0 ? void 0 : rest.className) }),
         children,
-        React__default.createElement(Separator, __assign({}, parts === null || parts === void 0 ? void 0 : parts.separator, { tabIndex: 0, min: min, max: max, role: "separator", "aria-orientation": orientation, ratio: ratio, onResized: onResized, parts: parts === null || parts === void 0 ? void 0 : parts.controls, startAt: mapStartAt({ ratio: ratio, startAt: startAt }) }, setDataBoundary({ min: min, max: max })))));
+        React__default.createElement(Separator, __assign({}, parts === null || parts === void 0 ? void 0 : parts.separator, { tabIndex: 0, "aria-valuemin": Math.max(min !== null && min !== void 0 ? min : 0, 0), "aria-valuemax": Math.min(max !== null && max !== void 0 ? max : 100, 100), role: "separator", "aria-orientation": orientation, ratio: ratio, onResized: onResized, parts: parts === null || parts === void 0 ? void 0 : parts.controls }))));
 });
-Splitter.displayName = 'Splitter';
-var mapStartAt = function (props) {
-    var _a;
-    if (typeof props.ratio === 'number') {
-        // Only consider startAt value when Splitter is uncontrolled (ratio is undefined)
-        return undefined;
-    }
-    // Words describe better intent than numbers.
-    // However, 0 & 100 are figurative numbers.
-    // If there are boundaries, these will be respected.
-    switch (props.startAt) {
-        case '1st-collapsed':
-            return 0;
-        case '2nd-collapsed':
-            return 100;
-        default:
-            // Can be started at any other number between 0 and 100.
-            return (_a = props.startAt) !== null && _a !== void 0 ? _a : 50;
-    }
-};
+Splitter.displayName = 'Splitter';
 
 var getSeparator = function (splitter) {
     var _a;