@adaptabletools/adaptable 23.0.9 → 23.0.11

package/src/components/WindowModal/WindowModal.js

@@ -5,6 +5,7 @@ import useDraggable from '../utils/useDraggable';
 import { isBrowserDocumentAvailable } from '../../View/UIHelper';
 import { createPortal } from 'react-dom';
 import { useStacking } from './useStacking';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
 let portalElement;
 const ensurePortalElement = () => {
     if (!isBrowserDocumentAvailable()) {
@@ -17,7 +18,55 @@ const ensurePortalElement = () => {
     portalElement.classList.add('ab-cmp-modal-window');
     document.body.appendChild(portalElement);
 };
-const normalizeTopLeft = (position) => (position < 0 ? 0 : position);
+const normalizeTopLeft = (position, edgeOffset) => position < edgeOffset ? edgeOffset : position;
+export const WINDOW_MODAL_VIEWPORT_EDGE_OFFSET = 10;
+const getViewportSize = () => {
+    if (!isBrowserDocumentAvailable()) {
+        return { width: Infinity, height: Infinity };
+    }
+    return { width: window.innerWidth, height: window.innerHeight };
+};
+const parsePxConstraint = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    const match = /^(-?\d+(?:\.\d+)?)px$/.exec(value.trim());
+    if (!match) {
+        return undefined;
+    }
+    const parsed = Number(match[1]);
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined;
+};
+const readDomSizeConstraints = (element) => {
+    if (!element || !isBrowserDocumentAvailable()) {
+        return {};
+    }
+    const computed = window.getComputedStyle(element);
+    return {
+        minWidth: parsePxConstraint(computed.minWidth),
+        minHeight: parsePxConstraint(computed.minHeight),
+        maxWidth: parsePxConstraint(computed.maxWidth),
+        maxHeight: parsePxConstraint(computed.maxHeight),
+    };
+};
+export const clampWindowModalToViewport = (position, size, minWidth = 0, minHeight = 0, edgeOffset = WINDOW_MODAL_VIEWPORT_EDGE_OFFSET) => {
+    const { width: viewportWidth, height: viewportHeight } = getViewportSize();
+    const width = clamp(size.width, minWidth, Math.max(minWidth, viewportWidth - 2 * edgeOffset));
+    const height = clamp(size.height, minHeight, Math.max(minHeight, viewportHeight - 2 * edgeOffset));
+    const x = clamp(position.x, edgeOffset, Math.max(edgeOffset, viewportWidth - edgeOffset - width));
+    const y = clamp(position.y, edgeOffset, Math.max(edgeOffset, viewportHeight - edgeOffset - height));
+    return {
+        position: { x, y },
+        size: { width, height },
+    };
+};
+export const clampWindowModalPositionToViewport = (position, size, edgeOffset = WINDOW_MODAL_VIEWPORT_EDGE_OFFSET) => {
+    const { width: viewportWidth, height: viewportHeight } = getViewportSize();
+    return {
+        x: clamp(position.x, edgeOffset, Math.max(edgeOffset, viewportWidth - edgeOffset - size.width)),
+        y: clamp(position.y, edgeOffset, Math.max(edgeOffset, viewportHeight - edgeOffset - size.height)),
+    };
+};
 const getResizePositionDelta = (direction, delta) => {
     const positionDelta = { x: 0, y: 0 };
     const left = -delta.width;
@@ -38,16 +87,126 @@ const getResizePositionDelta = (direction, delta) => {
     }
     return null;
 };
+const resizeDirectionAffects = (direction) => ({
+    left: ['left', 'topLeft', 'bottomLeft'].includes(direction),
+    top: ['top', 'topLeft', 'topRight'].includes(direction),
+    right: ['right', 'topRight', 'bottomRight'].includes(direction),
+    bottom: ['bottom', 'bottomLeft', 'bottomRight'].includes(direction),
+});
+const getClampedResizeState = (direction, delta, basePosition, baseSize, minWidth, minHeight, maxWidth, maxHeight, edgeOffset = WINDOW_MODAL_VIEWPORT_EDGE_OFFSET) => {
+    const { width: viewportWidth, height: viewportHeight } = getViewportSize();
+    const affects = resizeDirectionAffects(direction);
+    let deltaWidth = delta.width;
+    let deltaHeight = delta.height;
+    if (affects.left) {
+        deltaWidth = Math.min(deltaWidth, Math.max(0, basePosition.x - edgeOffset));
+    }
+    if (affects.top) {
+        deltaHeight = Math.min(deltaHeight, Math.max(0, basePosition.y - edgeOffset));
+    }
+    if (affects.right) {
+        deltaWidth = Math.min(deltaWidth, viewportWidth - edgeOffset - basePosition.x - baseSize.width);
+    }
+    if (affects.bottom) {
+        deltaHeight = Math.min(deltaHeight, viewportHeight - edgeOffset - basePosition.y - baseSize.height);
+    }
+    if (affects.left || affects.right) {
+        const maxDeltaWidth = maxWidth != null ? maxWidth - baseSize.width : Infinity;
+        const minDeltaWidth = minWidth - baseSize.width;
+        if (minDeltaWidth <= maxDeltaWidth) {
+            deltaWidth = clamp(deltaWidth, minDeltaWidth, maxDeltaWidth);
+        }
+    }
+    if (affects.top || affects.bottom) {
+        const maxDeltaHeight = maxHeight != null ? maxHeight - baseSize.height : Infinity;
+        const minDeltaHeight = minHeight - baseSize.height;
+        if (minDeltaHeight <= maxDeltaHeight) {
+            deltaHeight = clamp(deltaHeight, minDeltaHeight, maxDeltaHeight);
+        }
+    }
+    const adjustedDelta = { width: deltaWidth, height: deltaHeight };
+    const positionDelta = getResizePositionDelta(direction, adjustedDelta);
+    const newPosition = {
+        x: basePosition.x + (positionDelta?.x ?? 0),
+        y: basePosition.y + (positionDelta?.y ?? 0),
+    };
+    const newSize = {
+        width: baseSize.width + deltaWidth,
+        height: baseSize.height + deltaHeight,
+    };
+    const clamped = clampWindowModalToViewport(newPosition, newSize, minWidth, minHeight, edgeOffset);
+    return {
+        ...clamped,
+        positionDelta: positionDelta
+            ? {
+                x: clamped.position.x - basePosition.x,
+                y: clamped.position.y - basePosition.y,
+            }
+            : null,
+    };
+};
+const RESIZE_HANDLE_CLASS_PREFIX = 'ab-WindowModal__resize-handle';
+const RESIZE_EDGE_HANDLES = ['left', 'right', 'top', 'bottom'];
+const RESIZE_HANDLE_CLASSES = {
+    left: `${RESIZE_HANDLE_CLASS_PREFIX}--left`,
+    right: `${RESIZE_HANDLE_CLASS_PREFIX}--right`,
+    top: `${RESIZE_HANDLE_CLASS_PREFIX}--top`,
+    bottom: `${RESIZE_HANDLE_CLASS_PREFIX}--bottom`,
+};
+const AT_CONSTRAINT_EPSILON = 0.5;
+const GROW_CURSOR = {
+    left: 'w-resize',
+    right: 'e-resize',
+    top: 'n-resize',
+    bottom: 's-resize',
+};
+const SHRINK_CURSOR = {
+    left: 'e-resize',
+    right: 'w-resize',
+    top: 's-resize',
+    bottom: 'n-resize',
+};
+const getEdgeResizeCursor = (edge, size, constraints) => {
+    const isHorizontal = edge === 'left' || edge === 'right';
+    const value = isHorizontal ? size.width : size.height;
+    const min = isHorizontal ? constraints.minWidth : constraints.minHeight;
+    const max = isHorizontal ? constraints.maxWidth : constraints.maxHeight;
+    const atMax = max != null && value >= max - AT_CONSTRAINT_EPSILON;
+    const atMin = value <= min + AT_CONSTRAINT_EPSILON;
+    if (atMax && !atMin) {
+        return SHRINK_CURSOR[edge];
+    }
+    if (atMin && !atMax) {
+        return GROW_CURSOR[edge];
+    }
+    return isHorizontal ? 'ew-resize' : 'ns-resize';
+};
+const updateResizeHandleCursors = (container, size, constraints) => {
+    if (!container) {
+        return;
+    }
+    RESIZE_EDGE_HANDLES.forEach((edge) => {
+        const handle = container.querySelector(`.${RESIZE_HANDLE_CLASSES[edge]}`);
+        if (handle) {
+            handle.style.cursor = getEdgeResizeCursor(edge, size, constraints);
+        }
+    });
+};
 export const WindowModal = (props) => {
     ensurePortalElement();
     const positionDeltaRef = React.useRef(null);
+    const lastClampedRef = React.useRef(null);
     const normalizedPosition = {
-        x: normalizeTopLeft(props.position?.x),
-        y: normalizeTopLeft(props.position?.y),
+        x: normalizeTopLeft(props.position?.x ?? 0, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET),
+        y: normalizeTopLeft(props.position?.y ?? 0, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET),
     };
     const positionRef = React.useRef(normalizedPosition);
+    const sizeRef = React.useRef(props.size);
     const stacking = useStacking();
     positionRef.current = normalizedPosition;
+    sizeRef.current = props.size;
+    const minWidth = props.minWidth ?? 0;
+    const minHeight = props.minHeight ?? 0;
     const style = {
         zIndex: stacking.zIndex,
         position: 'absolute',
@@ -59,41 +218,83 @@ export const WindowModal = (props) => {
             x: positionRef.current.x + dx,
             y: positionRef.current.y + dy,
         };
-        props.onChange({
-            position: newPosition,
-            size: props.size,
-        });
+        const size = sizeRef.current;
+        const position = clampWindowModalPositionToViewport(newPosition, size, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET);
+        props.onChange({ position, size });
     };
     const { targetRef, applyTransform } = useDraggable({
         handleSelector: props.handleSelector,
         onDrop: handleDrop,
+        edgeOffset: WINDOW_MODAL_VIEWPORT_EDGE_OFFSET,
     });
-    const handleResizeStop = (event, direction, elementRef, delta) => {
-        let newPosition = normalizedPosition;
-        if (positionDeltaRef.current) {
-            newPosition = {
-                x: normalizedPosition.x + positionDeltaRef.current.x,
-                y: normalizedPosition.y + positionDeltaRef.current.y,
-            };
-            positionDeltaRef.current = null;
-            applyTransform(0, 0);
-        }
-        const newSize = {
-            width: props.size.width + delta.width,
-            height: props.size.height + delta.height,
+    const constraintsRef = React.useRef({ minWidth, minHeight });
+    const getContentElement = () => {
+        const resizableEl = targetRef.current?.firstElementChild;
+        return resizableEl?.firstElementChild ?? null;
+    };
+    const computeEffectiveConstraints = () => {
+        const dom = readDomSizeConstraints(getContentElement());
+        return {
+            minWidth: Math.max(minWidth, dom.minWidth ?? 0),
+            minHeight: Math.max(minHeight, dom.minHeight ?? 0),
+            maxWidth: dom.maxWidth,
+            maxHeight: dom.maxHeight,
         };
-        props.onChange({
-            position: newPosition,
-            size: newSize,
-        });
     };
-    const handleResize = React.useCallback((event, direction, elementRef, delta) => {
-        const positionDelta = getResizePositionDelta(direction, delta);
-        if (positionDelta) {
-            positionDeltaRef.current = positionDelta;
-            applyTransform(positionDelta.x, positionDelta.y);
+    const handleResizeStart = () => {
+        constraintsRef.current = computeEffectiveConstraints();
+        updateResizeHandleCursors(targetRef.current, sizeRef.current, constraintsRef.current);
+    };
+    const handleResize = (_event, direction, elementRef, delta) => {
+        const constraints = constraintsRef.current;
+        const clamped = getClampedResizeState(direction, delta, positionRef.current, sizeRef.current, constraints.minWidth, constraints.minHeight, constraints.maxWidth, constraints.maxHeight);
+        lastClampedRef.current = clamped;
+        if (clamped.positionDelta) {
+            positionDeltaRef.current = clamped.positionDelta;
+            applyTransform(clamped.positionDelta.x, clamped.positionDelta.y);
+        }
+        elementRef.style.width = `${clamped.size.width}px`;
+        elementRef.style.height = `${clamped.size.height}px`;
+        updateResizeHandleCursors(targetRef.current, clamped.size, constraints);
+        if (isBrowserDocumentAvailable() &&
+            RESIZE_EDGE_HANDLES.includes(direction)) {
+            document.body.style.cursor = getEdgeResizeCursor(direction, clamped.size, constraints);
         }
-    }, []);
+    };
+    React.useEffect(() => {
+        updateResizeHandleCursors(targetRef.current, sizeRef.current, computeEffectiveConstraints());
+    }, [props.size.width, props.size.height, minWidth, minHeight]);
+    const handleResizeStop = () => {
+        applyTransform(0, 0);
+        positionDeltaRef.current = null;
+        if (isBrowserDocumentAvailable()) {
+            document.body.style.cursor = '';
+        }
+        const clamped = lastClampedRef.current ??
+            clampWindowModalToViewport(positionRef.current, sizeRef.current, minWidth, minHeight, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET);
+        lastClampedRef.current = null;
+        props.onChange(clamped);
+    };
+    const onChangeRef = React.useRef(props.onChange);
+    onChangeRef.current = props.onChange;
+    React.useEffect(() => {
+        if (!isBrowserDocumentAvailable()) {
+            return;
+        }
+        const handleViewportResize = () => {
+            const current = positionRef.current;
+            const currentSize = sizeRef.current;
+            const clamped = clampWindowModalToViewport(current, currentSize, minWidth, minHeight, WINDOW_MODAL_VIEWPORT_EDGE_OFFSET);
+            if (clamped.position.x !== current.x ||
+                clamped.position.y !== current.y ||
+                clamped.size.width !== currentSize.width ||
+                clamped.size.height !== currentSize.height) {
+                onChangeRef.current(clamped);
+            }
+        };
+        window.addEventListener('resize', handleViewportResize);
+        return () => window.removeEventListener('resize', handleViewportResize);
+    }, [minWidth, minHeight]);
     const ResizableCmp = Resizable;
     const handleMouseDown = (event) => {
         const node = targetRef.current;
@@ -102,7 +303,7 @@ export const WindowModal = (props) => {
         }
         stacking.bringInFront();
     };
-    return createPortal(_jsx("div", { style: style, ref: targetRef, onMouseDown: handleMouseDown, children: _jsx(ResizableCmp, { minWidth: props.minWidth, minHeight: props.minHeight, onResizeStop: handleResizeStop, onResize: handleResize, bounds: "window", defaultSize: {
+    return createPortal(_jsx("div", { style: style, ref: targetRef, onMouseDown: handleMouseDown, children: _jsx(ResizableCmp, { minWidth: minWidth, minHeight: minHeight, onResizeStart: handleResizeStart, onResizeStop: handleResizeStop, onResize: handleResize, handleClasses: RESIZE_HANDLE_CLASSES, size: {
                 width: props.size.width,
                 height: props.size.height,
             }, children: props.children }) }), portalElement);

package/src/components/ui/combobox.js

@@ -47,7 +47,7 @@ function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = '
     const resizableStyle = resizable
         ? { resize: 'both' }
         : undefined;
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(ComboboxPrimitive.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...style }, className: cn('twa:group/combobox-content twa:relative twa:origin-(--transform-origin) twa:overflow-hidden twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:*:data-[slot=input-group]:m-1 twa:*:data-[slot=input-group]:mb-0 twa:*:data-[slot=input-group]:h-8 twa:*:data-[slot=input-group]:border-input/30 twa:*:data-[slot=input-group]:bg-input/30 twa:*:data-[slot=input-group]:shadow-none twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:max-h-[min(var(--available-height),80vh)]', 'twa:max-w-[min(var(--available-width),80vw)]', 'twa:min-w-[min(calc(var(--anchor-width)+--spacing(7)),var(--available-width),80vw)]', resizable ? 'twa:flex twa:flex-col twa:min-h-24' : 'twa:w-(--anchor-width)', className), ...props }) }) }));
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(ComboboxPrimitive.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...style }, className: cn('twa:group/combobox-content twa:relative twa:origin-(--transform-origin) twa:overflow-hidden twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:*:data-[slot=input-group]:m-1 twa:*:data-[slot=input-group]:mb-0 twa:*:data-[slot=input-group]:h-8 twa:*:data-[slot=input-group]:border-input/30 twa:*:data-[slot=input-group]:bg-input/30 twa:*:data-[slot=input-group]:shadow-none twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:max-h-[min(var(--available-height,80vh),80vh)]', 'twa:max-w-[min(var(--available-width,80vw),80vw)]', 'twa:min-w-[min(calc(var(--anchor-width)+--spacing(7)),var(--available-width),80vw)]', resizable ? 'twa:flex twa:flex-col twa:min-h-24' : 'twa:w-(--anchor-width)', className), ...props }) }) }));
 }
 const ComboboxList = React.forwardRef(function ComboboxList({ className, ...props }, ref) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('twa:no-scrollbar twa:max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] twa:scroll-py-1 twa:overflow-y-auto twa:overscroll-contain twa:p-1 twa:data-empty:p-0', RESIZABLE_LIST_CLASS, className), ref: ref, ...props }));

