@onesy/ui-react 1.0.129 → 1.0.131

package/ViewSplit/ViewSplit.js

@@ -1,407 +1,433 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialSwapHorizW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSwapHorizW100"));
-const IconMaterialSwapVertW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSwapVertW100"));
-const Line_1 = __importDefault(require("../Line"));
-const Divider_1 = __importDefault(require("../Divider"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        color: theme.palette.text.default.primary,
-        touchAction: 'none',
-        overflow: 'hidden'
-    },
-    mouseDown_orientation_horizontal: {
-        '& *': {
-            cursor: 'ew-resize !important'
-        }
-    },
-    mouseDown_orientation_vertical: {
-        '& *': {
-            cursor: 'ns-resize !important'
-        }
-    },
-    focus: {
-        outline: '4px solid currentColor',
-        outlineOffset: '8px'
-    },
-    hidden: {
-        lineHeight: '0',
-        visibility: 'hidden'
-    },
-    item: {
-        lineHeight: '0',
-        overflow: 'hidden'
-    },
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialSwapHorizW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSwapHorizW100"));
+var _IconMaterialSwapVertW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSwapVertW100"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "valueDefault", "value", "onChange", "version", "orientation", "divider", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    position: 'relative',
+    color: theme.palette.text.default.primary,
+    touchAction: 'none',
+    overflow: 'hidden'
+  },
+  mouseDown_orientation_horizontal: {
+    '& *': {
+      cursor: 'ew-resize !important'
+    }
+  },
+  mouseDown_orientation_vertical: {
+    '& *': {
+      cursor: 'ns-resize !important'
+    }
+  },
+  focus: {
+    outline: '4px solid currentColor',
+    outlineOffset: '8px'
+  },
+  hidden: {
+    lineHeight: '0',
+    visibility: 'hidden'
+  },
+  item: {
+    lineHeight: '0',
+    overflow: 'hidden'
+  },
+  start: {
+    position: 'absolute',
+    inset: '0',
+    zIndex: '1',
+    '& > *': {
+      maxWidth: 'unset !important'
+    }
+  },
+  end: {
+    position: 'absolute',
+    inset: '0',
+    zIndex: '0'
+  },
+  iconButton: {
+    position: 'absolute',
+    userSelect: 'none',
+    zIndex: '4'
+  },
+  iconButton_manual_orientation_horizontal: {
+    cursor: 'ew-resize'
+  },
+  iconButton_manual_orientation_vertical: {
+    cursor: 'ns-resize'
+  },
+  iconButton_orientation_horizontal: {
+    transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`
+  },
+  iconButton_orientation_vertical: {
+    transform: `translateY(50%)`
+  },
+  divider: {
+    position: 'absolute',
+    userSelect: 'none',
+    zIndex: '3',
+    borderRadius: theme.methods.shape.radius.value('lg', 'px'),
+    '&.onesy-Divider-root': {
+      margin: '0px'
+    }
+  },
+  divider_manual_orientation_horizontal: {
+    cursor: 'ew-resize'
+  },
+  divider_manual_orientation_vertical: {
+    cursor: 'ns-resize'
+  },
+  divider_orientation_horizontal: {
+    insetBlock: '0',
+    transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`,
+    '&.onesy-Divider-root': {
+      width: '8px'
+    }
+  },
+  divider_orientation_vertical: {
+    insetInline: '0',
+    transform: `translateY(50%)`,
+    '&.onesy-Divider-root': {
+      height: '8px'
+    }
+  }
+}), {
+  name: 'onesy-ViewSplit'
+});
+const ViewSplit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyViewSplit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Divider = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Divider) || _Divider.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      valueDefault,
+      value: value_ = 50,
+      onChange: onChange_,
+      version = 'auto',
+      orientation = 'horizontal',
+      divider = props.version === 'manual',
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      onMouseEnter: onMouseEnter_,
+      onMouseLeave: onMouseLeave_,
+      iconButtonComponent,
+      iconOrientationHorizontal = /*#__PURE__*/_react.default.createElement(_IconMaterialSwapHorizW.default, null),
+      iconOrientationVertical = /*#__PURE__*/_react.default.createElement(_IconMaterialSwapVertW.default, null),
+      IconButtonProps = {
+        version: 'filled',
+        elevation: false
+      },
+      SeparatorProps: SeparatorProps_,
+      DividerProps = {},
+      Component = 'div',
+      className,
+      children: children_
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = _react.default.useState(false);
+  const [rect, setRect] = _react.default.useState();
+  const [hover, setHover] = _react.default.useState();
+  const [focus, setFocus] = _react.default.useState();
+  const [mouseDown, setMouseDown] = _react.default.useState();
+  const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
+  const refs = {
+    root: _react.default.useRef(undefined),
+    value: _react.default.useRef(undefined),
+    mouseDown: _react.default.useRef(undefined),
+    hover: _react.default.useRef(undefined),
+    props: _react.default.useRef(undefined),
+    orientation: _react.default.useRef(undefined),
+    version: _react.default.useRef(undefined),
+    direction: _react.default.useRef(undefined),
+    ids: {
+      root: _react.default.useId()
+    }
+  };
+  refs.value.current = value;
+  refs.mouseDown.current = mouseDown;
+  refs.hover.current = hover;
+  refs.props.current = props;
+  refs.orientation.current = orientation;
+  refs.version.current = version;
+  refs.direction.current = theme.direction;
+  const styles = {
     start: {
-        position: 'absolute',
-        inset: '0',
-        zIndex: '1',
-        '& > *': {
-            maxWidth: 'unset !important'
-        }
+      [orientation === 'horizontal' ? 'insetInlineEnd' : 'insetBlockEnd']: `${value}%`
     },
-    end: {
-        position: 'absolute',
-        inset: '0',
-        zIndex: '0'
-    },
-    iconButton: {
-        position: 'absolute',
-        userSelect: 'none',
-        zIndex: '4'
-    },
-    iconButton_manual_orientation_horizontal: {
-        cursor: 'ew-resize'
-    },
-    iconButton_manual_orientation_vertical: {
-        cursor: 'ns-resize'
-    },
-    iconButton_orientation_horizontal: {
-        transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`
-    },
-    iconButton_orientation_vertical: {
-        transform: `translateY(50%)`
+    startItem: {
+      width: rect === null || rect === void 0 ? void 0 : rect.width
     },
     divider: {
-        position: 'absolute',
-        userSelect: 'none',
-        zIndex: '3',
-        borderRadius: theme.methods.shape.radius.value('lg', 'px'),
-        '&.onesy-Divider-root': {
-            margin: '0px'
-        }
-    },
-    divider_manual_orientation_horizontal: {
-        cursor: 'ew-resize'
-    },
-    divider_manual_orientation_vertical: {
-        cursor: 'ns-resize'
-    },
-    divider_orientation_horizontal: {
-        insetBlock: '0',
-        transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`,
-        '&.onesy-Divider-root': {
-            width: '8px'
-        }
-    },
-    divider_orientation_vertical: {
-        insetInline: '0',
-        transform: `translateY(50%)`,
-        '&.onesy-Divider-root': {
-            height: '8px'
-        }
+      [orientation === 'horizontal' ? 'insetInlineEnd' : 'insetBlockEnd']: `${value}%`
     }
-}), { name: 'onesy-ViewSplit' });
-const ViewSplit = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyViewSplit) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', valueDefault, value: value_ = 50, onChange: onChange_, version = 'auto', orientation = 'horizontal', divider = props.version === 'manual', onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, iconButtonComponent, iconOrientationHorizontal = (0, jsx_runtime_1.jsx)(IconMaterialSwapHorizW100_1.default, {}), iconOrientationVertical = (0, jsx_runtime_1.jsx)(IconMaterialSwapVertW100_1.default, {}), IconButtonProps = {
-        version: 'filled',
-        elevation: false
-    }, SeparatorProps: SeparatorProps_, DividerProps = {}, Component = 'div', className, children: children_ } = props, other = __rest(props, ["tonal", "color", "valueDefault", "value", "onChange", "version", "orientation", "divider", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    const [init, setInit] = react_1.default.useState(false);
-    const [rect, setRect] = react_1.default.useState();
-    const [hover, setHover] = react_1.default.useState();
-    const [focus, setFocus] = react_1.default.useState();
-    const [mouseDown, setMouseDown] = react_1.default.useState();
-    const [value, setValue] = react_1.default.useState(valueDefault !== undefined ? valueDefault : value_);
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        value: react_1.default.useRef(undefined),
-        mouseDown: react_1.default.useRef(undefined),
-        hover: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined),
-        orientation: react_1.default.useRef(undefined),
-        version: react_1.default.useRef(undefined),
-        direction: react_1.default.useRef(undefined),
-        ids: {
-            root: react_1.default.useId()
-        }
-    };
-    refs.value.current = value;
-    refs.mouseDown.current = mouseDown;
-    refs.hover.current = hover;
-    refs.props.current = props;
-    refs.orientation.current = orientation;
-    refs.version.current = version;
-    refs.direction.current = theme.direction;
-    const styles = {
-        start: {
-            [orientation === 'horizontal' ? 'insetInlineEnd' : 'insetBlockEnd']: `${value}%`
-        },
-        startItem: {
-            width: rect === null || rect === void 0 ? void 0 : rect.width
-        },
-        divider: {
-            [orientation === 'horizontal' ? 'insetInlineEnd' : 'insetBlockEnd']: `${value}%`
-        }
+  };
+  IconButtonProps.tonal = IconButtonProps.tonal !== undefined ? IconButtonProps.tonal : tonal;
+  IconButtonProps.color = IconButtonProps.color !== undefined ? IconButtonProps.color : color;
+  DividerProps.tonal = DividerProps.tonal !== undefined ? DividerProps.tonal : tonal;
+  DividerProps.color = DividerProps.color !== undefined ? DividerProps.color : color;
+  const min = 0;
+  const max = 100;
+  const valuePrecision = valueMouse => {
+    let valueNew = max + min - (0, _utils.valueFromPercentageWithinRange)(valueMouse * 100, min, max);
+    if (refs.direction.current === 'rtl' && refs.orientation.current === 'horizontal') valueNew = max + min - valueNew;
+    if (valueNew <= min) return min;
+    if (valueNew >= max) return max;
+    return valueNew;
+  };
+  _react.default.useEffect(() => {
+    var _refs$root$current;
+    const onMouseUp = () => {
+      setMouseDown(false);
+      setFocus(false);
     };
-    IconButtonProps.tonal = IconButtonProps.tonal !== undefined ? IconButtonProps.tonal : tonal;
-    IconButtonProps.color = IconButtonProps.color !== undefined ? IconButtonProps.color : color;
-    DividerProps.tonal = DividerProps.tonal !== undefined ? DividerProps.tonal : tonal;
-    DividerProps.color = DividerProps.color !== undefined ? DividerProps.color : color;
-    const min = 0;
-    const max = 100;
-    const valuePrecision = (valueMouse) => {
-        let valueNew = (max + min) - (0, utils_1.valueFromPercentageWithinRange)(valueMouse * 100, min, max);
-        if (refs.direction.current === 'rtl' && refs.orientation.current === 'horizontal')
-            valueNew = (max + min) - valueNew;
-        if (valueNew <= min)
-            return min;
-        if (valueNew >= max)
-            return max;
-        return valueNew;
+    const onMouseMove = event => {
+      if (refs.version.current === 'auto' && refs.hover.current || refs.version.current === 'manual' && refs.mouseDown.current) {
+        const x = event.clientX;
+        const y = event.clientY;
+        const rect_ = refs.root.current.getBoundingClientRect();
+        const {
+          width,
+          height
+        } = rect_;
+
+        // Value to the precision point value
+        let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
+        valueNew = valuePrecision(valueNew);
+        onChange(valueNew);
+      }
     };
-    react_1.default.useEffect(() => {
-        var _a;
-        const onMouseUp = () => {
-            setMouseDown(false);
-            setFocus(false);
-        };
-        const onMouseMove = (event) => {
-            if ((refs.version.current === 'auto' && refs.hover.current) ||
-                (refs.version.current === 'manual' && refs.mouseDown.current)) {
-                const x = event.clientX;
-                const y = event.clientY;
-                const rect_ = refs.root.current.getBoundingClientRect();
-                const { width, height } = rect_;
-                // Value to the precision point value
-                let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-                valueNew = valuePrecision(valueNew);
-                onChange(valueNew);
-            }
-        };
-        const onTouchMove = (event) => {
-            if (refs.mouseDown.current) {
-                const x = event.touches[0].clientX;
-                const y = event.touches[0].clientY;
-                const rect_ = refs.root.current.getBoundingClientRect();
-                const { width, height } = rect_;
-                // Value to the precision point value
-                let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
-                valueNew = valuePrecision(valueNew);
-                onChange(valueNew);
-            }
-        };
-        const method = () => {
-            if (refs.root.current) {
-                const rect_ = refs.root.current.getBoundingClientRect();
-                setRect(rect_);
-            }
-        };
-        const observer = new ResizeObserver(method);
-        observer.observe(refs.root.current);
-        method();
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.addEventListener('mouseup', onMouseUp);
-        rootDocument.addEventListener('mousemove', onMouseMove);
-        rootDocument.addEventListener('touchend', onMouseUp, { passive: true });
-        rootDocument.addEventListener('touchmove', onTouchMove);
-        setInit(true);
-        return () => {
-            // Clean up
-            observer.disconnect();
-            rootDocument.removeEventListener('mouseup', onMouseUp);
-            rootDocument.removeEventListener('touchend', onMouseUp);
-            rootDocument.removeEventListener('mousemove', onMouseMove);
-            rootDocument.removeEventListener('touchmove', onTouchMove);
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (init) {
-            if (value_ !== value)
-                setValue(value_);
-        }
-    }, [value_]);
-    const onTouchStart = (event) => {
+    const onTouchMove = event => {
+      if (refs.mouseDown.current) {
         const x = event.touches[0].clientX;
         const y = event.touches[0].clientY;
         const rect_ = refs.root.current.getBoundingClientRect();
-        const { width, height } = rect_;
+        const {
+          width,
+          height
+        } = rect_;
+
         // Value to the precision point value
         let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
         valueNew = valuePrecision(valueNew);
         onChange(valueNew);
-        setMouseDown(true);
+      }
     };
-    const onFocus = react_1.default.useCallback((event) => {
-        setFocus(true);
-        if ((0, utils_1.is)('function', onFocus_))
-            onFocus_(event);
-    }, []);
-    const onBlur = react_1.default.useCallback((event) => {
-        setFocus(false);
-        if ((0, utils_1.is)('function', onBlur_))
-            onBlur_(event);
-    }, []);
-    const onFocusIconButton = react_1.default.useCallback((event) => {
-        setFocus(true);
-    }, []);
-    const onBlurIconButton = react_1.default.useCallback((event) => {
-        setFocus(false);
-    }, []);
-    const onMouseEnter = react_1.default.useCallback((event) => {
-        setHover(true);
-        if ((0, utils_1.is)('function', onMouseEnter_))
-            onMouseEnter_(event);
-    }, []);
-    const onMouseLeave = react_1.default.useCallback((event) => {
-        setHover(false);
-        setFocus(false);
-        if ((0, utils_1.is)('function', onMouseLeave_))
-            onMouseLeave_(event);
-    }, []);
-    const onMouseDown = react_1.default.useCallback(() => {
-        setMouseDown(true);
-    }, []);
-    const move = (forward_ = true) => {
-        let forward = forward_;
-        if (refs.orientation.current === 'horizontal') {
-            if (refs.direction.current === 'rtl')
-                forward = !forward;
-        }
-        let valueNew = refs.value.current || 0;
-        valueNew = (0, utils_1.clamp)(valueNew + (forward ? 1 : -1), 0, 100);
-        // Update
-        onChange(valueNew);
+    const method = () => {
+      if (refs.root.current) {
+        const rect_ = refs.root.current.getBoundingClientRect();
+        setRect(rect_);
+      }
     };
-    const onKeyDown = react_1.default.useCallback((event) => {
-        if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-            if (['Home', 'End'].includes(event.key) ||
-                (['ArrowLeft', 'ArrowRight'].includes(event.key) && refs.orientation.current === 'horizontal') ||
-                (['ArrowUp', 'ArrowDown'].includes(event.key) && refs.orientation.current === 'vertical')) {
-                // Prevent default
-                event.preventDefault();
-                let valueNew;
-                switch (event.key) {
-                    case 'Home':
-                        valueNew = refs.orientation.current !== 'vertical' ? 0 : 100;
-                        return onChange(valueNew);
-                    case 'End':
-                        valueNew = refs.orientation.current !== 'vertical' ? 100 : 0;
-                        return onChange(valueNew);
-                    case 'ArrowUp':
-                    case 'ArrowLeft':
-                        return move();
-                    case 'ArrowDown':
-                    case 'ArrowRight':
-                        return move(false);
-                    default:
-                        break;
-                }
-            }
-        }
-    }, []);
-    const onChange = (valueItem) => {
-        // Update inner or controlled
-        if (!props.hasOwnProperty('value'))
-            setValue(valueItem);
-        if ((0, utils_1.is)('function', onChange_))
-            onChange_(valueItem);
+    const observer = new ResizeObserver(method);
+    observer.observe(refs.root.current);
+    method();
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    rootDocument.addEventListener('mouseup', onMouseUp);
+    rootDocument.addEventListener('mousemove', onMouseMove);
+    rootDocument.addEventListener('touchend', onMouseUp, {
+      passive: true
+    });
+    rootDocument.addEventListener('touchmove', onTouchMove);
+    setInit(true);
+    return () => {
+      // Clean up
+      observer.disconnect();
+      rootDocument.removeEventListener('mouseup', onMouseUp);
+      rootDocument.removeEventListener('touchend', onMouseUp);
+      rootDocument.removeEventListener('mousemove', onMouseMove);
+      rootDocument.removeEventListener('touchmove', onTouchMove);
     };
-    const SeparatorProps = Object.assign(Object.assign({}, SeparatorProps_), { role: 'separator', 'aria-label': 'View separator', 'aria-valuenow': value, 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuetext': `${value}%`, 'aria-controls': refs.ids.root });
-    const direction = orientation === 'horizontal' ? 'row' : 'column';
-    // Only 2 children to use
-    const children = react_1.default.Children.toArray(children_).slice(0, 2);
-    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tabIndex: version === 'auto' ? 0 : undefined, gap: 0, direction: direction, align: 'center', justify: 'center', onFocus: onFocus, onBlur: onBlur, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onKeyDown: onKeyDown, id: refs.ids.root, "aria-orientation": orientation, Component: Component, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('ViewSplit', theme) && [
-                'onesy-ViewSplit-root',
-                `onesy-ViewSplit-version-${version}`,
-                hover && `onesy-ViewSplit-hover`,
-                focus && `onesy-ViewSplit-focus`,
-                mouseDown && `onesy-ViewSplit-mouse-down`
-            ],
-            className,
-            classes.root,
-            version === 'manual' && mouseDown && classes[`mouseDown_orientation_${orientation}`],
-            focus && !(hover || mouseDown) && classes.focus
-        ]) }, other, { children: [children[0] && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ViewSplit', theme) && [
-                                'onesy-ViewSplit-hidden'
-                            ],
-                            classes.hidden
-                        ]) }, { children: children[0] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ViewSplit', theme) && [
-                                'onesy-ViewSplit-start'
-                            ],
-                            classes.item,
-                            classes.start
-                        ]), style: Object.assign({}, styles.start) }, { children: react_1.default.cloneElement(children[0], {
-                            style: Object.assign(Object.assign({}, styles.startItem), children[0].props.style)
-                        }) }))] }), divider && ((0, jsx_runtime_1.jsx)(Divider, Object.assign({ onMouseDown: (event) => {
-                    onMouseDown();
-                    if ((0, utils_1.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown))
-                        IconButtonProps.onMouseDown(event);
-                }, orientation: orientation === 'vertical' ? 'horizontal' : 'vertical' }, DividerProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ViewSplit', theme) && [
-                        'onesy-ViewSplit-divider'
-                    ],
-                    DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
-                    classes.divider,
-                    classes[`divider_orientation_${orientation}`],
-                    version === 'manual' && classes[`divider_manual_orientation_${orientation}`]
-                ]), style: Object.assign(Object.assign({}, styles.divider), DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.style) }))), version === 'manual' && ((iconButtonComponent && react_1.default.cloneElement(iconButtonComponent, Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ViewSplit', theme) && [
-                        'onesy-ViewSplit-icon-button'
-                    ],
-                    classes.iconButton,
-                    classes[`iconButton_orientation_${orientation}`],
-                    version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]
-                ]) }, SeparatorProps))) ||
-                (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onFocus: onFocusIconButton, onBlur: onBlurIconButton, onMouseDown: (event) => {
-                        onMouseDown();
-                        if ((0, utils_1.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown))
-                            IconButtonProps.onMouseDown(event);
-                    } }, SeparatorProps, IconButtonProps, { className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('ViewSplit', theme) && [
-                            'onesy-ViewSplit-icon-button'
-                        ],
-                        IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className,
-                        classes.iconButton,
-                        classes[`iconButton_orientation_${orientation}`],
-                        version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]
-                    ]), style: Object.assign(Object.assign({}, styles.start), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style) }, { children: orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined }))), children[1] && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ViewSplit', theme) && [
-                        'onesy-ViewSplit-end'
-                    ],
-                    classes.item,
-                    classes.end
-                ]) }, { children: react_1.default.cloneElement(children[1], {
-                    style: Object.assign(Object.assign({}, styles.endItem), children[1].props.style)
-                }) })))] })));
+  }, []);
+  _react.default.useEffect(() => {
+    if (init) {
+      if (value_ !== value) setValue(value_);
+    }
+  }, [value_]);
+  const onTouchStart = event => {
+    const x = event.touches[0].clientX;
+    const y = event.touches[0].clientY;
+    const rect_ = refs.root.current.getBoundingClientRect();
+    const {
+      width,
+      height
+    } = rect_;
+
+    // Value to the precision point value
+    let valueNew = refs.orientation.current === 'horizontal' ? (x - rect_.x) / width : (y - rect_.y) / height;
+    valueNew = valuePrecision(valueNew);
+    onChange(valueNew);
+    setMouseDown(true);
+  };
+  const onFocus = _react.default.useCallback(event => {
+    setFocus(true);
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
+  }, []);
+  const onBlur = _react.default.useCallback(event => {
+    setFocus(false);
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
+  }, []);
+  const onFocusIconButton = _react.default.useCallback(event => {
+    setFocus(true);
+  }, []);
+  const onBlurIconButton = _react.default.useCallback(event => {
+    setFocus(false);
+  }, []);
+  const onMouseEnter = _react.default.useCallback(event => {
+    setHover(true);
+    if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
+  }, []);
+  const onMouseLeave = _react.default.useCallback(event => {
+    setHover(false);
+    setFocus(false);
+    if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event);
+  }, []);
+  const onMouseDown = _react.default.useCallback(() => {
+    setMouseDown(true);
+  }, []);
+  const move = (forward_ = true) => {
+    let forward = forward_;
+    if (refs.orientation.current === 'horizontal') {
+      if (refs.direction.current === 'rtl') forward = !forward;
+    }
+    let valueNew = refs.value.current || 0;
+    valueNew = (0, _utils.clamp)(valueNew + (forward ? 1 : -1), 0, 100);
+
+    // Update
+    onChange(valueNew);
+  };
+  const onKeyDown = _react.default.useCallback(event => {
+    if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+      if (['Home', 'End'].includes(event.key) || ['ArrowLeft', 'ArrowRight'].includes(event.key) && refs.orientation.current === 'horizontal' || ['ArrowUp', 'ArrowDown'].includes(event.key) && refs.orientation.current === 'vertical') {
+        // Prevent default
+        event.preventDefault();
+        let valueNew;
+        switch (event.key) {
+          case 'Home':
+            valueNew = refs.orientation.current !== 'vertical' ? 0 : 100;
+            return onChange(valueNew);
+          case 'End':
+            valueNew = refs.orientation.current !== 'vertical' ? 100 : 0;
+            return onChange(valueNew);
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            return move();
+          case 'ArrowDown':
+          case 'ArrowRight':
+            return move(false);
+          default:
+            break;
+        }
+      }
+    }
+  }, []);
+  const onChange = valueItem => {
+    // Update inner or controlled
+    if (!props.hasOwnProperty('value')) setValue(valueItem);
+    if ((0, _utils.is)('function', onChange_)) onChange_(valueItem);
+  };
+  const SeparatorProps = _objectSpread(_objectSpread({}, SeparatorProps_), {}, {
+    role: 'separator',
+    'aria-label': 'View separator',
+    'aria-valuenow': value,
+    'aria-valuemin': 0,
+    'aria-valuemax': 100,
+    'aria-valuetext': `${value}%`,
+    'aria-controls': refs.ids.root
+  });
+  const direction = orientation === 'horizontal' ? 'row' : 'column';
+
+  // Only 2 children to use
+  const children = _react.default.Children.toArray(children_).slice(0, 2);
+  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tabIndex: version === 'auto' ? 0 : undefined,
+    gap: 0,
+    direction: direction,
+    align: "center",
+    justify: "center",
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onTouchStart: onTouchStart,
+    onKeyDown: onKeyDown,
+    id: refs.ids.root,
+    "aria-orientation": orientation,
+    Component: Component,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-root', `onesy-ViewSplit-version-${version}`, hover && `onesy-ViewSplit-hover`, focus && `onesy-ViewSplit-focus`, mouseDown && `onesy-ViewSplit-mouse-down`], className, classes.root, version === 'manual' && mouseDown && classes[`mouseDown_orientation_${orientation}`], focus && !(hover || mouseDown) && classes.focus])
+  }, other), children[0] && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-hidden'], classes.hidden])
+  }, children[0]), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-start'], classes.item, classes.start]),
+    style: _objectSpread({}, styles.start)
+  }, /*#__PURE__*/_react.default.cloneElement(children[0], {
+    style: _objectSpread(_objectSpread({}, styles.startItem), children[0].props.style)
+  }))), divider && /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({
+    onMouseDown: event => {
+      onMouseDown();
+      if ((0, _utils.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown)) IconButtonProps.onMouseDown(event);
+    },
+    orientation: orientation === 'vertical' ? 'horizontal' : 'vertical'
+  }, DividerProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`], version === 'manual' && classes[`divider_manual_orientation_${orientation}`]]),
+    style: _objectSpread(_objectSpread({}, styles.divider), DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.style)
+  })), version === 'manual' && (iconButtonComponent && /*#__PURE__*/_react.default.cloneElement(iconButtonComponent, _objectSpread({
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]])
+  }, SeparatorProps)) || /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onFocus: onFocusIconButton,
+    onBlur: onBlurIconButton,
+    onMouseDown: event => {
+      onMouseDown();
+      if ((0, _utils.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown)) IconButtonProps.onMouseDown(event);
+    }
+  }, SeparatorProps, IconButtonProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton, classes[`iconButton_orientation_${orientation}`], version === 'manual' && classes[`iconButton_manual_orientation_${orientation}`]]),
+    style: _objectSpread(_objectSpread({}, styles.start), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style)
+  }), orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined)), children[1] && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ViewSplit', theme) && ['onesy-ViewSplit-end'], classes.item, classes.end])
+  }, /*#__PURE__*/_react.default.cloneElement(children[1], {
+    style: _objectSpread(_objectSpread({}, styles.endItem), children[1].props.style)
+  })));
 });
 ViewSplit.displayName = 'onesy-ViewSplit';
-exports.default = ViewSplit;
+var _default = exports.default = ViewSplit;