@linzjs/lui 21.39.1 → 21.39.2-1

package/dist/components/Splitter/Separator/Separator.d.ts

@@ -6,8 +6,6 @@ export declare const Separator: React.ForwardRefExoticComponent<Pick<React.Detai
     parts?: Parts;
     ratio?: number | undefined;
     onResized?: ((val: number) => void) | undefined;
-    min?: number | `${number}px` | undefined;
-    max?: number | `${number}px` | undefined;
     startAt?: number | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -17,10 +17,11 @@ declare type Props = {
  */
 export declare const getSeparatorAttributes: (props: Props) => {
     valueNow: number;
-    valueMin: number;
     valueMax: number;
+    valueMin: number;
     orientation: "horizontal" | "vertical" | undefined;
     thickness: number;
     boundary: ("keep-secondary" | "keep-primary" | "keep-both") | undefined;
+    sticky: "primary" | "secondary" | undefined;
 };
 export {};

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

@@ -5,18 +5,11 @@ import { RefObject } from 'react';
  * 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: minProp, max: maxProp }, startAt, }: {
+export declare const useValueSeparator: ({ separator, ratio, onResized, startAt, }: {
     ratio?: number | undefined;
     onResized?: ((newVal: number) => void) | undefined;
     separator: RefObject<HTMLDivElement>;
-    boundaries: {
-        min: number;
-        max: number;
-    };
     startAt?: number | undefined;
 }) => {
-    setValueNow: (val?: number, config?: {
-        min?: number | undefined;
-        max?: number | undefined;
-    } | undefined) => void;
+    setValueNow: (val?: number) => void;
 };

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

@@ -2,7 +2,4 @@ import { RefObject } from 'react';
 /**
  * Calls setValueNow when the separator attributes change.
  */
-export declare const useValueSeparatorEffects: (setValueNow: (val?: number, config?: {
-    min?: number;
-    max?: number;
-}) => void, separator: RefObject<HTMLDivElement>, ratio?: number, startAt?: number) => void;
+export declare const useValueSeparatorEffects: (setValueNow: (val?: number) => void, separator: RefObject<HTMLDivElement>, ratio?: number, startAt?: number) => void;

package/dist/index.js

@@ -58566,14 +58566,45 @@ var getSeparatorAttributes = function (props) {
         ? (_a = props.child) === null || _a === void 0 ? void 0 : _a.closest('[role="separator"]')
         : (_b = props.separator) !== null && _b !== void 0 ? _b : (_c = props.ref) === null || _c === void 0 ? void 0 : _c.current));
 };