package/src/components/utils/useDraggable.d.ts

@@ -1,8 +1,10 @@
-export default function useDraggable({ onMove, onDrop, getBoundingRect, handleSelector, }: {
+export default function useDraggable({ onMove, onDrop, getBoundingRect, handleSelector, edgeOffset, }: {
     onMove?: (event: MouseEvent) => void;
     onDrop?: (dx: number, dy: number) => void;
     getBoundingRect?: () => DOMRect;
     handleSelector?: string;
+    /** Minimum distance to keep from the constrain region edges while dragging. */
+    edgeOffset?: number;
 }): {
     handleRef: (newNode: HTMLElement) => void;
     targetRef: import("react").RefObject<HTMLElement>;

package/src/components/utils/useDraggable.js

@@ -2,29 +2,34 @@ import { useRef, useCallback, useEffect } from 'react';
 function clamp(num, min, max) {
     return num <= min ? min : num >= max ? max : num;
 }
-export default function useDraggable({ onMove, onDrop, getBoundingRect = () => document.body.getBoundingClientRect(), handleSelector, }) {
+const getTranslationBounds = (targetRect, boundingRect) => {
+    const left = boundingRect.x - targetRect.x;
+    const right = left + boundingRect.width - targetRect.width;
+    const top = boundingRect.y - targetRect.y;
+    const bottom = top + boundingRect.height - targetRect.height;
+    return { left, right, top, bottom };
+};
+const applyEdgeOffsetToBoundingRect = (boundingRect, edgeOffset) => {
+    if (!edgeOffset) {
+        return boundingRect;
+    }
+    return new DOMRect(boundingRect.x + edgeOffset, boundingRect.y + edgeOffset, boundingRect.width - 2 * edgeOffset, boundingRect.height - 2 * edgeOffset);
+};
+export default function useDraggable({ onMove, onDrop, getBoundingRect = () => document.body.getBoundingClientRect(), handleSelector, edgeOffset = 0, }) {
     const startRef = useRef(null);
     const handleRef = useRef(null);
     const targetRef = useRef(null);
-    const handleRefCallback = useCallback((newNode) => {
-        const oldNode = handleRef.current;
-        if (oldNode) {
-            oldNode.removeEventListener('mousedown', handleMouseDown);
-        }
-        if (newNode) {
-            newNode.addEventListener('mousedown', handleMouseDown);
-            boundInitialPosition();
-        }
-        handleRef.current = newNode;
-    }, []);
-    useEffect(() => {
-        if (handleSelector) {
-            setTimeout(() => {
-                const node = targetRef?.current?.querySelector(handleSelector);
-                node && handleRefCallback(node);
-            }, 16);
-        }
-    }, [handleSelector]);
+    const onMoveRef = useRef(onMove);
+    const onDropRef = useRef(onDrop);
+    const getBoundingRectRef = useRef(getBoundingRect);
+    const edgeOffsetRef = useRef(edgeOffset);
+    onMoveRef.current = onMove;
+    onDropRef.current = onDrop;
+    getBoundingRectRef.current = getBoundingRect;
+    edgeOffsetRef.current = edgeOffset;
+    const getEffectiveBoundingRect = () => {
+        return applyEdgeOffsetToBoundingRect(getBoundingRectRef.current(), edgeOffsetRef.current);
+    };
     const applyTransform = (dx, dy) => {
         if (!targetRef.current)
             return;
@@ -39,12 +44,19 @@ export default function useDraggable({ onMove, onDrop, getBoundingRect = () => d
             dy: clamp(event.pageY - pageY, bounds.top, bounds.bottom),
         };
     };
-    const getTranslationBounds = (targetRect, boundingRect) => {
-        const left = boundingRect.x - targetRect.x;
-        const right = left + boundingRect.width - targetRect.width;
-        const top = boundingRect.y - targetRect.y;
-        const bottom = top + boundingRect.height - targetRect.height;
-        return { left, right, top, bottom };
+    const handleMouseUp = (event) => {
+        event.preventDefault();
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('mousemove', handleMouseMove);
+        const { dx, dy } = getTranslation(event);
+        applyTransform(0, 0);
+        onDropRef.current?.(dx, dy);
+    };
+    const handleMouseMove = (event) => {
+        event.preventDefault();
+        const { dx, dy } = getTranslation(event);
+        applyTransform(dx, dy);
+        onMoveRef.current?.(event);
     };
     const handleMouseDown = (event) => {
         if (!targetRef.current)
@@ -53,37 +65,48 @@ export default function useDraggable({ onMove, onDrop, getBoundingRect = () => d
         document.addEventListener('mouseup', handleMouseUp);
         document.addEventListener('mousemove', handleMouseMove);
         const targetRect = targetRef.current.getBoundingClientRect();
-        const boundingRect = getBoundingRect();
+        const boundingRect = getEffectiveBoundingRect();
         startRef.current = {
             pageX: event.pageX,
             pageY: event.pageY,
             bounds: getTranslationBounds(targetRect, boundingRect),
         };
     };
-    const handleMouseUp = (event) => {
-        event.preventDefault();
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.removeEventListener('mousemove', handleMouseMove);
-        const { dx, dy } = getTranslation(event);
-        applyTransform(0, 0);
-        onDrop && onDrop(dx, dy);
-    };
-    const handleMouseMove = (event) => {
-        event.preventDefault();
-        const { dx, dy } = getTranslation(event);
-        applyTransform(dx, dy);
-        onMove && onMove(event);
-    };
     const boundInitialPosition = () => {
         if (!targetRef.current)
             return;
         const targetRect = targetRef.current.getBoundingClientRect();
-        const boundingRect = getBoundingRect();
+        const boundingRect = getEffectiveBoundingRect();
         const bounds = getTranslationBounds(targetRect, boundingRect);
         const dx = clamp(0, bounds.left, bounds.right);
         const dy = clamp(0, bounds.top, bounds.bottom);
-        if (onDrop && (dx !== 0 || dy !== 0))
-            onDrop(dx, dy);
+        if (onDropRef.current && (dx !== 0 || dy !== 0)) {
+            onDropRef.current(dx, dy);
+        }
     };
+    const handleMouseDownRef = useRef(handleMouseDown);
+    handleMouseDownRef.current = handleMouseDown;
+    const stableHandleMouseDown = useCallback((event) => {
+        handleMouseDownRef.current(event);
+    }, []);
+    const handleRefCallback = useCallback((newNode) => {
+        const oldNode = handleRef.current;
+        if (oldNode) {
+            oldNode.removeEventListener('mousedown', stableHandleMouseDown);
+        }
+        if (newNode) {
+            newNode.addEventListener('mousedown', stableHandleMouseDown);
+            boundInitialPosition();
+        }
+        handleRef.current = newNode;
+    }, [stableHandleMouseDown]);
+    useEffect(() => {
+        if (handleSelector) {
+            setTimeout(() => {
+                const node = targetRef?.current?.querySelector(handleSelector);
+                node && handleRefCallback(node);
+            }, 16);
+        }
+    }, [handleSelector, handleRefCallback]);
     return { handleRef: handleRefCallback, targetRef, applyTransform };
 }

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1783674285163 || Date.now(),
-    VERSION: "23.0.9" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1784037600986 || Date.now(),
+    VERSION: "23.0.11" || '--current-version--',
 };