@react-fabric/core 1.0.0-beta.9 → 1.0.1

package/dist/cjs/hooks/useNotificationService.js

@@ -0,0 +1,199 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var sonner = require('sonner');
+var Alert = require('../components/alert/Alert.js');
+var context = require('../context/context.js');
+var useIsRtl = require('./useIsRtl.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+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), true).forEach(function (r) { _defineProperty(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; }
+var DEFAULT_DURATION = 5000;
+var TOAST_POSITIONS_LTR = {
+  top: "top-right",
+  bottom: "bottom-right"
+};
+var TOAST_POSITIONS_RTL = {
+  top: "top-left",
+  bottom: "bottom-left"
+};
+var MESSAGE_POSITIONS = {
+  top: "top-center",
+  bottom: "bottom-center"
+};
+function useNotificationService() {
+  var isRtl = useIsRtl.useIsRtl();
+  var _useSonner = sonner.useSonner(),
+    toasts = _useSonner.toasts;
+  var toastRef = react.useRef(toasts);
+  var _useGlobals = context.useGlobals(),
+    showAlert = _useGlobals.showAlert;
+  var makeToastOptions = function makeToastOptions(options, promiseId) {
+    var _opts$duration, _opts$position, _opts$actions;
+    var opts = utilities.isString(options) ? {
+      message: options
+    } : options;
+    var id = promiseId !== null && promiseId !== void 0 ? promiseId : utilities.shortHash();
+    var duration = (_opts$duration = opts.duration) !== null && _opts$duration !== void 0 ? _opts$duration : DEFAULT_DURATION;
+    return {
+      message: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          children: opts.message
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          "data-button": true,
+          "data-close-all": true,
+          onClick: c,
+          children: "Close All"
+        })]
+      }),
+      id: id,
+      position: (isRtl ? TOAST_POSITIONS_RTL : TOAST_POSITIONS_LTR)[(_opts$position = opts.position) !== null && _opts$position !== void 0 ? _opts$position : "top"],
+      icon: opts.icon,
+      toasterId: "toasting",
+      closeButton: true,
+      action: (opts.actions || opts.link) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-actionbar": true,
+        children: [(_opts$actions = opts.actions) === null || _opts$actions === void 0 ? void 0 : _opts$actions.map(function (act) {
+          return /*#__PURE__*/jsxRuntime.jsx("button", {
+            "data-button": true,
+            "data-action": true,
+            onClick: function onClick() {
+              return act.onClick(), sonner.toast.dismiss(id);
+            },
+            children: act.label
+          }, act.label);
+        }), opts.link && /*#__PURE__*/jsxRuntime.jsx("button", {
+          "data-link": true,
+          "data-action": true,
+          onClick: function onClick() {
+            var _opts$link;
+            return (_opts$link = opts.link) !== null && _opts$link !== void 0 && _opts$link.onClick(), sonner.toast.dismiss(id);
+          },
+          children: opts.link.label
+        }, opts.link.label)]
+      }),
+      className: duration > 0 ? "progress" : undefined,
+      style: {
+        "--sonner-duration": duration
+      },
+      description: opts.description,
+      duration: duration === 0 ? Infinity : duration
+    };
+  };
+  var makeMessageOptions = function makeMessageOptions(options) {
+    var _opts$duration2, _opts$position2;
+    var opts = utilities.isString(options) ? {
+      message: options
+    } : options;
+    var id = utilities.shortHash();
+    var duration = (_opts$duration2 = opts.duration) !== null && _opts$duration2 !== void 0 ? _opts$duration2 : DEFAULT_DURATION;
+    return {
+      message: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          children: opts.message
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          "data-button": true,
+          "data-close-all": true,
+          onClick: c,
+          children: "Close All"
+        })]
+      }),
+      id: id,
+      position: MESSAGE_POSITIONS[(_opts$position2 = opts.position) !== null && _opts$position2 !== void 0 ? _opts$position2 : "top"],
+      icon: opts.icon,
+      toasterId: "toasting",
+      closeButton: true,
+      action: opts.link && /*#__PURE__*/jsxRuntime.jsx("div", {
+        "data-actionbar": true,
+        children: opts.link && /*#__PURE__*/jsxRuntime.jsx("button", {
+          "data-link": true,
+          "data-action": true,
+          onClick: function onClick() {
+            var _opts$link2;
+            return (_opts$link2 = opts.link) !== null && _opts$link2 !== void 0 && _opts$link2.onClick(), sonner.toast.dismiss(id);
+          },
+          children: opts.link.label
+        }, opts.link.label)
+      }),
+      className: duration > 0 ? "progress" : undefined,
+      style: {
+        "--sonner-duration": duration
+      },
+      duration: duration === 0 ? Infinity : duration
+    };
+  };
+  react.useEffect(function () {
+    toastRef.current = toasts;
+  }, [toasts]);
+  var c = function c() {
+    showAlert();
+    toastRef.current.forEach(function (t) {
+      if (t.toasterId === "toasting" && !t.promise) sonner.toast.dismiss(t.id);
+    });
+  };
+  var t = function t(props) {
+    var opts = makeToastOptions(props);
+    var tt = !utilities.isString(props) && props.type ? sonner.toast[props.type] : sonner.toast;
+    tt(opts.message, opts);
+  };
+  var m = function m(props) {
+    var opts = makeMessageOptions(props);
+    var tt = !utilities.isString(props) && props.type ? sonner.toast[props.type] : sonner.toast;
+    tt(opts.message, opts);
+  };
+  var p = function p(promise, props) {
+    var _props$loading, _props$position;
+    var id = utilities.shortHash();
+    sonner.toast.loading(/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1",
+        children: (_props$loading = props === null || props === void 0 ? void 0 : props.loading) !== null && _props$loading !== void 0 ? _props$loading : "Loading"
+      }), (props === null || props === void 0 ? void 0 : props.onCancel) && /*#__PURE__*/jsxRuntime.jsx("button", {
+        "data-button": true,
+        "data-cancel": true,
+        onClick: function onClick() {
+          var _props$onCancel;
+          void Promise.resolve((_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props))["finally"](function () {
+            sonner.toast.dismiss(id);
+          });
+        },
+        children: "Cancel"
+      })]
+    }), {
+      id: id,
+      toasterId: "toasting",
+      position: (isRtl ? TOAST_POSITIONS_RTL : TOAST_POSITIONS_LTR)[(_props$position = props === null || props === void 0 ? void 0 : props.position) !== null && _props$position !== void 0 ? _props$position : "bottom"]
+    });
+    void promise.then(function (props) {
+      var opts = makeToastOptions(props, id);
+      sonner.toast.success(opts.message, opts);
+    })["catch"](function (props) {
+      if (props) {
+        var opts = makeToastOptions(props, id);
+        sonner.toast.error(opts.message, opts);
+      }
+    });
+  };
+  var a = function a(props) {
+    return new Promise(function (r) {
+      showAlert(/*#__PURE__*/jsxRuntime.jsx(Alert.Alert, _objectSpread(_objectSpread({}, props), {}, {
+        onClose: function onClose(ret) {
+          return r(ret), showAlert();
+        }
+      })));
+    });
+  };
+  return {
+    alert: a,
+    toast: t,
+    message: m,
+    promise: p,
+    closeAll: c
+  };
+}
+
+exports.useNotificationService = useNotificationService;

