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

package/src/hooks/useNotificationService.tsx

@@ -0,0 +1,239 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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.
+ */
+
+import { isString, shortHash } from "@react-fabric/utilities";
+import { useEffect, useRef } from "react";
+import type { ToastT } from "sonner";
+import { toast, useSonner } from "sonner";
+import type { AlertProps } from "../components/alert/Alert";
+import { Alert } from "../components/alert/Alert";
+import { useGlobals } from "../context/context";
+import { useIsRtl } from "./useIsRtl";
+
+type POSITION = "top" | "bottom";
+
+const DEFAULT_DURATION = 5000;
+
+const TOAST_POSITIONS_LTR = {
+  top: "top-right",
+  bottom: "bottom-right",
+};
+const TOAST_POSITIONS_RTL = {
+  top: "top-left",
+  bottom: "bottom-left",
+};
+const MESSAGE_POSITIONS = {
+  top: "top-center",
+  bottom: "bottom-center",
+};
+
+interface Action {
+  label: string;
+  onClick: () => void;
+}
+
+interface ToastProps {
+  message: string;
+  type?: "info" | "error" | "success" | "warning";
+  position?: POSITION;
+  icon?: React.ReactElement;
+  description?: string;
+  actions?: Action[];
+  link?: Action;
+  duration?: number;
+}
+interface MessageProps {
+  message: string;
+  type?: "info" | "error" | "success" | "warning";
+  position?: POSITION;
+  icon?: React.ReactElement;
+  link?: Action;
+  duration?: number;
+}
+
+export function useNotificationService() {
+  const isRtl = useIsRtl();
+  const { toasts } = useSonner();
+  const toastRef = useRef(toasts);
+  const { showAlert } = useGlobals();
+
+  const makeToastOptions = (options: string | ToastProps, promiseId?: string) => {
+    const opts = isString(options) ? { message: options } : options;
+    const id = promiseId ?? shortHash();
+    const duration = opts.duration ?? DEFAULT_DURATION;
+    return {
+      message: (
+        <>
+          <div>{opts.message}</div>
+          <button data-button data-close-all onClick={c}>
+            Close All
+          </button>
+        </>
+      ),
+      id,
+      position: (isRtl ? TOAST_POSITIONS_RTL : TOAST_POSITIONS_LTR)[opts.position ?? "top"] as ToastT["position"],
+      icon: opts.icon,
+      toasterId: "toasting",
+      closeButton: true,
+      action: (opts.actions || opts.link) && (
+        <div data-actionbar>
+          {opts.actions?.map((act) => (
+            <button key={act.label} data-button data-action onClick={() => (act.onClick(), toast.dismiss(id))}>
+              {act.label}
+            </button>
+          ))}
+          {opts.link && (
+            <button key={opts.link.label} data-link data-action onClick={() => (opts.link?.onClick(), toast.dismiss(id))}>
+              {opts.link.label}
+            </button>
+          )}
+        </div>
+      ),
+      className: duration > 0 ? "progress" : undefined,
+      style: {
+        "--sonner-duration": duration,
+      } as React.CSSProperties,
+      description: opts.description,
+      duration: duration === 0 ? Infinity : duration,
+    };
+  };
+
+  const makeMessageOptions = (options: string | MessageProps) => {
+    const opts = isString(options) ? { message: options } : options;
+    const id = shortHash();
+    const duration = opts.duration ?? DEFAULT_DURATION;
+    return {
+      message: (
+        <>
+          <div>{opts.message}</div>
+          <button data-button data-close-all onClick={c}>
+            Close All
+          </button>
+        </>
+      ),
+      id,
+      position: MESSAGE_POSITIONS[opts.position ?? "top"] as ToastT["position"],
+      icon: opts.icon,
+      toasterId: "toasting",
+      closeButton: true,
+      action: opts.link && (
+        <div data-actionbar>
+          {opts.link && (
+            <button key={opts.link.label} data-link data-action onClick={() => (opts.link?.onClick(), toast.dismiss(id))}>
+              {opts.link.label}
+            </button>
+          )}
+        </div>
+      ),
+      className: duration > 0 ? "progress" : undefined,
+      style: {
+        "--sonner-duration": duration,
+      } as React.CSSProperties,
+      duration: duration === 0 ? Infinity : duration,
+    };
+  };
+
+  useEffect(() => {
+    toastRef.current = toasts;
+  }, [toasts]);
+
+  const c = () => {
+    showAlert();
+    toastRef.current.forEach((t) => {
+      if (t.toasterId === "toasting" && !t.promise) toast.dismiss(t.id);
+    });
+  };
+
+  const t = (props: string | ToastProps) => {
+    const opts = makeToastOptions(props);
+    const tt = !isString(props) && props.type ? toast[props.type] : toast;
+    tt(opts.message, opts);
+  };
+
+  const m = (props: string | MessageProps) => {
+    const opts = makeMessageOptions(props);
+    const tt = !isString(props) && props.type ? toast[props.type] : toast;
+    tt(opts.message, opts);
+  };
+
+  const p = (
+    promise: Promise<string | ToastProps>,
+    props?: {
+      loading?: string;
+      position?: "top" | "bottom";
+      onCancel?: () => void;
+    },
+  ) => {
+    const id = shortHash();
+    toast.loading(
+      <div className="flex items-center">
+        <div className="flex-1">{props?.loading ?? "Loading"}</div>
+        {props?.onCancel && (
+          <button
+            data-button
+            data-cancel
+            onClick={() => {
+              void Promise.resolve(props.onCancel?.()).finally(() => {
+                toast.dismiss(id);
+              });
+            }}
+          >
+            Cancel
+          </button>
+        )}
+      </div>,
+      {
+        id,
+        toasterId: "toasting",
+        position: (isRtl ? TOAST_POSITIONS_RTL : TOAST_POSITIONS_LTR)[props?.position ?? "bottom"] as ToastT["position"],
+      },
+    );
+    void promise
+      .then((props) => {
+        const opts = makeToastOptions(props, id);
+        toast.success(opts.message, opts);
+      })
+      .catch((props: string | ToastProps) => {
+        if (props) {
+          const opts = makeToastOptions(props, id);
+          toast.error(opts.message, opts);
+        }
+      });
+  };
+
+  const a = (props: AlertProps) => {
+    return new Promise((r) => {
+      showAlert(<Alert {...props} onClose={(ret) => (r(ret), showAlert())} />);
+    });
+  };
+
+  return {
+    alert: a,
+    toast: t,
+    message: m,
+    promise: p,
+    closeAll: c,
+  };
+}

