@linzjs/lui 21.25.0 → 21.26.0

package/dist/index.js

@@ -58450,6 +58450,56 @@ 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
  */
@@ -58465,7 +58515,8 @@ 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)
+        thickness: getSeparatorThickness(el),
+        boundary: getDataBoundary(el)
     };
 };
 var parseValue = function (val) {
@@ -58543,6 +58594,9 @@ var Control = React.forwardRef(function (props, forwardRef) {
     React.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%';
@@ -58555,7 +58609,14 @@ var Control = React.forwardRef(function (props, forwardRef) {
         var separator = ref.current.closest('[role="separator"]');
         callback();
         var observer = new MutationObserver(callback);
-        observer.observe(separator, { attributeFilter: ['aria-valuenow'] });
+        observer.observe(separator, {
+            attributeFilter: [
+                'aria-valuenow',
+                'aria-valuemin',
+                'aria-valuemax',
+                'aria-orientation',
+            ]
+        });
         return function () { return observer.disconnect(); };
     }, [ref, side]);
     return (React__default["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["default"].createElement(ControlIcon, { parent: ref, side: side })));
@@ -58620,6 +58681,29 @@ 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.
@@ -58663,8 +58747,7 @@ var animateSeparator = function (separatorRef, animate) {
     var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
     if (separator && splitter) {
         if (animate === 'clear-transition') {
-            separator.style.transition = '';
-            splitter.style.transition = '';
+            transition(separatorRef).stop();
             splitter.style.cursor =
                 separator.getAttribute('aria-orientation') === 'vertical'
                     ? 'col-resize'
@@ -58672,9 +58755,7 @@ var animateSeparator = function (separatorRef, animate) {
             splitter.classList.add('resizing');
         }
         else {
-            separator.style.transition = 'left 300ms, top 300ms';
-            splitter.style.transition =
-                'grid-template-columns 300ms, grid-template-rows 300ms';
+            transition(separatorRef).resume();
             splitter.style.cursor = '';
             splitter.classList.remove('resizing');
         }
@@ -58684,33 +58765,77 @@ var animateSeparator = function (separatorRef, animate) {
 /**
  * Moves separator as per ratio changes. Centers on first render if ratio is undefined.
  */
-var useRatioEffect = function (setValueNow, ratio) {
+var useRatioEffect = function (setValueNow, separator, ratio, startAt) {
     var firstRun = React.useRef(true);
+    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) {
+        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.
             // Whatever value is `the middle` will be determined by setValueNow
-            setValueNow(ratio);
+            setValueNow(ratio !== null && ratio !== void 0 ? ratio : startAt);
         }
-    }, [setValueNow, ratio, firstRun]);
+    }, [setValueNow, ratio, firstRun, 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 () {
-            var value = getSeparatorAttributes({ ref: separator }).valueNow;
-            setValueNow(value);
+        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; });
+                }
+                else {
+                    var dim = values.orientation === 'vertical' ? 'width' : 'height';
+                    var offset = target.getBoundingClientRect()[dim] / 2;
+                    var splitter = target.parentElement;
+                    var primary = splitter.childNodes[0];
+                    var splitterRect = splitter.getBoundingClientRect();
+                    var primaryRect = primary.getBoundingClientRect();
+                    var newVal = ((primaryRect[dim] + offset) / splitterRect[dim]) * 100;
+                    if (Math.abs(newVal - valueNow) >= 0.01) {
+                        setValueNow(newVal, { min: valueMin, max: valueMax });
+                    }
+                }
+            };
         };
-        callback();
-        var observer = new MutationObserver(callback);
-        observer.observe(separator.current, {
-            attributeFilter: ['aria-orientation', 'aria-valuemin', 'aria-valuemax']
+        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']
         });
-        return function () { return observer.disconnect(); };
-    }, [separator, setValueNow]);
+        return function () {
+            minObserver.disconnect();
+            maxObserver.disconnect();
+            orientationObserver.disconnect();
+        };
+    }, [separator]);
 };
 /**
  * Broadcasts changes if separator aria-valuenow was altered.
@@ -58734,12 +58859,49 @@ var useValueNowEffect = function (setValueNow, separator) {
 /**
  * Calls setValueNow when the separator attributes change.
  */