package/dist/cjs/hooks/useOverlayService.js

@@ -1,55 +1,96 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["onClose"];
 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) { _defineProperty(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; }
-var useOverlayService = function useOverlayService(ModalOrFlyout) {
-  var _useState = react.useState(null),
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(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; }
+/**
+ * Hook to manage overlay components like modals or flyouts.
+ * It provides a way to open an overlay with specified properties and handle its closure.
+ * This hook returns the current overlay component and a function to open it with props.
+ * It is useful for scenarios where you need to display overlays dynamically,
+ * such as modals, flyouts, or any other overlay components in a React application.
+ * The `openOverlay` function returns a promise that resolves with the result
+ * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
+ *
+ * @example
+ * ```jsx
+ * const [Overlay, openOverlay] = useOverlayService(MyModalComponent);
+ * // To open the overlay:
+ * const handleOpen = async () => {
+ *   const result = await openOverlay({ title: "My Modal", content: "Hello World" });
+ *   console.log(result); // Handle the result from the overlay
+ * };
+ * <button onClick={handleOpen}>Open Modal</button>
+ * <Overlay />
+ * ```
+ */
+function useOverlayService(OverlayComponent) {
+  var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    Overlay = _useState2[0],
-    setOverlay = _useState2[1];
-  var openOverlay = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _ref2,
-        onClose,
-        props,
-        _args = arguments;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, props = _objectWithoutProperties(_ref2, _excluded);
-            _context.next = 3;
-            return new Promise(function (resolve) {
-              var handleClose = function handleClose(args) {
-                setOverlay(null);
-                resolve(args);
-                onClose === null || onClose === void 0 || onClose(args);
-              };
-              setOverlay( /*#__PURE__*/jsxRuntime.jsx(ModalOrFlyout, _objectSpread(_objectSpread({}, props), {}, {
-                onClose: handleClose
-              })));
-            });
-          case 3:
-            return _context.abrupt("return", _context.sent);
-          case 4:
-          case "end":
-            return _context.stop();
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = react.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    modalProps = _useState4[0],
+    setModalProps = _useState4[1];
+  var existingOpenPromiseRef = react.useRef(null);
+
+  // Open modal and optionally pass dynamic props down to it
+  var openOverlay = react.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var props,
+      _args = arguments;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          props = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+          setModalProps(props);
+          setIsOpen(true);
+          _context.next = 1;
+          return new Promise(function (resolve) {
+            existingOpenPromiseRef.current = function (args) {
+              var _props$onClose;
+              resolve(args);
+              props === null || props === void 0 || (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props, args);
+              setIsOpen(false);
+              setModalProps({});
+              existingOpenPromiseRef.current = null;
+            };
+          });
+        case 1:
+          return _context.abrupt("return", _context.sent);
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), []);
+  var closeOverlay = react.useCallback(function (args) {
+    var _existingOpenPromiseR;
+    (_existingOpenPromiseR = existingOpenPromiseRef.current) === null || _existingOpenPromiseR === void 0 || _existingOpenPromiseR.call(existingOpenPromiseRef, args);
+  }, []);
+
+  // A wrapper component that handles the Portal attachment safely
+  var renderOverlay = react.useCallback(function () {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (!isOpen) return null;
+    return (
+      /*#__PURE__*/
+      // @ts-expect-error ignore
+      jsxRuntime.jsx(OverlayComponent, _objectSpread(_objectSpread(_objectSpread({}, props), modalProps), {}, {
+        onClose: function onClose(args) {
+          var _existingOpenPromiseR2;
+          return (_existingOpenPromiseR2 = existingOpenPromiseRef.current) === null || _existingOpenPromiseR2 === void 0 ? void 0 : _existingOpenPromiseR2.call(existingOpenPromiseRef, args, props.onClose);
         }
-      }, _callee);
-    }));
-    return function openOverlay() {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  return [Overlay, openOverlay];
-};
+      }))
+    );
+  }, [OverlayComponent, isOpen, modalProps]);
+  return [renderOverlay, openOverlay, closeOverlay];
+}
 
 exports.useOverlayService = useOverlayService;

