reshaped 3.0.8-rc.1 → 3.0.10

package/dist/components/_private/Flyout/Flyout.context.js

@@ -2,9 +2,12 @@
 import React from "react";
 const FlyoutContext = React.createContext({});
 const FlyoutTriggerContext = React.createContext({});
+const FlyoutContentContext = React.createContext(false);
 const useFlyoutContext = () => React.useContext(FlyoutContext);
 const useFlyoutTriggerContext = () => React.useContext(FlyoutTriggerContext);
+const useFlyoutContentContext = () => React.useContext(FlyoutContentContext);
 const Provider = FlyoutContext.Provider;
 const TriggerProvider = FlyoutTriggerContext.Provider;
-export { Provider, TriggerProvider, useFlyoutContext, useFlyoutTriggerContext };
+const ContentProvider = FlyoutContentContext.Provider;
+export { Provider, TriggerProvider, ContentProvider, useFlyoutContext, useFlyoutTriggerContext, useFlyoutContentContext, };
 export default FlyoutContext;

package/dist/components/_private/Flyout/Flyout.types.d.ts

@@ -68,6 +68,7 @@ type BaseProps = {
     disabled?: boolean;
     disableHideAnimation?: boolean;
     disableContentHover?: boolean;
+    disableCloseOnOutsideClick?: boolean;
     children?: React.ReactNode;
     onOpen?: () => void;
     onClose?: () => void;

package/dist/components/_private/Flyout/FlyoutContent.js

@@ -6,7 +6,7 @@ import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.
 import Portal from "../Portal/index.js";
 import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
 import cooldown from "./utilities/cooldown.js";
-import { useFlyoutContext } from "./Flyout.context.js";
+import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
@@ -48,12 +48,10 @@ const FlyoutContent = (props) => {
     else if (trapFocusMode === "action-menu") {
         role = "menu";
     }
-    const content = (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsx("div", { className: contentClassNames, style: {
-            ...styles,
-            "--rs-flyout-gap": contentGap,
-        }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, "aria-modal": triggerType === "click", style: contentAttributes?.style, className: innerClassNames, children: children }) }));
+    const content = (_jsx(ContentProvider, { value: true, children: _jsx("div", { className: contentClassNames, style: {
+                ...styles,
+                "--rs-flyout-gap": contentGap,
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, "aria-modal": triggerType === "click", style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));
     const closestScrollable = getClosestFlyoutTarget(triggerElRef.current);
     const scrollableRef = closestScrollable === document.body ? undefined : { current: closestScrollable };
     return _jsx(Portal, { targetRef: containerRef || scrollableRef, children: content });

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -13,12 +13,16 @@ import { checkKeyboardMode } from "../../../utilities/a11y/keyboardMode.js";
 import useFlyout from "./useFlyout.js";
 import * as timeouts from "./Flyout.constants.js";
 import cooldown from "./utilities/cooldown.js";
-import { Provider, useFlyoutTriggerContext, useFlyoutContext } from "./Flyout.context.js";
+import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
+import useHandlerRef from "../../../hooks/useHandlerRef.js";
 const FlyoutRoot = (props) => {
-    const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
+    const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
+    const onOpenRef = useHandlerRef(onOpen);
+    const onCloseRef = useHandlerRef(onClose);
     const resolvedActive = disabled === true ? false : passedActive;
     const parentFlyoutContext = useFlyoutContext();
     const parentFlyoutTriggerContext = useFlyoutTriggerContext();
+    const parentFlyoutContentContext = useFlyoutContentContext();
     const isSubmenu = parentFlyoutContext.trapFocusMode === "action-menu" ||
         parentFlyoutContext.trapFocusMode === "content-menu";
     const [isRTL] = useRTL();
@@ -27,7 +31,8 @@ const FlyoutRoot = (props) => {
      * Reuse the parent trigger ref in case we render nested triggers
      * For example, when we apply tooltip and popover to the same button
      */
-    const triggerElRef = parentFlyoutTriggerContext?.triggerElRef || internalTriggerElRef;
+    const triggerElRef = (!parentFlyoutContentContext && parentFlyoutTriggerContext?.triggerElRef) ||
+        internalTriggerElRef;
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
     const timerRef = React.useRef();
@@ -58,20 +63,17 @@ const FlyoutRoot = (props) => {
         const canOpen = !lockedRef.current && status === "idle";
         if (!canOpen)
             return;
-        onOpen?.();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [status]);
+        onOpenRef.current?.();
+    }, [status, onOpenRef]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !isDismissible();
         const canClose = !isLocked && (status !== "idle" || disabled);
         if (!canClose)
             return;
-        onClose?.();
+        onCloseRef.current?.();
         if (options?.closeParents)
             parentFlyoutContext?.handleClose?.();
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [status, isDismissible, triggerType]);
+    }, [status, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
     /**
      * Trigger event handlers
      */
@@ -91,10 +93,10 @@ const FlyoutRoot = (props) => {
         handleClose();
     }, [handleClose, triggerType, trapFocusMode]);
     const handleFocus = React.useCallback(() => {
-        if (!checkKeyboardMode())
+        if (triggerType === "hover" && !checkKeyboardMode())
             return;
         handleOpen();
-    }, [handleOpen]);
+    }, [handleOpen, triggerType]);
     const handleMouseEnter = React.useCallback(() => {
         clearTimer();
         timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
@@ -174,15 +176,17 @@ const FlyoutRoot = (props) => {
     useIsomorphicLayoutEffect(() => {
         if (status !== "visible" || !flyoutElRef.current)
             return;
+        if (trapFocusRef.current?.trapped)
+            return;
         trapFocusRef.current = new TrapFocus(flyoutElRef.current);
         trapFocusRef.current.trap({
             mode: trapFocusMode,
-            includeTrigger: triggerType === "hover" && trapFocusMode === "content-menu",
+            includeTrigger: triggerType === "hover" && trapFocusMode !== "dialog" && !isSubmenu,
             onNavigateOutside: () => {
                 handleClose();
             },
         });
-    }, [status, triggerType, handleClose, trapFocusMode]);
+    }, [status, triggerType, trapFocusMode]);
     React.useEffect(() => {
         if (!disableHideAnimation && status !== "hidden")
             return;
@@ -229,6 +233,8 @@ const FlyoutRoot = (props) => {
     }), [handleOpen, handleClose, updatePosition]);
     useHotkeys({ Escape: () => handleClose() }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
+        if (disableCloseOnOutsideClick)
+            return;
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
         handleClose();

package/dist/components/_private/Flyout/FlyoutTrigger.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFlyoutContext, TriggerProvider } from "./Flyout.context.js";
 const FlyoutTrigger = (props) => {
     const { children } = props;
-    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, } = useFlyoutContext();
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
     let childrenAttributes = {
         onBlur: handleBlur,
         ref: triggerElRef,
@@ -15,7 +15,8 @@ const FlyoutTrigger = (props) => {
         childrenAttributes.onMouseEnter = handleMouseEnter;
         childrenAttributes.onMouseLeave = handleMouseLeave;
     }
-    if ((triggerType === "hover" && trapFocusMode !== "action-menu") || triggerType === "focus") {
+    // Submenus open on keypress instead of hover
+    if ((triggerType === "hover" && !isSubmenu) || triggerType === "focus") {
         childrenAttributes.onFocus = handleFocus;
         childrenAttributes["aria-describedby"] = id;
     }

package/dist/components/_private/Flyout/tests/Flyout.stories.d.ts

@@ -5,13 +5,8 @@ declare const _default: {
 export default _default;
 export declare const positions: () => React.JSX.Element;
 export declare const dynamicPosition: () => React.JSX.Element;
-export declare const modeDialogClick: () => React.JSX.Element;
-export declare const modeActionMenuClick: () => React.JSX.Element;
-export declare const modeContentMenuClick: () => React.JSX.Element;
-export declare const modeDialogHover: () => React.JSX.Element;
-export declare const modeActionMenuHover: () => React.JSX.Element;
-export declare const modeContentMenuHover: () => React.JSX.Element;
-export declare const disableContentHover: () => React.JSX.Element;
+export declare const modes: () => React.JSX.Element;
+export declare const disableFlags: () => React.JSX.Element;
 export declare const customPortalTarget: () => React.JSX.Element;
 export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
 export declare const testInsideScrollArea: () => React.JSX.Element;

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -1,5 +1,7 @@
 import React from "react";
+import { createRoot } from "react-dom/client";
 import { Example } from "../../../../utilities/storybook/index.js";
+import Reshaped from "../../../Reshaped/index.js";
 import View from "../../../View/index.js";
 import Theme from "../../../Theme/index.js";
 import Button from "../../../Button/index.js";
@@ -48,60 +50,118 @@ export const positions = () => (<div style={{ paddingTop: 200 }}>
 export const dynamicPosition = () => (<div style={{ position: "absolute", top: 0, left: "50%" }}>
 		<Demo position="top"/>
 	</div>);
-export const modeDialogClick = () => (<Demo position="bottom-start" trapFocusMode="dialog">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeActionMenuClick = () => (<Demo position="bottom-start" trapFocusMode="action-menu">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeContentMenuClick = () => (<Demo position="bottom-start" trapFocusMode="content-menu">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeDialogHover = () => (<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeActionMenuHover = () => (<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeContentMenuHover = () => (<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const disableContentHover = () => (<Demo triggerType="hover" disableContentHover>
-		Content
-	</Demo>);
+export const modes = () => (<Example>
+		<Example.Item title="dialog click">
+			<Demo position="bottom-start" trapFocusMode="dialog">
+				<button type="button">Item 1</button>
+				<button type="button">Item 2</button>
+				<button type="button">Close</button>
+			</Demo>
+		</Example.Item>
+
+		<Example.Item title="action-menu click">
+			<Demo position="bottom-start" trapFocusMode="action-menu">
+				<button type="button">Item 1</button>
+				<button type="button">Item 2</button>
+				<button type="button">Close</button>
+			</Demo>
+		</Example.Item>
+
+		<Example.Item title="content-menu click">
+			<Demo position="bottom-start" trapFocusMode="content-menu">
+				<button type="button">Item 1</button>
+				<button type="button">Item 2</button>
+				<button type="button">Close</button>
+			</Demo>
+		</Example.Item>
+
+		<Example.Item title="dialog hover">
+			<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
+				<button type="button">Item 1</button>
+				<button type="button">Item 2</button>
+				<button type="button">Close</button>
+			</Demo>
+		</Example.Item>
+
+		<Example.Item title="action-menu hover">
+			<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
+				<button type="button">Item 1</button>
+				<button type="button">Item 2</button>
+				<button type="button">Close</button>
+			</Demo>
+		</Example.Item>
+
+		<Example.Item title="content-menu hover">
+			<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
+				<button type="button">Item 1</button>
+				<button type="button">Item 2</button>
+				<button type="button">Close</button>
+			</Demo>
+		</Example.Item>
+	</Example>);
+export const disableFlags = () => (<Example>
+		<Example.Item title="disableContentHover">
+			<Demo triggerType="hover" disableContentHover>
+				Content
+			</Demo>
+		</Example.Item>
+
+		<Example.Item title="disableCloseOnOutsideClick">
+			<Demo disableCloseOnOutsideClick>Content</Demo>
+		</Example.Item>
+
+		<Example.Item title="disableHideAnimation">
+			<Demo disableHideAnimation>Content</Demo>
+		</Example.Item>
+	</Example>);
+class CustomElement extends window.HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        if (!this.shadowRoot)
+            return;
+        const node = (<Reshaped>
+				<Flyout active>
+					<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
+					<Flyout.Content>Content</Flyout.Content>
+				</Flyout>
+			</Reshaped>);
+        const root = createRoot(this.shadowRoot);
+        root.render(node);
+    }
+}
+if (!window.customElements.get("custom-element")) {
+    window.customElements.define("custom-element", CustomElement);
+}
 export const customPortalTarget = () => {
     const portalRef = React.useRef(null);
-    return (<div style={{ position: "relative", padding: 16, height: 200, overflow: "auto" }} ref={portalRef}>
-			<Flyout position="bottom-start" containerRef={portalRef} active>
-				<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
-				<Flyout.Content>
-					<div style={{
+    return (<Example>
+			<Example.Item title="Custom containerRef">
+				<View padding={4} paddingInline={40} height={50} overflow="auto" backgroundColor="neutral-faded" borderRadius="small" attributes={{ ref: portalRef }}>
+					<Flyout position="bottom-end" containerRef={portalRef} active>
+						<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
+						<Flyout.Content>
+							<div style={{
             background: "var(--rs-color-background-elevation-overlay)",
             padding: "var(--rs-unit-x4)",
-            height: 100,
+            height: 200,
             width: 160,
             borderRadius: "var(--rs-radius-medium)",
             border: "1px solid var(--rs-color-border-neutral-faded)",
             boxSizing: "border-box",
         }}>
-						{"Content"}
-					</div>
-				</Flyout.Content>
-			</Flyout>
-			<div style={{ height: 1000 }}/>
-		</div>);
+								{"Content"}
+							</div>
+						</Flyout.Content>
+					</Flyout>
+					<div style={{ height: 1000 }}/>
+				</View>
+			</Example.Item>
+			<Example.Item title="Shadow dom">
+				{/* @ts-ignore */}
+				<custom-element />
+			</Example.Item>
+		</Example>);
 };
 export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
 		Should work on mobile
@@ -159,16 +219,32 @@ export const testInsideFixed = () => (<Example>
 export const testDynamicBounds = () => {
     const [left, setLeft] = React.useState("50%");
     const [size, setSize] = React.useState("medium");
+    const flyoutRef = React.useRef();
+    React.useEffect(() => {
+        flyoutRef.current?.updatePosition();
+    }, [left]);
     return (<View gap={4}>
 			<View direction="row" gap={2}>
-				<Button onClick={() => setLeft("0%")}>Left</Button>
-				<Button onClick={() => setLeft("50%")}>Center</Button>
-				<Button onClick={() => setLeft("100%")}>Right</Button>
+				<Button onClick={() => {
+            setLeft("20%");
+        }}>
+					Left
+				</Button>
+				<Button onClick={() => {
+            setLeft("50%");
+        }}>
+					Center
+				</Button>
+				<Button onClick={() => {
+            setLeft("70%");
+        }}>
+					Right
+				</Button>
 				<Button onClick={() => setSize("large")}>Large button</Button>
 				<Button onClick={() => setSize("medium")}>Small button</Button>
 			</View>
 			<View height={100}>
-				<Flyout position="bottom" active>
+				<Flyout position="bottom" active instanceRef={flyoutRef}>
 					<Flyout.Trigger>
 						{(attributes) => (<div style={{ position: "absolute", left, top: "50%" }}>
 								<Button color="primary" attributes={attributes} size={size}>

package/dist/components/_private/Portal/Portal.module.css

@@ -1 +1 @@
-.root{display:contents}
+.root{display:none}

package/dist/hooks/_private/useOnClickOutside.js

@@ -1,7 +1,9 @@
+import useHandlerRef from "../useHandlerRef.js";
 import React from "react";
 const useOnClickOutside = (refs, handler) => {
+    const handlerRef = useHandlerRef(handler);
     React.useEffect(() => {
-        if (!handler)
+        if (!handlerRef.current)
             return;
         const handleClick = (event) => {
             let isInside = false;
@@ -14,7 +16,7 @@ const useOnClickOutside = (refs, handler) => {
             });
             if (isInside)
                 return;
-            handler(event);
+            handlerRef.current?.(event);
         };
         // Using events that happen before click to handle cases when element is hidden on click
         document.addEventListener("mousedown", handleClick);
@@ -24,6 +26,6 @@ const useOnClickOutside = (refs, handler) => {
             document.removeEventListener("touchstart", handleClick);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handler, ...refs]);
+    }, [handlerRef, ...refs]);
 };
 export default useOnClickOutside;

package/dist/hooks/tests/useDrag.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const state: () => React.JSX.Element;

package/dist/hooks/tests/useDrag.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import View from "../../components/View/index.js";
+import useDrag from "../useDrag.js";
+import useToggle from "../useToggle.js";
+import Button from "../../components/Button/index.js";
+export default { title: "Hooks/useDrag" };
+function Example() {
+    const [state, setState] = React.useState({ x: 0, y: 0 });
+    const disabledToggle = useToggle();
+    const { ref, containerRef, active } = useDrag((args) => {
+        setState(args);
+    }, {
+        disabled: disabledToggle.active,
+    });
+    return (<View direction="row" gap={4}>
+			<View backgroundColor="neutral-faded" borderRadius="medium" width="200px" height="200px" attributes={{ ref: containerRef }}>
+				<View height={8} width={8} borderRadius="small" animated backgroundColor={active ? "primary" : "neutral"} attributes={{
+            role: "button",
+            tabIndex: 0,
+            ref,
+            style: { translate: `${state.x}px ${state.y}px`, cursor: active ? "grabbing" : "grab" },
+        }}/>
+			</View>
+			<Button onClick={disabledToggle.toggle}>
+				{disabledToggle.active ? "Enable" : "Disable"}
+			</Button>
+		</View>);
+}
+export const state = () => <Example />;

package/dist/hooks/useDrag.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type UseDragCallbackArgs = {
+    x: number;
+    y: number;
+    triggerX: number;
+    triggerY: number;
+};
+declare const useDrag: <TriggerElement extends HTMLElement = HTMLButtonElement, ContainerElement extends HTMLElement = HTMLDivElement>(cb: (args: UseDragCallbackArgs) => void, options?: {
+    disabled?: boolean;
+    containerRef?: React.RefObject<ContainerElement>;
+    orientation?: "horizontal" | "vertical" | "all";
+}) => {
+    ref: React.MutableRefObject<TriggerElement | null>;
+    containerRef: React.RefObject<ContainerElement>;
+    active: boolean;
+};
+export default useDrag;

package/dist/hooks/useDrag.js

@@ -0,0 +1,116 @@
+"use client";
+import React from "react";
+import { disableUserSelect, enableUserSelect, disableScroll, enableScroll } from "../utilities/dom.js";
+import useToggle from "./useToggle.js";
+import useHotkeys from "./useHotkeys.js";
+import * as keys from "../constants/keys.js";
+import useHandlerRef from "./useHandlerRef.js";
+const useDrag = (cb, options) => {
+    const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
+    const cbRef = useHandlerRef(cb);
+    const toggle = useToggle();
+    const triggerRef = React.useRef(null);
+    const internalContainerRef = React.useRef(null);
+    const containerRef = passedContainerRef || internalContainerRef;
+    const triggerCompensationRef = React.useRef({ x: 0, y: 0 });
+    const isVertical = orientation === "vertical" || orientation === "all";
+    const isHorizontal = orientation === "horizontal" || orientation === "all";
+    const handleKeyboard = (x, y) => {
+        const triggerEl = triggerRef.current;
+        if (!triggerEl)
+            return;
+        const container = containerRef.current ?? document.body;
+        const containerRect = container.getBoundingClientRect();
+        const triggerRect = triggerEl?.getBoundingClientRect();
+        const nextArgs = { x: 0, y: 0, triggerX: 0, triggerY: 0 };
+        if (isVertical) {
+            const relativeY = Math.round(triggerRect.y) - containerRect.y + y;
+            nextArgs.y = Math.max(0, Math.min(relativeY, containerRect.height - triggerRect.height));
+            nextArgs.triggerY = triggerRect.y - containerRect.y;
+        }
+        if (isHorizontal) {
+            const relativeX = Math.round(triggerRect.x) - containerRect.x + x;
+            nextArgs.x = Math.max(0, Math.min(relativeX, containerRect.width - triggerRect.width));
+            nextArgs.triggerX = triggerRect.x - containerRect.x;
+        }
+        cb(nextArgs);
+    };
+    useHotkeys({
+        [keys.LEFT]: () => isHorizontal && handleKeyboard(-20, 0),
+        [keys.RIGHT]: () => isHorizontal && handleKeyboard(20, 0),
+        [keys.UP]: () => isVertical && handleKeyboard(0, -20),
+        [keys.DOWN]: () => isVertical && handleKeyboard(0, 20),
+    }, [], {
+        ref: triggerRef,
+        disabled,
+    });
+    React.useEffect(() => {
+        const triggerEl = triggerRef.current;
+        if (!triggerEl)
+            return;
+        if (!toggle.active)
+            return;
+        const handleDrag = (event) => {
+            const resolvedEvent = event instanceof MouseEvent ? event : event.changedTouches[0];
+            const container = containerRef.current ?? document.body;
+            const containerRect = container.getBoundingClientRect();
+            const triggerRect = triggerEl.getBoundingClientRect();
+            const triggerX = resolvedEvent.clientX - containerRect.x;
+            const triggerY = resolvedEvent.clientY - containerRect.y;
+            // Calculate position relative to the container
+            const relativeX = triggerX - triggerCompensationRef.current.x;
+            const relativeY = triggerY - triggerCompensationRef.current.y;
+            cbRef.current?.({
+                x: isHorizontal
+                    ? Math.max(0, Math.min(relativeX, containerRect.width - triggerRect.width))
+                    : 0,
+                y: isVertical
+                    ? Math.max(0, Math.min(relativeY, containerRect.height - triggerRect.height))
+                    : 0,
+                triggerX: triggerRect.x - containerRect.x,
+                triggerY: triggerRect.y - containerRect.y,
+            });
+        };
+        const handleDragEnd = () => {
+            triggerCompensationRef.current = { x: 0, y: 0 };
+            toggle.deactivate();
+            enableUserSelect();
+            enableScroll();
+        };
+        document.addEventListener("touchmove", handleDrag, { passive: true });
+        document.addEventListener("touchend", handleDragEnd, { passive: true });
+        document.addEventListener("mousemove", handleDrag, { passive: true });
+        document.addEventListener("mouseup", handleDragEnd, { passive: true });
+        return () => {
+            document.removeEventListener("touchmove", handleDrag);
+            document.removeEventListener("touchend", handleDragEnd);
+            document.removeEventListener("mousemove", handleDrag);
+            document.removeEventListener("mouseup", handleDragEnd);
+        };
+    }, [toggle, isHorizontal, isVertical, containerRef, cbRef]);
+    React.useEffect(() => {
+        const triggerEl = triggerRef.current;
+        if (!triggerEl || disabled)
+            return;
+        const handleStart = (event) => {
+            const resolvedEvent = event instanceof MouseEvent ? event : event.changedTouches[0];
+            // Find the coordinate of the event inside the trigger
+            const triggerRect = triggerEl.getBoundingClientRect();
+            triggerCompensationRef.current = {
+                x: resolvedEvent.clientX - triggerRect.x,
+                y: resolvedEvent.clientY - triggerRect.y,
+            };
+            toggle.activate();
+            disableUserSelect();
+            disableScroll();
+        };
+        triggerEl.addEventListener("touchstart", handleStart, { passive: true });
+        triggerEl.addEventListener("mousedown", handleStart, { passive: true });
+        return () => {
+            triggerEl.removeEventListener("touchstart", handleStart);
+            triggerEl.removeEventListener("mousedown", handleStart);
+        };
+    }, [toggle, disabled]);
+    return { ref: triggerRef, containerRef, active: toggle.active };
+};
+export default useDrag;

package/dist/hooks/useHandlerRef.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+/**
+ * Hook for wrapping event handlers passed as props with a ref
+ * This way we can keep the instance of the ref the same and pass this ref to the effects dependency array
+ * While also making sure that function implementation stays up-to-date
+ */
+declare const useHandlerRef: <T>(cb: T) => React.RefObject<T>;
+export default useHandlerRef;

package/dist/hooks/useHandlerRef.js

@@ -0,0 +1,16 @@
+import React from "react";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+/**
+ * Hook for wrapping event handlers passed as props with a ref
+ * This way we can keep the instance of the ref the same and pass this ref to the effects dependency array
+ * While also making sure that function implementation stays up-to-date
+ */
+const useHandlerRef = (cb) => {
+    const ref = React.useRef(cb);
+    // Update the callback on every render, keeping the ref instance the same
+    useIsomorphicLayoutEffect(() => {
+        ref.current = cb;
+    });
+    return ref;
+};
+export default useHandlerRef;