package/src/hooks/useOverlayService.tsx

@@ -21,31 +21,78 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useState, type FC, type ReactNode } from "react";
+import type { JSX } from "react";
+import { useCallback, useRef, useState } from "react";
+import type { ModalProps } from "../types";
 
-type OverlayComponent = FC<{
-  onClose: (args?: AnyObject) => void;
-  [key: string]: AnyObject;
-}>;
+type OverlayProps<P, T> = Partial<ModalProps<P, T>>;
 
-export const useOverlayService = (
-  ModalOrFlyout: OverlayComponent,
+/**
+ * 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 />
+ * ```
+ */
+export function useOverlayService<P extends AnyObject = AnyObject, T extends AnyObject = AnyObject>(
+  OverlayComponent: React.FunctionComponent<ModalProps<P, T>>,
 ): [
-  Overlay: ReactNode | null,
-  openOverlay: (props?: KeyValue) => Promise<AnyObject>,
-] => {
-  const [Overlay, setOverlay] = useState<ReactNode | null>(null);
+  renderOverlay: (props?: OverlayProps<P, T>) => JSX.Element | null,
+  openOverlay: (props?: OverlayProps<P, T>) => Promise<T | null>,
+  closeOverlay: ((args: T | null) => void) | null,
+] {
+  const [isOpen, setIsOpen] = useState(false);
+  const [modalProps, setModalProps] = useState<OverlayProps<P, T>>({} as OverlayProps<P, T>);
+  const existingOpenPromiseRef = useRef<(args: T | null, onClose?: (args: T | null) => void) => void>(null);
 
-  const openOverlay = async ({ onClose, ...props }: KeyValue = {}) => {
-    return await new Promise((resolve) => {
-      const handleClose = (args: AnyObject) => {
-        setOverlay(null);
+  // Open modal and optionally pass dynamic props down to it
+  const openOverlay = useCallback(async (props: OverlayProps<P, T> = {}) => {
+    setModalProps(props);
+    setIsOpen(true);
+    return await new Promise<T | null>((resolve) => {
+      existingOpenPromiseRef.current = (args: T | null) => {
         resolve(args);
-        onClose?.(args);
+        props?.onClose?.(args);
+        setIsOpen(false);
+        setModalProps({});
+        existingOpenPromiseRef.current = null;
       };
-      setOverlay(<ModalOrFlyout {...props} onClose={handleClose} />);
     });
-  };
+  }, []);
+
+  const closeOverlay = useCallback((args: T | null) => {
+    existingOpenPromiseRef.current?.(args);
+  }, []);
+
+  // A wrapper component that handles the Portal attachment safely
+  const renderOverlay = useCallback(
+    (props: OverlayProps<P, T> = {}) => {
+      if (!isOpen) return null;
+      return (
+        // @ts-expect-error ignore
+        <OverlayComponent
+          {...props}
+          {...modalProps}
+          onClose={(args) => existingOpenPromiseRef.current?.(args, props.onClose)}
+        />
+      );
+    },
+    [OverlayComponent, isOpen, modalProps],
+  );
 
-  return [Overlay, openOverlay];
-};
+  return [renderOverlay, openOverlay, closeOverlay];
+}

package/src/hooks/usePropState.ts

@@ -0,0 +1,52 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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.
+ */
+
+import { isEqual } from "@react-fabric/utilities";
+import { useRef, useState } from "react";
+
+export function usePropState<T>(value: T, callback?: (value: T) => void) {
+  const currentRef = useRef(value);
+  const [state, setState] = useState(() => value);
+
+  if (!isEqual(currentRef.current, value)) {
+    currentRef.current = value;
+    setState(value);
+    callback?.(value);
+  }
+
+  return [state, setState] as [T, React.Dispatch<React.SetStateAction<T>>];
+}
+
+export function usePropWatcher<T>(value: T, ...args: unknown[]) {
+  const currentRef = useRef(args);
+  const [state, setState] = useState(() => value);
+
+  if (!isEqual(currentRef.current, args)) {
+    currentRef.current = args;
+    setState(value);
+  }
+
+  return [state, setState] as [T, React.Dispatch<React.SetStateAction<T>>];
+}

package/src/hooks/usePropToggle.ts

@@ -1,61 +1,68 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * 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:
  *
- * 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 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.
+ * 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.
  */
 
-import { useCallback, useRef, useState, type RefObject } from "react";
-import { useLayoutEffectDebugger } from "./useEffectDebugger";
+import { useCallback } from "react";
+import { usePropState } from "./usePropState";
 
 /**
- * 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
+ * ```
  */
-export const usePropToggle = (
+export function usePropToggle(
   isOn = false,
-  onToggle?: (is: boolean, key?: string) => unknown,
-  key?: string,
-): [boolean, () => void, RefObject<boolean>] => {
-  const toggleRef = useRef(isOn);
-  const [toggleOn, setToggleOn] = useState(isOn);
+  onToggle?: (is: boolean, key?: string | number) => unknown,
+  key?: string | number,
+): [boolean, (toggle?: boolean) => void] {
+  const [toggleOn, setToggleOn] = usePropState(isOn);
 
-  /** ***************** update toggle state on change *******************/
-  useLayoutEffectDebugger(
-    () => {
-      toggleRef.current = isOn;
-      setToggleOn(isOn);
+  /** ***************** toggle handler *******************/
+  const doToggle = useCallback(
+    (toggle?: boolean) => {
+      setToggleOn((toggleOn) => {
+        if (onToggle?.(toggle ?? !toggleOn, key) !== false) {
+          return toggle ?? !toggleOn;
+        }
+        return toggleOn;
+      });
     },
-    [isOn],
-    "usePropToggle",
+    [setToggleOn, onToggle, key],
   );
 
-  /** ***************** toggle handler *******************/
-  const doToggle = useCallback(() => {
-    if (onToggle?.(!toggleOn, key) !== false) {
-      toggleRef.current = !toggleOn;
-      setToggleOn(!toggleOn);
-    }
-  }, [toggleOn, onToggle, key]);
-
-  return [toggleOn, doToggle, toggleRef];
-};
+  return [toggleOn, doToggle];
+}

package/src/hooks/useResize.ts

@@ -1,27 +1,29 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * 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.
  */
 
-import { useCallback, useRef, type RefObject } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useIsRtl } from "./useIsRtl";
 
 interface Options {
@@ -43,48 +45,70 @@ interface Options {
   onEnd?: () => void;
 }
 
-export const useResize = <T extends HTMLElement = HTMLDivElement>(
+/**
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * const { ref, onMouseDown } = useResize((diff) => {
+ *   console.log("Resize difference:", diff);
+ * }, { isReverse: true, isVertical: false });
+ * <div ref={ref} onMouseDown={onMouseDown}>Resize Me</div>
+ * ```
+ */
+export function useResize<T extends HTMLElement = HTMLDivElement>(
   onResize: (diff: { x: number; y: number }) => void,
   { isReverse = false, isVertical = false, onStart, onEnd }: Options,
-): { ref: RefObject<T>; onMouseDown: React.MouseEventHandler } => {
-  const refEl = useRef<T>(null);
+): { ref: React.RefObject<T | null>; isResizing: boolean; onMouseDown: React.MouseEventHandler } {
+  const elRef = useRef<T>(null);
   const isRtl = useIsRtl();
+  const [isResizing, setIsResizing] = useState(false);
 
-  const onResizing = useCallback(
-    (evt: MouseEvent) => {
-      if (refEl.current != null) {
-        /** ***************** check if reverse enabled of RTL *******************/
-        const reversed = ((isRtl ? 1 : 0) ^ (isReverse ? 1 : 0)) === 1;
-        const box = refEl.current?.getBoundingClientRect();
-        const x =
-          (evt.clientX - (reversed ? box.left : box.right)) *
-          (reversed ? -1 : 1);
-        const y = evt.clientY - box.bottom;
-        onResize({ x, y });
-      }
-    },
-    [onResize, isRtl, isReverse],
-  );
+  const onResizingRef = useRef((evt: MouseEvent) => {
+    if (elRef.current != null) {
+      /** ***************** check if reverse enabled of RTL *******************/
+      const reversed = ((isRtl ? 1 : 0) ^ (isReverse ? 1 : 0)) === 1;
+      const box = elRef.current?.getBoundingClientRect();
+      const diffX = isReverse ? box.left : box.right;
+      const diffY = isReverse ? box.top : box.bottom;
+      const x = (evt.clientX - diffX) * (reversed ? -1 : 1);
+      const y = (evt.clientY - diffY) * (isReverse ? -1 : 1);
+      onResize({ x, y });
+    }
+  });
 
   /** ***************** dettach handlers on mouseup *******************/
-  const onResizeEnd = useCallback(() => {
+  const onResizeEndRef = useRef(() => {
     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?.();
-  }, [onEnd, onResizing]);
+  });
 
   /** ***************** attach handlers on mousedown *******************/
   const onResizeStart = useCallback(
     (e: React.MouseEvent) => {
+      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?.();
     },
-    [onResizing, onResizeEnd, onStart],
+    [isVertical, onStart],
   );
 
-  return { ref: refEl, onMouseDown: onResizeStart };
-};
+  return { ref: elRef, isResizing, onMouseDown: onResizeStart };
+}