+var getBoundary = function (length, px, offset) {
+    var asNumber = parseFloat(px);
+    var absolute = Math.abs(asNumber) + offset;
+    var percentage = absolute / length;
+    if (asNumber > 0) {
+        return percentage * 100;
+    }
+    else {
+        return (1 - percentage) * 100;
+    }
+};
 var getValues = function (el) {
+    var _a, _b, _c, _d;
+    var valueMin = parseValue((_a = el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemin')) !== null && _a !== void 0 ? _a : '0');
+    var valueMax = parseValue((_b = el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemax')) !== null && _b !== void 0 ? _b : '100');
+    var thickness = getSeparatorThickness(el);
+    var minPx = el === null || el === void 0 ? void 0 : el.getAttribute('data-minpx');
+    var maxPx = el === null || el === void 0 ? void 0 : el.getAttribute('data-maxpx');
+    var orientation = parseOrientation(el === null || el === void 0 ? void 0 : el.getAttribute('aria-orientation'));
+    var rect = (_c = el === null || el === void 0 ? void 0 : el.parentElement) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    var dimension = orientation === 'horizontal' ? 'height' : 'width';
+    var length = (_d = rect === null || rect === void 0 ? void 0 : rect[dimension]) !== null && _d !== void 0 ? _d : 0;
+    if (minPx === null || minPx === void 0 ? void 0 : minPx.endsWith('px')) {
+        var boundaryMin = getBoundary(length, minPx, thickness / 2);
+        valueMin = Math.max(valueMin, boundaryMin);
+    }
+    if (maxPx === null || maxPx === void 0 ? void 0 : maxPx.endsWith('px')) {
+        var boundaryMax = getBoundary(length, maxPx, thickness / 2);
+        valueMax = Math.min(valueMax, boundaryMax);
+    }
+    var sticky = el === null || el === void 0 ? void 0 : el.getAttribute('data-sticky');
     return {
         valueNow: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuenow')),
-        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)
+        valueMax: valueMax,
+        valueMin: valueMin,
+        orientation: orientation,
+        thickness: thickness,
+        boundary: getDataBoundary(el),
+        sticky: sticky
     };
 };
 var parseValue = function (val) {
@@ -58665,8 +58696,8 @@ var Control = React.forwardRef(function (props, forwardRef) {
         };
         var separator = ref.current.closest('[role="separator"]');
         callback();
-        var observer = new MutationObserver(callback);
-        observer.observe(separator, {
+        var attributes = new MutationObserver(callback);
+        attributes.observe(separator, {
             attributeFilter: [
                 'aria-valuenow',
                 'aria-valuemin',
@@ -58674,7 +58705,12 @@ var Control = React.forwardRef(function (props, forwardRef) {
                 'aria-orientation',
             ]
         });
-        return function () { return observer.disconnect(); };
+        var resize = new ResizeObserver(callback);
+        resize.observe(separator.parentElement);
+        return function () {
+            attributes.disconnect();
+            resize.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 })));
 });
@@ -58738,6 +58774,34 @@ 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 (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 };
+};
+
 /**
  * It captures window events to report a new position.
  * Provides necessary handlers for separator.
@@ -58786,54 +58850,64 @@ var animateSeparator = function (separatorRef, animate) {
                     ? 'col-resize'
                     : 'row-resize';
             splitter.classList.add('resizing');
+            transition(separator).stop();
         }
         else {
             splitter.style.cursor = '';
             splitter.classList.remove('resizing');
+            transition(separator).resume();
         }
     }
 };
 
-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);
-        }
+/**
+ * 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;
+    var clamp = function (val, type) {
+        return "clamp(".concat(offset, "px, ").concat(val).concat(type, ", calc(100% - ").concat(offset, "px))");
     };
-    var stop = function () { return delay(0); };
-    var resume = function () {
-        return delay((splitter === null || splitter === void 0 ? void 0 : splitter.classList.contains('resizing')) ? 0 : 300);
+    if (boundary === 'keep-primary') {
+        var grid = Math.max(seperatorAbsolutePx - offset, 0);
+        return {
+            grid: "".concat(grid, "px 1fr"),
+            primary: clamp(seperatorAbsolutePx, 'px'),
+            secondary: ''
+        };
+    }
+    if (boundary === 'keep-secondary') {
+        var grid = Math.max(rect[dimension] - seperatorAbsolutePx - offset, 0);
+        return {
+            grid: "1fr ".concat(grid, "px"),
+            primary: '',
+            secondary: clamp(rect[dimension] - seperatorAbsolutePx, 'px')
+        };
+    }
+    return {
+        grid: "min(calc(".concat(valueNow, "% - ").concat(gap / 2, "px), calc(100% - ").concat(gap, "px)) 1fr"),
+        primary: clamp(valueNow, '%'),
+        secondary: "calc(100% - ".concat(clamp(valueNow, '%'), ")")
     };
-    return { stop: stop, resume: resume };
 };
 
 /**
  * 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, 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 && !isCalculating) {
-            transition(separator).resume();
-        }
-        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
@@ -58846,63 +58920,17 @@ var useRatioEffect = function (setValueNow, separator, ratio, startAt) {
  */
 var useConfigEffect = function (setValueNow, separator) {
     React.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) {
-                    setValueNow(newValueNow, { min: valueMin, max: valueMax });
-                }
-                else {
-                    var threshold = 0.01;
-                    var dim = values.orientation === 'vertical' ? 'width' : 'height';
-                    var abs = values.orientation === 'vertical' ? 'left' : 'top';
-                    var separatorRect = target.getBoundingClientRect();
-                    var gap = separatorRect[dim];
-                    var offset = gap / 2;
-                    var splitterEl = target.parentElement;
-                    var splitterRect = splitterEl.getBoundingClientRect();
-                    var container = splitterRect[dim];
-                    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) >= threshold) {
-                        setValueNow(newVal, { min: valueMin, max: valueMax });
-                    }
-                }
-            };
+        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.
@@ -58910,73 +58938,64 @@ var useConfigEffect = function (setValueNow, separator) {
 var useValueNowEffect = function (setValueNow, separator) {
     React.useEffect(function () {
         var observer = new MutationObserver(function (_a) {
-            var _b = _a[0], target = _b.target, oldValue = _b.oldValue;
+            var target = _a[0].target;
             var el = target;
             var splitter = target.parentElement;
             var newValueNow = Number(el.getAttribute('aria-valuenow'));
             if (!splitter.classList.contains('resizing')) {
-                if (Number(oldValue) !== newValueNow) {
-                    transition(separator).resume();
-                    setValueNow(newValueNow);
-                }
+                setValueNow(newValueNow);
             }
         });
         var attributeFilter = ['aria-valuenow'];
-        observer.observe(separator.current, {
-            attributeFilter: attributeFilter,
-            attributeOldValue: true
-        });
+        observer.observe(separator.current, { attributeFilter: attributeFilter });
         return function () { return observer.disconnect(); };
     }, [separator, setValueNow]);
 };
+/**
+ * Makes sure that separator is within boundaries
+ */
+var useResizeEffect = function (setValueNow, separator) {
+    var length = React.useRef();
+    var _a = React.useState(0), count = _a[0], setCount = _a[1];
+    React.useEffect(function () {
+        var element = separator.current.parentElement;
+        var observer = new ResizeObserver(function (_a) {
+            var contentBoxSize = _a[0].contentBoxSize;
+            var _b = contentBoxSize[0], inlineSize = _b.inlineSize, blockSize = _b.blockSize;
+            var attributes = getSeparatorAttributes({ ref: separator });
+            var orientation = attributes.orientation, valueNow = attributes.valueNow, sticky = attributes.sticky;
+            var newValue = valueNow;
+            var newLength = orientation === 'vertical' ? inlineSize : blockSize;
+            if (newLength !== length.current) {
+                if (length.current) {
+                    transition(separator).stop();
+                    if (sticky === 'primary') {
+                        newValue = 0;
+                    }
+                    if (sticky === 'secondary') {
+                        newValue = 100;
+                    }
+                    setValueNow(newValue);
+                    setCount(function (p) { return p + 1; });
+                }
+                length.current = newLength;
+            }
+        });
+        observer.observe(element);
+        return function () { return observer.disconnect(); };
+    }, [separator, setValueNow, length]);
+    React.useEffect(function () {
+        transition(separator).resume();
+    }, [count]);
+};
 /**
  * Calls setValueNow when the separator attributes change.
  */
 var useValueSeparatorEffects = function (setValueNow, separator, ratio, startAt) {
-    useRatioEffect(setValueNow, separator, ratio, startAt);
+    useRatioEffect(setValueNow, 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;
-    var clamp = function (val, type) {
-        return "clamp(".concat(offset, "px, ").concat(val).concat(type, ", calc(100% - ").concat(offset, "px))");
-    };
-    if (boundary === 'keep-primary') {
-        var grid = Math.max(seperatorAbsolutePx - offset, 0);
-        return {
-            grid: "".concat(grid, "px 1fr"),
-            primary: clamp(seperatorAbsolutePx, 'px'),
-            secondary: ''
-        };
-    }
-    if (boundary === 'keep-secondary') {
-        var grid = Math.max(rect[dimension] - seperatorAbsolutePx - offset, 0);
-        return {
-            grid: "1fr ".concat(grid, "px"),
-            primary: '',
-            secondary: clamp(rect[dimension] - seperatorAbsolutePx, 'px')
-        };
-    }
-    return {
-        grid: "min(calc(".concat(valueNow, "% - ").concat(gap / 2, "px), calc(100% - ").concat(gap, "px)) 1fr"),
-        primary: clamp(valueNow, '%'),
-        secondary: "calc(100% - ".concat(clamp(valueNow, '%'), ")")
-    };
+    useResizeEffect(setValueNow, separator);
 };
 
 /**
@@ -58986,23 +59005,29 @@ 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, startAt = _a.startAt;
     var prev = React.useRef(null);
-    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 setValueNow = React.useCallback(function (val) {
+        var _a, _b, _c;
+        var attributes = getSeparatorAttributes({ ref: separator });
+        var valueNow = attributes.valueNow, max = attributes.valueMax, min = attributes.valueMin;
         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) {
+            if (newValue === min) {
+                (_a = separator.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-sticky', 'primary');
+            }
+            else if (newValue === max) {
+                (_b = separator.current) === null || _b === void 0 ? void 0 : _b.setAttribute('data-sticky', 'secondary');
+            }
+            else {
+                (_c = separator.current) === null || _c === void 0 ? void 0 : _c.removeAttribute('data-sticky');
+            }
             prev.current = newValue;
             onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
         }
-    }, [onResized, minProp, maxProp, prev]);
+    }, [onResized, prev]);
     useValueSeparatorEffects(setValueNow, separator, ratio, startAt);
     return { setValueNow: setValueNow };
 };
@@ -59134,62 +59159,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 = 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 cancelEvent = function (e) {
     if (e.currentTarget !== e.target) {
         e.preventDefault();
@@ -59198,42 +59167,33 @@ var cancelEvent = function (e) {
 };
 var Separator = React.forwardRef(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, startAt = _a.startAt, props = __rest(_a, ["parts", "ratio", "onResized", "startAt"]);
     var separator = useForkRef(forwardRef);
-    var boundaries = useBoundary(separator, { min: min, max: max });
     var setValueNow = useValueSeparator({
         ratio: ratio,
         separator: separator,
         onResized: onResized,
-        boundaries: boundaries,
         startAt: startAt
     }).setValueNow;
     useShowSeparator(separator);
     var values = function () { return getSeparatorAttributes({ ref: separator }); };
-    return (React__default["default"].createElement("div", __assign({ ref: separator, "aria-valuemin": boundaries.min, "aria-valuemax": boundaries.max }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
+    return (React__default["default"].createElement("div", __assign({ ref: separator }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
             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), onTransitionEnd: function (e) {
-            var _a;
-            transition(separator).stop();
-            (_a = props.onTransitionEnd) === 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: 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);
                 } })))));
@@ -59270,7 +59230,7 @@ var Splitter = React.forwardRef(function (props, ref) {
     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, 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["default"].createElement(Separator, __assign({}, parts === null || parts === void 0 ? void 0 : parts.separator, { tabIndex: 0, "data-minpx": typeof min === 'string' ? min : undefined, "data-maxpx": typeof max === 'string' ? max : undefined, "aria-valuemin": typeof min === 'number' ? Math.max(min, 0) : 0, "aria-valuemax": typeof max === 'number' ? Math.min(max, 100) : 100, 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';
 var mapStartAt = function (props) {