-var useValueSeparatorEffects = function (setValueNow, separator, ratio) {
-    useRatioEffect(setValueNow, ratio);
+var useValueSeparatorEffects = function (setValueNow, separator, ratio, startAt) {
+    useRatioEffect(setValueNow, separator, ratio, startAt);
     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.
@@ -58747,19 +58909,24 @@ var useValueSeparatorEffects = function (setValueNow, separator, ratio) {
  * 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 separator = _a.separator, ratio = _a.ratio, onResized = _a.onResized, _b = _a.boundaries, minProp = _b.min, maxProp = _b.max, startAt = _a.startAt;
     var prev = React.useRef(null);
-    var setValueNow = React.useCallback(function (val) {
+    var setValueNow = React.useCallback(function (val, config) {
+        var _a, _b;
         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) {
+        if (prev.current !== newValue && !isCalculating) {
             prev.current = newValue;
             onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
         }
-    }, [onResized, min, max, prev]);
-    useValueSeparatorEffects(setValueNow, separator, ratio);
+    }, [onResized, minProp, maxProp, prev]);
+    useValueSeparatorEffects(setValueNow, separator, ratio, startAt);
     return { setValueNow: setValueNow };
 };
 var resize = function (separator, value) {
@@ -58775,12 +58942,8 @@ 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 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 _d = getGridTemplate(separator.current), grid = _d.grid, primary = _d.primary, secondary = _d.secondary;
+    var gridTemplate = panels === 1 ? '1fr' : grid;
     var splitter = (_b = separator.current) === null || _b === void 0 ? void 0 : _b.parentElement;
     if (splitter) {
         splitter.style.opacity = '1';
@@ -58788,25 +58951,29 @@ 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 = absolute;
+            separator.current.style.left = primary;
+            separator.current.style.right = secondary;
             separator.current.style.height = '100%';
-            separator.current.style.transform = 'translateX(-50%)';
+            separator.current.style.transform = "translateX(".concat(primary && '-', "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 = absolute;
+            separator.current.style.top = primary;
+            separator.current.style.bottom = secondary;
             separator.current.style.width = '100%';
-            separator.current.style.transform = 'translateY(-50%)';
+            separator.current.style.transform = "translateY(".concat(primary && '-', "50%)");
             separator.current.style.cursor = 'row-resize';
             splitter.style.columnGap = '';
             splitter.style.gridTemplateColumns = '';
             separator.current.style.left = '';
+            separator.current.style.right = '';
         }
     }
 };
@@ -58890,6 +59057,62 @@ 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 = React.useState({ min: -Infinity, max: Infinity }), mapped = _a[0], setMapped = _a[1];
+    var isPx = isPxProps(boundaries);
+    var min = boundaries.min, max = boundaries.max;
+    React.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();
@@ -58898,21 +59121,19 @@ var canceEvent = function (e) {
 };
 var Separator = React.forwardRef(function (_a, forwardRef) {
     var _b;
-    var parts = _a.parts, ratio = _a.ratio, onResized = _a.onResized, props = __rest(_a, ["parts", "ratio", "onResized"]);
+    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 separator = useForkRef(forwardRef);
-    var boundaries = {
-        min: props['aria-valuemin'],
-        max: props['aria-valuemax']
-    };
+    var boundaries = useBoundary(separator, { min: min, max: max });
     var setValueNow = useValueSeparator({
         ratio: ratio,
         separator: separator,
         onResized: onResized,
-        boundaries: boundaries
+        boundaries: boundaries,
+        startAt: startAt
     }).setValueNow;
     useShowSeparator(separator);
     var values = function () { return getSeparatorAttributes({ ref: separator }); };
-    return (React__default["default"].createElement("div", __assign({ ref: separator }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
+    return (React__default["default"].createElement("div", __assign({ ref: separator, "aria-valuemin": boundaries.min, "aria-valuemax": boundaries.max }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
             var _a;
             var newValueNow = keyDownHandler(e);
             if (values().valueNow !== newValueNow) {
@@ -58962,12 +59183,31 @@ styleInject(css_248z);
  */
 var Splitter = React.forwardRef(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, rest = __rest(props, ["parts", "ratio", "onResized", "min", "max", "children", "orientation"]);
+    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"]);
     return (React__default["default"].createElement("div", __assign({ ref: ref }, rest, { className: clsx('Splitter', rest === null || rest === void 0 ? void 0 : rest.className) }),
         children,
-        React__default["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 }))));
+        React__default["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 })))));
 });
-Splitter.displayName = 'Splitter';
+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;
+    }
+};
 
 var getSeparator = function (splitter) {
     var _a;