@linzjs/lui 21.24.5-0 → 21.25.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.25.0](https://github.com/linz/lui/compare/v21.24.4...v21.25.0) (2024-04-11)
+
+
+### Features
+
+* select now now longer has line-height set. This was causing the attached issues with "g" ([#1109](https://github.com/linz/lui/issues/1109)) ([54b8238](https://github.com/linz/lui/commit/54b8238de24a7733f9462cbf6bd4f028be8e5e88))
+
 ## [21.24.4](https://github.com/linz/lui/compare/v21.24.3...v21.24.4) (2024-03-15)
 
 

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

@@ -6,8 +6,5 @@ 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/Splitter.d.ts

@@ -1,44 +1,30 @@
 import React, { ComponentPropsWithRef } from 'react';
-import { HTMLAttributes } from 'react';
 import './Splitter.scss';
 import { LuiButton } from '../LuiButton/LuiButton';
 declare type ButtonProps = Omit<ComponentPropsWithRef<typeof LuiButton>, 'children'> & {
     children?: React.ReactNode;
 };
-declare type BoundaryPx = {
-    min?: `${number}px`;
-    max?: `${number}px`;
-};
-declare type BoundaryNum = {
-    min?: number;
-    max?: number;
-};
-declare type BoundaryProps = BoundaryPx | BoundaryNum;
-declare type Start = number | '1st-collapsed' | '2nd-collapsed';
-declare type Controlled = {
-    ratio?: number;
-    startAt?: never;
-};
-declare type Uncontrolled = {
-    ratio?: never;
-    startAt?: Start;
-};
-declare type RatioProps = Controlled | Uncontrolled;
-declare type Props = {
-    onResized?: (ratio: number) => void;
-    orientation?: 'horizontal' | 'vertical';
-    parts?: {
-        separator?: ComponentPropsWithRef<'div'>;
-        controls?: {
-            container?: ComponentPropsWithRef<'span'>;
-            primary?: ButtonProps;
-            secondary?: ButtonProps;
-        };
-    };
-} & HTMLAttributes<HTMLDivElement> & RatioProps & BoundaryProps;
 /**
  * Container that appends a separator when the children count equals 2.
  * It looks at HTML nodes, not React components
  */
-export declare const Splitter: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export declare const Splitter: React.ForwardRefExoticComponent<{
+    ratio?: number | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    onResized?: ((ratio: number) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    parts?: {
+        separator?: (Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        }) | undefined;
+        controls?: {
+            container?: (Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+                ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+            }) | undefined;
+            primary?: ButtonProps | undefined;
+            secondary?: ButtonProps | undefined;
+        } | undefined;
+    } | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -21,6 +21,5 @@ export declare const getSeparatorAttributes: (props: Props) => {
     valueMax: number;
     orientation: "horizontal" | "vertical" | undefined;
     thickness: number;
-    boundary: ("keep-secondary" | "keep-primary" | "keep-both") | undefined;
 };
 export {};

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

@@ -5,7 +5,7 @@ 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, boundaries: { min, max }, }: {
     ratio?: number | undefined;
     onResized?: ((newVal: number) => void) | undefined;
     separator: RefObject<HTMLDivElement>;
@@ -13,10 +13,6 @@ export declare const useValueSeparator: ({ separator, ratio, onResized, boundari
         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) => void;

package/dist/index.js

@@ -58450,56 +58450,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
  */
@@ -58515,8 +58465,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) {
@@ -58594,9 +58543,6 @@ 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%';
@@ -58609,14 +58555,7 @@ 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',
-                'aria-valuemin',
-                'aria-valuemax',
-                'aria-orientation',
-            ]
-        });
+        observer.observe(separator, { attributeFilter: ['aria-valuenow'] });
         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 })));
@@ -58681,29 +58620,6 @@ var getSeparatorPosition = function (separatorRef, drag) {
     return clampSeparator({ value: value });
 };
 
-var transitionFactory = function (attrs, ms) {
-    return attrs.map(function (key) { return "".concat(key, " ").concat(ms, "ms"); }).join(', ');
-};
-var barTransition = function (ms) {
-    return transitionFactory(['left', 'top', 'right', 'bottom'], ms);
-};
-var gridTransition = function (ms) {
-    return transitionFactory(['grid-template-columns', 'grid-template-rows'], ms);
-};
-var transition = function (separator) {
-    var _a;
-    var splitter = (_a = separator.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-    var delay = function (ms) {
-        if (splitter) {
-            separator.current.style.transition = barTransition(ms);
-            splitter.style.transition = gridTransition(ms);
-        }
-    };
-    var stop = function () { return delay(0); };
-    var resume = function () { return delay(300); };
-    return { stop: stop, resume: resume };
-};
-
 /**
  * It captures window events to report a new position.
  * Provides necessary handlers for separator.
@@ -58747,7 +58663,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'
@@ -58755,7 +58672,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');
         }
@@ -58765,65 +58684,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 = 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) {
+        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 = React.useState(0), count = _a[0], setCount = _a[1];
-    React.useEffect(function () { return transition(separator).resume(); }, [count]);
     React.useEffect(function () {
-        var callback = function (attr) {
-            return function (_a) {
-                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.
@@ -58847,49 +58734,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.
@@ -58897,24 +58747,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 = React.useRef(null);
-    var setValueNow = React.useCallback(function (val, config) {
-        var _a, _b;
+    var setValueNow = React.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) {
@@ -58930,8 +58775,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';
@@ -58939,29 +58788,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 = '';
         }
     }
 };
@@ -59045,62 +58890,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 canceEvent = function (e) {
     if (e.currentTarget !== e.target) {
         e.preventDefault();
@@ -59109,19 +58898,21 @@ var canceEvent = 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, 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["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) {
@@ -59171,31 +58962,12 @@ 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, 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["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, "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;