package/dist/cjs/hooks/usePropState.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+
+function usePropState(value, callback) {
+  var currentRef = react.useRef(value);
+  var _useState = react.useState(function () {
+      return value;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  if (!utilities.isEqual(currentRef.current, value)) {
+    currentRef.current = value;
+    setState(value);
+    callback === null || callback === void 0 || callback(value);
+  }
+  return [state, setState];
+}
+function usePropWatcher(value) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  var currentRef = react.useRef(args);
+  var _useState3 = react.useState(function () {
+      return value;
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  if (!utilities.isEqual(currentRef.current, args)) {
+    currentRef.current = args;
+    setState(value);
+  }
+  return [state, setState];
+}
+
+exports.usePropState = usePropState;
+exports.usePropWatcher = usePropWatcher;

package/dist/cjs/hooks/usePropToggle.js

@@ -2,39 +2,45 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
-var useEffectDebugger = require('./useEffectDebugger.js');
+var usePropState = require('./usePropState.js');
 
 /**
- * hook to control boolean props
- * @param isOn (is prop true)
- * @param callback (optional callback)
- * @param key (optional key to pass to callback)
- * @returns
+ * This hook is used to manage a toggle state based on a prop value.
+ * It allows you to toggle the state and also provides a reference to the current state.
+ * It is useful for scenarios where you want to control a toggle state from a parent component while also allowing local toggling.
+ *
+ * @param isOn - The initial state of the toggle.
+ * @param onToggle - A callback function that is called when the toggle state changes.
+ * @param key - A unique key to identify the toggle state.
+ * @returns A tuple containing the current toggle state, a function to toggle the state, and a reference to the current state.
+ *
+ * @example
+ * ```jsx
+ * const [isToggled, toggle, toggleRef] = usePropToggle(false, (newState) => {
+ *   console.log("Toggle state changed to:", newState);
+ * });
+ * toggle(); // This will toggle the state and call the onToggle callback
+ * ```
  */
-var usePropToggle = function usePropToggle() {
+function usePropToggle() {
   var isOn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var onToggle = arguments.length > 1 ? arguments[1] : undefined;
   var key = arguments.length > 2 ? arguments[2] : undefined;
-  var toggleRef = react.useRef(isOn);
-  var _useState = react.useState(isOn),
-    _useState2 = _slicedToArray(_useState, 2),
-    toggleOn = _useState2[0],
-    setToggleOn = _useState2[1];
-
-  /** ***************** update toggle state on change *******************/
-  useEffectDebugger.useLayoutEffectDebugger(function () {
-    toggleRef.current = isOn;
-    setToggleOn(isOn);
-  }, [isOn], "usePropToggle");
+  var _usePropState = usePropState.usePropState(isOn),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    toggleOn = _usePropState2[0],
+    setToggleOn = _usePropState2[1];
 
   /** ***************** toggle handler *******************/
-  var doToggle = react.useCallback(function () {
-    if ((onToggle === null || onToggle === void 0 ? void 0 : onToggle(!toggleOn, key)) !== false) {
-      toggleRef.current = !toggleOn;
-      setToggleOn(!toggleOn);
-    }
-  }, [toggleOn, onToggle, key]);
-  return [toggleOn, doToggle, toggleRef];
-};
+  var doToggle = react.useCallback(function (toggle) {
+    setToggleOn(function (toggleOn) {
+      if ((onToggle === null || onToggle === void 0 ? void 0 : onToggle(toggle !== null && toggle !== void 0 ? toggle : !toggleOn, key)) !== false) {
+        return toggle !== null && toggle !== void 0 ? toggle : !toggleOn;
+      }
+      return toggleOn;
+    });
+  }, [setToggleOn, onToggle, key]);
+  return [toggleOn, doToggle];
+}
 
 exports.usePropToggle = usePropToggle;

package/dist/cjs/hooks/useResize.js

@@ -1,75 +1,84 @@
 'use strict';
 
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var useIsRtl = require('./useIsRtl.js');
 
-/*
- * React Fabric
- * @version: 1.0.0
+/**
+ * Custom hook to handle resizing of an element.
+ * It provides a ref to the element and a mouse down event handler to initiate resizing.
+ * The resizing is done by tracking mouse movements and calculating the difference in x and y coordinates.
+ * It supports both horizontal and vertical resizing, and can be configured to reverse the direction based on RTL (Right-to-Left) layout.
  *
+ * @param onResize - Callback function to handle the resize difference.
+ * @param options - Options for the resizing behavior.
+ * @returns An object containing the ref to the element, a boolean indicating if resizing is in progress, and a mouse down event handler.
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * @example
+ * ```jsx
+ * const { ref, onMouseDown } = useResize((diff) => {
+ *   console.log("Resize difference:", diff);
+ * }, { isReverse: true, isVertical: false });
+ * <div ref={ref} onMouseDown={onMouseDown}>Resize Me</div>
+ * ```
  */
-
-var useResize = function useResize(onResize, _ref) {
+function useResize(onResize, _ref) {
   var _ref$isReverse = _ref.isReverse,
     isReverse = _ref$isReverse === void 0 ? false : _ref$isReverse,
     _ref$isVertical = _ref.isVertical,
     isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
     onStart = _ref.onStart,
     onEnd = _ref.onEnd;
-  var refEl = react.useRef(null);
+  var elRef = react.useRef(null);
   var isRtl = useIsRtl.useIsRtl();
-  var onResizing = react.useCallback(function (evt) {
-    if (refEl.current != null) {
-      var _refEl$current;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var onResizingRef = react.useRef(function (evt) {
+    if (elRef.current != null) {
+      var _elRef$current;
       /** ***************** check if reverse enabled of RTL *******************/
       var reversed = ((isRtl ? 1 : 0) ^ (isReverse ? 1 : 0)) === 1;
-      var box = (_refEl$current = refEl.current) === null || _refEl$current === void 0 ? void 0 : _refEl$current.getBoundingClientRect();
-      var x = (evt.clientX - (reversed ? box.left : box.right)) * (reversed ? -1 : 1);
-      var y = evt.clientY - box.bottom;
+      var box = (_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.getBoundingClientRect();
+      var diffX = isReverse ? box.left : box.right;
+      var diffY = isReverse ? box.top : box.bottom;
+      var x = (evt.clientX - diffX) * (reversed ? -1 : 1);
+      var y = (evt.clientY - diffY) * (isReverse ? -1 : 1);
       onResize({
         x: x,
         y: y
       });
     }
-  }, [onResize, isRtl, isReverse]);
+  });
 
   /** ***************** dettach handlers on mouseup *******************/
-  var onResizeEnd = react.useCallback(function () {
+  var onResizeEndRef = react.useRef(function () {
     document.body.style.cursor = "unset";
-    document.removeEventListener("mousemove", onResizing);
-    document.removeEventListener("mouseup", onResizeEnd);
+    document.body.style.userSelect = "unset";
+    document.removeEventListener("mousemove", onResizingRef.current);
+    document.removeEventListener("mouseup", onResizeEndRef.current);
+    setIsResizing(false);
     onEnd === null || onEnd === void 0 || onEnd();
-  }, [onEnd, onResizing]);
+  });
 
   /** ***************** attach handlers on mousedown *******************/
   var onResizeStart = react.useCallback(function (e) {
+    if (e.button !== 0) return;
     e.preventDefault();
+    e.stopPropagation();
+    document.body.style.userSelect = "none";
     document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
-    document.addEventListener("mousemove", onResizing);
-    document.addEventListener("mouseup", onResizeEnd);
+    document.addEventListener("mousemove", onResizingRef.current);
+    document.addEventListener("mouseup", onResizeEndRef.current);
+    setIsResizing(true);
     onStart === null || onStart === void 0 || onStart();
-  }, [onResizing, onResizeEnd, onStart]);
+  }, [isVertical, onStart]);
   return {
-    ref: refEl,
+    ref: elRef,
+    isResizing: isResizing,
     onMouseDown: onResizeStart
   };
-};
+}
 
 exports.useResize = useResize;

package/dist/cjs/hooks/useResizeObserver.js

@@ -3,14 +3,33 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react = require('react');
 var ResizeObserver = require('resize-observer-polyfill');
-var useDebounce = require('./useDebounce.js');
+var useEffectDebugger = require('./useEffectDebugger.js');
 
-var useResizeObserver = function useResizeObserver(onResize) {
+/**
+ * Custom hook to observe size changes of an element using ResizeObserver.
+ * It returns a ref that can be attached to the element you want to observe.
+ * The hook will call the provided `onResize` callback with the new size of the element
+ * whenever it changes.
+ * * This is useful for responsive designs where you need to adjust the layout or styles
+ * based on the size of an element.
+ *
+ * @param {Function} onResize Callback function that receives the new size of the element.
+ * @returns A ref object to be attached to the element you want to observe.
+ *
+ * @example
+ * ```jsx
+ * const ref = useResizeObserver((size) => {
+ *   console.log("Element resized:", size);
+ * });
+ * <div ref={ref}>Resize me!</div>
+ * ```
+ */
+function useResizeObserver(onResize) {
   var ref = react.useRef(null);
   var _useTransition = react.useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
     startTransition = _useTransition2[1];
-  var callbackResize = useDebounce.useDebounce(function () {
+  var callbackResize = function callbackResize() {
     startTransition(function () {
       if (onResize && ref.current != null) {
         var _ref$current = ref.current,
@@ -22,8 +41,8 @@ var useResizeObserver = function useResizeObserver(onResize) {
         });
       }
     });
-  }, [onResize]);
-  react.useEffect(function () {
+  };
+  useEffectDebugger.useEffectDebugger(function () {
     if (ref.current != null) {
       var ob = new ResizeObserver(callbackResize);
       ob.observe(ref.current);
@@ -31,8 +50,8 @@ var useResizeObserver = function useResizeObserver(onResize) {
         ob.disconnect();
       };
     }
-  }, [callbackResize, ref]);
+  }, [], "useResizeObserver");
   return ref;
-};
+}
 
 exports.useResizeObserver = useResizeObserver;